npm - @sunbird-cb/consumption - Versions diffs - 0.0.91 → 0.0.93 - Mend

@sunbird-cb/consumption 0.0.91 → 0.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/sunbird-cb-consumption.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"ConsumptionService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"ConsumptionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-consumption","template":"\n <p>\n consumption works!\n </p>\n ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ConsumptionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ConsumptionComponent"}],"imports":[{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"SlidersLibModule"}],"exports":[{"__symbolic":"reference","name":"ConsumptionComponent"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"CalenderModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"AnnouncementsModule"},{"__symbolic":"reference","name":"TopLearnersModule"},{"__symbolic":"reference","name":"CbpPlanModule"}]}]}],"members":{}},"WIDGET_REGISTERED_LIB_MODULES":[{"__symbolic":"reference","name":"CardsModule"}],"WIDGET_REGISTRATION_LIB_CONFIG":[{"widgetType":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ROOT_WIDGET_CONFIG"},"member":"card"},"member":"_type"},"widgetSubType":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ROOT_WIDGET_CONFIG"},"member":"card"},"member":"cardResource"},"component":{"__symbolic":"reference","name":"ɵba"}}],"ROOT_WIDGET_CONFIG":{"card":{"_type":"cardLib","cardResource":"cardContentLib"}},"WidgetContentLibService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":63,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":68,"character":18},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":69,"character":23},{"__symbolic":"reference","name":"WidgetUserServiceLib"}]}],"changeTelemetryData":[{"__symbolic":"method"}],"isResource":[{"__symbolic":"method"}],"fetchMarkAsCompleteMeta":[{"__symbolic":"method"}],"updateTocConfig":[{"__symbolic":"method"}],"fetchContent":[{"__symbolic":"method"}],"fetchAuthoringContent":[{"__symbolic":"method"}],"fetchMultipleContent":[{"__symbolic":"method"}],"fetchCollectionHierarchy":[{"__symbolic":"method"}],"fetchBlendedCourse":[{"__symbolic":"method"}],"fetchCourseBatches":[{"__symbolic":"method"}],"fetchCourseBatch":[{"__symbolic":"method"}],"autoAssignBatchApi":[{"__symbolic":"method"}],"autoAssignCuratedBatchApi":[{"__symbolic":"method"}],"enrollUserToBatch":[{"__symbolic":"method"}],"enrollAndUnenrollUserToBatchWF":[{"__symbolic":"method"}],"fetchBlendedUserWF":[{"__symbolic":"method"}],"fetchBlendedUserCOUNT":[{"__symbolic":"method"}],"fetchContentLikes":[{"__symbolic":"method"}],"fetchContentRatings":[{"__symbolic":"method"}],"fetchContentHistory":[{"__symbolic":"method"}],"fetchContentHistoryV2":[{"__symbolic":"method"}],"continueLearning":[{"__symbolic":"method"}],"saveContinueLearning":[{"__symbolic":"method"}],"setS3Cookie":[{"__symbolic":"method"}],"setS3ImageCookie":[{"__symbolic":"method"}],"fetchManifest":[{"__symbolic":"method"}],"fetchWebModuleContent":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"searchRegionRecommendation":[{"__symbolic":"method"}],"searchV6":[{"__symbolic":"method"}],"searchRelatedCBPV6":[{"__symbolic":"method"}],"fetchContentRating":[{"__symbolic":"method"}],"deleteContentRating":[{"__symbolic":"method"}],"addContentRating":[{"__symbolic":"method"}],"getFirstChildInHierarchy":[{"__symbolic":"method"}],"getRegistrationStatus":[{"__symbolic":"method"}],"fetchConfig":[{"__symbolic":"method"}],"addCertTemplate":[{"__symbolic":"method"}],"issueCert":[{"__symbolic":"method"}],"downloadCert":[{"__symbolic":"method"}],"trendingContentSearch":[{"__symbolic":"method"}],"getKarmaPoitns":[{"__symbolic":"method"}],"fetchProgramContent":[{"__symbolic":"method"}],"getCourseKarmaPoints":[{"__symbolic":"method"}],"claimKarmapoints":[{"__symbolic":"method"}],"userKarmaPoints":[{"__symbolic":"method"}],"getEnrolledData":[{"__symbolic":"method"}],"getResourseLink":[{"__symbolic":"method"}],"checkForDataToFormUrl":[{"__symbolic":"method"}],"getResourseDataWithData":[{"__symbolic":"method"}],"gotoTocPage":[{"__symbolic":"method"}],"isBatchInProgress":[{"__symbolic":"method"}],"postApiMethod":[{"__symbolic":"method"}],"getApiMethod":[{"__symbolic":"method"}],"getEnrolledDataFromList":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"WidgetUserServiceLib":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":31,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":5},"arguments":["environment"]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":38,"character":18}]}],"handleError":[{"__symbolic":"method"}],"fetchUserGroupDetails":[{"__symbolic":"method"}],"fetchUserBatchList":[{"__symbolic":"method"}],"fetchProfileUserBatchList":[{"__symbolic":"method"}],"checkStorageData":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getSavedData":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}],"resetTime":[{"__symbolic":"method"}],"fetchCbpPlanList":[{"__symbolic":"method"}],"storeUserEnrollmentInfo":[{"__symbolic":"method"}],"fetchEnrollmentDataByContentId":[{"__symbolic":"method"}],"getCbpFormatedData":[{"__symbolic":"method"}],"mapCbpData":[{"__symbolic":"method"}],"mapEnrollmentData":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ContentStripFacetFilterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcd"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":43,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":69,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":70,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":72,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory1"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":74,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵcd"}],"exports":[{"__symbolic":"reference","name":"ɵcd"}]}]}],"members":{}},"HttpLoaderFactory1":{"__symbolic":"function","parameters":["http"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@ngx-translate/http-loader","name":"TranslateHttpLoader","line":37,"character":13},"arguments":[{"__symbolic":"reference","name":"http"}]}},"ContentStripWithTabsPillsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵce"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":45,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":70,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":71,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":73,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory1"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":75,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵce"}],"exports":[{"__symbolic":"reference","name":"ɵce"}]}]}],"members":{}},"HttpLoaderFactory":{"__symbolic":"function","parameters":["http"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@ngx-translate/http-loader","name":"TranslateHttpLoader","line":37,"character":13},"arguments":[{"__symbolic":"reference","name":"http"}]}},"ContentStripWithTabsLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":45,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":70,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":71,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":73,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":75,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"CommonStripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":35,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵq"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":40,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":65,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":66,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":68,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":70,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵq"}]}]}],"members":{}},"MyHammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":10,"character":36},"members":{"buildHammer":[{"__symbolic":"method"}]}},"SlidersLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"}],"exports":[{"__symbolic":"reference","name":"ɵf"}],"entryComponents":[{"__symbolic":"reference","name":"ɵf"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":32,"character":15},"useClass":{"__symbolic":"reference","name":"MyHammerConfig"}}]}]}],"members":{}},"DataPointsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵk"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵk"}],"providers":[{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"CardsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":34,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbj"},{"__symbolic":"reference","name":"ɵbk"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbm"},{"__symbolic":"reference","name":"ɵbo"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":58,"character":4},{"__symbolic":"reference","name":"ɵbp"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵbt"},{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":65,"character":4},{"__symbolic":"reference","name":"ContentProgressModule"},{"__symbolic":"reference","name":"DialogComponentsModule"},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":68,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":70,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":72,"character":15}]}}]},{"__symbolic":"reference","name":"ɵcb"}],"entryComponents":[{"__symbolic":"reference","name":"ɵba"}],"exports":[{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbk"}]}]}],"members":{}},"CompetencyPassbookModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵch"},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵcf"}],"providers":[{"__symbolic":"reference","name":"ɵcg"}]}]}],"members":{}},"CompetencyPassbookMdoModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcj"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵch"},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵcj"}],"providers":[{"__symbolic":"reference","name":"ɵck"}]}]}],"members":{}},"CalenderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":15,"character":4},{"__symbolic":"reference","name":"ɵm"}],"declarations":[{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"}],"exports":[{"__symbolic":"reference","name":"ɵo"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":20,"character":12}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":21,"character":13},{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"UserContentRatingLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcl"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":20,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵv"}],"exports":[{"__symbolic":"reference","name":"ɵcl"}],"providers":[{"__symbolic":"reference","name":"ɵcm"},{"__symbolic":"reference","name":"ɵcn"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":30,"character":11}]}]}],"members":{}},"AnnouncementsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵr"}]}]}],"members":{}},"ContentProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbz"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressBarModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbz"}]}]}],"members":{}},"MDOChannelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":25,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵco"},{"__symbolic":"reference","name":"ɵcp"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":30,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"AnnouncementsModule"},{"__symbolic":"reference","name":"TopLearnersModule"},{"__symbolic":"reference","name":"CbpPlanModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"CompetencyPassbookModule"},{"__symbolic":"reference","name":"CompetencyPassbookMdoModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":42,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":43,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":45,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":47,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵco"},{"__symbolic":"reference","name":"ɵcp"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":54,"character":13}]}]}],"members":{}},"ProvidersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":28,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"CalenderModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"CompetencyPassbookModule"},{"__symbolic":"reference","name":"UserContentRatingLibModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":38,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":39,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":41,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":43,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵcq"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":50,"character":13}]}]}],"members":{}},"NationalLearningModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":27,"character":4},{"__symbolic":"reference","name":"KeyHighlightsModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"EventsModule"},{"__symbolic":"reference","name":"MdoLeaderboardModule"},{"__symbolic":"reference","name":"HighlightsOfWeekModule"},{"__symbolic":"reference","name":"SpeakersModule"},{"__symbolic":"reference","name":"UserProgressModule"},{"__symbolic":"reference","name":"ContentStripFacetFilterModule"}],"exports":[{"__symbolic":"reference","name":"ɵcr"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":44,"character":11}]}]}],"members":{}},"CommonMethodsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"handleCapitalize":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"TopLearnersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵs"}]}]}],"members":{}},"CbpPlanModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵt"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":15,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵt"}]}]}],"members":{}},"MdoLeaderboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcv"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":17,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcv"}],"providers":[{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"HighlightsOfWeekModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵcw"}]}]}],"members":{}},"SpeakersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcx"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcx"}]}]}],"members":{}},"UserProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcy"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵcy"}]}]}],"members":{}},"DialogComponentsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵca"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":20,"character":4},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"PipeSafeSanitizerModule","line":21,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":22,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":24,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":26,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵca"}],"entryComponents":[{"__symbolic":"reference","name":"ɵca"}]}]}],"members":{}},"KeyHighlightsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵv"}],"exports":[{"__symbolic":"reference","name":"ɵcs"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":20,"character":11}]}]}],"members":{}},"EventsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵct"},{"__symbolic":"reference","name":"ɵcu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵct"},{"__symbolic":"reference","name":"ɵcu"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":73,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"sb-uic-content-strip-with-tabs","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])\">\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 min-height-40 \" [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])\"\n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\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\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 \" dynamicHeight\n [ngClass]=\"stripsResultDataMap[key]?.tabsType ? stripsResultDataMap[key]?.tabsType : ''\"\n (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n <ng-template mat-tab-label>\n <span>{{ translateLabels(tab?.label, 'home') }}  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n <div>\n <!-- <ng-container [ngTemplateOutlet]=\"loader\" ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n </ng-container> -->\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n (!tab?.widgets \|\| !tab?.widgets?.length))\">\n <ng-container ngIf=\"tab?.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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n <ng-container ngIf=\"(tab?.fetchTabStatus === 'done' \|\| tab?.widgets?.length)\">\n <ng-container ngIf=\"!tab?.tabLoading\">\n\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of tab?.widgets\| slice:0:(tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container ngIf=\"!stripsResultDataMap[key].tabs \|\| !stripsResultDataMap[key].tabs.length\">\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div class=\"\">\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of stripsResultDataMap[key]?.widgets\| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <!-- <ng-container ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n <!-- <ng-container ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n [sbUiResolverWidget]=\"widget\"></ng-container> -->\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n <!-- </ng-container> -->\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </div>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}::ng-deep .pills-tab .mat-tab-header{border-bottom:unset!important}::ng-deep .pills-tab .mat-tab-label{border:1px solid rgba(0,0,0,.2392156863)!important;padding:2px 8px;margin-right:8px!important;min-width:unset!important;border-radius:12px;height:unset!important}::ng-deep .pills-tab .mat-ink-bar{background-color:transparent!important;visibility:hidden!important}::ng-deep .pills-tab .mat-tab-label-active{color:#fff!important;background-color:#1b4ca1!important}::ng-deep .pills-tab .mat-tab-body{padding:0!important}.min-height-40{min-height:40px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"telemtryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":106,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":108,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":109,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":110,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":111,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":114,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":116,"character":23},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"getFiltersFromArray":[{"__symbolic":"method"}],"transformSearchV6FiltersV2":[{"__symbolic":"method"}],"checkForDateFilters":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"fetchFromEnrollmentList":[{"__symbolic":"method"}],"splitEnrollmentTabsData":[{"__symbolic":"method"}],"getInprogressAndCompleted":[{"__symbolic":"method"}],"fetchFromSearchV6":[{"__symbolic":"method"}],"checkInvitOnlyAssessments":[{"__symbolic":"method"}],"searchV6Request":[{"__symbolic":"method"}],"fetchFromTrendingContent":[{"__symbolic":"method"}],"trendingSearchRequest":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformEventsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"getTabDataByNewReqSearchV6":[{"__symbolic":"method"}],"getTabDataByNewReqTrending":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"fetchAllCbpPlans":[{"__symbolic":"method"}],"splitCbpTabsData":[{"__symbolic":"method"}],"getTabsList":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"fetchAllTopContent":[{"__symbolic":"method"}],"fetchAllFeaturedContent":[{"__symbolic":"method"}],"getTabDataByNewReqTopContent":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"postRequestMethod":[{"__symbolic":"method"}],"getRequestMethod":[{"__symbolic":"method"}],"postMethodFilters":[{"__symbolic":"method"}],"getFullUrl":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"fetchAllBookMarkData":[{"__symbolic":"method"}],"transformAllContentsToWidgets":[{"__symbolic":"method"}],"transformAllTabContentsToWidgets":[{"__symbolic":"method"}],"fetchAllPlaylistSearch":[{"__symbolic":"method"}],"fetchPlaylistReadData":[{"__symbolic":"method"}],"getTabDataByNewReqPlaylistReadContent":[{"__symbolic":"method"}],"fetchCiosContentData":[{"__symbolic":"method"}],"getTabDataByCiosSearch":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":17,"character":35},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":17,"character":67},{"__symbolic":"reference","name":"ɵc"}]}],"getLanguage":[{"__symbolic":"method"}],"translateLabelWithoutspace":[{"__symbolic":"method"}],"translateLabel":[{"__symbolic":"method"}],"translateActualLabel":[{"__symbolic":"method"}],"editProfileDetailsAPI":[{"__symbolic":"method"}],"updatelanguageSelected":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"updateGlobalProfile":[{"__symbolic":"method"}],"updateTourGuideMethod":[{"__symbolic":"method"}],"updatePlatformRatingMethod":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"sb-uic-horizontal-scroller-v2","template":"\n<section class=\"horizontal-scroll-container h-full\" [id]=\"id\"\n[ngClass]=\"{'px-4': sliderConfig.showNavs && sliderConfig.showNavsSpacing, 'mt-5':sliderConfig.cerificateCardMargin}\">\n <div name=\"horizontal-scroll-content-strip\" class=\"horizontal-scroll-content\" #horizontalScrollElem>\n <ng-content></ng-content>\n </div>\n <div class=\"navigation {{isMobile? sliderConfig?.responsive?.arrowsPlacement : sliderConfig?.arrowsPlacement}}\">\n <ng-container ngIf=\"sliderConfig?.showNavs\">\n <button i18n-aria-label aria-label=\"back\" name=\"content-backward-button\" mat-mini-fab color=\"\" \n (click)=\"showPrev()\" class=\"prevBtn mat-elevation-z\" [hidden]=\"!enablePrev\"\n [ngClass]=\"{'prevBtnHover': onHover}\">\n <mat-icon>navigate_before</mat-icon>\n </button>\n </ng-container>\n <ng-container ngIf=\"sliderConfig?.showNavs\">\n <button i18n-aria-label aria-label=\"next\" name=\"content-forward-button\" mat-mini-fab (click)=\"showNext()\"\n color=\"\" class=\"nextBtn mat-elevation-z\" [ngClass]=\"{'nextBtnHover': onHover}\"\n [hidden]=\"!enableNext \|\| loadStatus === 'fetching'\">\n <mat-icon>navigate_next</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <div class=\"nextLoading\" ngIf=\"loadStatus === 'fetching'\">\n <mat-spinner></mat-spinner>\n </div> --> \n</section>\n\n<div class=\"dots-container {{isMobile? sliderConfig?.responsive?.dotsAlign : sliderConfig?.dotsAlign}}\" \nngIf=\"(isMobile && sliderConfig?.responsive?.showDots) \|\| (!isMobile && sliderConfig?.showDots)\">\n <!-- <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" -->\n <span class=\"dot\" [ngClass]=\"{ active: j === activeNav }\" ngFor=\"let slide of bottomDotsArray; let j = index\" (click)=\"slideTo(j)\"></span>\n</div>","styles":[".horizontal-scroll-container{position:relative;width:100%;width:inherit}.nextBtn,.nextLoading,.prevBtn{position:absolute;top:50%;transform:translateY(-50%);z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;justify-content:center}.nextBtn,.prevBtn{border-radius:50%;background-color:#1b2133!important;color:#fff!important}.border-radius-xs{border-radius:8px!important}.prevBtn{left:0}.nextBtn{right:0}.nextLoading{padding:0;right:0}.navigation.bottom-right .prevBtn{left:unset;right:56px;bottom:-44px;top:unset}.navigation.bottom-right .nextBtn{left:unset;right:8px;bottom:-44px;top:unset}.navigation.bottom-center .prevBtn{left:calc(50% - 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-center .nextBtn{left:calc(50% + 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-left .prevBtn{left:8px;right:unset;bottom:-44px;top:unset}.navigation.bottom-left .nextBtn{left:62px;right:unset;bottom:-44px;top:unset}.navigation.middle-inline .prevBtn{left:30px}.navigation.middle-inline .nextBtn{right:30px}.horizontal-scroll-content{overflow-y:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;height:100%;flex-wrap:nowrap;display:flex;align-items:stretch;-ms-overflow-style:none;scrollbar-width:none}.horizontal-scroll-content::-webkit-scrollbar{width:0;height:0}.dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.dots-container.left{align-items:start;justify-content:start}.dots-container.right{align-items:end;justify-content:end}.dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}.dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}"]}]}],"members":{"loadStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"onHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"sliderConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"loadNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"widgetsLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"defaultMaxWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"stripConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"horizontalScrollElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["horizontalScrollElem",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":45,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showPrev":[{"__symbolic":"method"}],"showNext":[{"__symbolic":"method"}],"updateNavigationBtnStatus":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"getBottomDotsArray":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":11,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-sliders","template":"<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}} {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius \|\| '12px'}\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n class=\"banner-overlay {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" \n ngFor=\"let slide of widgetData; let i = index\" \n [hidden]=\"i !== currentIndex\" \n [ngStyle]=\"{\n 'border-width': isMobile? styleData?.responsive?.imageBorderWidth : styleData?.imageBorderWidth,\n 'border-color': isMobile? styleData?.responsive?.imageBorderColor : styleData?.imageBorderColor,\n 'border-style': isMobile? styleData?.responsive?.imageBorderStyle: styleData?.imageBorderStyle}\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"{{type === 'atictitopbanner' ? 'banner-image' : 'bannerimage-mdo'}}\" />\n </div>\n </a>\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n class=\"banner-title text-truncate {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' \|\| !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"banner-container-solo {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\" ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [queryParams]=\"widgetData[currentIndex].queryParams \|\| {}\"\n [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\n <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n <div class=\"banner-meta\">\n <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n <button ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\">❮</a>\n </button>\n <button ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">❯</a>\n </button>\n\n</div> -->\n<ng-container ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container>\n","styles":[".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:768px) and (max-width:1024px){.banner-container{min-height:280px!important}}@media screen and (min-width:768px) and (max-width:1279px){.atictitopbanner{height:280px!important}}@media screen and (min-width:1280px){.atictitopbanner{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:380px;display:block;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner .bannerimage-mdo{width:100%;display:block;height:inherit;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px;background:#f5f6fa;-o-object-fit:cover;object-fit:cover;height:inherit}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}@media screen and (min-width:320px) and (max-width:769px){.navigation.middle-inline .prev{left:6%!important}}@media screen and (min-width:820px) and (max-width:1023px){.navigation.middle-inline .prev{left:6%!important}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"styleData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":26,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":27,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"reInitiateSlideInterval":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"openInNewTab":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵh"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵh"}]}]}],"members":{}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[wsUtilsNavigation]"}]}],"members":{"wsUtilsNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"openInNewTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"routeUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":9,"character":3},"arguments":["attr.routerLink"]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":10,"character":3},"arguments":["mousedown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵj"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵj"}]}]}],"members":{}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":18,"character":1},"arguments":[{"selector":"[wsUtilsImageResponsive]"}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"srcBindUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":24,"character":3},"arguments":["src"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":29,"character":32}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSrc":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-data-points","template":"<div class=\"w-full metrics-web\" ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{obj.value \| number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{obj?.value \| number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" ngFor=\"let chunk of customArray\">\n <div ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" ngIf=\"(item && item.value)\">\n {{item?.value \| number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"nlw-status\" ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"flex space-around pt-5\">\n <div ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" ngIf=\"layoutType === 'nlwCol'\">\n <div ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n","styles":["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:-20px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"pageLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"createCustomArray":[{"__symbolic":"method"}],"getInsiteData":[{"__symbolic":"method"}],"getStats":[{"__symbolic":"method"}],"converToIndianSystem":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":22,"character":18}]}],"fetchSearchData":[{"__symbolic":"method"}],"fetchAnnouncementsData":[{"__symbolic":"method"}],"fetchTrainingDetails":[{"__symbolic":"method"}],"fetchLearner":[{"__symbolic":"method"}],"fetchLeaderboard":[{"__symbolic":"method"}],"fetchMdoUsers":[{"__symbolic":"method"}],"fetchNwlStats":[{"__symbolic":"method"}],"fetchInsightsData":[{"__symbolic":"method"}],"fetchUserProgress":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵn"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵn"}]}]}],"members":{}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-skeleton-loader","template":"<div [ngClass]=\"bindingClass\" class=\"skeleton-box\" [style.height]=\"height\" [style.width]=\"width\"></div>","styles":[".skeleton-box{position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:1s infinite shimmer;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}"]}]}],"members":{"bindingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-calender","template":"<div class=\"calendar-header flex flex-row c-padding center gap-2\" ngIf=\"showHeader\">\n <div class=\"pt-3\">{{ objectData?.title }}:</div>\n <div class=\"choose-month\">\n <mat-form-field class=\"custom-month\">\n <mat-select matNativeControl panelClass=\"custom-select\" [ngModel]=\"selectedMonth\" (ngModelChange)=\"selectMonth($event)\" class=\"month-select\">\n <span ngFor=\"let month of monthsDropdown\">\n <mat-option [value]=\"month\">{{month}}</mat-option>\n </span>\n </mat-select>\n </mat-form-field>\n </div>\n</div>\n<div ngIf=\"layoutType==='grid'\">\n <div ngFor=\"let obj of getKeys(trainings); let i = index\">\n <sb-uic-calender-day [day]=\"trainings[obj]\"\n [layoutType]=\"layoutType\"\n [objectData]=\"objectData\"\n [dataLoading]=\"isDataLoading\"\n [eventDate]=\"obj\"\n [rowId]=\"i\">\n </sb-uic-calender-day>\n </div> \n</div>\n<div ngIf=\"layoutType==='row'\">\n <div ngFor=\"let obj of getKeys(trainings); let j = index\">\n <sb-uic-calender-day [day]=\"trainings[obj]\"\n [layoutType]=\"layoutType\"\n [objectData]=\"objectData\"\n [dataLoading]=\"isDataLoading\"\n [eventDate]=\"obj\"\n [rowId]=\"j\">\n </sb-uic-calender-day>\n </div>\n</div>","styles":[".calendar-header{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.c-padding{padding:0}.center{align-items:center}::ng-deep .custom-month .mat-form-field-wrapper{padding-bottom:0!important;width:145px}::ng-deep .custom-month .mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value{width:89%}::ng-deep .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value-text{font-weight:600}@media screen and (max-width:768px){.c-padding{padding:0 1.25rem 1rem}.calendar-header{font-size:15px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"defaultDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"fullCalendor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":37,"character":32},{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getInsiteData":[{"__symbolic":"method"}],"getKeys":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}],"convertTo12HourFormat":[{"__symbolic":"method"}],"getDays":[{"__symbolic":"method"}],"getDaysInMonth":[{"__symbolic":"method"}],"getMonthsDropdownData":[{"__symbolic":"method"}],"selectMonth":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-calender-day","template":"<div ngIf=\"layoutType==='grid' && !dataLoading\">\n <div class=\"p-3 event-day my-3\"\n [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n \n <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n <div class=\"event-date\">\n <div class=\"currentDay\"\n [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n {{formatDate(eventDate, 'web')}}\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"day.length\">\n <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n ngFor=\"let event of day; let i = index\" >\n <div>\n <div class=\"flex flex-row item-center gap-10 pb-2\">\n <div class=\"flex item-center gap-1 row1 col1 range-width\">\n <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n <div>{{event.startTime}} to {{event.endTime}}</div>\n </div>\n <div class=\"flex item-center col1 \">{{event.title}}</div>\n </div>\n <div class=\"flex flex-row item-center gap-10\">\n <div class=\"flex item-center gap-1 row1 col1\" ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n </div>\n <div class=\"flex item-center col1\">\n <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n <div class=\"flex item-center\">{{event.location}}</div>\n </div>\n </div>\n </div>\n <div class=\"visit-link flex gap-2\"\n ngIf=\"event?.registrationLink\">\n <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n </div>\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"!day.length\">\n No trainings.\n </div>\n </div>\n </div>\n</div>\n\n<div ngIf=\"layoutType==='row' && !dataLoading\">\n <div class=\"pl-5 pr-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n >\n <div class=\"flex item-center gap-4\">\n <div class=\"event-date\">\n <div class=\"flex flex-col\">\n <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n <div class=\"mob-currentDay\"\n [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n {{formatDate(eventDate, 'mob').split(' ')[1]}}\n </div>\n <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"day.length\">\n <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n <div>\n <div class=\"flex pb-2\">{{event.title}}</div>\n <div class=\"flex pb-1\">\n <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n <div>{{event.startTime}} to {{event.endTime}}</div>\n </div>\n <div class=\"flex pb-1\" ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n </div>\n <div class=\"flex\">\n <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n <div class=\"flex item-center\">{{event.location}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"details w-full p-3 flex no-data\" ngIf=\"!day.length\" \n [style.backgroundColor]=\"objectData?.mobileBackground\">\n No trainings.\n </div>\n </div> \n </div> \n</div>\n\n<!-- skeleton loaders -->\n<div ngIf=\"dataLoading\">\n <div ngIf=\"layoutType==='grid'\">\n <div class=\"hidden md:block\">\n <div class=\"p-3 event-day my-3\"\n [style.backgroundColor]=\"'#FFF'\">\n <div class=\"flex item-top gap-8\">\n <div class=\"event-date\">\n <div class=\"currentDay\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n <div class=\"details w-full\">\n <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n <div>\n <div class=\"flex flex-row item-center gap-20 pb-2\">\n <div class=\"flex item-center gap-2 row1 col1\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex item-center col1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n <div class=\"flex flex-row item-center gap-20 pb-2\">\n <div class=\"flex item-center gap-2 row1 col1\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex item-center col1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n </div>\n <div class=\"visit-link flex gap-2\">\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div ngIf=\"layoutType==='row'\">\n <div class=\"block md:hidden\">\n <div class=\"p-5\" \n [style.backgroundColor]=\"'#FFFFFF'\">\n <div class=\"flex item-center gap-4\">\n <div class=\"event-date\">\n <div class=\"flex flex-col\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'90px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n <div class=\"details w-full\">\n <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n <div>\n <div class=\"flex pb-2\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n <div class=\"flex pb-1 gap-2\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex pb-1 gap-2\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex gap-2\">\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex item-center\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>","styles":[".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.range-width{min-width:234px}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center;border-radius:10px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"day":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"rowId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"eventDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":20,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"openLink":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":68,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":63,"character":1},"arguments":[{"selector":"sb-uic-common-strip","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])\">\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 <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])\"\n class=\"ml-4 view-more ws-mat-default-text\">\n <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1\" [routerLink]=\"stripsResultDataMap[key]?.viewMoreUrl?.path\"\n [queryParams]=\"stripsResultDataMap[key]?.viewMoreUrl?.queryParams\">\n <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\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\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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n <ng-template mat-tab-label>\n <span>{{ translateLabels(tab?.label, 'home') }}  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n <div>\n <!-- <ng-container [ngTemplateOutlet]=\"loader\" ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n </ng-container> -->\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n (!tab?.widgets \|\| !tab?.widgets?.length))\">\n <ng-container ngIf=\"tab?.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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n <ng-container ngIf=\"(tab?.fetchTabStatus === 'done' \|\| tab?.widgets?.length)\">\n <ng-container ngIf=\"!tab?.tabLoading\">\n\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of tab?.widgets\| slice:0:(tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container ngIf=\"!stripsResultDataMap[key].tabs \|\| !stripsResultDataMap[key].tabs.length\">\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div class=\"\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of stripsResultDataMap[key]?.widgets\| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <!-- <ng-container ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n <!-- <ng-container ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n [sbUiResolverWidget]=\"widget\"></ng-container> -->\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n <!-- </ng-container> -->\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </div>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":74,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":95,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":97,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":98,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":99,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":100,"character":23},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":104,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"CommonMethodsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-announcements","template":"<div class=\"w-full\" ngIf=\"layoutType === 'web' && !isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : expand && expanded ? 'exp-key-list' : 'key-list'}}\" ngIf=\"objectData?.list?.length\">\n <div ngFor=\"let item of objectData?.list; let i = index\">\n <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n <div class=\"more-or-less\" ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" ngIf=\"!item?.expanded\">View more</div>\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" ngIf=\"item?.expanded\">View less</div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" ngIf=\"!objectData?.list?.length\">\n <div class=\"text-center\">No announcements yet!</div>\n </div>\n </div>\n</div>\n\n<ng-container ngIf=\"!mobileHeight && expand\">\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" ngIf=\"!expanded\">\n <mat-icon>expand_more</mat-icon>\n </div>\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" ngIf=\"expanded\">\n <mat-icon>expand_less</mat-icon>\n </div>\n</ng-container>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'mobile'\">\n <div class=\"flex item-center key-logo \">\n <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n <div class=\"flex key-button gap-3\">\n <div>\n <img [src]=\"objectData?.mobileIcon\">\n </div>\n <div>{{objectData?.title}}</div> \n <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n </div> \n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'web' && isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo pt-1\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" > \n <div class=\"key-list-item mb-4\" \n ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content un-expand\">\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n</div>\n","styles":[".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:380px;overflow:auto}.exp-key-list{height:100%;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}.announcements-expand{width:32px;height:32px;position:relative;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;right:50%;top:-16px;cursor:pointer}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"mobileHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"openDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"fetchData":[{"__symbolic":"method"}],"viewMoreOrLess":[{"__symbolic":"method"}],"openAnnouncements":[{"__symbolic":"method"}],"showMoreOrLess":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-top-learners","template":"<div class=\"flex flex-center\">\n <div>\n <div class=\"title-border\"></div>\n <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n <div class=\"title-border\"></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\">\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)}}\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\" ngIf=\"obj?.fullname?.length >= 24\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.fullname}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.fullname}}\n </div>\n <div class=\"name-sec\" ngIf=\"obj?.fullname?.length < 24\">\n {{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?.org_name?.length >= 32\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.org_name}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.org_name}}\n </div>\n <div class=\"designation-sec\" ngIf=\"obj?.org_name?.length < 32\">{{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\">\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,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.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{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-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(204,204,204,.8);border-radius:10px}@media screen and (max-width:768px){.user-box{width:343px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getRank":[{"__symbolic":"method"}],"getColor":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-cbp-plan","template":"<div class=\"w-full\">\n <div class=\"flex item-center cbp-logo\">\n <div class=\"cbp-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n \n <div class=\"cbp-list-container\" ngIf=\"contentdata.length\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <ng-container ngIf=\"contentdata.length; else msgTemp\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"cbp-list-item\"\n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.color]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"cbp-item-title\">{{item?.title}}</div>\n <div class=\"flex download-sec\">\n <div class=\"flex gap-3 cbp-download\" (click)=\"downloadCBPPlan(item)\">\n <img [src]=\"objectData?.downloadIcon\">Download\n </div>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </ng-container>\n <ng-template #msgTemp>\n <div class=\"padding-bottom-m\">\n {{ translateLabels(objectData?.noData, 'home') }}\n </div>\n </ng-template>\n </div>\n</div>","styles":[".cbp-logo{align-items:center;justify-content:center}.cbp-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px}.cbp-list-container{border:1px solid #ccc;padding:40px 25px 0;border-radius:12px;margin-top:-20px}.cbp-list-item{padding:16px;border:1px solid #ccc;border-radius:12px}.cbp-item-title{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;height:48px;padding-bottom:10px}.cbp-mob-icon{font-size:20px;width:20px;height:20px}.download-sec{align-items:center;justify-content:end}.cbp-download{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 8px;border-radius:20px;cursor:pointer;font-family:Lato;font-size:12px;font-weight:700;line-height:20px;text-align:left}[hidden]{display:none!important}.cbp-list-container ::ng-deep.cbp-card{min-height:115px!important;padding-bottom:30px!important}.cbp-list-container ::ng-deep.banner-title{display:none}.cbp-list-container ::ng-deep.prev{font-size:10px;height:20px!important;width:20px!important;margin-left:-11px}.cbp-list-container ::ng-deep.next{font-size:10px;height:20px!important;width:20px!important;margin-right:-11px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"mobileHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"openDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":24,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":25,"character":33},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"getFileName":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"downloadCBPPlan":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sbUicScrollableItem]"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3},"arguments":["sbUicScrollableItem"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":8,"character":37,"context":{"typeName":"HTMLElement"},"module":"./lib/_directives/scrollable-item/scrollable-item.directive"}]}]}],"scrollIntoView":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵu"}]}]}],"members":{}},"ɵw":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":10,"character":36},"members":{"buildHammer":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵy"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"}],"exports":[{"__symbolic":"reference","name":"ɵy"}],"entryComponents":[{"__symbolic":"reference","name":"ɵy"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":32,"character":15},"useClass":{"__symbolic":"reference","name":"ɵw"}}]}]}],"members":{}},"ɵy":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":11,"character":50},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-sliders-ng-content","template":"<div class=\"{{customBanner ? 'keybanner' : 'banner-container'}} {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius \|\| '12px'}\">\n <ng-container ngIf=\"!loadNgContentData\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container ngIf=\"loadNgContentData\">\n <!-- <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n <ng-content select=\"[sliderbody]\"></ng-content>\n <!-- </div> -->\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n <ng-content select=\"[sliderMeta]\"></ng-content>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' \|\| !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"{{customBanner ? 'keybanner' : 'banner-container-solo'}} margin-top-s\" ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container> -->\n","styles":[".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.keybanner{position:relative;margin:auto}.keybanner.inline-meta{padding-bottom:0!important}.keybanner.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}.keybanner .prev{background-color:#f3962f!important;color:#fff;top:50%;font-size:12px;height:26px!important;width:26px!important}.keybanner .next{top:50%;background-color:#f3962f!important;color:#fff;font-size:12px;height:26px!important;width:26px!important}@media screen and (max-width:768px){.keybanner .prev{top:50px;left:0;background-color:#f3962f!important;color:#fff}.keybanner .next{right:0;margin-right:-16px;top:50px;background-color:#f3962f!important;color:#fff}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"styleData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"loadNgContentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"autoScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"customBanner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"currentIndexValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":21,"character":3},"arguments":["id"]}]}],"currentIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":30,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":31,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"reInitiateSlideInterval":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"openInNewTab":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":9,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ws-cb-widget-card-resource","template":" <!-- <mat-card class=\"card-resource-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n <div class=\"flex ml-5 flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 description-text font-medium ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2>\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card> -->\n","styles":[".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-resource-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":12,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-cards","template":"<div class=\"widget-card-content-new\">\n <ng-container ngIf=\"widgetData && (((widgetData?.deletedMode \|\| 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n ? false\n : !((widgetData?.intranetMode \|\| 'none') === 'hide' && !!showIntranetContent))\"\n [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) \|\| 'cardPortraitLib')\">\n <ng-container ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n <ng-container ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n <ng-container ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n <ng-container ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n <sb-uic-card-portrait \n [cbPlanMapData]=\"cbPlanMapData\"\n (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n <sb-uic-card-landscape [widgetData]=\"widgetData\" \n [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n <sb-uic-card-landscape\n (contentData)=\"getRedirectUrlData($event)\"\n (triggerTelemetry)=\"raiseCardClick($event)\"\n [widgetData]=\"widgetData\"\n [cbPlanMapData]=\"cbPlanMapData\"\n [isCardLoading]=\"false\">\n </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n <sb-uic-card-wide-v2\n (contentData)=\"getRedirectUrlData($event)\"\n (triggerTelemetry)=\"raiseCardClick($event)\"\n [cbPlanMapData]=\"cbPlanMapData\"\n [isCardLoading]=\"false\"\n [widgetData]=\"widgetData\">\n </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n <sb-uic-card-mdo-channel [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n <sb-uic-card-mdo-channel [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" ></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n <sb-uic-card-progress-portrait-lib \n [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n <sb-uic-card-progress-portrait-lib \n [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n <sb-uic-provider-card [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n <sb-uic-provider-card [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n <sb-uic-card-portrait-ext \n [cbPlanMapData]=\"cbPlanMapData\"\n (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n","styles":[""]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":20,"character":34},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":22,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"getCbPlanData":[{"__symbolic":"method"}],"raiseCardClick":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-card-portrait","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <!-- <ng-container ngIf=\"widgetData?.content?.endDate\">\n <div class=\"cbp-mark\">\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{widgetData?.content?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{widgetData?.content?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n </div>\n </ng-container> -->\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' \| translate }} -->\n </span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' \| translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":31,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":32,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":34,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-user","template":"<mat-card class=\"user-card card-users-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.image\">\n <img mat-card-image [src]=\"widgetData.content.image\"\n loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.image\">\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"user_widget flex margin-remove\">\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.userId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <p class=\"whitespace-normal description-text mat-body-2\">\n {{ widgetData?.content?.description }}\n </p>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>","styles":[".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{width:282px;height:158px;display:block;-o-object-fit:contain;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":22,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":23,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":24,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":26,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-landscape","template":"<ng-container ngIf=\"!isCardLoading\">\n <a class=\"cursor-pointer\" (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [useTranslation]=\"false\" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">By {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' \| translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n </div>\n\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' \| translate }}</span>\n </ng-container> -->\n </div>\n </div>\n </div>\n </mat-card>\n </a>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable{min-height:146px!important}.card-portrait-clickable .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable:hover{transform:scale(1.02)}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}@media only screen and (max-width:768px){.card-portrait{width:calc(100vw - 66px)}.card-wide-v2{min-height:356px}.card-wide-v2 .imageholder img{border-radius:12px 12px 0 0!important}.cbpwidth{width:calc(100vw - 100px)}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":34,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":35,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":36,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":38,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"getCbPlanData":[{"__symbolic":"method"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-wide","template":"<mat-card class=\"card-wide-lib\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <div class=\"flex\">\n <div>\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div>\n <div class=\"pl-4 pr-4 w-full\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"mat-subheading-1 title-text break-words ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n\n <div class=\"flex w-full flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </div>\n </div>\n </a>\n</mat-card>\n","styles":[".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-wide-img{width:147px!important;height:117px!important;border-radius:12px!important}.course_widget{max-width:145px}.org-text{width:56%!important}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":28,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":29,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":30,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":32,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-card-mdo-channel","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"channelData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"emitTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":24,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":25,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":26,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":27,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":29,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"channelClick":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-wide-v2","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n <div class=\"imageholder \">\n <img mat-card-image class=\"margin-remove\"\n [src]=\"widgetData?.content?.posterImage \|\| widgetData?.content?.appIcon \| pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\">\n <div class=\"source-div\" [hidden]=\"true\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}</span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n <mat-card-content class=\"mat-text-box mb-0\">\n <div class=\"course_widget flex flex-between margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <ng-container ngIf=\"widgetData?.content?.contentType === 'Resource' \|\| widgetData?.content?.contentType === 'Course' \|\| widgetData?.content?.contentType === 'Module'\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <span class=\"ws-mat-black60-text font-normal mat-caption \">\n {{widgetData?.content?.primaryCategory \|\| widgetData?.content?.contentType}}\n <!-- {{ translateLabel(widgetData.content.primaryCategory \|\| widgetData.content.contentType, 'searchfilters') }} -->\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"flex main_title_box\">\n <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n {{widgetData?.content?.name}}\n </a>\n </p>\n </div>\n\n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle provider\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"org-text\">By \n <!-- {{'cardcontentv2.by' \| translate}} -->\n {{widgetData?.content?.organisation[0] }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon>star</mat-icon>\n <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' \| translate }}</span> -->\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data?.cbpData?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data?.cbpData?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n</ng-container>\n <ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n </div>\n <mat-card-content class=\"mat-text-box\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end \">\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n \n <div class=\"flex main_title_box\">\n <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <!-- </p> -->\n </div>\n \n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box mr-2\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle mr-2\">\n <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n </ng-container>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-word;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:38px;height:38px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px 12px 11px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}.mb-0{margin-bottom:0!important}@media screen and (min-width:344px) and (max-width:882px){.min-width-763{min-width:300px;overflow:hidden}}@media screen and (min-width:357px) and (max-width:667px){.min-width-763{min-width:340px;overflow:hidden}}@media screen and (min-width:360px) and (max-width:740px){.min-width-763{min-width:325px;overflow:hidden}}@media screen and (min-width:390px) and (max-width:844px){.min-width-763{min-width:358px;overflow:hidden}}@media screen and (min-width:414px) and (max-width:896px){.min-width-763{min-width:380px;overflow:hidden}}@media screen and (min-width:430px) and (max-width:932px){.min-width-763{min-width:395px;overflow:hidden}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":32,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":33,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":34,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":36,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-card-karma-programs","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation();\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" >\n <div class=\"display-contents\">\n <ng-container >\n <a >\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container >\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'120px'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:20px 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":34,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":35,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":36,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":37,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":39,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-card-karma-programs-v2","template":"<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation()\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-row md:flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex items-center\">\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>","styles":[".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:233px;height:233px;max-height:233px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:156px;max-height:156px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}@media screen and (max-width:768px){.card-channels-container{width:100%;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:unset;height:unset;max-height:unset;margin:0;padding:8px!important}.image-container{background-color:#fff;width:155px!important;min-width:155px!important;max-width:155px!important;height:106px!important;max-height:106px!important;border-radius:12px}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"raiseTemeletry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":33,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":34,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":35,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":36,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":37,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-provider-card","template":"<!-- <div class=\"providers-container\">\n <div class=\"provider-card\" ngFor=\"let provider of providers; let i = index\" [ngStyle]=\"{'border-top': '72px solid ' + colors[i % colors.length]}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <img [src]=\"provider.logo\" alt=\"{{ provider.name }}\">\n </div>\n </div>\n </div>\n <div class=\"provider-content\">\n <p>{{ provider.name }}</p>\n <div class=\"view-provider-button\" (click)=\"redirectTo(provider)\">View Provider ></div>\n </div>\n </div>\n </div> -->\n <!-- {{widgetData\|json}} -->\n\n\n<ng-container ngIf=\"!isCardLoading\">\n <ng-container ngIf=\"widgetData && widgetData?.content\">\n <div class=\"providers-container\">\n <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid ' + widgetData?.content?.bgColor \|\| 'transparent'}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <ng-container ngIf=\"widgetData?.content?.logoUrl; else defaultImg\">\n <img [src]=\"widgetData?.content?.logoUrl\" alt=\"{{ widgetData?.content?.name }}\">\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.name\" [photoUrl]=\"widgetData?.content?.logoUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n \n </div>\n </div>\n </div>\n <div class=\"provider-content\">\n <p>{{ widgetData?.content?.name }}</p>\n <div class=\"view-provider-button flex items-center\" (click)=\"redirectTo(widgetData.content)\">View Provider \n <mat-icon class=\"\" color=\"accent\">navigate_next</mat-icon></div>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-container>\n<ng-container ngIf=\"isCardLoading\">\n <div class=\"providers-container\">\n <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid gray'}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded rounded-full'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"w-full p-4 provider-content\">\n <p class=\"w-full pl-4\"> <sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></p>\n <div class=\"w-full pl-4 view-provider-button\" (click)=\"redirectTo(widgetData.content)\"><sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></div>\n </div>\n </div>\n </div>\n</ng-container>","styles":[".providers-container{display:flex;justify-content:center}.provider-card{height:168px;width:245px;margin:20px 8px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#fff;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:1}.circle-wrapper{position:absolute;display:flex;justify-content:center;top:-50px;z-index:1}.circle{width:90px;height:90px;border-radius:50%;background-color:#f0f0f0;box-shadow:0 4px 8px rgba(0,0,0,.1)}.background-circle{position:relative;display:flex;justify-content:center;align-items:center;height:80px;width:80px;background-color:#fff;border-radius:50%;border:5px solid #fff;margin:0 auto}.background-circle img{width:66px;height:50px;background-size:cover;background-position:center;position:relative}.provider-content{padding:16px;text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.provider-content p{font-size:14px;font-weight:700;font-family:Lato,sans-serif;margin-bottom:8px;line-height:16.8px;word-wrap:break-word;white-space:normal;height:51px}.view-provider-button{color:#1b4ca1;font-size:14px;font-family:Lato,sans-serif;cursor:pointer;transition:color .3s}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":19,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-card-portrait-ext","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData?.content?.contentPartner?.link\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.contentId]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <!-- <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type [useTranslation]=\"false\" i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.topic\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"'External Course'\">\n \n </sb-uic-display-content-type>\n </div> -->\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.contentId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\" [matTooltip]=\"widgetData?.content?.name\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.contentPartner?.link \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.contentPartner?.contentPartnerName) ? widgetData?.content?.contentPartner?.contentPartnerName : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' \| translate }} -->\n </span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' \| translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData?.content?.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:300px;height:300px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.tooltiptext{visibility:hidden;width:90px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:4px 0;position:absolute;z-index:1;top:25px;left:-32px;font-size:12px}.title-text:hover .tooltiptext{visibility:visible}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":31,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":32,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":34,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-card-assessment","template":"<ng-container ngIf=\"!isCardLoading\">\n\t<mat-card\n\t\tclass=\"card-assessment card-scheduled-assessment card-users-container padding-remove cursor-pointer mr-4\">\n\t\t<a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container ngIf=\"widgetData\">\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container ngIf=\"widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<img mat-card-image class=\"margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t[src]=\"widgetData?.content?.posterImage \| pipePublicURL\"\n\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\">\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t<ng-container ngIf=\"!widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<ng-template #defaultImg>\n\t\t\t\t\t\t\t\t\t\t\t<img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"card-wide-img ws-mat-primary-lite-background margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\" />\n\t\t\t\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex title-text mat-subheading-1\">\n\t\t\t\t\t\t\t\t\t\t{{ widgetData?.content?.name }}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-s font-normal mat-caption sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"course_logo_box\">\n\t\t\t\t\t\t\t\t\t\t\t<img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<span class=\"sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t{{ (widgetData?.content?.organisation &&\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0]) ?\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer padding-m\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<span>{{ startCountdown(widgetData?.content?.batch) }}</span>\n\t\t\t\t\t\t\t\t\t\t<div class=\"flex flex-row\" ngIf=\"daysPending\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-span\">Assessment starts in</span>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-s\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"big-text\"><b>{{ days }}</b> <span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">days</span> </span>   :   <span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"big-text\"><b>{{ hours }} </b><span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">hours</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>   :   <span class=\"big-text\"> <b>{{ minutes }}</b> <span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">minutes</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.startDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\| date: 'dd MMM yyy HH:mm' }}</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div ngIf=\"!daysPending\" class=\"flex flex-row\"> \n\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-span\">Assessment ends on </span>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-s\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-btn\">Start Assessment</span> \n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.endDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\| date: 'dd MMM yyy HH:mm' }}</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n\t<ng-container [ngTemplateOutlet]=\"skeltonLoader\"></ng-container>\n</ng-container>\n\n<ng-template #skeltonLoader>\n\t<mat-card\n\t\tclass=\"card-assessment card-scheduled-assessment card-users-container padding-remove cursor-pointer mr-4\">\n\t\t<a>\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container>\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container>\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'300px'\"\n\t\t\t\t\t\t\t\t\t\t\t[height]=\"'155px'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-l font-normal\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- <span class=\"text-center\"><sb-uic-skeleton-loader [width]=\"'90px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader> </span> -->\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer col-row padding-l\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-template>","styles":[".card-assessment{width:100%;min-height:190px;box-sizing:border-box;min-width:340px;margin-top:16px;margin-right:12px;border-radius:12px}.image-container{width:145px;height:120px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.image-container img{border-radius:8px;opacity:1;background-size:100%;width:145px!important;height:120px!important;display:flex}.title-container{width:155px;margin-left:12px}.title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:48px;font:600 14px/24px Montserrat}.sub-title-text{width:90%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;margin-right:4px;box-shadow:0 2px 1px -1px rgb(0 0 0 / 20%),0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%)}.course_logo_box img.source-icon{height:28px;width:28px;padding:5px;display:inline-block}.mat-card-footer{margin:0!important}.time-span{padding:2px 8px;color:#fff;border-radius:4px;text-align:center;font-size:12px;background-color:green;width:100px}span.start-span{border-radius:50px;border:2px solid rgba(0,0,0,.08);font-size:12px;text-align:center;position:absolute;bottom:0;width:140px;left:50%;margin-left:-70px;background-color:#fff;margin-bottom:62px;margin-right:8px}.assessment-card-footer{background:rgba(239,149,30,.16)!important;text-align:center;box-sizing:border-box;border-radius:0 0 8px 8px}.start-btn{background:#1b4ca1!important;color:#fff;font-size:14px;font-weight:600;border-radius:25px;text-align:center;padding:4px 12px}.dots-container{display:none}.big-text{font-size:16px}.small-text{font-size:12px!important;vertical-align:top;margin-left:4px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":32,"character":33},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"startCountdown":[{"__symbolic":"method"}],"updateCountdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"sb-uic-card-progress-portrait-lib","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-portrait card-progress-portrait-lib cursor-pointer\" [ngClass]=\"widgetData?.cardCustomeClass ? widgetData?.cardCustomeClass : ''\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" >\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"margin-right-s\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' \| translate}} {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n\n </div>\n </div>\n <ng-container ngIf=\"widgetData?.content?.completionPercentage < 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-between\" >\n <div class=\"progress-block\" >\n <div class=\"completed-time\">\n <mat-icon class=\"mat-icon schedule margin-right-xs\">schedule</mat-icon>\n <span>{{widgetData?.content?.completionPercentage}}%</span>\n </div>\n <div>\n <ng-container ngIf=\"widgetData?.content?.completionStatus < 2\">\n <sb-uic-content-progress class=\"progress-bar-new\" [customClassName]=\"'course-progress-bar'\" ngIf=\"widgetData?.content?.identifier\"\n [contentId]=\"widgetData?.content?.identifier\" [progress]=\"widgetData?.content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </sb-uic-content-progress>\n </ng-container>\n </div>\n </div>\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between\" [routerLink]=\"['/app/toc/',widgetData?.content?.identifier,'overview']\"\n [queryParams]=\"{primaryCategory: widgetData?.content?.primaryCategory}\" [state]=\"widgetData?.stateData\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}\">\n <span class=\"textwrap margin-right-xs\">\n {{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}</span>\n <img class=\"stats-icon\" height=\"20\" width=\"20\" src=\"/assets/icons/home/play.svg\">\n </button>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.completionPercentage === 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-end mt-1\">\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between view-btn\" [ngClass]=\"{'disable-btn': downloadCertificateLoading \|\| widgetData?.content?.issuedCertificates?.length === 0}\" (click)=\"!downloadCertificateLoading && downloadCertificate(widgetData?.content);$event.stopPropagation()\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(translateLabels('viewCertificate', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{'cardcontentv2.viewCertificate' \| translate }}\">\n <span class=\"margin-right-xs textwrap\">{{'cardcontentv2.viewCertificate' \| translate }}</span>\n <img class=\"stats-icon\" ngIf=\"!downloadCertificateLoading\" height=\"20\" width=\"20\" src=\"/assets/icons/home/eye-white.svg\">\n <div class=\"center flex flex-middle\" ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'red'\" class=\"white-spinner\" [diameter]=\"16\"></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n </mat-card>\n</ng-container>\n\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"margin-bottom-xs\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'26px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'98px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\" margin-right-xs\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"\"><sb-uic-skeleton-loader [width]=\"'133px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-align-end progress-wrapper flex-between\">\n <div class=\"progress-block\">\n <div class=\"completed-time\">\n <sb-uic-skeleton-loader [width]=\"'211px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-xs md:w-211'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"progress-btn\">\n <sb-uic-skeleton-loader [width]=\"'117px'\" [height]=\"'32px'\" [bindingClass]=\"'flex rounded margin-top-xs'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:318px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":36,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":37,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":38,"character":20},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":40,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","module":"@angular/material","name":"MatDialog","line":43,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"downloadCertificate":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":16,"character":28}]}],"downloadCertificate":[{"__symbolic":"method"}],"downloadCertificate_v2":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-mdo-channel-v1","template":"\n<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader class=\"w-full\" [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded mb-2'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"channelData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"emitTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":25,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":26,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":27,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":28,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":30,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"channelClick":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbq"}]}]}],"members":{}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pipePublicURL"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":8,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"transform":[{"__symbolic":"method"}]}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbs"}]}]}],"members":{}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"objectToArray"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":7,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":47}],"exports":[{"__symbolic":"reference","name":"ɵbu"}]}]}],"members":{}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-display-content-type","template":"<ng-container ngIf=\"displayContentType\">\n <span [ngSwitch]=\"displayContentType\" class=\"content-type-class\">\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.ASSESSMENT\" i18n>Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.AUDIO\" i18n>Audio</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CHANNEL\" i18n>Channel</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CERTIFICATION\" i18n\n >Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CLASS_DIAGRAM\" i18n\n >Class Diagram</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.COURSE\" i18n>Course</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DEFAULT\" i18n>Content</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DRAG_DROP\" i18n>Drag & Drop</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_CERTIFICATION\" i18n\n >External Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_COURSE\" i18n\n >External Course</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.HANDS_ON\" i18n>Hands-On</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.IAP\" i18n>Hands-On Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INSTRUCTOR_LED\" i18n\n >Instructor-Led</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INTERACTIVE_VIDEO\" i18n\n >Interactive Video</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_ARTIFACT\" i18n\n >Knowledge Artifact</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_BOARD\" i18n\n >Knowledge Board</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.LEARNING_JOURNEY\" i18n\n >Learning Journey</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.MODULE\" i18n>Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PDF\" i18n>Pdf</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PROGRAM\" i18n>Program</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.QUIZ\" i18n>Quiz</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.RESOURCE\" i18n>Resource</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.VIDEO\" i18n>Video</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_MODULE\" i18n>Web Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_PAGE\" i18n>Web Page</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.YOUTUBE\" i18n>Youtube</ng-container>\n <ng-container ngSwitchDefault i18n>\n <span ngIf=\"useTranslation\">\n {{ translateLabels(displayContentType, 'searchfilters') }}\n </span>\n <span ngIf=\"!useTranslation\">\n {{ displayContentType }}\n </span>\n </ng-container>\n </span>\n </ng-container>\n<!-- <ng-container ngIf=\"displayContentType\">{{displayContentType}}</ng-container> -->\n<!-- <span [ngSwitch]=\"displayContentType\">\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.ASSESSMENT\" i18n>Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.AUDIO\" i18n>Audio</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CHANNEL\" i18n>Channel</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CERTIFICATION\" i18n\n >Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CLASS_DIAGRAM\" i18n\n >Class Diagram</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.COURSE\" i18n>Course</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DEFAULT\" i18n>Content</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DRAG_DROP\" i18n>Drag & Drop</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_CERTIFICATION\" i18n\n >External Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_COURSE\" i18n\n >External Course</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.HANDS_ON\" i18n>Hands-On</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.IAP\" i18n>Hands-On Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INSTRUCTOR_LED\" i18n\n >Instructor-Led</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INTERACTIVE_VIDEO\" i18n\n >Interactive Video</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_ARTIFACT\" i18n\n >Knowledge Artifact</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_BOARD\" i18n\n >Knowledge Board</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.LEARNING_JOURNEY\" i18n\n >Learning Journey</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.MODULE\" i18n>Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PDF\" i18n>Pdf</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PROGRAM\" i18n>Program</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.QUIZ\" i18n>Quiz</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.RESOURCE\" i18n>Resource</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.VIDEO\" i18n>Video</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_MODULE\" i18n>Web Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_PAGE\" i18n>Web Page</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.YOUTUBE\" i18n>Youtube</ng-container>\n <ng-container ngSwitchDefault i18n>Content</ng-container>\n</span> -->\n","styles":[".content-type-class{color:rgba(0,0,0,.87);word-break:break-all;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}"]}]}],"members":{"useTranslation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"displayContentType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}]}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbw"}]}]}],"members":{}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[wsUtilsDefaultThumbnail]"}]}],"members":{"wsUtilsDefaultThumbnail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"srcUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":11,"character":3},"arguments":["src"]}]}],"updateSrc":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":12,"character":3},"arguments":["error"]}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵby"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵby"}]}]}],"members":{}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"pipeDurationTransform"}]}],"members":{"transform":[{"__symbolic":"method"}],"defaultDuration":[{"__symbolic":"method"}],"hmsCalculation":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-content-progress","host":{"role":"progressbar","aria-valuemin":"0","aria-valuemax":"100","title":"progres","[attr.aria-valuenow]":"progress","$quoted$":["aria-valuemin","aria-valuemax","title","[attr.aria-valuenow]"]},"template":"<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n i18n-aria-label> {{ progress }} % </mat-progress-bar>","styles":[".visibility-0{display:none}::ng-deep.mat-progress-bar.thick{height:10px}::ng-deep.theme-igot.day-mode .mat-progress-bar-fill::after{background:no-repeat padding-box #34d6a4}::ng-deep.theme-igot.day-mode .mat-progress-bar-background{fill:rgba(0,0,0,.001)!important}::ng-deep.theme-igot.day-mode .mat-progress-bar-buffer{background-color:rgba(0,0,0,.1)!important}::ng-deep .content-progress .mat-progress-bar-fill::after{background:#f69953!important}::ng-deep.theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:rgba(0,0,0,.1)!important}::ng-deep.theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:rgba(0,0,0,.1)!important}::ng-deep.mat-progress-bar.viewer-progress{height:4px;border-radius:5px}"]}]}],"members":{"contentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"progress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"progressType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"forPreview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"customClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":38,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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}.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:rgba(0,0,0,.6);font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.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{width:100%;height:auto;flex:1}.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 #1b4ca1;color:#1b4ca1}.btn-custom,.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":19,"character":5},"arguments":["environment"]}],null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA","line":24,"character":12}]}]],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":20,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":21,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":22,"character":30},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material","arguments":[{"__symbolic":"reference","name":"ɵca"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"downloadCert":[{"__symbolic":"method"}],"downloadCertPng":[{"__symbolic":"method"}],"downloadCertPdf":[{"__symbolic":"method"}],"shareCert":[{"__symbolic":"method"}],"raiseShareIntreactTelemetry":[{"__symbolic":"method"}],"raiseIntreactTelemetry":[{"__symbolic":"method"}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRippleModule","line":15,"character":4},{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcc"}],"entryComponents":[{"__symbolic":"reference","name":"ɵcc"}]}]}],"members":{}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-avatar-photo","template":"<div id=\"user_icon\" [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-l-xs' : size=== 'l-xs',\n'circle-l-s' : size=== 'l-s',\n'circle-xl-s' : size=== 'xl-s',\n'circle-r-m': size=== 'round-m',\n'circle-r-p-m': size=== 'profile-round-m',\n'circle-m-side': size=== 'm-side',\n'circle-r-m-48': size=== 'm-side-rating',\n'circle-m-recommended': size==='m-recommended',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color': circleColor }\">\n <img ngIf=\"!showInitials\" loading=\"lazy\" src=\"{{photoUrl}}\" [alt]=\"photoUrl? '' :(name \|\| userInitials \|\| size \|\| random)\">\n\n <div ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n <div ngIf=\"showBadge\"><span class=\"profile-badge\"> \n <img src=\"fusion-assets/images/profile-badge.png\">\n </span></div>\n\n <!-- <div ngIf=\"imageType === 'user-photo'\">\n <img ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"user-image\" class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n <div class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n <span class=\"name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background\"\n ngIf=\"!imageUrl\">{{ shortName }}</span>\n </div>\n </div> -->\n</div>","styles":["@charset \"UTF-8\";.success-checkmark::after{content:\"✔\";position:absolute;left:25px;top:20px;width:11px;height:11px;border:1px solid #1d8923;background:#1d8923;border-radius:50%;color:#fff;line-height:11px;text-align:center;font-size:9px}.profile-badge{position:absolute;top:10px;right:0}.profile-badge img{height:15px!important;width:15px!important}.circle-s{border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;letter-spacing:.2625px}.circle-m{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-36px}.circle-m img{border-radius:10%;width:40px;height:40px}.circle-m .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l img{border-radius:10%;width:80px;height:80px}.circle-l .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-xl img{border-radius:10%;width:105px;height:105px}.circle-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xxl{border-radius:50%;width:145px;height:145px;display:flex;justify-content:center;align-items:center}.circle-xxl img{border-radius:10%;width:145px;height:145px}.circle-xxl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-l-xs{border-radius:50%;width:29px;height:29px;display:flex;justify-content:center;align-items:center}.circle-l-xs img{border-radius:50%;width:100%;height:100%}.circle-l-xs .initials{color:#fff;font-size:12px;line-height:12px;letter-spacing:.2625px}.circle-l-s{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l-s img{border-radius:4px;width:80px;height:80px}.circle-l-s .initials{color:#fff;font-size:24px;line-height:24px;letter-spacing:.2625px}.circle-xl-s{border-radius:50%;width:125px;height:125px;display:flex;justify-content:center;align-items:center}.circle-xl-s img{border-radius:4px;width:152px;height:125px}.circle-xl-s .initials{color:#fff;font-size:32px;line-height:32px;letter-spacing:.2625px}.circle-xxl-s{border-radius:50%;width:208px;height:208px;display:flex;justify-content:center;align-items:center}.circle-xxl-s img{border-radius:50%;width:100%;height:100%}.circle-xxl-s .initials{color:#fff;font-size:40px;line-height:40px;letter-spacing:.2625px}.circle-r-m{border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.circle-r-m img{border-radius:50%;width:100%;height:100%}.circle-r-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-m-48{border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.circle-r-m-48 img{border-radius:50%;width:100%;height:100%}.circle-r-m-48 .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-p-m{border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.circle-r-p-m img{border-radius:50%;width:100%;height:100%}.circle-r-p-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-m-side{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center}.circle-m-side img{border-radius:10%;width:40px;height:40px}.circle-m-side .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}@media only screen and (max-width:960px){.circle-xxl-s{width:100px;height:100px}.circle-xxl-s .initials{font-size:24px;line-height:24px}}.circle-m-recommended{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-49px}.circle-m-recommended img{border-radius:10%;width:40px;height:40px}.circle-m-recommended .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l-s::before{content:\"\";border:1px solid red}"]}]}],"members":{"datalen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"photoUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"defaulfColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"randomColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"initials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showBadge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}]}},"ɵcd":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":75,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":70,"character":1},"arguments":[{"selector":"sb-uic-content-strip-facet-filter","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])\">\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 \n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" 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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n <ng-template mat-tab-label>\n <span><span ngIf=\"!tab?.disableTranslate\">{{ translateLabels(tab?.label, 'home') }}</span>\n <span class=\"tab-highlight\" ngIf=\"tab?.disableTranslate\">{{tab?.label}}</span>  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n\n <div class=\"wfull\" ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n <div class=\"flex justify-between item-center flex-wrap gap-4\">\n <div class=\"\">\n <ng-container ngFor=\"let facet of tab?.facets\">\n <form [formGroup]=\"facetForm\">\n <div class=\"facets-select\">\n <select formControlName=\"org\" (change)=\"getorgData($event, stripsResultDataMap[key], tabIndex)\">\n <option value=\"0\" selected disabled>Choose by organisation</option>\n <option value=\"{{d.name}}\" ngFor=\"let d of facet.values\" >{{d.name}}</option>\n </select>\n </div>\n </form>\n </ng-container>\n </div>\n <div>\n <ng-container >\n <mat-chip-list class=\"content-pill-data\" aria-label=\"Fish selection\">\n <ng-container ngFor=\"let pill of tab?.pillsData;let p = index\">\n <mat-chip [selected]=\"pill?.selected\" (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 </ng-container>\n </div>\n <!-- viewAll start-->\n <div ngIf=\"!stripsResultDataMap[key]?.hideViewMoreUrl && checkCondition(widgetData , stripsResultDataMap[key])\" 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\n </div>\n </div>\n \n <!-- viewAll end-->\n </div>\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n <div 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 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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-container 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'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\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":["@charset \"UTF-8\";.facets-select{position:relative;display:inline-block;width:250px}.facets-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.facets-select:after{content:\"▼\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.tab-highlight{color:#1b4ca1!important;font-weight:700}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected .pill-name{color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip{cursor:pointer!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background:#1b4ca1!important;color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip{background:#fff!important;border:1px solid rgba(0,0,0,.0784313725)!important}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"telemtryLearningContentResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":108,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":110,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":111,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":112,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":113,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":114,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":116,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":118,"character":17}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getSelectedPillIndex":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"pillClicked":[{"__symbolic":"method"}],"resetSelectedPill":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"postRequestMethod":[{"__symbolic":"method"}],"fetchFromSearch":[{"__symbolic":"method"}],"mapAllDataWithFacets":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"getorgData":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}},"ɵce":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":73,"character":56},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"sb-uic-content-strip-with-tabs-pills","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])\">\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 \n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" 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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n <ng-template mat-tab-label>\n <span>{{ translateLabels(tab?.label, 'home') }}  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n\n <div class=\"wfull\" ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n <div class=\"flex justify-between item-center\">\n <div>\n <ng-container >\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\" (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 </ng-container>\n </div>\n <!-- viewAll start-->\n <div ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\" 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\n </div>\n </div>\n \n <!-- viewAll end-->\n </div>\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n <div 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 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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-container 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'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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:rgba(0,0,0,.87);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}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"telemtryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":107,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":109,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":110,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":111,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":112,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":115,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":117,"character":23},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"getFiltersFromArray":[{"__symbolic":"method"}],"transformSearchV6FiltersV2":[{"__symbolic":"method"}],"checkForDateFilters":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformEventsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"fetchForYouData":[{"__symbolic":"method"}],"fetchFromSearchV6":[{"__symbolic":"method"}],"getTabDataByNewReqTrending":[{"__symbolic":"method"}],"getTabDataByNewReqSearchV6":[{"__symbolic":"method"}],"trendingSearchRequest":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"pillClicked":[{"__symbolic":"method"}],"searchV6Request":[{"__symbolic":"method"}],"getSelectedPillIndex":[{"__symbolic":"method"}],"fetchAllCbpPlans":[{"__symbolic":"method"}],"splitCbpTabsData":[{"__symbolic":"method"}],"getTabsList":[{"__symbolic":"method"}],"resetSelectedPill":[{"__symbolic":"method"}]}},"ɵcf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-competency-passbook","template":" <div class=\"competency-title\" ngIf=\"objectData?.title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" ngIf=\"!loadCometency\">\n <div class=\"competency-card\" ngFor=\"let obj of competencyTheme\| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <!-- <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\" ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n <div class=\"no-of-contents\" ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n </div> -->\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container ngFor=\"let child of allcompetencyTheme[obj.name]?.children\| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n {{ child?.displayName }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n <div ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>","styles":[".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"cardDisplayCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dynamicAlignPills":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"temeletryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":44,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":40,"character":32},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵcg"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":43,"character":20},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"showMore":[{"__symbolic":"method"}],"getCompetencyArea":[{"__symbolic":"method"}],"callCompetencySearch":[{"__symbolic":"method"}],"competencyChange":[{"__symbolic":"method"}],"getAllCompetencies":[{"__symbolic":"method"}],"getcompetencyTheme":[{"__symbolic":"method"}],"getThemeDataByArea":[{"__symbolic":"method"}],"getcompetencyThemeCount":[{"__symbolic":"method"}],"resetViewMore":[{"__symbolic":"method"}],"viewMoreChildren":[{"__symbolic":"method"}],"displayAllTheme":[{"__symbolic":"method"}],"navigateToCompetency":[{"__symbolic":"method"}],"getcompetencySubTheme":[{"__symbolic":"method"}]}},"ɵcg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":14,"character":30}]}],"getCompetencyList":[{"__symbolic":"method"}],"getCompetencyListv_V2":[{"__symbolic":"method"}],"fetchCertificate":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵch":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵci"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵci"}]}]}],"members":{}},"ɵci":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-pills","template":"<ng-container ngIf=\"!isLoading\">\n <mat-chip-list >\n <ng-container ngFor=\"let pill of pillsData\">\n <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" [style.color]=\"dynamicColor\" [style.borderColor]=\"'#999999'\"\n [ngClass]=\"{'active': selectedValue === pill?.name}\">\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" ngIf=\"requiredTitlecase\">{{pill?.name \| titlecase}} <span ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" ngIf=\"!requiredTitlecase\">{{pill?.name }} <span ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n </mat-chip>\n </ng-container>\n </mat-chip-list>\n</ng-container>\n<ng-container ngIf=\"isLoading\">\n <div class=\"flex gap-4\">\n <ng-container ngFor=\"let pill of [0,1,2]\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n</ng-container>\n","styles":[".competency-chip{z-index:999;padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent!important;cursor:pointer}.competency-chip .pill-name{color:#fff}.active{background-color:#1b4ca1!important}.active .pill-name{color:#fff!important}"]}]}],"members":{"pillsData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"selectedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"pillClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"requiredTitlecase":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectedPill":[{"__symbolic":"method"}]}},"ɵcj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-competency-passbook-mdo","template":"<div class=\"competency-title\" ngIf=\"objectData?.title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" ngIf=\"!loadCometency\">\n <div class=\"competency-card\" ngFor=\"let obj of competencyTheme\| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container ngFor=\"let child of allcompetencyTheme[obj.name]?.children\| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n {{ child?.displayName }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n <div ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>","styles":[".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"cardDisplayCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dynamicAlignPills":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"temeletryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":45,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":41,"character":32},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵck"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":44,"character":20},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"getAllCompetencies":[{"__symbolic":"method"}],"getMdoCompetencies":[{"__symbolic":"method"}],"getCompetencyTheme":[{"__symbolic":"method"}],"getMdoCompetency":[{"__symbolic":"method"}],"competencyChange":[{"__symbolic":"method"}],"resetViewMore":[{"__symbolic":"method"}],"viewMoreChildren":[{"__symbolic":"method"}],"displayAllTheme":[{"__symbolic":"method"}],"navigateToCompetency":[{"__symbolic":"method"}],"showMore":[{"__symbolic":"method"}]}},"ɵck":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":14,"character":30}]}],"getCompetencyList":[{"__symbolic":"method"}],"getCompetencyListv_V2":[{"__symbolic":"method"}],"mdoCompetency":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵcl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-user-content-rating","template":"<ng-container ngIf=\"contentdata.length\">\n <div class=\"user-rating-section\">\n <sb-uic-sliders-ng-content [title]=\"'providerName'\" [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"flex users-block\">\n <ng-container ngFor=\"let userData of contentdata; let j = index\">\n <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </div>\n </ng-container>\n </div>\n <div ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n </div>\n <div class=\"title-border-v2\"></div>\n <p class=\"userName w-full mb-4 pt-2\">{{ratingData?.userDetails?.firstName}}</p>\n <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingData?.rating) }}\n </mat-icon>\n </div>\n <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n","styles":[".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:1px solid #f3962f;border-radius:15px;padding:15px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (min-width:1024px){.user-rating-section .users-block{justify-content:center}}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]}]}],"members":{"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵcm"},{"__symbolic":"reference","name":"ɵcn"}]}],"ngOnInit":[{"__symbolic":"method"}],"getTopReviews":[{"__symbolic":"method"}],"getRatingIcon":[{"__symbolic":"method"}],"getRatingIconClass":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"handleScrollClick":[{"__symbolic":"method"}]}},"ɵcm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":18,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":24,"character":27}]}],"getRating":[{"__symbolic":"method"}],"addOrUpdateRating":[{"__symbolic":"method"}],"getRatingSummary":[{"__symbolic":"method"}],"getRatingLookup":[{"__symbolic":"method"}],"getRatingReply":[{"__symbolic":"method"}],"getRatingIcon":[{"__symbolic":"method"}],"getRatingIconClass":[{"__symbolic":"method"}],"getAuthorReply":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵcn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":11,"character":28}]}],"fetchTopReviews":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵco":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-mdo-channel-v1","template":"<p>mdo-channel-v1 works!</p>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵcp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"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\">\n <ng-container ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [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=\"'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>\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\"\n [style.color]=\"data.titleColor\">{{data.title \|\| channnelName}}</h1>\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\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n </div>\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\" [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\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title \|\| channnelName}}</h1>\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\"\n [ngStyle]=\"{'background': data?.metrics?.background}\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleFlexeRow'\"\n [pageLayout]=\"'mdo'\">\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\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n \n </div>\n </div>\n </div>\n</ng-template>\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 <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 <div class=\"block md:hidden col-span-12 mt-6\">\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 <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 <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 <!-- Tabs Section -->\n <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n [selectedIndex]=\"selectedIndex\" (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 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-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 </div>\n <div class=\"col-span-12 md:col-span-4\">\n <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n 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 <div class=\"hidden md:block\" \n ngIf=\"data?.announcementSection?.data\">\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 </div> \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\" [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'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [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\" 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 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\n [dynamicColor]=\"'#999999'\"\n [dynamicAlignPills]=\"'start'\"\n [cardDisplayCount]=\"2\"\n (emptyResponse)=\"hideCompetency($event)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"orgId\"\n >\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\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event, data)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n (emptyResponse)=\"hideContentStrip($event, data)\"\n [providerId]=\"orgId\"\n [widgetData]=\"data?.contentStrip\"\n [channnelName]=\"channnelName\"\n >\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\n [objectData]=\"data\"\n [channnelName]=\"channnelName\"\n [channelId]=\"orgId\">\n </sb-uic-top-learners>\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}.sticky-logo-square{position:absolute;top:215px;justify-content:end;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:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;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 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.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:rgba(19,19,19,.6392156863);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.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":35,"character":19},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":36,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":37,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":38,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":39,"character":30}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":59,"character":3},"arguments":["window:resize"]}]}],"setWidth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"triggerOpenDialog":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}],"raiseCompetencyTelemetry":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"hideCompetency":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}]}},"ɵcq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-providers-v2","template":"<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container ngIf=\"sectionList?.length\">\n <ng-container ngFor=\"let section of sectionList\">\n <ng-container ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\">\n <ng-container ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan \|\| 12}} \">\n <ng-container ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'trainingCalendar'\" [ngTemplateOutlet]=\"trainingCalendar\"\n [ngTemplateOutletContext]=\"{trainingCalendar: column.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'contributors'\" [ngTemplateOutlet]=\"contributors\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'infra'\" [ngTemplateOutlet]=\"infra\"\n [ngTemplateOutletContext]=\"{infra: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentTopStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container> \n <ng-container ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container> \n <ng-container ngSwitchCase=\"'learnerReview'\" [ngTemplateOutlet]=\"learnerReviewBlock\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container> \n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n<div class=\"container-fluid\" ngIf=\"navList?.length\">\n <div class=\"flex sticky-navigator gap-4\">\n <mat-icon class=\"nav-up-arrow cursor-pointer\" (click)=\"scrollToSection('section-micro-sites')\">arrow_upwards</mat-icon>\n <ng-container ngFor=\"let section of navList\">\n <ng-container ngIf=\"section.navigation\">\n <div class=\"nav-button\" (click)=\"scrollToSection(section?.key); raiseNavTelemetry(section?.title)\">{{section?.title}}</div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n <!-- <div class=\"w-full grid grid-cols-12 gap-4\"> -->\n <div class=\"col-span-12 \">\n <div class=\"grid grid-cols-12 auto-rows-max\">\n \n <div class=\"col-span-3 custombgsection\">\n <div class=\"hidden md:block py-5 h-full \">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <div class=\"slider h-full\" ngIf=\"data?.sliderData?.sliders\">\n <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\" [type]=\"'atictitop'\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n <div class=\"container flex flex-col md:flex-row\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-rounded top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title \|\| providerName}}</h1>\n <p>{{data?.description \| slice:0:descriptionMaxLength}}\n <span ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n <div class=\"block md:hidden overflow-y-auto mb-3\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n </div>\n <button\n (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{data?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStripTemplate let-data=\"data\">\n <ng-container ngIf=\"!data?.contentStrip?.hideSection\">\n <div class=\"flex justify-center relative\">\n <img class=\"absolute {{data?.contentStrip?.sectionImagePosition}}\" src=\"{{data?.contentStrip?.sectionImage}}\" alt=\"\">\n <div class=\"container \">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event,data)\"\n (emptyResponse)=\"hideContentStrip($event, data)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n [providerId]=\"providerId\"\n [widgetData]=\"data?.contentStrip\">\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #contributors let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n </div>\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{data.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n </div>\n </div>\n <div class=\"w-full section-divider pt-6\">\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 infra-sec margin-bottom-xl\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title2 hidden md:block\">\n {{infra?.detaulTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{infra?.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-8 margin-bottom-xl\">\n <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n </div>\n </div>\n </div>\n </div>\n <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n </div>\n <div class=\"slider-background1 mb-8\">\n <div class=\"container-balanced w-full slider-background-2\">\n <div class=\"info-slider\">\n <sb-uic-sliders class=\"infobanner\" [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" ngIf=\"!hideCompetencyBlock\">\n <div class=\"w-full container-balanced\">\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook\n (emptyResponse)=\"hideCompetency($event, competency)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"providerId\">\n </sb-uic-competency-passbook>\n </div>\n </div>\n <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #trainingCalendar let-trainingCalendar=\"trainingCalendar\">\n <div class=\"hidden md:block\">\n <div class=\"col-span-12 px-8 py-8\" [style.background]=\"trainingCalendar?.background\">\n <div class=\"container-balanced flex flex-col\">\n <div class=\"col-span-12 mat-subheading-1 margin-remove\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'grid'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"block md:hidden\">\n <div class=\"col-span-12 px-5 py-3 mob-header\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <div class=\"col-span-12\">\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'row'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"col-span-12 flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n</ng-template>\n<ng-template #learnerReviewBlock let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\" ngIf=\"!data?.hideSection\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-4 contributor-desc\">\n <div class=\"infra-box-review flex flex-col\">\n <div class=\"learner-title hidden md:block\">\n {{data?.detaulTitle}}\n </div>\n <div class=\"infra-title2 hidden md:block\">\n {{data?.myTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"learner-title\">{{data?.detaulTitle}}</span> <span class=\"infra-title2\"> {{data?.myTitle}}</span>\n </div> \n </div> \n </div>\n <div class=\"col-span-12 md:col-span-8\">\n <sb-uic-user-content-rating (emptyResponse)=\"hideLearnerReview($event, data)\" [formData]=\"data\" [providerId]=\"providerId\"></sb-uic-user-content-rating>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":[".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0;z-index:-1}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/contain round;width:100%;z-index:99}@media screen and (max-width:768px){::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.infobanner.banner-container{width:1014px!important}}@media screen and (min-width:1234px){.custombgsection{background-size:cover}}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":31,"character":29},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":32,"character":29},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":32,"character":55},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":32,"character":81}]}],"ngOnInit":[{"__symbolic":"method"}],"getNavitems":[{"__symbolic":"method"}],"scrollToSection":[{"__symbolic":"method"}],"hideCompetency":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"hideLearnerReview":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}],"raiseCompetencyTelemetry":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"raiseNavTelemetry":[{"__symbolic":"method"}]}},"ɵcr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-national-learning","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\" [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>\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 </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","styles":["::ng-deep.mat-app-background{background-color:#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 0 rgba(0,0,0,.06)}.topSection .logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .logo-box-rounded{width:112px;height:112px}.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 rgba(0,0,0,.06)}.topSection .mlogo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .mlogo-box-rounded{width:112px;height:112px}.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}}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"configDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"nwlConfiguration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":17,"character":29},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":17,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}],"hideKeyHightlight":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"raiseTabClick":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}]}},"ɵcs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-key-highlights","template":"<ng-container ngIf=\"contentdata?.length && mode === 'desktop'\">\n <div class=\"key-highlighs-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [autoScroll]=\"true\"\n [currentIndex]=\"currentIndex\" \n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\"\n [customBanner]=\"true\"\n [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex flex-row key-wrapper items-center justify-center\">\n <div class=\"kh-description\">\n {{content?.title \| slice:0:titleMaxLength}}\n <span ngIf=\"content?.title?.length > titleMaxLength\">...</span>\n </div>\n </div>\n </div>\n </div> \n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"contentdata?.length && mode === 'mobile'\">\n <div class=\"p-5\">\n <div class=\"mob-key-highlighs-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [autoScroll]=\"true\"\n [currentIndex]=\"currentIndex\" \n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\"\n [customBanner]=\"true\"\n [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex flex-row mkey-wrapper items-center justify-center\">\n <div class=\"mkh-description\">\n {{content?.title \| slice:0:titleMaxLength }}\n <span ngIf=\"content?.title?.length > titleMaxLength\">...</span>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </div>\n</ng-container>","styles":[".kh-description{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:0 10px}.key-wrapper{background-color:#eaf1f8;padding:25px 16px;border-radius:50px}.mkey-wrapper{background-color:#eaf1f8;padding:16px;border-radius:50px}.mkh-description{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;padding:0 30px}"]}]}],"members":{"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":18,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}]}},"ɵct":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-events","template":"<div class=\"flex items-center mb-4 mt-2 e-header\">\n <div class=\"event-title\">\n {{object?.title}}\n </div>\n <div class=\"flex gap-4\">\n <div class=\"events-select\">\n <select (change)=\"getEvents($event)\">\n <option value=\"{{d?.startDate}}\" ngFor=\"let d of daysBetween\" [selected]=\"currentDay === d.startDate\">{{d?.diplayFormat}}</option>\n </select>\n </div>\n <div class=\"flex gap-4\">\n <a [routerLink]=\"'/app/event-hub/home'\" class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer \">Show All <mat-icon>chevron_right</mat-icon></a>\n </div>\n </div>\n</div>\n<div class=\"grid grid-cols-1 gap-4\">\n <div class=\"events-card-wrapper\">\n <div ngIf=\"!loader\">\n <div ngIf=\"events?.length > 0\">\n <div ngFor=\"let event of events\">\n <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n </div>\n </div>\n <div ngIf=\"events?.length === 0\">\n <div class=\"flex item-center justify-center p-5 no-events\">\n No events exist.\n </div>\n </div>\n </div>\n <div ngIf=\"loader && events?.length === 0\">\n <div ngFor=\"let event of [1,2,3]\">\n <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n </div>\n </div>\n </div>\n</div>","styles":["@charset \"UTF-8\";.e-header{justify-content:space-between}.event-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.events-select{position:relative;display:inline-block;width:150px}.events-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.events-select:after{content:\"▼\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.no-events{border:1px solid #c3c3c3;border-radius:12px}"]}]}],"members":{"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"nwlEventsConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getDaysBetweenDates":[{"__symbolic":"method"}],"getEvents":[{"__symbolic":"method"}],"getEventsList":[{"__symbolic":"method"}]}},"ɵcu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-event-card","template":"<div class=\"events-card margin-bottom-m cursor-pointer\" ngIf=\"!loader\" (click)=\"redirectTo(eventDetails)\">\n <div class=\"flex gap-4\">\n <div class=\"event-poster\">\n <img class='poster' [src]=\"eventDetails.appIcon ? getPublicUrl(eventDetails.appIcon) : objectData?.defaultImage\" alt=\"\" />\n </div>\n <div class=\"flex flex-col\">\n <div class=\"flex\">\n <div class=\"flex event-label\">{{eventDetails?.resourceType}}</div>\n </div>\n <div class=\"orgName pt-2 pb-1\">\n {{eventDetails?.owner}}\n </div>\n <div class=\"event-title pt-1\">\n {{eventDetails?.name \| slice:0:descriptionMaxLength}}\n <span ngIf=\"eventDetails?.name?.length > descriptionMaxLength\">...</span>\n </div>\n <div class=\"event-date pt-2\">{{getEventDate(eventDetails)}}</div>\n </div>\n </div>\n</div>\n<div ngIf=\"loader\">\n <div class=\"events-card margin-bottom-m\">\n <div class=\"flex gap-4\">\n <div class=\"event-poster\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'180px'\" [height]=\"'107px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div class=\"flex\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'60px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex orgName pt-2 pb-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex event-title pt-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"event-date pt-2\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n</div>","styles":[".events-card{padding:16px;border-radius:12px;border:1px solid #c3c3c3}.events-card .poster{width:180px;height:107px;border-radius:12px}.events-card .event-label{border:1px solid #ef951e;background:rgba(239,149,30,.05);border-radius:45px;font:400 14px/16.8px Lato;padding:8px 12px}.events-card .orgName{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6}.events-card .event-title{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:left}.events-card .event-date{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;color:#1b4ca1}@media screen and (min-width:320px) and (max-width:769px){.events-card .poster{width:80px;height:69px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"eventDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":17,"character":15},"arguments":["environment"]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":17,"character":71}]}],"getEventDate":[{"__symbolic":"method"}],"getPublicUrl":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵcv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-mdo-leaderboard","template":"<div class=\"mdo-leaderboard-container\">\n <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n <div class=\"flex gap-2\">\n {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"flex item-center justify-center\" ngIf=\"expand\">\n <div class=\"flex fl-div\">\n <div class=\"pointer\">\n <span class=\"dot-dot\"></span>\n </div>\n </div>\n </div>\n <div class=\"l-content\" ngIf=\"expand\">\n <div class=\"horizontal-scroll-container\">\n <div class=\"scroll-content\">\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n </div>\n </div>\n <div class=\"relative search-wrapper margin-top-m mb-5\">\n <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n </mat-icon>\n <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n aria-label=\"Search\" i18n-placeholder=\"search\" [(ngModel)]=\"searchTerm\"\n placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n </div>\n <div class=\"l-tab-data\">\n <div ngFor=\"let user of filteredData; let i = index\">\n <div class=\"flex flex-row item mb-{{filteredData.length - 1 === i ? 0 : 5}} gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" ngIf=\"user.row_num === 1\"/></div>\n <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n <div class=\"w-full\">\n <div class=\"flex flex-between gap-2\">\n <div>\n <div class=\"rank-name\">{{user.org_name}}</div>\n <div class=\"rank-points flex mt-1 gap-1\">\n <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n <div class=\"points\">{{user.total_points \|\| 0 }} points</div>\n </div>\n </div>\n <div class=\"rank-crown\" ngIf=\"[1,2,3].includes(user.row_num)\">\n <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"no-data px-1\" ngIf=\"filteredData?.length === 0\">\n No data found!\n </div>\n </div>\n </div>\n</div>\n","styles":[".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container{overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]}]}],"members":{"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"tabClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getTabData":[{"__symbolic":"method"}],"getRank":[{"__symbolic":"method"}],"getMedal":[{"__symbolic":"method"}],"handleSearchQuery":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}]}},"ɵcw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-highlights-of-week","template":"<div ngIf=\"contentdata.length\" class=\"highlights-of-the-week-container {{expand ? 'mb-4' : ''}}\">\n <ng-container ngIf=\"contentdata.length\">\n <div class=\"flex title pb-3 no-radius items-center justify-between\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div class=\"block md:hidden\">\n <img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\">\n </div> \n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div ngIf=\"expand\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"wh-wrapper no-radius\">\n <div class=\"player\">\n <video width=\"100%\" height=\"100%\" controls ngIf=\"i === currentIndex\">\n <source [src]=\"item.videoUrl\" type=\"video/mp4\">\n <source [src]=\"item.videoUrl\" type=\"application/x-mpegURL\" />\n </video>\n </div>\n <div class=\"player-title py-3\">\n {{item?.title}}\n </div>\n <div class=\"player-body\">\n {{item?.description}}\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </ng-container>\n</div>\n\n","styles":[".highlights-of-the-week-container ::ng-deep.banner-title{display:none}.highlights-of-the-week-container ::ng-deep.banner-meta{bottom:-37px}.highlights-of-the-week-container ::ng-deep.prev{margin-left:11px}.highlights-of-the-week-container ::ng-deep.next{margin-right:16px}.title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left;background-color:#d1dbec;padding:16px;border-top-left-radius:12px;border-top-right-radius:12px}.wh-wrapper{background-color:#d1dbec;padding:0 16px 16px;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.wh-wrapper .player{height:420px}.wh-wrapper .player-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.wh-wrapper .player-body{font-family:Lato;line-clamp:2;-webkit-line-clamp:2;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:320px) and (max-width:769px){.highlights-of-the-week-container ::ng-deep.prev{display:none!important}.highlights-of-the-week-container ::ng-deep.next{display:none!important}.wh-wrapper .player{height:215px}.no-radius{border-radius:0}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}]}},"ɵcx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-speakers","template":"<div class=\"nlw-speakers-wrapper px-4 md:px-0 my-4 md:my-0\">\n <div class=\"flex speakers-title gap-2 justify-between pb-1\" ngIf=\"contentdata.length\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div ngIf=\"expand\" class=\"speakers-container margin-bottom-xs\" >\n <ng-container ngIf=\"contentdata.length\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"speakers-wrapper\">\n <div class=\"flex items-center justify-center pb-2\">\n <div class=\"speaker-initial\" ngIf=\"!item.profileImage\">{{item?.initial}}</div>\n <img class='speaker-icon' [src]=\"item?.profileImage\" alt=\"\" ngIf=\"item.profileImage\"/>\n </div>\n <div class=\"flex items-center justify-center pb-2\">\n <div class=\"speaker-title\">{{item.name}}</div>\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"speaker-description\">{{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </ng-container>\n </div>\n</div>","styles":[".speakers-container ::ng-deep.banner-title{display:none}.speakers-container ::ng-deep.prev{margin-left:0;background-color:#fff4ec!important;color:#b6b4b4}.speakers-container ::ng-deep.next{margin-right:0;background-color:#fff4ec!important;color:#b6b4b4}.speakers-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.speakers-wrapper{background-color:#fff4ec;border-radius:12px;padding:24px}.speaker-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.speaker-description{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:center;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.speaker-initial{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:center;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;border-radius:50px}.speaker-icon{width:80px;height:80px;border-radius:50px}@media screen and (min-width:320px) and (max-width:769px){.nlw-speakers-wrapper{background-color:#d1dbec}.speakers-title{padding:16px 0}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":15,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}]}},"ɵcy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-user-progress","template":"<div class=\"px-4 md:px-0 pt-4 md:pt-0 week-progress {{expand ? 'pb-4' : 'pb-1'}}\">\n <div class=\"flex user-progress-title gap-2 margin-bottom-xs items-center justify-between\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"user-progress-wrapper\" ngIf=\"expand\">\n <div class=\"user-rank flex items-center\">\n <div class=\"flex item-center\">\n <div class=\"current-rank\" ngIf=\"userProgress?.rank > 0\">#{{userProgress?.rank}} Rank</div>\n </div>\n </div>\n <div class=\"user-details-wrapper\">\n <div class=\"user-details flex gap-2\">\n <div class=\"user-initial\" ngIf=\"userProgress?.profile_image\">\n <img class=\"user-profile\" [src]=\"userProgress?.profile_image\" alt=\"\"/>\n </div>\n <div class=\"user-initial\" ngIf=\"!userProgress?.profile_image && userProgress?.fullname\">{{createInititals(userProgress?.fullname)}}</div>\n <div class=\"user-name pt-3\">{{userProgress?.fullname}}</div>\n </div>\n <div class=\"user-stats my-3\">\n <div class=\"flex gap-2 items-center justify-center\">\n <div class=\"my-hours\">\n <div class=\"flex items-center gap-3\">\n <img class=\"hours-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808794219_InProgress_Icon.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.total_learning_hours \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Learning Hours</div>\n </div>\n </div>\n </div>\n <div class=\"my-certificates\">\n <div class=\"flex items-center gap-3\">\n <img class=\"cert-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808775795_Certificate_icon.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.count \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Certificates</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex gap-2 items-center justify-center pt-3\">\n <div class=\"k-points\">\n <div class=\"flex items-center gap-3\">\n <img class=\"kp-point-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808815206_karma-badge.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.total_points \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Karma Points</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"insights-wrapper\">\n <div class=\"insights-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'p1'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"insitesData\"\n [customBanner]=\"true\" [autoScroll]=\"true\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"insights-item\" ngFor=\"let item of insitesData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex gap-4\">\n <div class=\"insights-lable\">{{item?.label}}</div>\n <div class=\"flex items-center growth-positive\" ngIf=\"item?.growth === 'positive'\">\n <mat-icon class=\"positive-icon\">arrow_upward</mat-icon>\n <span class=\"positive-note pt-1\">+{{roundTo(item?.progress)}}%</span>\n </div>\n <div class=\"flex items-center growth-negative\" *ngIf=\"item?.growth === 'negative' && item?.progress > 0\">\n <mat-icon class=\"negative-icon\">arrow_downward</mat-icon>\n <span class=\"negative-note\">-{{roundTo(item?.progress)}}%</span>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </div>\n </div>\n </div>\n</div>\n","styles":[".user-progress-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.user-progress-wrapper{border-radius:12px}.user-rank{background:url(https://portal.dev.karmayogibharat.net/content-store/orgStore/0132238763297177601/1727267061524_shadow.png),linear-gradient(124.59deg,#266eeb 51.53%,#133f8b 140.2%);height:76px;border-top-left-radius:12px;border-top-right-radius:12px;border-left-color:#266eeb;border-right-color:#266eeb;border-top-color:#266eeb;padding-left:25%}.current-rank{padding:3px 10px;border-radius:15px;background-color:#fff;color:#f3962f;font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center}.user-details-wrapper{padding:0 8px;border:1px solid #e8e8e8;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fff}.user-details,.user-stats{padding:0 8px}.user-initial{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background-color:#000;color:#fff;border-radius:50px;border:3px solid #fff;margin-top:-30px}.user-profile{width:70px;height:70px;border-radius:50px}.user-name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.my-hours{padding:16px;background-color:#f0f3f4;border-radius:12px;width:50%;border:1px solid #c3c3c3}.my-certificates{padding:16px;background-color:#f0f3f4;width:50%;border-radius:12px;border:1px solid #c3c3c3}.k-points{padding:16px;background-color:#f0f3f4;width:40%;border-radius:12px;border:1px solid #c3c3c3}.hours-icon{background:linear-gradient(143.13deg,rgba(255,191,26,.15) 5.36%,rgba(255,64,128,.15) 94.64%);border-radius:50px;padding:5px}.counter-title{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.counter{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.cert-icon{background:linear-gradient(180deg,rgba(255,206,81,.24) 0,rgba(254,231,28,.24) 100%);border-radius:50px;padding:5px}.kp-point-icon{background:#dbe4ff;border-radius:50px;padding:5px;height:18px;width:18px}.insights-wrapper{padding:8px 0}.insights-container{background:rgba(243,150,47,.2);height:84px;border-radius:8px}.insights-container ::ng-deep .prev{display:none}.insights-container ::ng-deep .next{display:none}.insights-item{padding:16px}.insights-lable{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.positive-note{font-size:12px;font-weight:400;line-height:14.4px}.positive-icon{font-size:18px;height:18px;width:18px}.growth-positive{color:green}.growth-negative{color:red}.negative-icon{font-size:18px;height:18px;width:18px}.negative-note{font-size:12px;font-weight:400;line-height:14.4px}@media screen and (min-width:320px) and (max-width:769px){.week-progress{background-color:#d1dbec}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"rootOrgId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":20,"character":71}]}],"ngOnInit":[{"__symbolic":"method"}],"getUserProgress":[{"__symbolic":"method"}],"getInsightsData":[{"__symbolic":"method"}],"roundTo":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}]}}},"origins":{"ConsumptionService":"./lib/consumption.service","ConsumptionComponent":"./lib/consumption.component","ConsumptionModule":"./lib/consumption.module","WIDGET_REGISTERED_LIB_MODULES":"./lib/registration-lib.config","WIDGET_REGISTRATION_LIB_CONFIG":"./lib/registration-lib.config","ROOT_WIDGET_CONFIG":"./lib/consumption.config","WidgetContentLibService":"./lib/_services/widget-content-lib.service","WidgetUserServiceLib":"./lib/_services/widget-user-lib.service","ContentStripFacetFilterModule":"./lib/_common/strips/content-strip-facet-filter/content-strip-facet-filter.module","HttpLoaderFactory1":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.module","ContentStripWithTabsPillsModule":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.module","HttpLoaderFactory":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.module","ContentStripWithTabsLibModule":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.module","CommonStripModule":"./lib/_common/common-strip/common-strip.module","MyHammerConfig":"./lib/_common/sliders/sliders.module","SlidersLibModule":"./lib/_common/sliders/sliders.module","DataPointsModule":"./lib/_common/data-points/data-points.module","CardsModule":"./lib/_common/cards/cards.module","CompetencyPassbookModule":"./lib/_common/competency-passbook/competency-passbook.module","CompetencyPassbookMdoModule":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.module","CalenderModule":"./lib/_common/calender/calender.module","UserContentRatingLibModule":"./lib/_common/user-content-rating/user-content-rating-lib.module","AnnouncementsModule":"./lib/_common/announcements/announcements.module","ContentProgressModule":"./lib/_common/content-progress/content-progress.module","MDOChannelModule":"./lib/_common/microsites/mdo-channels/mdo-channel.module","ProvidersModule":"./lib/_common/microsites/providers/providers.module","NationalLearningModule":"./lib/_common/microsites/national-learning-week/national-learning.module","CommonMethodsService":"./lib/_services/common-methods.service","TopLearnersModule":"./lib/_common/top-learners/top-learners.module","CbpPlanModule":"./lib/_common/cbp-plan/cbp-plan.module","MdoLeaderboardModule":"./lib/_common/mdo-leaderboard/mdo-leaderboard.module","HighlightsOfWeekModule":"./lib/_common/highlights-of-week/highlights-of-week.module","SpeakersModule":"./lib/_common/speakers/speakers.module","UserProgressModule":"./lib/_common/user-progress/user-progress.module","DialogComponentsModule":"./lib/_common/dialog-components/dialog-components.module","KeyHighlightsModule":"./lib/_common/key-highlights/key-highlights.module","EventsModule":"./lib/_common/events/events.module","ɵa":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component","ɵb":"./lib/_services/multilingual-translations.service","ɵc":"./lib/_services/configurations.service","ɵd":"./lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.module","ɵe":"./lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component","ɵf":"./lib/_common/sliders/sliders.component","ɵg":"./lib/_directives/navigation/navigation.module","ɵh":"./lib/_directives/navigation/navigation.directive","ɵi":"./lib/_directives/image-responsive/image-responsive.module","ɵj":"./lib/_directives/image-responsive/image-responsive.directive","ɵk":"./lib/_common/data-points/data-points.component","ɵl":"./lib/_services/insite-data.service","ɵm":"./lib/_common/skeleton-loader-lib/skeleton-loader-lib.module","ɵn":"./lib/_common/skeleton-loader-lib/skeleton-loader-lib.component","ɵo":"./lib/_common/calender/calender.component","ɵp":"./lib/_common/calender/calender-day/calender-day.component","ɵq":"./lib/_common/common-strip/common-strip.component","ɵr":"./lib/_common/announcements/announcements.component","ɵs":"./lib/_common/top-learners/top-learners.component","ɵt":"./lib/_common/cbp-plan/cbp-plan.component","ɵu":"./lib/_directives/scrollable-item/scrollable-item.directive","ɵv":"./lib/_directives/scrollable-item/scrollable-item.module","ɵw":"./lib/_common/sliders-ng-content/sliders-ng-content.module","ɵx":"./lib/_common/sliders-ng-content/sliders-ng-content.module","ɵy":"./lib/_common/sliders-ng-content/sliders-ng-content.component","ɵz":"./lib/_common/cards/card-resource/card-resource.component","ɵba":"./lib/_common/cards/cards.component","ɵbb":"./lib/_common/cards/card-portrait/card-portrait.component","ɵbc":"./lib/_common/cards/card-user/card-user.component","ɵbd":"./lib/_common/cards/card-landscape/card-landscape.component","ɵbe":"./lib/_common/cards/card-wide/card-wide.component","ɵbf":"./lib/_common/cards/card-mdo-channel/card-mdo-channel.component","ɵbg":"./lib/_common/cards/card-wide-v2/card-wide-v2.component","ɵbh":"./lib/_common/cards/card-karma-programs/card-karma-programs.component","ɵbi":"./lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component","ɵbj":"./lib/_common/cards/provider-card/provider-card.component","ɵbk":"./lib/_common/cards/card-portrait-ext/card-portrait-ext.component","ɵbl":"./lib/_common/cards/card-assessment/card-assessment/card-assessment.component","ɵbm":"./lib/_common/cards/card-progress-portrait-lib/card-progress-portrait-lib.component","ɵbn":"./lib/_services/certificate.service","ɵbo":"./lib/_common/cards/card-mdo-channel-v1/card-mdo-channel-v1.component","ɵbp":"./lib/_pipes/pipe-public-URL/pipe-public-URL.module","ɵbq":"./lib/_pipes/pipe-public-URL/pipe-public-URL.pipe","ɵbr":"./lib/_pipes/object-to-array/object-to-array.pipe.module","ɵbs":"./lib/_pipes/object-to-array/object-to-array.pipe","ɵbt":"./lib/_common/display-content-type-lib/display-content-type-lib.module","ɵbu":"./lib/_common/display-content-type-lib/display-content-type-lib.component","ɵbv":"./lib/_directives/default-thumbnail/default-thumbnail.module","ɵbw":"./lib/_directives/default-thumbnail/default-thumbnail.directive","ɵbx":"./lib/_pipes/pipe-duration-transform/pipe-duration-transform.module","ɵby":"./lib/_pipes/pipe-duration-transform/pipe-duration-transform.pipe","ɵbz":"./lib/_common/content-progress/content-progress.component","ɵca":"./lib/_common/dialog-components/certificate-dialog/certificate-dialog.component","ɵcb":"./lib/_common/avatar-photo-lib/avatar-photo-lib.module","ɵcc":"./lib/_common/avatar-photo-lib/avatar-photo-lib.component","ɵcd":"./lib/_common/strips/content-strip-facet-filter/content-strip-facet-filter.component","ɵce":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.component","ɵcf":"./lib/_common/competency-passbook/competency-passbook.component","ɵcg":"./lib/_common/competency-passbook/competency-passbook.service","ɵch":"./lib/_common/pills/pills.module","ɵci":"./lib/_common/pills/pills.component","ɵcj":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.component","ɵck":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.service","ɵcl":"./lib/_common/user-content-rating/user-content-rating-lib.component","ɵcm":"./lib/_services/rating.service","ɵcn":"./lib/_common/user-content-rating/user-content-rating-lib.service","ɵco":"./lib/_common/microsites/mdo-channels/mdo-channel-v1/mdo-channel-v1.component","ɵcp":"./lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component","ɵcq":"./lib/_common/microsites/providers/providers-v2/providers-v2.component","ɵcr":"./lib/_common/microsites/national-learning-week/national-learning/national-learning.component","ɵcs":"./lib/_common/key-highlights/key-highlights.component","ɵct":"./lib/_common/events/events.component","ɵcu":"./lib/_common/events/event-card/event-card.component","ɵcv":"./lib/_common/mdo-leaderboard/mdo-leaderboard.component","ɵcw":"./lib/_common/highlights-of-week/highlights-of-week.component","ɵcx":"./lib/_common/speakers/speakers.component","ɵcy":"./lib/_common/user-progress/user-progress.component"},"importAs":"@sunbird-cb/consumption"}
1	+ {"__symbolic":"module","version":4,"metadata":{"ConsumptionService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"ConsumptionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-consumption","template":"\n <p>\n consumption works!\n </p>\n ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ConsumptionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ConsumptionComponent"}],"imports":[{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"SlidersLibModule"}],"exports":[{"__symbolic":"reference","name":"ConsumptionComponent"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"CalenderModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"AnnouncementsModule"},{"__symbolic":"reference","name":"TopLearnersModule"},{"__symbolic":"reference","name":"CbpPlanModule"}]}]}],"members":{}},"WIDGET_REGISTERED_LIB_MODULES":[{"__symbolic":"reference","name":"CardsModule"}],"WIDGET_REGISTRATION_LIB_CONFIG":[{"widgetType":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ROOT_WIDGET_CONFIG"},"member":"card"},"member":"_type"},"widgetSubType":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"ROOT_WIDGET_CONFIG"},"member":"card"},"member":"cardResource"},"component":{"__symbolic":"reference","name":"ɵba"}}],"ROOT_WIDGET_CONFIG":{"card":{"_type":"cardLib","cardResource":"cardContentLib"}},"WidgetContentLibService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":63,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":68,"character":18},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":69,"character":23},{"__symbolic":"reference","name":"WidgetUserServiceLib"}]}],"changeTelemetryData":[{"__symbolic":"method"}],"isResource":[{"__symbolic":"method"}],"fetchMarkAsCompleteMeta":[{"__symbolic":"method"}],"updateTocConfig":[{"__symbolic":"method"}],"fetchContent":[{"__symbolic":"method"}],"fetchAuthoringContent":[{"__symbolic":"method"}],"fetchMultipleContent":[{"__symbolic":"method"}],"fetchCollectionHierarchy":[{"__symbolic":"method"}],"fetchBlendedCourse":[{"__symbolic":"method"}],"fetchCourseBatches":[{"__symbolic":"method"}],"fetchCourseBatch":[{"__symbolic":"method"}],"autoAssignBatchApi":[{"__symbolic":"method"}],"autoAssignCuratedBatchApi":[{"__symbolic":"method"}],"enrollUserToBatch":[{"__symbolic":"method"}],"enrollAndUnenrollUserToBatchWF":[{"__symbolic":"method"}],"fetchBlendedUserWF":[{"__symbolic":"method"}],"fetchBlendedUserCOUNT":[{"__symbolic":"method"}],"fetchContentLikes":[{"__symbolic":"method"}],"fetchContentRatings":[{"__symbolic":"method"}],"fetchContentHistory":[{"__symbolic":"method"}],"fetchContentHistoryV2":[{"__symbolic":"method"}],"continueLearning":[{"__symbolic":"method"}],"saveContinueLearning":[{"__symbolic":"method"}],"setS3Cookie":[{"__symbolic":"method"}],"setS3ImageCookie":[{"__symbolic":"method"}],"fetchManifest":[{"__symbolic":"method"}],"fetchWebModuleContent":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"searchRegionRecommendation":[{"__symbolic":"method"}],"searchV6":[{"__symbolic":"method"}],"searchRelatedCBPV6":[{"__symbolic":"method"}],"fetchContentRating":[{"__symbolic":"method"}],"deleteContentRating":[{"__symbolic":"method"}],"addContentRating":[{"__symbolic":"method"}],"getFirstChildInHierarchy":[{"__symbolic":"method"}],"getRegistrationStatus":[{"__symbolic":"method"}],"fetchConfig":[{"__symbolic":"method"}],"addCertTemplate":[{"__symbolic":"method"}],"issueCert":[{"__symbolic":"method"}],"downloadCert":[{"__symbolic":"method"}],"trendingContentSearch":[{"__symbolic":"method"}],"getKarmaPoitns":[{"__symbolic":"method"}],"fetchProgramContent":[{"__symbolic":"method"}],"getCourseKarmaPoints":[{"__symbolic":"method"}],"claimKarmapoints":[{"__symbolic":"method"}],"userKarmaPoints":[{"__symbolic":"method"}],"getEnrolledData":[{"__symbolic":"method"}],"getResourseLink":[{"__symbolic":"method"}],"checkForDataToFormUrl":[{"__symbolic":"method"}],"getResourseDataWithData":[{"__symbolic":"method"}],"gotoTocPage":[{"__symbolic":"method"}],"isBatchInProgress":[{"__symbolic":"method"}],"postApiMethod":[{"__symbolic":"method"}],"getApiMethod":[{"__symbolic":"method"}],"getEnrolledDataFromList":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"WidgetUserServiceLib":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":31,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":5},"arguments":["environment"]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":38,"character":18}]}],"handleError":[{"__symbolic":"method"}],"fetchUserGroupDetails":[{"__symbolic":"method"}],"fetchUserBatchList":[{"__symbolic":"method"}],"fetchProfileUserBatchList":[{"__symbolic":"method"}],"checkStorageData":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getSavedData":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}],"resetTime":[{"__symbolic":"method"}],"fetchCbpPlanList":[{"__symbolic":"method"}],"storeUserEnrollmentInfo":[{"__symbolic":"method"}],"fetchEnrollmentDataByContentId":[{"__symbolic":"method"}],"getCbpFormatedData":[{"__symbolic":"method"}],"mapCbpData":[{"__symbolic":"method"}],"mapEnrollmentData":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ContentStripFacetFilterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcd"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":43,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":69,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":70,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":72,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory1"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":74,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵcd"}],"exports":[{"__symbolic":"reference","name":"ɵcd"}]}]}],"members":{}},"HttpLoaderFactory1":{"__symbolic":"function","parameters":["http"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@ngx-translate/http-loader","name":"TranslateHttpLoader","line":37,"character":13},"arguments":[{"__symbolic":"reference","name":"http"}]}},"ContentStripWithTabsPillsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵce"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":45,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":70,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":71,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":73,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory1"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":75,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵce"}],"exports":[{"__symbolic":"reference","name":"ɵce"}]}]}],"members":{}},"HttpLoaderFactory":{"__symbolic":"function","parameters":["http"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@ngx-translate/http-loader","name":"TranslateHttpLoader","line":37,"character":13},"arguments":[{"__symbolic":"reference","name":"http"}]}},"ContentStripWithTabsLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":45,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":70,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":71,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":73,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":75,"character":15}]}}]}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"CommonStripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":35,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵq"}],"imports":[{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":40,"character":4},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatToolbarModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatListModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSidenavModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatExpansionModule","line":50,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRadioModule","line":51,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatFormFieldModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBarModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":58,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatNativeDateModule","line":59,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":60,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCheckboxModule","line":61,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":62,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":65,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":66,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":68,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":70,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵq"}]}]}],"members":{}},"MyHammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":10,"character":36},"members":{"buildHammer":[{"__symbolic":"method"}]}},"SlidersLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"}],"exports":[{"__symbolic":"reference","name":"ɵf"}],"entryComponents":[{"__symbolic":"reference","name":"ɵf"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":32,"character":15},"useClass":{"__symbolic":"reference","name":"MyHammerConfig"}}]}]}],"members":{}},"DataPointsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵk"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵk"}],"providers":[{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"CardsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":34,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbj"},{"__symbolic":"reference","name":"ɵbk"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbm"},{"__symbolic":"reference","name":"ɵbo"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":52,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":54,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":55,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":57,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":58,"character":4},{"__symbolic":"reference","name":"ɵbp"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵbt"},{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":65,"character":4},{"__symbolic":"reference","name":"ContentProgressModule"},{"__symbolic":"reference","name":"DialogComponentsModule"},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":68,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":70,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":72,"character":15}]}}]},{"__symbolic":"reference","name":"ɵcb"}],"entryComponents":[{"__symbolic":"reference","name":"ɵba"}],"exports":[{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbk"}]}]}],"members":{}},"CompetencyPassbookModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵch"},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵcf"}],"providers":[{"__symbolic":"reference","name":"ɵcg"}]}]}],"members":{}},"CompetencyPassbookMdoModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcj"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵch"},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵcj"}],"providers":[{"__symbolic":"reference","name":"ɵck"}]}]}],"members":{}},"CalenderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":15,"character":4},{"__symbolic":"reference","name":"ɵm"}],"declarations":[{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"}],"exports":[{"__symbolic":"reference","name":"ɵo"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":20,"character":12}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":21,"character":13},{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"UserContentRatingLibModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcl"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":20,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵv"}],"exports":[{"__symbolic":"reference","name":"ɵcl"}],"providers":[{"__symbolic":"reference","name":"ɵcm"},{"__symbolic":"reference","name":"ɵcn"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":30,"character":11}]}]}],"members":{}},"AnnouncementsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵr"}]}]}],"members":{}},"ContentProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbz"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressBarModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbz"}]}]}],"members":{}},"MDOChannelModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":25,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵco"},{"__symbolic":"reference","name":"ɵcp"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":30,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"AnnouncementsModule"},{"__symbolic":"reference","name":"TopLearnersModule"},{"__symbolic":"reference","name":"CbpPlanModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"CompetencyPassbookModule"},{"__symbolic":"reference","name":"CompetencyPassbookMdoModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":42,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":43,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":45,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":47,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵco"},{"__symbolic":"reference","name":"ɵcp"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":54,"character":13}]}]}],"members":{}},"ProvidersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":28,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"CalenderModule"},{"__symbolic":"reference","name":"CardsModule"},{"__symbolic":"reference","name":"CommonStripModule"},{"__symbolic":"reference","name":"CompetencyPassbookModule"},{"__symbolic":"reference","name":"UserContentRatingLibModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":38,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":39,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":41,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":43,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵcq"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":50,"character":13}]}]}],"members":{}},"NationalLearningModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SlidersLibModule"},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":27,"character":4},{"__symbolic":"reference","name":"KeyHighlightsModule"},{"__symbolic":"reference","name":"ContentStripWithTabsLibModule"},{"__symbolic":"reference","name":"DataPointsModule"},{"__symbolic":"reference","name":"EventsModule"},{"__symbolic":"reference","name":"MdoLeaderboardModule"},{"__symbolic":"reference","name":"HighlightsOfWeekModule"},{"__symbolic":"reference","name":"SpeakersModule"},{"__symbolic":"reference","name":"UserProgressModule"},{"__symbolic":"reference","name":"ContentStripFacetFilterModule"}],"exports":[{"__symbolic":"reference","name":"ɵcr"}],"providers":[{"__symbolic":"reference","name":"CommonMethodsService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":44,"character":11}]}]}],"members":{}},"CommonMethodsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"handleCapitalize":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"TopLearnersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵs"}]}]}],"members":{}},"CbpPlanModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵt"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":15,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵt"}]}]}],"members":{}},"MdoLeaderboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcv"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":17,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcv"}],"providers":[{"__symbolic":"reference","name":"ɵl"}]}]}],"members":{}},"HighlightsOfWeekModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵcw"}]}]}],"members":{}},"SpeakersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcx"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcx"}]}]}],"members":{}},"UserProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcy"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"}],"exports":[{"__symbolic":"reference","name":"ɵcy"}]}]}],"members":{}},"DialogComponentsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵca"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatCardModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":20,"character":4},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"PipeSafeSanitizerModule","line":21,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":22,"character":4},"member":"forRoot"},"arguments":[{"loader":{"provide":{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateLoader","line":24,"character":17},"useFactory":{"__symbolic":"reference","name":"HttpLoaderFactory"},"deps":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":26,"character":15}]}}]}],"exports":[{"__symbolic":"reference","name":"ɵca"}],"entryComponents":[{"__symbolic":"reference","name":"ɵca"}]}]}],"members":{}},"KeyHighlightsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵv"}],"exports":[{"__symbolic":"reference","name":"ɵcs"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":20,"character":11}]}]}],"members":{}},"EventsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵct"},{"__symbolic":"reference","name":"ɵcu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":14,"character":4},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵct"},{"__symbolic":"reference","name":"ɵcu"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":73,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"sb-uic-content-strip-with-tabs","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])\">\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 min-height-40 \" [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])\"\n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\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\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 \" dynamicHeight\n [ngClass]=\"stripsResultDataMap[key]?.tabsType ? stripsResultDataMap[key]?.tabsType : ''\"\n (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n <ng-template mat-tab-label>\n <span><span ngIf=\"!tab?.disableTranslate\">{{ translateLabels(tab?.label, 'home') }}</span>\n <span class=\"tab-highlight\" ngIf=\"tab?.disableTranslate\">{{tab?.label}}</span>  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n <div>\n <!-- <ng-container [ngTemplateOutlet]=\"loader\" ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n </ng-container> -->\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n (!tab?.widgets \|\| !tab?.widgets?.length))\">\n <ng-container ngIf=\"tab?.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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n <ng-container ngIf=\"(tab?.fetchTabStatus === 'done' \|\| tab?.widgets?.length)\">\n <ng-container ngIf=\"!tab?.tabLoading\">\n\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of tab?.widgets\| slice:0:(tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container ngIf=\"!stripsResultDataMap[key].tabs \|\| !stripsResultDataMap[key].tabs.length\">\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div class=\"\">\n <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of stripsResultDataMap[key]?.widgets\| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <!-- <ng-container ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n <!-- <ng-container ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n [sbUiResolverWidget]=\"widget\"></ng-container> -->\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n <!-- </ng-container> -->\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </div>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}::ng-deep .pills-tab .mat-tab-header{border-bottom:unset!important}::ng-deep .pills-tab .mat-tab-label{border:1px solid rgba(0,0,0,.2392156863)!important;padding:2px 8px;margin-right:8px!important;min-width:unset!important;border-radius:12px;height:unset!important}::ng-deep .pills-tab .mat-ink-bar{background-color:transparent!important;visibility:hidden!important}::ng-deep .pills-tab .mat-tab-label-active{color:#fff!important;background-color:#1b4ca1!important}::ng-deep .pills-tab .mat-tab-body{padding:0!important}.min-height-40{min-height:40px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"telemtryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":106,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":108,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":109,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":110,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":111,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":114,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":116,"character":23},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"getFiltersFromArray":[{"__symbolic":"method"}],"transformSearchV6FiltersV2":[{"__symbolic":"method"}],"checkForDateFilters":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"fetchFromEnrollmentList":[{"__symbolic":"method"}],"splitEnrollmentTabsData":[{"__symbolic":"method"}],"getInprogressAndCompleted":[{"__symbolic":"method"}],"fetchFromSearchV6":[{"__symbolic":"method"}],"checkInvitOnlyAssessments":[{"__symbolic":"method"}],"searchV6Request":[{"__symbolic":"method"}],"fetchFromTrendingContent":[{"__symbolic":"method"}],"trendingSearchRequest":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformEventsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"getTabDataByNewReqSearchV6":[{"__symbolic":"method"}],"getTabDataByNewReqTrending":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"fetchAllCbpPlans":[{"__symbolic":"method"}],"splitCbpTabsData":[{"__symbolic":"method"}],"getTabsList":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"fetchAllTopContent":[{"__symbolic":"method"}],"fetchAllFeaturedContent":[{"__symbolic":"method"}],"getTabDataByNewReqTopContent":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"postRequestMethod":[{"__symbolic":"method"}],"getRequestMethod":[{"__symbolic":"method"}],"postMethodFilters":[{"__symbolic":"method"}],"getFullUrl":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"fetchAllBookMarkData":[{"__symbolic":"method"}],"transformAllContentsToWidgets":[{"__symbolic":"method"}],"transformAllTabContentsToWidgets":[{"__symbolic":"method"}],"fetchAllPlaylistSearch":[{"__symbolic":"method"}],"fetchPlaylistReadData":[{"__symbolic":"method"}],"getTabDataByNewReqPlaylistReadContent":[{"__symbolic":"method"}],"fetchCiosContentData":[{"__symbolic":"method"}],"getTabDataByCiosSearch":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":17,"character":35},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":17,"character":67},{"__symbolic":"reference","name":"ɵc"}]}],"getLanguage":[{"__symbolic":"method"}],"translateLabelWithoutspace":[{"__symbolic":"method"}],"translateLabel":[{"__symbolic":"method"}],"translateActualLabel":[{"__symbolic":"method"}],"editProfileDetailsAPI":[{"__symbolic":"method"}],"updatelanguageSelected":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"updateGlobalProfile":[{"__symbolic":"method"}],"updateTourGuideMethod":[{"__symbolic":"method"}],"updatePlatformRatingMethod":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"sb-uic-horizontal-scroller-v2","template":"\n<section class=\"horizontal-scroll-container h-full\" [id]=\"id\"\n[ngClass]=\"{'px-4': sliderConfig.showNavs && sliderConfig.showNavsSpacing, 'mt-5':sliderConfig.cerificateCardMargin}\">\n <div name=\"horizontal-scroll-content-strip\" class=\"horizontal-scroll-content\" #horizontalScrollElem>\n <ng-content></ng-content>\n </div>\n <div class=\"navigation {{isMobile? sliderConfig?.responsive?.arrowsPlacement : sliderConfig?.arrowsPlacement}}\">\n <ng-container ngIf=\"sliderConfig?.showNavs\">\n <button i18n-aria-label aria-label=\"back\" name=\"content-backward-button\" mat-mini-fab color=\"\" \n (click)=\"showPrev()\" class=\"prevBtn mat-elevation-z\" [hidden]=\"!enablePrev\"\n [ngClass]=\"{'prevBtnHover': onHover}\">\n <mat-icon>navigate_before</mat-icon>\n </button>\n </ng-container>\n <ng-container ngIf=\"sliderConfig?.showNavs\">\n <button i18n-aria-label aria-label=\"next\" name=\"content-forward-button\" mat-mini-fab (click)=\"showNext()\"\n color=\"\" class=\"nextBtn mat-elevation-z\" [ngClass]=\"{'nextBtnHover': onHover}\"\n [hidden]=\"!enableNext \|\| loadStatus === 'fetching'\">\n <mat-icon>navigate_next</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <div class=\"nextLoading\" ngIf=\"loadStatus === 'fetching'\">\n <mat-spinner></mat-spinner>\n </div> --> \n</section>\n\n<div class=\"dots-container {{isMobile? sliderConfig?.responsive?.dotsAlign : sliderConfig?.dotsAlign}}\" \nngIf=\"(isMobile && sliderConfig?.responsive?.showDots) \|\| (!isMobile && sliderConfig?.showDots)\">\n <!-- <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" -->\n <span class=\"dot\" [ngClass]=\"{ active: j === activeNav }\" ngFor=\"let slide of bottomDotsArray; let j = index\" (click)=\"slideTo(j)\"></span>\n</div>","styles":[".horizontal-scroll-container{position:relative;width:100%;width:inherit}.nextBtn,.nextLoading,.prevBtn{position:absolute;top:50%;transform:translateY(-50%);z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;justify-content:center}.nextBtn,.prevBtn{border-radius:50%;background-color:#1b2133!important;color:#fff!important}.border-radius-xs{border-radius:8px!important}.prevBtn{left:0}.nextBtn{right:0}.nextLoading{padding:0;right:0}.navigation.bottom-right .prevBtn{left:unset;right:56px;bottom:-44px;top:unset}.navigation.bottom-right .nextBtn{left:unset;right:8px;bottom:-44px;top:unset}.navigation.bottom-center .prevBtn{left:calc(50% - 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-center .nextBtn{left:calc(50% + 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-left .prevBtn{left:8px;right:unset;bottom:-44px;top:unset}.navigation.bottom-left .nextBtn{left:62px;right:unset;bottom:-44px;top:unset}.navigation.middle-inline .prevBtn{left:30px}.navigation.middle-inline .nextBtn{right:30px}.horizontal-scroll-content{overflow-y:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;height:100%;flex-wrap:nowrap;display:flex;align-items:stretch;-ms-overflow-style:none;scrollbar-width:none}.horizontal-scroll-content::-webkit-scrollbar{width:0;height:0}.dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.dots-container.left{align-items:start;justify-content:start}.dots-container.right{align-items:end;justify-content:end}.dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}.dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}"]}]}],"members":{"loadStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"onHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"sliderConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"loadNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"widgetsLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"defaultMaxWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"stripConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"horizontalScrollElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["horizontalScrollElem",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":45,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showPrev":[{"__symbolic":"method"}],"showNext":[{"__symbolic":"method"}],"updateNavigationBtnStatus":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"getBottomDotsArray":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":11,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-sliders","template":"<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}} {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius \|\| '12px'}\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n class=\"banner-overlay {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" \n ngFor=\"let slide of widgetData; let i = index\" \n [hidden]=\"i !== currentIndex\" \n [ngStyle]=\"{\n 'border-width': isMobile? styleData?.responsive?.imageBorderWidth : styleData?.imageBorderWidth,\n 'border-color': isMobile? styleData?.responsive?.imageBorderColor : styleData?.imageBorderColor,\n 'border-style': isMobile? styleData?.responsive?.imageBorderStyle: styleData?.imageBorderStyle}\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"{{type === 'atictitopbanner' ? 'banner-image' : 'bannerimage-mdo'}}\" />\n </div>\n </a>\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n class=\"banner-title text-truncate {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' \|\| !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"banner-container-solo {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\" ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [queryParams]=\"widgetData[currentIndex].queryParams \|\| {}\"\n [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\n <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n <div class=\"banner-meta\">\n <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n <button ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\">❮</a>\n </button>\n <button ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">❯</a>\n </button>\n\n</div> -->\n<ng-container ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container>\n","styles":[".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:768px) and (max-width:1024px){.banner-container{min-height:280px!important}}@media screen and (min-width:768px) and (max-width:1279px){.atictitopbanner{height:280px!important}}@media screen and (min-width:1280px){.atictitopbanner{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:380px;display:block;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner .bannerimage-mdo{width:100%;display:block;height:inherit;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px;background:#f5f6fa;-o-object-fit:cover;object-fit:cover;height:inherit}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}@media screen and (min-width:320px) and (max-width:769px){.navigation.middle-inline .prev{left:6%!important}}@media screen and (min-width:820px) and (max-width:1023px){.navigation.middle-inline .prev{left:6%!important}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"styleData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":26,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":27,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"reInitiateSlideInterval":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"openInNewTab":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵh"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵh"}]}]}],"members":{}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[wsUtilsNavigation]"}]}],"members":{"wsUtilsNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"openInNewTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"routeUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":9,"character":3},"arguments":["attr.routerLink"]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":10,"character":3},"arguments":["mousedown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵj"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵj"}]}]}],"members":{}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":18,"character":1},"arguments":[{"selector":"[wsUtilsImageResponsive]"}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"srcBindUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":24,"character":3},"arguments":["src"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/layout","name":"BreakpointObserver","line":29,"character":32}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSrc":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-data-points","template":"<div class=\"w-full metrics-web\" ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{obj.value \| number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full pl-5 margin-top-l\" ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <!-- <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div> -->\n <div ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" ngIf=\"!(obj && obj?.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" ngIf=\"i+1 !== objectData?.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n {{obj?.value \| number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" ngFor=\"let chunk of customArray\">\n <div ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" ngIf=\"(item && item.value)\">\n {{item?.value \| number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"pageLayout === 'nlw' && !isDataLoading\">\n <div class=\"stats-header\">\n <div class=\"flex items-center justify-center stats-title\">\n <span class=\"my-arrow\">❮</span>\n <span class=\"my-arrow less-opacity1\">❮</span>\n <span class=\"my-arrow less-opacity2\">❮</span>\n <span class=\"px-4\">{{title}}</span>\n <span class=\"my-arrow less-opacity2\">❯</span>\n <span class=\"my-arrow less-opacity1\">❯</span>\n <span class=\"my-arrow\">❯</span>\n </div>\n </div>\n <div class=\"nlw-status\" ngIf=\"layoutType === 'nlwRow'\">\n <div class=\"flex space-around pt-5\">\n <div ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"nlw-status-mob\" ngIf=\"layoutType === 'nlwCol'\">\n <div ngFor=\"let obj of objectData; index as i\" class=\"flex-container\">\n <div class=\"nlw-div singleFlexeRow flex-item {{i === 0 ? '' : 'divider'}} \">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n","styles":["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.stats-header{display:flex;align-items:center;justify-content:center}.stats-title{background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px;margin-top:-20px;z-index:90}.my-arrow{font-size:12px}.less-opacity1{opacity:.75}.less-opacity2{opacity:.5}.nlw-status{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px}.nlw-status-mob{background:linear-gradient(173.01deg,#266eeb -5.09%,#133f8b 133.16%);margin-top:-22px;padding-top:32px}.nlw-div{padding:0 16px;margin:10px 0 16px}.divider{border-left:1.6px solid #a6a4a4}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (min-width:768px) and (max-width:1023px){.v2-icon-contaier{height:25px;width:25px}.v2-objIcon{width:14px}.v2-value{font-size:14px!important;line-height:14px!important;padding-left:0!important}.v2-label{font-size:9px!important;line-height:9px!important;padding-left:0!important}.v2-dot{width:6px!important;height:6px!important;border:1px solid #fff!important}.v2-border{width:109px!important}}@media screen and (min-width:1023px) and (max-width:1280px){.customdiv{margin-left:6%;margin-top:.6em!important}.v2-icon-contaier{height:34px;width:34px}.v2-objIcon{width:20px}.v2-value{font-size:16px!important;line-height:16px!important;padding-left:0!important}.v2-label{font-size:10px!important;line-height:10px!important;padding-left:0!important}.v2-dot{width:8px!important;height:8px!important;border:1px solid #fff!important}.v2-border{width:122px!important}}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"pageLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"createCustomArray":[{"__symbolic":"method"}],"getInsiteData":[{"__symbolic":"method"}],"getStats":[{"__symbolic":"method"}],"converToIndianSystem":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":22,"character":18}]}],"fetchSearchData":[{"__symbolic":"method"}],"fetchAnnouncementsData":[{"__symbolic":"method"}],"fetchTrainingDetails":[{"__symbolic":"method"}],"fetchLearner":[{"__symbolic":"method"}],"fetchLeaderboard":[{"__symbolic":"method"}],"fetchMdoUsers":[{"__symbolic":"method"}],"fetchNwlStats":[{"__symbolic":"method"}],"fetchInsightsData":[{"__symbolic":"method"}],"fetchUserProgress":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵn"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵn"}]}]}],"members":{}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-skeleton-loader","template":"<div [ngClass]=\"bindingClass\" class=\"skeleton-box\" [style.height]=\"height\" [style.width]=\"width\"></div>","styles":[".skeleton-box{position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:1s infinite shimmer;content:\"\"}@keyframes shimmer{100%{transform:translateX(100%)}}"]}]}],"members":{"bindingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-calender","template":"<div class=\"calendar-header flex flex-row c-padding center gap-2\" ngIf=\"showHeader\">\n <div class=\"pt-3\">{{ objectData?.title }}:</div>\n <div class=\"choose-month\">\n <mat-form-field class=\"custom-month\">\n <mat-select matNativeControl panelClass=\"custom-select\" [ngModel]=\"selectedMonth\" (ngModelChange)=\"selectMonth($event)\" class=\"month-select\">\n <span ngFor=\"let month of monthsDropdown\">\n <mat-option [value]=\"month\">{{month}}</mat-option>\n </span>\n </mat-select>\n </mat-form-field>\n </div>\n</div>\n<div ngIf=\"layoutType==='grid'\">\n <div ngFor=\"let obj of getKeys(trainings); let i = index\">\n <sb-uic-calender-day [day]=\"trainings[obj]\"\n [layoutType]=\"layoutType\"\n [objectData]=\"objectData\"\n [dataLoading]=\"isDataLoading\"\n [eventDate]=\"obj\"\n [rowId]=\"i\">\n </sb-uic-calender-day>\n </div> \n</div>\n<div ngIf=\"layoutType==='row'\">\n <div ngFor=\"let obj of getKeys(trainings); let j = index\">\n <sb-uic-calender-day [day]=\"trainings[obj]\"\n [layoutType]=\"layoutType\"\n [objectData]=\"objectData\"\n [dataLoading]=\"isDataLoading\"\n [eventDate]=\"obj\"\n [rowId]=\"j\">\n </sb-uic-calender-day>\n </div>\n</div>","styles":[".calendar-header{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.c-padding{padding:0}.center{align-items:center}::ng-deep .custom-month .mat-form-field-wrapper{padding-bottom:0!important;width:145px}::ng-deep .custom-month .mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value{width:89%}::ng-deep .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value-text{font-weight:600}@media screen and (max-width:768px){.c-padding{padding:0 1.25rem 1rem}.calendar-header{font-size:15px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"defaultDays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"fullCalendor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":37,"character":32},{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getInsiteData":[{"__symbolic":"method"}],"getKeys":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}],"convertTo12HourFormat":[{"__symbolic":"method"}],"getDays":[{"__symbolic":"method"}],"getDaysInMonth":[{"__symbolic":"method"}],"getMonthsDropdownData":[{"__symbolic":"method"}],"selectMonth":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-calender-day","template":"<div ngIf=\"layoutType==='grid' && !dataLoading\">\n <div class=\"p-3 event-day my-3\"\n [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n \n <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n <div class=\"event-date\">\n <div class=\"currentDay\"\n [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n {{formatDate(eventDate, 'web')}}\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"day.length\">\n <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n ngFor=\"let event of day; let i = index\" >\n <div>\n <div class=\"flex flex-row item-center gap-10 pb-2\">\n <div class=\"flex item-center gap-1 row1 col1 range-width\">\n <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n <div>{{event.startTime}} to {{event.endTime}}</div>\n </div>\n <div class=\"flex item-center col1 \">{{event.title}}</div>\n </div>\n <div class=\"flex flex-row item-center gap-10\">\n <div class=\"flex item-center gap-1 row1 col1\" ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n </div>\n <div class=\"flex item-center col1\">\n <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n <div class=\"flex item-center\">{{event.location}}</div>\n </div>\n </div>\n </div>\n <div class=\"visit-link flex gap-2\"\n ngIf=\"event?.registrationLink\">\n <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n </div>\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"!day.length\">\n No trainings.\n </div>\n </div>\n </div>\n</div>\n\n<div ngIf=\"layoutType==='row' && !dataLoading\">\n <div class=\"pl-5 pr-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n >\n <div class=\"flex item-center gap-4\">\n <div class=\"event-date\">\n <div class=\"flex flex-col\">\n <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n <div class=\"mob-currentDay\"\n [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n {{formatDate(eventDate, 'mob').split(' ')[1]}}\n </div>\n <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n </div>\n </div>\n <div class=\"details w-full\" ngIf=\"day.length\">\n <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n <div>\n <div class=\"flex pb-2\">{{event.title}}</div>\n <div class=\"flex pb-1\">\n <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n <div>{{event.startTime}} to {{event.endTime}}</div>\n </div>\n <div class=\"flex pb-1\" ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n </div>\n <div class=\"flex\">\n <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n <div class=\"flex item-center\">{{event.location}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"details w-full p-3 flex no-data\" ngIf=\"!day.length\" \n [style.backgroundColor]=\"objectData?.mobileBackground\">\n No trainings.\n </div>\n </div> \n </div> \n</div>\n\n<!-- skeleton loaders -->\n<div ngIf=\"dataLoading\">\n <div ngIf=\"layoutType==='grid'\">\n <div class=\"hidden md:block\">\n <div class=\"p-3 event-day my-3\"\n [style.backgroundColor]=\"'#FFF'\">\n <div class=\"flex item-top gap-8\">\n <div class=\"event-date\">\n <div class=\"currentDay\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n <div class=\"details w-full\">\n <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n <div>\n <div class=\"flex flex-row item-center gap-20 pb-2\">\n <div class=\"flex item-center gap-2 row1 col1\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex item-center col1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n <div class=\"flex flex-row item-center gap-20 pb-2\">\n <div class=\"flex item-center gap-2 row1 col1\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex item-center col1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n </div>\n <div class=\"visit-link flex gap-2\">\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div ngIf=\"layoutType==='row'\">\n <div class=\"block md:hidden\">\n <div class=\"p-5\" \n [style.backgroundColor]=\"'#FFFFFF'\">\n <div class=\"flex item-center gap-4\">\n <div class=\"event-date\">\n <div class=\"flex flex-col\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'90px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n <div class=\"details w-full\">\n <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n <div>\n <div class=\"flex pb-2\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n <div class=\"flex pb-1 gap-2\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex pb-1 gap-2\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex gap-2\">\n <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex item-center\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader> \n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>","styles":[".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.range-width{min-width:234px}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center;border-radius:10px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"day":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"rowId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"eventDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":20,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"openLink":[{"__symbolic":"method"}],"formatDate":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":68,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":63,"character":1},"arguments":[{"selector":"sb-uic-common-strip","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])\">\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 <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])\"\n class=\"ml-4 view-more ws-mat-default-text\">\n <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1\" [routerLink]=\"stripsResultDataMap[key]?.viewMoreUrl?.path\"\n [queryParams]=\"stripsResultDataMap[key]?.viewMoreUrl?.queryParams\">\n <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\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\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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n <ng-template mat-tab-label>\n <span>{{ translateLabels(tab?.label, 'home') }}  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n <div>\n <!-- <ng-container [ngTemplateOutlet]=\"loader\" ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n </ng-container> -->\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n (!tab?.widgets \|\| !tab?.widgets?.length))\">\n <ng-container ngIf=\"tab?.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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n <ng-container ngIf=\"(tab?.fetchTabStatus === 'done' \|\| tab?.widgets?.length)\">\n <ng-container ngIf=\"!tab?.tabLoading\">\n\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of tab?.widgets\| slice:0:(tab?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\n </mat-tab-group>\n </ng-container>\n <ng-container ngIf=\"!stripsResultDataMap[key].tabs \|\| !stripsResultDataMap[key].tabs.length\">\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 <div class=\"\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container ngFor=\"let widget of stripsResultDataMap[key]?.widgets\| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets \|\| defaultMaxWidgets); trackBy: tracker\">\n <!-- <ng-container ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n <!-- <ng-container ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n [sbUiResolverWidget]=\"widget\"></ng-container> -->\n <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n <!-- </ng-container> -->\n </ng-container>\n </sb-uic-horizontal-scroller-v2>\n </div>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":74,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":95,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":97,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":98,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":99,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":100,"character":23},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":104,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"CommonMethodsService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-announcements","template":"<div class=\"w-full\" ngIf=\"layoutType === 'web' && !isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : expand && expanded ? 'exp-key-list' : 'key-list'}}\" ngIf=\"objectData?.list?.length\">\n <div ngFor=\"let item of objectData?.list; let i = index\">\n <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n <div class=\"more-or-less\" ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" ngIf=\"!item?.expanded\">View more</div>\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" ngIf=\"item?.expanded\">View less</div>\n </div>\n </div>\n </div> \n </div>\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" ngIf=\"!objectData?.list?.length\">\n <div class=\"text-center\">No announcements yet!</div>\n </div>\n </div>\n</div>\n\n<ng-container ngIf=\"!mobileHeight && expand\">\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" ngIf=\"!expanded\">\n <mat-icon>expand_more</mat-icon>\n </div>\n <div (click)=\"showMoreOrLess()\" class=\"announcements-expand\" ngIf=\"expanded\">\n <mat-icon>expand_less</mat-icon>\n </div>\n</ng-container>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'mobile'\">\n <div class=\"flex item-center key-logo \">\n <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n <div class=\"flex key-button gap-3\">\n <div>\n <img [src]=\"objectData?.mobileIcon\">\n </div>\n <div>{{objectData?.title}}</div> \n <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n </div> \n </div>\n </div>\n</div>\n\n<div class=\"w-full\" ngIf=\"layoutType === 'web' && isLoading\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo pt-1\">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"{{mobileHeight ? 'mob-key-list' : 'key-list'}}\" > \n <div class=\"key-list-item mb-4\" \n ngFor=\"let item of[0,1,2,3,4]; let i = index\"\n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content un-expand\">\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"py-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'350px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n</div>\n","styles":[".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{height:380px;overflow:auto}.exp-key-list{height:100%;overflow:auto}.mob-key-list{height:calc(100vh - 252px);overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}.announcements-expand{width:32px;height:32px;position:relative;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;left:50%;right:50%;top:-16px;cursor:pointer}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"mobileHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"openDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"fetchData":[{"__symbolic":"method"}],"viewMoreOrLess":[{"__symbolic":"method"}],"openAnnouncements":[{"__symbolic":"method"}],"showMoreOrLess":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-top-learners","template":"<div class=\"flex flex-center\">\n <div>\n <div class=\"title-border\"></div>\n <div class=\"title\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n <div class=\"title-border\"></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\">\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)}}\n </div>\n <div class=\"flex flex-col gap-1\">\n <div class=\"name-sec\" ngIf=\"obj?.fullname?.length >= 24\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.fullname}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.fullname}}\n </div>\n <div class=\"name-sec\" ngIf=\"obj?.fullname?.length < 24\">\n {{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?.org_name?.length >= 32\"\n #tooltip=\"matTooltip\"\n [matTooltipClass]=\"'below'\"\n matTooltip=\"{{obj?.org_name}}\"\n [matTooltipPosition]=\"'below'\">\n {{obj?.org_name}}\n </div>\n <div class=\"designation-sec\" ngIf=\"obj?.org_name?.length < 32\">{{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\">\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,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.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{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-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(204,204,204,.8);border-radius:10px}@media screen and (max-width:768px){.user-box{width:343px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getRank":[{"__symbolic":"method"}],"getColor":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-cbp-plan","template":"<div class=\"w-full\">\n <div class=\"flex item-center cbp-logo\">\n <div class=\"cbp-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n \n <div class=\"cbp-list-container\" ngIf=\"contentdata.length\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <ng-container ngIf=\"contentdata.length; else msgTemp\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"cbp-list-item\"\n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.color]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"cbp-item-title\">{{item?.title}}</div>\n <div class=\"flex download-sec\">\n <div class=\"flex gap-3 cbp-download\" (click)=\"downloadCBPPlan(item)\">\n <img [src]=\"objectData?.downloadIcon\">Download\n </div>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </ng-container>\n <ng-template #msgTemp>\n <div class=\"padding-bottom-m\">\n {{ translateLabels(objectData?.noData, 'home') }}\n </div>\n </ng-template>\n </div>\n</div>","styles":[".cbp-logo{align-items:center;justify-content:center}.cbp-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px}.cbp-list-container{border:1px solid #ccc;padding:40px 25px 0;border-radius:12px;margin-top:-20px}.cbp-list-item{padding:16px;border:1px solid #ccc;border-radius:12px}.cbp-item-title{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;height:48px;padding-bottom:10px}.cbp-mob-icon{font-size:20px;width:20px;height:20px}.download-sec{align-items:center;justify-content:end}.cbp-download{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 8px;border-radius:20px;cursor:pointer;font-family:Lato;font-size:12px;font-weight:700;line-height:20px;text-align:left}[hidden]{display:none!important}.cbp-list-container ::ng-deep.cbp-card{min-height:115px!important;padding-bottom:30px!important}.cbp-list-container ::ng-deep.banner-title{display:none}.cbp-list-container ::ng-deep.prev{font-size:10px;height:20px!important;width:20px!important;margin-left:-11px}.cbp-list-container ::ng-deep.next{font-size:10px;height:20px!important;width:20px!important;margin-right:-11px}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"mobileHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"fetchDataFromApi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"channelId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"openDialog":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":24,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":25,"character":33},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"getFileName":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"downloadCBPPlan":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sbUicScrollableItem]"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3},"arguments":["sbUicScrollableItem"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":8,"character":37,"context":{"typeName":"HTMLElement"},"module":"./lib/_directives/scrollable-item/scrollable-item.directive"}]}]}],"scrollIntoView":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵu"}]}]}],"members":{}},"ɵw":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":10,"character":36},"members":{"buildHammer":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵy"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":24,"character":4},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵi"}],"exports":[{"__symbolic":"reference","name":"ɵy"}],"entryComponents":[{"__symbolic":"reference","name":"ɵy"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":32,"character":15},"useClass":{"__symbolic":"reference","name":"ɵw"}}]}]}],"members":{}},"ɵy":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":11,"character":50},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-sliders-ng-content","template":"<div class=\"{{customBanner ? 'keybanner' : 'banner-container'}} {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius \|\| '12px'}\">\n <ng-container ngIf=\"!loadNgContentData\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n </a>\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container ngIf=\"loadNgContentData\">\n <!-- <div class=\"banner WidgetInstanceId\" ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n <ng-content select=\"[sliderbody]\"></ng-content>\n <!-- </div> -->\n <ng-container ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' \|\| !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n <ng-content select=\"[sliderMeta]\"></ng-content>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' \|\| !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"{{customBanner ? 'keybanner' : 'banner-container-solo'}} margin-top-s\" ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container> -->\n","styles":[".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.keybanner{position:relative;margin:auto}.keybanner.inline-meta{padding-bottom:0!important}.keybanner.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}.keybanner .prev{background-color:#f3962f!important;color:#fff;top:50%;font-size:12px;height:26px!important;width:26px!important}.keybanner .next{top:50%;background-color:#f3962f!important;color:#fff;font-size:12px;height:26px!important;width:26px!important}@media screen and (max-width:768px){.keybanner .prev{top:50px;left:0;background-color:#f3962f!important;color:#fff}.keybanner .next{right:0;margin-right:-16px;top:50px;background-color:#f3962f!important;color:#fff}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"styleData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"loadNgContentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"autoScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"customBanner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"currentIndexValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":21,"character":3},"arguments":["id"]}]}],"currentIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":30,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ValueService","line":31,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"reInitiateSlideInterval":[{"__symbolic":"method"}],"slideTo":[{"__symbolic":"method"}],"openInNewTab":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":9,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ws-cb-widget-card-resource","template":" <!-- <mat-card class=\"card-resource-container mr-5 padding-remove cursor-pointer \" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n <div class=\"flex ml-5 flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <ws-widget-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </ws-widget-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 description-text font-medium ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2>\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card> -->\n","styles":[".card-resource-container{position:relative;width:384px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:450px;margin:20px 8px}.card-resource-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-resource-container .description-text{margin:12px 0;font-weight:400}.card-resource-container .course_logo_box{width:24px;height:24px;background:#fff;border-radius:4px;border:1px solid rgba(0,0,0,.1607843137);box-sizing:border-box}.card-resource-container .course_logo_box img{height:18px;width:18px;padding:2px;display:inline-block}.card-resource-container .course_logo_box p{display:inline-block;vertical-align:top}.card-resource-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-resource-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-resource-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-resource-container mat-card-content{background:#fff}.card-resource-container .card-img{max-height:240px;min-height:240px;width:100%;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px}.card-resource-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-resource-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-resource-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-resource-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-resource-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-resource-container .basic{margin:auto 0}.card-resource-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-resource-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":12,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-cards","template":"<div class=\"widget-card-content-new\">\n <ng-container ngIf=\"widgetData && (((widgetData?.deletedMode \|\| 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n ? false\n : !((widgetData?.intranetMode \|\| 'none') === 'hide' && !!showIntranetContent))\"\n [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) \|\| 'cardPortraitLib')\">\n <ng-container ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n <ng-container ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-home-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoHomeSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-scheduled-assessment'\" [ngTemplateOutlet]=\"cardScheduledAssessment\"></ng-container>\n <ng-container ngSwitchCase=\"'card-scheduled-assessment-skeleton'\" [ngTemplateOutlet]=\"cardScheduledAssessmentSkelton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-progress-portrait-lib'\" [ngTemplateOutlet]=\"cardProgressLib\"></ng-container>\n <ng-container ngSwitchCase=\"'card-progress-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardProgressLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n <ng-container ngSwitchCase=\"'card-providers-lib'\" [ngTemplateOutlet]=\"cardProvider\"></ng-container>\n <ng-container ngSwitchCase=\"'card-providers-lib-skeleton'\" [ngTemplateOutlet]=\"cardProviderSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n <ng-container ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n\n </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n <sb-uic-card-portrait \n [cbPlanMapData]=\"cbPlanMapData\"\n (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n <sb-uic-card-landscape [widgetData]=\"widgetData\" \n [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n <sb-uic-card-landscape\n (contentData)=\"getRedirectUrlData($event)\"\n (triggerTelemetry)=\"raiseCardClick($event)\"\n [widgetData]=\"widgetData\"\n [cbPlanMapData]=\"cbPlanMapData\"\n [isCardLoading]=\"false\">\n </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n <sb-uic-card-wide-v2\n (contentData)=\"getRedirectUrlData($event)\"\n (triggerTelemetry)=\"raiseCardClick($event)\"\n [cbPlanMapData]=\"cbPlanMapData\"\n [isCardLoading]=\"false\"\n [widgetData]=\"widgetData\">\n </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdoHomeSkeleton>\n <sb-uic-card-mdo-channel-v1 [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n <sb-uic-card-mdo-channel [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n <sb-uic-card-mdo-channel [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardScheduledAssessmentSkelton>\n <sb-uic-card-assessment [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardScheduledAssessment>\n <sb-uic-card-assessment [widgetData]=\"widgetData\" (contentData)=\"getRedirectUrlData($event)\" [isCardLoading]=\"false\" ></sb-uic-card-assessment>\n</ng-template>\n<ng-template #cardProgressLibSkeleton>\n <sb-uic-card-progress-portrait-lib \n [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardProgressLib>\n <sb-uic-card-progress-portrait-lib \n [isCardLoading]=\"false\" (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\"></sb-uic-card-progress-portrait-lib>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n<ng-template #cardProvider>\n <sb-uic-provider-card [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n<ng-template #cardProviderSkeleton>\n <sb-uic-provider-card [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-provider-card>\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n <sb-uic-card-portrait-ext \n [cbPlanMapData]=\"cbPlanMapData\"\n (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>\n","styles":[""]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":20,"character":34},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":22,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"getCbPlanData":[{"__symbolic":"method"}],"raiseCardClick":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-card-portrait","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.posterImage\">\n <img mat-card-image [src]=\"widgetData.content.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData.content.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <!-- <ng-container ngIf=\"widgetData?.content?.endDate\">\n <div class=\"cbp-mark\">\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{widgetData?.content?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{widgetData?.content?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"widgetData?.content?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">Over due</p>\n </div>\n </ng-container> -->\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData.content.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData.content.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData.content.sourceName + '_' + widgetData.content.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' \| translate }} -->\n </span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' \| translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData.content.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":31,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":32,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":34,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-user","template":"<mat-card class=\"user-card card-users-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData.content\">\n <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData.content.image\">\n <img mat-card-image [src]=\"widgetData.content.image\"\n loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.image\">\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData.content.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"user_widget flex margin-remove\">\n </div>\n <div [id]=\"'m-c-'+ widgetData.content?.userId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <p class=\"whitespace-normal description-text mat-body-2\">\n {{ widgetData?.content?.description }}\n </p>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>","styles":[".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{width:282px;height:158px;display:block;-o-object-fit:contain;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":22,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":23,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":24,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":26,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-landscape","template":"<ng-container ngIf=\"!isCardLoading\">\n <a class=\"cursor-pointer\" (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable min-height-remove\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [useTranslation]=\"false\" [displayContentType]=\"widgetData.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData.content.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData.content.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">By {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span>\n <!-- <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' \| translate}} {{ (widgetData.content.organisation && widgetData.content.organisation[0]) ? widgetData.content.organisation[0] : 'Karmayogi Bharat' }}</span> -->\n </div>\n\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData.content.avgRating}}</span>\n </div>\n <!-- <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' \| translate }}</span>\n </ng-container> -->\n </div>\n </div>\n </div>\n </mat-card>\n </a>\n</ng-container>\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait mr-2 card-portrait-clickable\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'100px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded margin-right-xs'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:350px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable{min-height:146px!important}.card-portrait-clickable .right-corner-portrait{right:8px;bottom:8px}.card-portrait-clickable:hover{transform:scale(1.02)}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}@media only screen and (max-width:768px){.card-portrait{width:calc(100vw - 66px)}.card-wide-v2{min-height:356px}.card-wide-v2 .imageholder img{border-radius:12px 12px 0 0!important}.cbpwidth{width:calc(100vw - 100px)}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":34,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":35,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":36,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":38,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"getCbPlanData":[{"__symbolic":"method"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-wide","template":"<mat-card class=\"card-wide-lib\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n role=\"link\" i18n-aria-label>\n <div class=\"flex\">\n <div>\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div>\n <div class=\"pl-4 pr-4 w-full\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"mat-subheading-1 title-text break-words ws-mat-text-block-fade-gradient\">\n {{ widgetData?.content?.name }}\n </div>\n\n <div class=\"flex w-full flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n </div>\n </div>\n </div>\n </a>\n</mat-card>\n","styles":[".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-wide-img{width:147px!important;height:117px!important;border-radius:12px!important}.course_widget{max-width:145px}.org-text{width:56%!important}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":28,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":29,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":30,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":32,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-card-mdo-channel","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"channelData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"emitTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":24,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":25,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":26,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":27,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":29,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"channelClick":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-wide-v2","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n <div class=\"imageholder \">\n <img mat-card-image class=\"margin-remove\"\n [src]=\"widgetData?.content?.posterImage \|\| widgetData?.content?.appIcon \| pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\">\n <div class=\"source-div\" [hidden]=\"true\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}</span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n <mat-card-content class=\"mat-text-box mb-0\">\n <div class=\"course_widget flex flex-between margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <ng-container ngIf=\"widgetData?.content?.contentType === 'Resource' \|\| widgetData?.content?.contentType === 'Course' \|\| widgetData?.content?.contentType === 'Module'\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <span class=\"ws-mat-black60-text font-normal mat-caption \">\n {{widgetData?.content?.primaryCategory \|\| widgetData?.content?.contentType}}\n <!-- {{ translateLabel(widgetData.content.primaryCategory \|\| widgetData.content.contentType, 'searchfilters') }} -->\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"flex main_title_box\">\n <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n {{widgetData?.content?.name}}\n </a>\n </p>\n </div>\n\n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle provider\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"org-text\">By \n <!-- {{'cardcontentv2.by' \| translate}} -->\n {{widgetData?.content?.organisation[0] }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon>star</mat-icon>\n <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' \| translate }}</span> -->\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data?.cbpData?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data?.cbpData?.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n</ng-container>\n <ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n </div>\n <mat-card-content class=\"mat-text-box\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end \">\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n \n <div class=\"flex main_title_box\">\n <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <!-- </p> -->\n </div>\n \n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box mr-2\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle mr-2\">\n <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n </ng-container>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-word;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:38px;height:38px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px 12px 11px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}.mb-0{margin-bottom:0!important}@media screen and (min-width:344px) and (max-width:882px){.min-width-763{min-width:300px;overflow:hidden}}@media screen and (min-width:357px) and (max-width:667px){.min-width-763{min-width:340px;overflow:hidden}}@media screen and (min-width:360px) and (max-width:740px){.min-width-763{min-width:325px;overflow:hidden}}@media screen and (min-width:390px) and (max-width:844px){.min-width-763{min-width:358px;overflow:hidden}}@media screen and (min-width:414px) and (max-width:896px){.min-width-763{min-width:380px;overflow:hidden}}@media screen and (min-width:430px) and (max-width:932px){.min-width-763{min-width:395px;overflow:hidden}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"triggerTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":32,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":33,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":34,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":36,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}]}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sb-uic-card-karma-programs","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation();\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" >\n <div class=\"display-contents\">\n <ng-container >\n <a >\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container >\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"flex px-2\">\n <div class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n <sb-uic-skeleton-loader [width]=\"'120px'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:20px 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":34,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":35,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":36,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":37,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":39,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-card-karma-programs-v2","template":"<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"redirectTo(widgetData?.content);$event.stopPropagation()\">\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-row md:flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgSource && widgetData?.content?.imgSource?.length ; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgSource[0]\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.title\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.title\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex items-center\">\n <div class=\"title-container\">\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.title }}\n </div>\n </div>\n <div class=\"flex px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-start margin-remove margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n {{ widgetData?.content?.children?.length}} Programs\n </div>\n </div>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>","styles":[".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:233px;height:233px;max-height:233px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:156px;max-height:156px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}@media screen and (max-width:768px){.card-channels-container{width:100%;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:unset;height:unset;max-height:unset;margin:0;padding:8px!important}.image-container{background-color:#fff;width:155px!important;min-width:155px!important;max-width:155px!important;height:106px!important;max-height:106px!important;border-radius:12px}}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"userData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"raiseTemeletry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":33,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":34,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":35,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":36,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":37,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-provider-card","template":"<!-- <div class=\"providers-container\">\n <div class=\"provider-card\" ngFor=\"let provider of providers; let i = index\" [ngStyle]=\"{'border-top': '72px solid ' + colors[i % colors.length]}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <img [src]=\"provider.logo\" alt=\"{{ provider.name }}\">\n </div>\n </div>\n </div>\n <div class=\"provider-content\">\n <p>{{ provider.name }}</p>\n <div class=\"view-provider-button\" (click)=\"redirectTo(provider)\">View Provider ></div>\n </div>\n </div>\n </div> -->\n <!-- {{widgetData\|json}} -->\n\n\n<ng-container ngIf=\"!isCardLoading\">\n <ng-container ngIf=\"widgetData && widgetData?.content\">\n <div class=\"providers-container\">\n <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid ' + widgetData?.content?.bgColor \|\| 'transparent'}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <ng-container ngIf=\"widgetData?.content?.logoUrl; else defaultImg\">\n <img [src]=\"widgetData?.content?.logoUrl\" alt=\"{{ widgetData?.content?.name }}\">\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.name\" [photoUrl]=\"widgetData?.content?.logoUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n \n </div>\n </div>\n </div>\n <div class=\"provider-content\">\n <p>{{ widgetData?.content?.name }}</p>\n <div class=\"view-provider-button flex items-center\" (click)=\"redirectTo(widgetData.content)\">View Provider \n <mat-icon class=\"\" color=\"accent\">navigate_next</mat-icon></div>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-container>\n<ng-container ngIf=\"isCardLoading\">\n <div class=\"providers-container\">\n <div class=\"provider-card\" [ngStyle]=\"{'border-top': '72px solid gray'}\">\n <div class=\"circle-wrapper\">\n <div class=\"circle\">\n <div class=\"background-circle\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'100%'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded rounded-full'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"w-full p-4 provider-content\">\n <p class=\"w-full pl-4\"> <sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></p>\n <div class=\"w-full pl-4 view-provider-button\" (click)=\"redirectTo(widgetData.content)\"><sb-uic-skeleton-loader [width]=\"'200px'\" [height]=\"'12px'\" class=\"w-full h-full\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></div>\n </div>\n </div>\n </div>\n</ng-container>","styles":[".providers-container{display:flex;justify-content:center}.provider-card{height:168px;width:245px;margin:20px 8px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#fff;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:1}.circle-wrapper{position:absolute;display:flex;justify-content:center;top:-50px;z-index:1}.circle{width:90px;height:90px;border-radius:50%;background-color:#f0f0f0;box-shadow:0 4px 8px rgba(0,0,0,.1)}.background-circle{position:relative;display:flex;justify-content:center;align-items:center;height:80px;width:80px;background-color:#fff;border-radius:50%;border:5px solid #fff;margin:0 auto}.background-circle img{width:66px;height:50px;background-size:cover;background-position:center;position:relative}.provider-content{padding:16px;text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.provider-content p{font-size:14px;font-weight:700;font-family:Lato,sans-serif;margin-bottom:8px;line-height:16.8px;word-wrap:break-word;white-space:normal;height:51px}.view-provider-button{color:#1b4ca1;font-size:14px;font-family:Lato,sans-serif;cursor:pointer;transition:color .3s}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"randomColorApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":19,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"setRandomColor":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"sb-uic-card-portrait-ext","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove cursor-pointer {{widgetData?.cardCustomeClass}}\" [ngClass]=\"{\n greyOut:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\" (click)=\"(showIntranetContent \|\| !isLiveOrMarkForDeletion) && showSnackbar()\">\n <div class=\"display-contents\" [ngClass]=\"{\n disableClick:\n widgetData?.deletedMode === 'greyOut' && !isLiveOrMarkForDeletion\n ? true\n : widgetData?.intranetMode === 'greyOut' && showIntranetContent\n }\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\"\n role=\"link\" i18n-aria-label>\n <ng-container ngIf=\"!isCardFlipped\">\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Content expired or deleted\" i18n-matTooltip\n matTooltip=\"Content may be expired or deleted\" ngIf=\"!isLiveOrMarkForDeletion\"></div>\n <div class=\"status-danger\" role=\"note\" i18n-aria-label aria-label=\"Intranet content\" i18n-matTooltip\n matTooltip=\"Available only in Company's network\"\n ngIf=\"widgetData?.intranetMode === 'greyOut' && showIntranetContent\"></div>\n <button ngIf=\"showFlip\" class=\"detail-button ws-mat-primary-lite-background-op30\" mat-icon-button\n (click)=\"isCardFlipped = true\" aria-label=\"Details\" i18n-aria-label=\"Details \| Click to see details\">\n <mat-icon>flip_to_back</mat-icon>\n </button>\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-container ngIf=\"!widgetData.content.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n <div class=\"source-div\" style=\"display: none;\">\n <img [src]=\"widgetData?.content?.contentPartner?.link\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <ng-container ngIf=\"widgetData?.content?.cbPlanEndDate\">\n <div class=\"cbp-mark\">\n <span>{{widgetData?.content?.cbPlanEndDate \| date: 'd MMM, y'}}</span>\n </div>\n </ng-container>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.contentId] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2 \">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.contentId]\n }}\"></ng-container>\n </ng-container>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <!-- <div class=\"flex flex-end course_v2\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type [useTranslation]=\"false\" i18n-title title=\"Content Type\" ngIf=\"widgetData.content?.topic\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"'External Course'\">\n \n </sb-uic-display-content-type>\n </div> -->\n </div>\n <div [id]=\"'m-c-'+ widgetData?.content?.contentId\"\n class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\" [matTooltip]=\"widgetData?.content?.name\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box\">\n <img [src]=\"widgetData?.content?.contentPartner?.link \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.contentId)\" />\n </div>\n <!-- <span class=\"org-text\">{{'cardcontentv2.by' \| translate}} -->\n <span class=\"org-text\">By  {{ (widgetData?.content?.contentPartner?.contentPartnerName) ? widgetData?.content?.contentPartner?.contentPartnerName : 'Karmayogi Bharat' }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\" ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon class=\"mr-1\">star</mat-icon>\n <span>{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' \| translate }}</span> -->\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostEnrolled' \| translate }} -->\n </span>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <span class=\"most-enrolled-text margin-left-xs\">\n <!-- {{ 'cardcontentv2.mostTrending' \| translate }} -->\n </span>\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n <ng-container ngIf=\"isCardFlipped\">\n <div class=\"flex items-center\">\n <!-- <h2 class=\"mat-subheading-2 flex-1 min-w-0 margin-remove-bottom\" i18n>{{'cardcontentv2.reason' \| translate}}</h2> -->\n <button mat-icon-button (click)=\"isCardFlipped = false\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <p class=\"text-justify mat-body-1\">\n {{ widgetData?.content?.reason }}\n </p>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-standard-container mr-5 padding-remove\" >\n <div class=\"display-contents\" >\n <ng-container ngIf=\"!isCardFlipped\">\n <mat-card-content class=\"min-top\">\n <div style=\"position: relative; z-index: 1;\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"padding-m\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-s'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle margin-top-m\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"org-text\"> <sb-uic-skeleton-loader [width]=\"'111px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-m\">\n <div class=\"flex flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'45px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded margin-top-m'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </div>\n </mat-card>\n </ng-container>\n \n <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>","styles":[".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.card-standard-container{position:relative;width:245px;min-height:300px;height:300px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;margin:20px 8px}.card-standard-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-standard-container ::ng-deep .mat-progress-bar{height:8px!important}.card-standard-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-standard-container .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-standard-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-standard-container .course_logo_box p{display:inline-block;vertical-align:top}.card-standard-container .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{background:#fff}.card-standard-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-standard-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-standard-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-standard-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-standard-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.width-238{width:238px!important}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.tooltiptext{visibility:hidden;width:90px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:4px 0;position:absolute;z-index:1;top:25px;left:-32px;font-size:12px}.title-text:hover .tooltiptext{visibility:visible}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":31,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":32,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":34,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-card-assessment","template":"<ng-container ngIf=\"!isCardLoading\">\n\t<mat-card\n\t\tclass=\"card-assessment card-scheduled-assessment card-users-container padding-remove cursor-pointer mr-4\">\n\t\t<a (click)=\"getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container ngIf=\"widgetData\">\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container ngIf=\"widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<img mat-card-image class=\"margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t[src]=\"widgetData?.content?.posterImage \| pipePublicURL\"\n\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\">\n\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t<ng-container ngIf=\"!widgetData?.content?.posterImage\">\n\t\t\t\t\t\t\t\t\t\t<ng-template #defaultImg>\n\t\t\t\t\t\t\t\t\t\t\t<img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"card-wide-img ws-mat-primary-lite-background margin-remove assess-img\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"widgetData?.content?.name\" />\n\t\t\t\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex title-text mat-subheading-1\">\n\t\t\t\t\t\t\t\t\t\t{{ widgetData?.content?.name }}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-s font-normal mat-caption sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"course_logo_box\">\n\t\t\t\t\t\t\t\t\t\t\t<img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n\t\t\t\t\t\t\t\t\t\t\t\t[alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<span class=\"sub-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t{{ (widgetData?.content?.organisation &&\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0]) ?\n\t\t\t\t\t\t\t\t\t\t\twidgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer padding-m\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<span>{{ startCountdown(widgetData?.content?.batch) }}</span>\n\t\t\t\t\t\t\t\t\t\t<div class=\"flex flex-row\" ngIf=\"daysPending\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-span\">Assessment starts in</span>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-s\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"big-text\"><b>{{ days }}</b> <span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">days</span> </span>   :   <span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"big-text\"><b>{{ hours }} </b><span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">hours</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>   :   <span class=\"big-text\"> <b>{{ minutes }}</b> <span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"small-text\">minutes</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.startDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\| date: 'dd MMM yyy HH:mm' }}</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div ngIf=\"!daysPending\" class=\"flex flex-row\"> \n\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-span\">Assessment ends on </span>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-s\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"start-btn\">Start Assessment</span> \n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"time-span flex items-center justify-center\">{{widgetData?.content?.batch?.endDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\| date: 'dd MMM yyy HH:mm' }}</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-container>\n\n<ng-container ngIf=\"isCardLoading\">\n\t<ng-container [ngTemplateOutlet]=\"skeltonLoader\"></ng-container>\n</ng-container>\n\n<ng-template #skeltonLoader>\n\t<mat-card\n\t\tclass=\"card-assessment card-scheduled-assessment card-users-container padding-remove cursor-pointer mr-4\">\n\t\t<a>\n\t\t\t<div class=\"display-contents\">\n\t\t\t\t<ng-container>\n\t\t\t\t\t<mat-card-content>\n\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-row padding-s\">\n\t\t\t\t\t\t\t\t<div class=\"flex image-container\">\n\t\t\t\t\t\t\t\t\t<ng-container>\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'300px'\"\n\t\t\t\t\t\t\t\t\t\t\t[height]=\"'155px'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"flex title-container flex-col margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-remove margin-top-l font-normal\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- <span class=\"text-center\"><sb-uic-skeleton-loader [width]=\"'90px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader> </span> -->\n\t\t\t\t\t\t\t<mat-card-footer class=\"assessment-card-footer col-row padding-l\">\n\t\t\t\t\t\t\t\t<div class=\"flex flex-1 items-center justify-center col-row margin-top-m\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex margin-right-m\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"flex\">\n\t\t\t\t\t\t\t\t\t\t<sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\"\n\t\t\t\t\t\t\t\t\t\t\t[bindingClass]=\"'flex rounded br-8'\"></sb-uic-skeleton-loader>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-card-footer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mat-card-content>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</a>\n\t</mat-card>\n</ng-template>","styles":[".card-assessment{width:100%;min-height:190px;box-sizing:border-box;min-width:340px;margin-top:16px;margin-right:12px;border-radius:12px}.image-container{width:145px;height:120px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}.image-container img{border-radius:8px;opacity:1;background-size:100%;width:145px!important;height:120px!important;display:flex}.title-container{width:155px;margin-left:12px}.title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:48px;font:600 14px/24px Montserrat}.sub-title-text{width:90%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;margin-right:4px;box-shadow:0 2px 1px -1px rgb(0 0 0 / 20%),0 1px 1px 0 rgb(0 0 0 / 14%),0 1px 3px 0 rgb(0 0 0 / 12%)}.course_logo_box img.source-icon{height:28px;width:28px;padding:5px;display:inline-block}.mat-card-footer{margin:0!important}.time-span{padding:2px 8px;color:#fff;border-radius:4px;text-align:center;font-size:12px;background-color:green;width:100px}span.start-span{border-radius:50px;border:2px solid rgba(0,0,0,.08);font-size:12px;text-align:center;position:absolute;bottom:0;width:140px;left:50%;margin-left:-70px;background-color:#fff;margin-bottom:62px;margin-right:8px}.assessment-card-footer{background:rgba(239,149,30,.16)!important;text-align:center;box-sizing:border-box;border-radius:0 0 8px 8px}.start-btn{background:#1b4ca1!important;color:#fff;font-size:14px;font-weight:600;border-radius:25px;text-align:center;padding:4px 12px}.dots-container{display:none}.big-text{font-size:16px}.small-text{font-size:12px!important;vertical-align:top;margin-left:4px}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":32,"character":33},{"__symbolic":"reference","name":"WidgetContentLibService"}]}],"ngOnInit":[{"__symbolic":"method"}],"startCountdown":[{"__symbolic":"method"}],"updateCountdown":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}]}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"sb-uic-card-progress-portrait-lib","template":"<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"card-portrait card-progress-portrait-lib cursor-pointer\" [ngClass]=\"widgetData?.cardCustomeClass ? widgetData?.cardCustomeClass : ''\" (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" >\n <div class=\"course_widget portrait_widget flex margin-bottom-xs\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"flex flex-end flex-middle course_port\">\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n <sb-uic-display-content-type i18n-title title=\"Content Type\" ngIf=\"widgetData?.content?.primaryCategory\"\n class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n ?'Module'\n :widgetData?.content?.primaryCategory\">\n </sb-uic-display-content-type>\n </div>\n </div>\n <div class=\"flex\" [ngClass]=\"{'retiredCards': widgetData?.content?.status === 'Retired' && widgetData?.content?.completionPercentage === 100}\">\n <div class=\"margin-right-s\">\n <ng-container ngIf=\"widgetData?.content?.posterImage\">\n <div class=\" img-block-portrait position-relative\">\n <img mat-card-image [src]=\"widgetData?.content?.posterImage \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{ (widgetData?.content?.duration \|\| 120)\| pipeDurationTransform: 'hms' }}\n </span>\n </div>\n <div class=\"duration-box right-corner-portrait\" ngIf=\"widgetData?.content?.programDuration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\">\n {{widgetData?.content?.programDuration}} {{widgetData?.content?.programDuration === 1 ? 'day' : 'days'}}\n </span>\n </div>\n <ng-container ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier] && cbPlanMapData[widgetData?.content?.identifier]?.contentStatus < 2\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container ngIf=\"!widgetData?.content?.posterImage\">\n <ng-container ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.appIcon \| pipePublicURL\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-container>\n <ng-template #defaultImg>\n <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n class=\"card-image ws-mat-primary-lite-background margin-remove\"\n [alt]=\"widgetData?.content?.name\" />\n </ng-template>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"portrait-subheading mat-subheading-2 title-text\">\n {{ widgetData?.content?.name }}\n </div>\n <div class=\"flex w-full flex-middle\">\n <div class=\"portrait_course_logo_box margin-right-xs\">\n <img [src]=\"widgetData?.content?.creatorLogo \| pipePublicURL \" class=\"source-icon\" loading=\"lazy\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <span class=\"portrait-org-name font-normal mat-caption\">{{'cardcontentv2.by' \| translate}} {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n </div>\n\n </div>\n </div>\n <ng-container ngIf=\"widgetData?.content?.completionPercentage < 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-between\" >\n <div class=\"progress-block\" >\n <div class=\"completed-time\">\n <mat-icon class=\"mat-icon schedule margin-right-xs\">schedule</mat-icon>\n <span>{{widgetData?.content?.completionPercentage}}%</span>\n </div>\n <div>\n <ng-container ngIf=\"widgetData?.content?.completionStatus < 2\">\n <sb-uic-content-progress class=\"progress-bar-new\" [customClassName]=\"'course-progress-bar'\" ngIf=\"widgetData?.content?.identifier\"\n [contentId]=\"widgetData?.content?.identifier\" [progress]=\"widgetData?.content?.completionPercentage\"\n [progressType]=\"'percentage'\">\n </sb-uic-content-progress>\n </ng-container>\n </div>\n </div>\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between\" [routerLink]=\"['/app/toc/',widgetData?.content?.identifier,'overview']\"\n [queryParams]=\"{primaryCategory: widgetData?.content?.primaryCategory}\" [state]=\"widgetData?.stateData\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}\">\n <span class=\"textwrap margin-right-xs\">\n {{!widgetData?.content?.completionPercentage ? translateLabels('start', 'cardcontentv2') : translateLabels('resume', 'cardcontentv2')}}</span>\n <img class=\"stats-icon\" height=\"20\" width=\"20\" src=\"/assets/icons/home/play.svg\">\n </button>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"widgetData?.content?.completionPercentage === 100\">\n <div class=\"flex flex-align-end progress-wrapper flex-end mt-1\">\n <div class=\"progress-btn\">\n <button class=\"resume-btn flex flex-middle flex-between view-btn\" [ngClass]=\"{'disable-btn': downloadCertificateLoading \|\| widgetData?.content?.issuedCertificates?.length === 0}\" (click)=\"!downloadCertificateLoading && downloadCertificate(widgetData?.content);$event.stopPropagation()\" \n [matTooltipPosition]=\"'below'\"\n [matTooltipDisabled]=\"(translateLabels('viewCertificate', 'cardcontentv2')).length < 11\"\n matTooltip=\"{{'cardcontentv2.viewCertificate' \| translate }}\">\n <span class=\"margin-right-xs textwrap\">{{'cardcontentv2.viewCertificate' \| translate }}</span>\n <img class=\"stats-icon\" ngIf=\"!downloadCertificateLoading\" height=\"20\" width=\"20\" src=\"/assets/icons/home/eye-white.svg\">\n <div class=\"center flex flex-middle\" ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'red'\" class=\"white-spinner\" [diameter]=\"16\"></mat-spinner>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n </mat-card>\n</ng-container>\n\n\n<ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data.cbpData.endDate \| date: 'd MMM, y'}}</p>\n <p ngIf=\"data.cbpData.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n</ng-template>\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"card-portrait\" [ngClass]=\"widgetData.cardCustomeClass ? widgetData.cardCustomeClass : ''\">\n <div class=\"margin-bottom-xs\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'26px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"flex\">\n <div class=\"margin-right-s\">\n <ng-container>\n <sb-uic-skeleton-loader [width]=\"'147px'\" [height]=\"'98px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n <div class=\"width-1-1\">\n <div class=\"portrait-subheading title-text\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded width-1-1'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\" margin-right-xs\">\n <sb-uic-skeleton-loader [width]=\"'24px'\" [height]=\"'24px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <span class=\"\"><sb-uic-skeleton-loader [width]=\"'133px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader></span>\n </div>\n <div class=\"portrait_widget flex margin-top-xs\">\n <div class=\"flex flex-end flex-middle\">\n <sb-uic-skeleton-loader [width]=\"'65px'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex flex-align-end progress-wrapper flex-between\">\n <div class=\"progress-block\">\n <div class=\"completed-time\">\n <sb-uic-skeleton-loader [width]=\"'211px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded margin-top-xs md:w-211'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"progress-btn\">\n <sb-uic-skeleton-loader [width]=\"'117px'\" [height]=\"'32px'\" [bindingClass]=\"'flex rounded margin-top-xs'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-portrait{border-radius:12px;border:1px solid rgba(0,0,0,.08);opacity:1;width:318px;min-height:154px;padding:16px}.card-portrait .img-block-portrait{line-height:10px}.card-portrait .card-image{border-radius:8px;opacity:1;background-size:100%;width:147px;height:100px}.card-portrait .portrait-subheading{opacity:1;color:rgba(0,0,0,.87);font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;word-break:break-word;white-space:initial;margin:0 0 8px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-portrait .portrait_course_logo_box img{padding:3px;display:inline-block;width:24px;height:24px;border:1px solid #d6d6d6;border-radius:4px;box-sizing:border-box}.card-portrait span.portrait-org-name{width:75%;word-break:break-word;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-portrait .portrait_widget{align-items:center;margin-top:0}.card-portrait .portrait_widget .course_port{border:1px solid #ef951e;padding:4px 8px;align-items:center;border-radius:16px}.card-portrait .portrait_widget .video-icon{opacity:1;color:#ef951e;width:15px;height:15px;font-size:15px}.card-portrait .portrait_widget .portrait-category{color:rgba(0,0,0,.6)!important;font-size:.75rem;opacity:1;font-family:Lato-Regular;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.card-portrait .progress-wrapper .progress-block{width:60%}.card-portrait .progress-wrapper .progress-block .completed-time{color:#ef951e;display:flex;padding:8px 0}.card-portrait .progress-wrapper .progress-block .completed-time mat-icon{width:1rem;height:1rem;font-size:1rem}.card-portrait .progress-wrapper .progress-block .completed-time span{opacity:1;color:rgba(0,0,0,.87);font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.card-portrait .progress-wrapper .progress-btn .resume-btn{opacity:1;color:#fff;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:left;line-height:20px;background:#1a4ca1;border-radius:63px;padding:6px 16px;border:none;width:100%;cursor:pointer}.card-portrait .progress-wrapper .progress-btn .resume-btn .textwrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}.card-portrait .progress-wrapper .progress-btn .resume-btn:hover{background-color:#253379}.card-portrait .progress-bar-new{color:#ef951e!important;height:10px;border-radius:5px}.card-portrait .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-portrait .rating-session .rating-number{font-size:14px}.card-portrait .rating-session .most-enrolled-text{font-size:10px;font-weight:400;padding:4px;background:#ffea9e;border-radius:4px;line-height:12px}.card-portrait .right-corner-portrait{right:8px;bottom:8px}.course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"isLiveOrMarkForDeletion":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"showIntranetContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"isIntranetAllowedSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"contentData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"cbPlanMapData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatSnackBar","line":36,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":37,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":38,"character":20},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":40,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","module":"@angular/material","name":"MatDialog","line":43,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"showSnackbar":[{"__symbolic":"method"}],"getRedirectUrlData":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"downloadCertificate":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":16,"character":28}]}],"downloadCertificate":[{"__symbolic":"method"}],"downloadCertificate_v2":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-card-mdo-channel-v1","template":"\n<ng-container ngIf=\"!isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container ngIf=\"widgetData?.content\">\n <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <ng-container ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.orgName\" />\n </ng-container>\n <ng-template #defaultImg>\n <sb-uic-avatar-photo [randomColor]=\"true\" [name]=\"widgetData?.content?.orgName\" [photoUrl]=\"widgetData?.content?.imgUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </ng-template>\n </div>\n <div class=\"flex title-container px-2\">\n <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData?.content?.orgName }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>\n\n\n<ng-container ngIf=\"isCardLoading\">\n <mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n <div class=\"display-contents\">\n <ng-container >\n <a i18n-aria-label>\n <ng-container>\n <mat-card-content class=\"min-top\">\n <div class=\"flex flex-col h-full\">\n <div class=\"image-container\">\n <sb-uic-skeleton-loader class=\"w-full\" [width]=\"'100%'\" [height]=\"'140px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex title-container px-2\">\n <div class=\"flex-1 text-center mat-subheading-2 title-text ws-mat-black-text\">\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded mb-2'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'12px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n </mat-card>\n</ng-container>","styles":[".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-word;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"channelData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"emitTelemetry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"isCardLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":25,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":26,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":27,"character":30},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":28,"character":23},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":30,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"channelClick":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbq"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbq"}]}]}],"members":{}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pipePublicURL"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":8,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"transform":[{"__symbolic":"method"}]}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbs"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbs"}]}]}],"members":{}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"objectToArray"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbu"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":7,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":47}],"exports":[{"__symbolic":"reference","name":"ɵbu"}]}]}],"members":{}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-display-content-type","template":"<ng-container ngIf=\"displayContentType\">\n <span [ngSwitch]=\"displayContentType\" class=\"content-type-class\">\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.ASSESSMENT\" i18n>Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.AUDIO\" i18n>Audio</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CHANNEL\" i18n>Channel</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CERTIFICATION\" i18n\n >Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CLASS_DIAGRAM\" i18n\n >Class Diagram</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.COURSE\" i18n>Course</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DEFAULT\" i18n>Content</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DRAG_DROP\" i18n>Drag & Drop</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_CERTIFICATION\" i18n\n >External Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_COURSE\" i18n\n >External Course</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.HANDS_ON\" i18n>Hands-On</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.IAP\" i18n>Hands-On Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INSTRUCTOR_LED\" i18n\n >Instructor-Led</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INTERACTIVE_VIDEO\" i18n\n >Interactive Video</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_ARTIFACT\" i18n\n >Knowledge Artifact</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_BOARD\" i18n\n >Knowledge Board</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.LEARNING_JOURNEY\" i18n\n >Learning Journey</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.MODULE\" i18n>Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PDF\" i18n>Pdf</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PROGRAM\" i18n>Program</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.QUIZ\" i18n>Quiz</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.RESOURCE\" i18n>Resource</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.VIDEO\" i18n>Video</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_MODULE\" i18n>Web Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_PAGE\" i18n>Web Page</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.YOUTUBE\" i18n>Youtube</ng-container>\n <ng-container ngSwitchDefault i18n>\n <span ngIf=\"useTranslation\">\n {{ translateLabels(displayContentType, 'searchfilters') }}\n </span>\n <span ngIf=\"!useTranslation\">\n {{ displayContentType }}\n </span>\n </ng-container>\n </span>\n </ng-container>\n<!-- <ng-container ngIf=\"displayContentType\">{{displayContentType}}</ng-container> -->\n<!-- <span [ngSwitch]=\"displayContentType\">\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.ASSESSMENT\" i18n>Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.AUDIO\" i18n>Audio</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CHANNEL\" i18n>Channel</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CERTIFICATION\" i18n\n >Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.CLASS_DIAGRAM\" i18n\n >Class Diagram</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.COURSE\" i18n>Course</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DEFAULT\" i18n>Content</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.DRAG_DROP\" i18n>Drag & Drop</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_CERTIFICATION\" i18n\n >External Certification</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.EXTERNAL_COURSE\" i18n\n >External Course</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.HANDS_ON\" i18n>Hands-On</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.IAP\" i18n>Hands-On Assessment</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INSTRUCTOR_LED\" i18n\n >Instructor-Led</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.INTERACTIVE_VIDEO\" i18n\n >Interactive Video</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_ARTIFACT\" i18n\n >Knowledge Artifact</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.KNOWLEDGE_BOARD\" i18n\n >Knowledge Board</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.LEARNING_JOURNEY\" i18n\n >Learning Journey</ng-container\n >\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.MODULE\" i18n>Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PDF\" i18n>Pdf</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.PROGRAM\" i18n>Program</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.QUIZ\" i18n>Quiz</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.RESOURCE\" i18n>Resource</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.VIDEO\" i18n>Video</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_MODULE\" i18n>Web Module</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.WEB_PAGE\" i18n>Web Page</ng-container>\n <ng-container ngSwitchCase=\"displayContentTypeEnum?.YOUTUBE\" i18n>Youtube</ng-container>\n <ng-container ngSwitchDefault i18n>Content</ng-container>\n</span> -->\n","styles":[".content-type-class{color:rgba(0,0,0,.87);word-break:break-all;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}"]}]}],"members":{"useTranslation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"displayContentType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}]}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵbw"}]}]}],"members":{}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[wsUtilsDefaultThumbnail]"}]}],"members":{"wsUtilsDefaultThumbnail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"srcUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":11,"character":3},"arguments":["src"]}]}],"updateSrc":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":12,"character":3},"arguments":["error"]}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵby"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵby"}]}]}],"members":{}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"pipeDurationTransform"}]}],"members":{"transform":[{"__symbolic":"method"}],"defaultDuration":[{"__symbolic":"method"}],"hmsCalculation":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-content-progress","host":{"role":"progressbar","aria-valuemin":"0","aria-valuemax":"100","title":"progres","[attr.aria-valuenow]":"progress","$quoted$":["aria-valuemin","aria-valuemax","title","[attr.aria-valuenow]"]},"template":"<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n i18n-aria-label> {{ progress }} % </mat-progress-bar>","styles":[".visibility-0{display:none}::ng-deep.mat-progress-bar.thick{height:10px}::ng-deep.theme-igot.day-mode .mat-progress-bar-fill::after{background:no-repeat padding-box #34d6a4}::ng-deep.theme-igot.day-mode .mat-progress-bar-background{fill:rgba(0,0,0,.001)!important}::ng-deep.theme-igot.day-mode .mat-progress-bar-buffer{background-color:rgba(0,0,0,.1)!important}::ng-deep .content-progress .mat-progress-bar-fill::after{background:#f69953!important}::ng-deep.theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:rgba(0,0,0,.1)!important}::ng-deep.theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:rgba(0,0,0,.1)!important}::ng-deep.mat-progress-bar.viewer-progress{height:4px;border-radius:5px}"]}]}],"members":{"contentId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"progress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"progressType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"forPreview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"customClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":38,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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}.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:rgba(0,0,0,.6);font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.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{width:100%;height:auto;flex:1}.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 #1b4ca1;color:#1b4ca1}.btn-custom,.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":19,"character":5},"arguments":["environment"]}],null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA","line":24,"character":12}]}]],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":20,"character":20},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":21,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":22,"character":30},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material","arguments":[{"__symbolic":"reference","name":"ɵca"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"downloadCert":[{"__symbolic":"method"}],"downloadCertPng":[{"__symbolic":"method"}],"downloadCertPdf":[{"__symbolic":"method"}],"shareCert":[{"__symbolic":"method"}],"raiseShareIntreactTelemetry":[{"__symbolic":"method"}],"raiseIntreactTelemetry":[{"__symbolic":"method"}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatRippleModule","line":15,"character":4},{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"SbUiResolverModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵcc"}],"entryComponents":[{"__symbolic":"reference","name":"ɵcc"}]}]}],"members":{}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-avatar-photo","template":"<div id=\"user_icon\" [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-l-xs' : size=== 'l-xs',\n'circle-l-s' : size=== 'l-s',\n'circle-xl-s' : size=== 'xl-s',\n'circle-r-m': size=== 'round-m',\n'circle-r-p-m': size=== 'profile-round-m',\n'circle-m-side': size=== 'm-side',\n'circle-r-m-48': size=== 'm-side-rating',\n'circle-m-recommended': size==='m-recommended',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color': circleColor }\">\n <img ngIf=\"!showInitials\" loading=\"lazy\" src=\"{{photoUrl}}\" [alt]=\"photoUrl? '' :(name \|\| userInitials \|\| size \|\| random)\">\n\n <div ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n <div ngIf=\"showBadge\"><span class=\"profile-badge\"> \n <img src=\"fusion-assets/images/profile-badge.png\">\n </span></div>\n\n <!-- <div ngIf=\"imageType === 'user-photo'\">\n <img ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"user-image\" class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n <div class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n <span class=\"name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background\"\n ngIf=\"!imageUrl\">{{ shortName }}</span>\n </div>\n </div> -->\n</div>","styles":["@charset \"UTF-8\";.success-checkmark::after{content:\"✔\";position:absolute;left:25px;top:20px;width:11px;height:11px;border:1px solid #1d8923;background:#1d8923;border-radius:50%;color:#fff;line-height:11px;text-align:center;font-size:9px}.profile-badge{position:absolute;top:10px;right:0}.profile-badge img{height:15px!important;width:15px!important}.circle-s{border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;letter-spacing:.2625px}.circle-m{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-36px}.circle-m img{border-radius:10%;width:40px;height:40px}.circle-m .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l img{border-radius:10%;width:80px;height:80px}.circle-l .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-xl img{border-radius:10%;width:105px;height:105px}.circle-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xxl{border-radius:50%;width:145px;height:145px;display:flex;justify-content:center;align-items:center}.circle-xxl img{border-radius:10%;width:145px;height:145px}.circle-xxl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-l-xs{border-radius:50%;width:29px;height:29px;display:flex;justify-content:center;align-items:center}.circle-l-xs img{border-radius:50%;width:100%;height:100%}.circle-l-xs .initials{color:#fff;font-size:12px;line-height:12px;letter-spacing:.2625px}.circle-l-s{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l-s img{border-radius:4px;width:80px;height:80px}.circle-l-s .initials{color:#fff;font-size:24px;line-height:24px;letter-spacing:.2625px}.circle-xl-s{border-radius:50%;width:125px;height:125px;display:flex;justify-content:center;align-items:center}.circle-xl-s img{border-radius:4px;width:152px;height:125px}.circle-xl-s .initials{color:#fff;font-size:32px;line-height:32px;letter-spacing:.2625px}.circle-xxl-s{border-radius:50%;width:208px;height:208px;display:flex;justify-content:center;align-items:center}.circle-xxl-s img{border-radius:50%;width:100%;height:100%}.circle-xxl-s .initials{color:#fff;font-size:40px;line-height:40px;letter-spacing:.2625px}.circle-r-m{border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.circle-r-m img{border-radius:50%;width:100%;height:100%}.circle-r-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-m-48{border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.circle-r-m-48 img{border-radius:50%;width:100%;height:100%}.circle-r-m-48 .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-p-m{border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.circle-r-p-m img{border-radius:50%;width:100%;height:100%}.circle-r-p-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-m-side{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center}.circle-m-side img{border-radius:10%;width:40px;height:40px}.circle-m-side .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}@media only screen and (max-width:960px){.circle-xxl-s{width:100px;height:100px}.circle-xxl-s .initials{font-size:24px;line-height:24px}}.circle-m-recommended{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-49px}.circle-m-recommended img{border-radius:10%;width:40px;height:40px}.circle-m-recommended .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l-s::before{content:\"\";border:1px solid red}"]}]}],"members":{"datalen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"photoUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"defaulfColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"randomColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"initials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"showBadge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}]}},"ɵcd":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":75,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":70,"character":1},"arguments":[{"selector":"sb-uic-content-strip-facet-filter","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])\">\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 \n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" 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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n <ng-template mat-tab-label>\n <span><span ngIf=\"!tab?.disableTranslate\">{{ translateLabels(tab?.label, 'home') }}</span>\n <span class=\"tab-highlight\" ngIf=\"tab?.disableTranslate\">{{tab?.label}}</span>  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n\n <div class=\"wfull\" ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n <div class=\"flex justify-between item-center flex-wrap gap-4\">\n <div class=\"\">\n <ng-container ngFor=\"let facet of tab?.facets\">\n <form [formGroup]=\"facetForm\">\n <div class=\"facets-select\">\n <select formControlName=\"org\" (change)=\"getorgData($event, stripsResultDataMap[key], tabIndex)\">\n <option value=\"0\" selected disabled>Choose by organisation</option>\n <option value=\"{{d.name}}\" ngFor=\"let d of facet.values\" >{{d.name}}</option>\n </select>\n </div>\n </form>\n </ng-container>\n </div>\n <div>\n <ng-container >\n <mat-chip-list class=\"content-pill-data\" aria-label=\"Fish selection\">\n <ng-container ngFor=\"let pill of tab?.pillsData;let p = index\">\n <mat-chip [selected]=\"pill?.selected\" (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 </ng-container>\n </div>\n <!-- viewAll start-->\n <div ngIf=\"!stripsResultDataMap[key]?.hideViewMoreUrl && checkCondition(widgetData , stripsResultDataMap[key])\" 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\n </div>\n </div>\n \n <!-- viewAll end-->\n </div>\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n <div 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 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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-container 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'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\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":["@charset \"UTF-8\";.facets-select{position:relative;display:inline-block;width:250px}.facets-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.facets-select:after{content:\"▼\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.tab-highlight{color:#1b4ca1!important;font-weight:700}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected .pill-name{color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip{cursor:pointer!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background:#1b4ca1!important;color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip{background:#fff!important;border:1px solid rgba(0,0,0,.0784313725)!important}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"telemtryLearningContentResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":108,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":110,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":111,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":112,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":113,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":114,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":116,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":118,"character":17}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getSelectedPillIndex":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"pillClicked":[{"__symbolic":"method"}],"resetSelectedPill":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"postRequestMethod":[{"__symbolic":"method"}],"fetchFromSearch":[{"__symbolic":"method"}],"mapAllDataWithFacets":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"getorgData":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}]}},"ɵce":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@sunbird-cb/resolver-v2","name":"WidgetBaseComponent","line":73,"character":56},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"sb-uic-content-strip-with-tabs-pills","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])\">\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 \n 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" 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\" dynamicHeight\n (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n <mat-tab label=\"{{tab?.label}}\" ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n <ng-template mat-tab-label>\n <span>{{ translateLabels(tab?.label, 'home') }}  </span>\n <span ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n </ng-template>\n\n <div class=\"wfull\" ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n <div class=\"flex justify-between item-center\">\n <div>\n <ng-container >\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\" (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 </ng-container>\n </div>\n <!-- viewAll start-->\n <div ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\" 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 class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home') \|\| 'See all'}}</span>\n <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n </a>\n </div>\n </div>\n \n <!-- viewAll end-->\n </div>\n <div ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader \|\|\n !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n class=\"text-center my-2\">\n <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n <div 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 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\">{{ 'contentstripmultiple.getReadyForLearningAdventure' \| translate }} -\n <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' \| translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' \| translate }}</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\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n <ng-container 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'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets \|\|\n stripsResultDataMap[key]?.sliderConfig?.maxWidgets \|\| defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n <ng-container 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 </sb-uic-horizontal-scroller-v2>\n </ng-container>\n </ng-container>\n </div>\n </mat-tab>\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}.margin-bottom-custom{margin-bottom:60px}.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 .mat-tab-body{padding:20px 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:0 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:rgba(0,0,0,.87);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}"]}]}],"members":{"widgetData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"viewAllResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"telemtryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"emitViewAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"channnelName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["id"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":107,"character":5},"arguments":["environment"]}],null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"LoggerService","line":109,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":110,"character":22},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":111,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"UtilityService","line":112,"character":23},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":115,"character":19},{"__symbolic":"reference","name":"WidgetUserServiceLib"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":117,"character":23},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"showAccordion":[{"__symbolic":"method"}],"setHiddenForStrip":[{"__symbolic":"method"}],"getIfStripHidden":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"fetchStripFromKey":[{"__symbolic":"method"}],"isStripShowing":[{"__symbolic":"method"}],"getdata":[{"__symbolic":"method"}],"checkCondition":[{"__symbolic":"method"}],"checkVisible":[{"__symbolic":"method"}],"getContineuLearningLenth":[{"__symbolic":"method"}],"getLength":[{"__symbolic":"method"}],"getFiltersFromArray":[{"__symbolic":"method"}],"transformSearchV6FiltersV2":[{"__symbolic":"method"}],"checkForDateFilters":[{"__symbolic":"method"}],"fetchStripFromRequestData":[{"__symbolic":"method"}],"toggleInfo":[{"__symbolic":"method"}],"transformContentsToWidgets":[{"__symbolic":"method"}],"transformEventsToWidgets":[{"__symbolic":"method"}],"transformSkeletonToWidgets":[{"__symbolic":"method"}],"processStrip":[{"__symbolic":"method"}],"checkParentStatus":[{"__symbolic":"method"}],"checkForEmptyWidget":[{"__symbolic":"method"}],"getTabDataByfilter":[{"__symbolic":"method"}],"getSelectedIndex":[{"__symbolic":"method"}],"translateLabels":[{"__symbolic":"method"}],"identify":[{"__symbolic":"method"}],"tracker":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"redirectViewAll":[{"__symbolic":"method"}],"fetchForYouData":[{"__symbolic":"method"}],"fetchFromSearchV6":[{"__symbolic":"method"}],"getTabDataByNewReqTrending":[{"__symbolic":"method"}],"getTabDataByNewReqSearchV6":[{"__symbolic":"method"}],"trendingSearchRequest":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"pillClicked":[{"__symbolic":"method"}],"searchV6Request":[{"__symbolic":"method"}],"getSelectedPillIndex":[{"__symbolic":"method"}],"fetchAllCbpPlans":[{"__symbolic":"method"}],"splitCbpTabsData":[{"__symbolic":"method"}],"getTabsList":[{"__symbolic":"method"}],"resetSelectedPill":[{"__symbolic":"method"}]}},"ɵcf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"sb-uic-competency-passbook","template":" <div class=\"competency-title\" ngIf=\"objectData?.title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" ngIf=\"!loadCometency\">\n <div class=\"competency-card\" ngFor=\"let obj of competencyTheme\| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <!-- <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\" ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n <div class=\"no-of-contents\" ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n </div> -->\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container ngFor=\"let child of allcompetencyTheme[obj.name]?.children\| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n {{ child?.displayName }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n <div ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>","styles":[".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"cardDisplayCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dynamicAlignPills":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"temeletryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":44,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":40,"character":32},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵcg"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":43,"character":20},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"showMore":[{"__symbolic":"method"}],"getCompetencyArea":[{"__symbolic":"method"}],"callCompetencySearch":[{"__symbolic":"method"}],"competencyChange":[{"__symbolic":"method"}],"getAllCompetencies":[{"__symbolic":"method"}],"getcompetencyTheme":[{"__symbolic":"method"}],"getThemeDataByArea":[{"__symbolic":"method"}],"getcompetencyThemeCount":[{"__symbolic":"method"}],"resetViewMore":[{"__symbolic":"method"}],"viewMoreChildren":[{"__symbolic":"method"}],"displayAllTheme":[{"__symbolic":"method"}],"navigateToCompetency":[{"__symbolic":"method"}],"getcompetencySubTheme":[{"__symbolic":"method"}]}},"ɵcg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":14,"character":30}]}],"getCompetencyList":[{"__symbolic":"method"}],"getCompetencyListv_V2":[{"__symbolic":"method"}],"fetchCertificate":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵch":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵci"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatChipsModule","line":13,"character":4},{"__symbolic":"reference","name":"ɵm"}],"exports":[{"__symbolic":"reference","name":"ɵci"}]}]}],"members":{}},"ɵci":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-pills","template":"<ng-container ngIf=\"!isLoading\">\n <mat-chip-list >\n <ng-container ngFor=\"let pill of pillsData\">\n <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" [style.color]=\"dynamicColor\" [style.borderColor]=\"'#999999'\"\n [ngClass]=\"{'active': selectedValue === pill?.name}\">\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" ngIf=\"requiredTitlecase\">{{pill?.name \| titlecase}} <span ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" ngIf=\"!requiredTitlecase\">{{pill?.name }} <span ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n </mat-chip>\n </ng-container>\n </mat-chip-list>\n</ng-container>\n<ng-container ngIf=\"isLoading\">\n <div class=\"flex gap-4\">\n <ng-container ngFor=\"let pill of [0,1,2]\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n</ng-container>\n","styles":[".competency-chip{z-index:999;padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent!important;cursor:pointer}.competency-chip .pill-name{color:#fff}.active{background-color:#1b4ca1!important}.active .pill-name{color:#fff!important}"]}]}],"members":{"pillsData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"selectedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"pillClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"requiredTitlecase":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectedPill":[{"__symbolic":"method"}]}},"ɵcj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-competency-passbook-mdo","template":"<div class=\"competency-title\" ngIf=\"objectData?.title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" ngIf=\"!loadCometency\">\n <div class=\"competency-card\" ngFor=\"let obj of competencyTheme\| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.displayName}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container ngFor=\"let child of allcompetencyTheme[obj.name]?.children\| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.displayName\" >\n {{ child?.displayName }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n <div ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>","styles":[".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"cardDisplayCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dynamicClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"dynamicColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dynamicAlignPills":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"temeletryResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":45,"character":5},"arguments":["environment"]}]],"parameters":[{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":41,"character":32},{"__symbolic":"reference","name":"WidgetContentLibService"},{"__symbolic":"reference","name":"ɵck"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":44,"character":20},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"getAllCompetencies":[{"__symbolic":"method"}],"getMdoCompetencies":[{"__symbolic":"method"}],"getCompetencyTheme":[{"__symbolic":"method"}],"getMdoCompetency":[{"__symbolic":"method"}],"competencyChange":[{"__symbolic":"method"}],"resetViewMore":[{"__symbolic":"method"}],"viewMoreChildren":[{"__symbolic":"method"}],"displayAllTheme":[{"__symbolic":"method"}],"navigateToCompetency":[{"__symbolic":"method"}],"showMore":[{"__symbolic":"method"}]}},"ɵck":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":14,"character":30}]}],"getCompetencyList":[{"__symbolic":"method"}],"getCompetencyListv_V2":[{"__symbolic":"method"}],"mdoCompetency":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵcl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-user-content-rating","template":"<ng-container ngIf=\"contentdata.length\">\n <div class=\"user-rating-section\">\n <sb-uic-sliders-ng-content [title]=\"'providerName'\" [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"flex users-block\">\n <ng-container ngFor=\"let userData of contentdata; let j = index\">\n <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n </sb-uic-avatar-photo>\n </div>\n </ng-container>\n </div>\n <div ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8 pb-5\">\n <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n </div>\n <div class=\"title-border-v2\"></div>\n <p class=\"userName w-full mb-4 pt-2\">{{ratingData?.userDetails?.firstName}}</p>\n <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n {{ getRatingIcon(rating, ratingData?.rating) }}\n </mat-icon>\n </div>\n <p class=\"content-feedback w-full mb-4 px-4 md:px-8\">{{ratingData?.review}}</p>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n","styles":[".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:10px!important;width:100%}.title-border-v2{margin:10px;width:300px;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,#ef951e 20%,#ef951e 80%,rgba(255,255,255,0) 100%)}.user-ratting-wrapper{border:1px solid #f3962f;border-radius:15px;padding:15px 0;background:linear-gradient(111.16deg,rgba(243,150,47,.24) 9.09%,rgba(255,255,255,0) 74.81%)}.user-rating-section ::ng-deep.prev{margin-left:-50px;top:59%}.user-rating-section ::ng-deep.next{margin-right:-50px;top:59%}.user-rating-section ::ng-deep.dots-container{display:none!important}@media screen and (min-width:1024px){.user-rating-section .users-block{justify-content:center}}@media screen and (max-width:768px){.user-rating-section ::ng-deep.next{margin-right:-16px;top:59%}.user-rating-section .users-block{width:90%}.user-rating-section ::ng-deep.widget-card-content-new{margin:0 15px}.user-rating-section .user-ratting-wrapper{padding:15px 0}.user-rating-section ::ng-deep.dots-container{display:block!important}.user-rating-section ::ng-deep.banner-meta{bottom:-12px}}"]}]}],"members":{"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵcm"},{"__symbolic":"reference","name":"ɵcn"}]}],"ngOnInit":[{"__symbolic":"method"}],"getTopReviews":[{"__symbolic":"method"}],"getRatingIcon":[{"__symbolic":"method"}],"getRatingIconClass":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"handleScrollClick":[{"__symbolic":"method"}]}},"ɵcm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":18,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":24,"character":27}]}],"getRating":[{"__symbolic":"method"}],"addOrUpdateRating":[{"__symbolic":"method"}],"getRatingSummary":[{"__symbolic":"method"}],"getRatingLookup":[{"__symbolic":"method"}],"getRatingReply":[{"__symbolic":"method"}],"getRatingIcon":[{"__symbolic":"method"}],"getRatingIconClass":[{"__symbolic":"method"}],"getAuthorReply":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵcn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":11,"character":28}]}],"fetchTopReviews":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵco":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sb-uic-mdo-channel-v1","template":"<p>mdo-channel-v1 works!</p>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵcp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"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\">\n <ng-container ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [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=\"'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>\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\"\n [style.color]=\"data.titleColor\">{{data.title \|\| channnelName}}</h1>\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\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n </div>\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\" [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\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title \|\| channnelName}}</h1>\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\"\n [ngStyle]=\"{'background': data?.metrics?.background}\">\n <sb-uic-data-points\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleFlexeRow'\"\n [pageLayout]=\"'mdo'\">\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\n [providerId]=\"orgId\"\n [fetchDataFromApi]=\"true\"\n [objectData]=\"data?.metrics?.data\"\n [layoutType]=\"'singleRow'\"\n [pageLayout]=\"'mdo'\">\n </sb-uic-data-points>\n </div>\n \n </div>\n </div>\n </div>\n</ng-template>\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 <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 <div class=\"block md:hidden col-span-12 mt-6\">\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 <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 <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 <!-- Tabs Section -->\n <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n [selectedIndex]=\"selectedIndex\" (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 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-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 </div>\n <div class=\"col-span-12 md:col-span-4\">\n <div class=\"hidden md:block padding-top-xl padding-bottom-m\"\n 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 <div class=\"hidden md:block\" \n ngIf=\"data?.announcementSection?.data\">\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 </div> \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\" [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'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentRecommendedCoursesStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentcertificationsOfWeekStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [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\" 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 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\n [dynamicColor]=\"'#999999'\"\n [dynamicAlignPills]=\"'start'\"\n [cardDisplayCount]=\"2\"\n (emptyResponse)=\"hideCompetency($event)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"orgId\"\n >\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\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event, data)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n (emptyResponse)=\"hideContentStrip($event, data)\"\n [providerId]=\"orgId\"\n [widgetData]=\"data?.contentStrip\"\n [channnelName]=\"channnelName\"\n >\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\n [objectData]=\"data\"\n [channnelName]=\"channnelName\"\n [channelId]=\"orgId\">\n </sb-uic-top-learners>\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}.sticky-logo-square{position:absolute;top:215px;justify-content:end;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:112px;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;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 0 rgba(0,0,0,.06)}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{-o-object-fit:contain;object-fit:contain;max-height:52px;height:96px;z-index:10}.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:rgba(19,19,19,.6392156863);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.cdk-keyboard-focused:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":35,"character":19},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":36,"character":20},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":37,"character":22},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":38,"character":23},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"MultilingualTranslationsService","line":39,"character":30}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":59,"character":3},"arguments":["window:resize"]}]}],"setWidth":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"tabClicked":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"triggerOpenDialog":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}],"raiseCompetencyTelemetry":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"hideCompetency":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}]}},"ɵcq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"sb-uic-providers-v2","template":"<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container ngIf=\"sectionList?.length\">\n <ng-container ngFor=\"let section of sectionList\">\n <ng-container ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\">\n <ng-container ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan \|\| 12}} \">\n <ng-container ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'trainingCalendar'\" [ngTemplateOutlet]=\"trainingCalendar\"\n [ngTemplateOutletContext]=\"{trainingCalendar: column.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'contributors'\" [ngTemplateOutlet]=\"contributors\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'infra'\" [ngTemplateOutlet]=\"infra\"\n [ngTemplateOutletContext]=\"{infra: column?.data}\"></ng-container>\n <ng-container ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container>\n <ng-container ngSwitchCase=\"'contentTopStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n [ngTemplateOutletContext]=\"{\n data: {contentStrip: column?.data, sectionKey: section.key}\n }\"></ng-container> \n <ng-container ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container> \n <ng-container ngSwitchCase=\"'learnerReview'\" [ngTemplateOutlet]=\"learnerReviewBlock\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container> \n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n<div class=\"container-fluid\" ngIf=\"navList?.length\">\n <div class=\"flex sticky-navigator gap-4\">\n <mat-icon class=\"nav-up-arrow cursor-pointer\" (click)=\"scrollToSection('section-micro-sites')\">arrow_upwards</mat-icon>\n <ng-container ngFor=\"let section of navList\">\n <ng-container ngIf=\"section.navigation\">\n <div class=\"nav-button\" (click)=\"scrollToSection(section?.key); raiseNavTelemetry(section?.title)\">{{section?.title}}</div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n <!-- <div class=\"w-full grid grid-cols-12 gap-4\"> -->\n <div class=\"col-span-12 \">\n <div class=\"grid grid-cols-12 auto-rows-max\">\n \n <div class=\"col-span-3 custombgsection\">\n <div class=\"hidden md:block py-5 h-full \">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <div class=\"slider h-full\" ngIf=\"data?.sliderData?.sliders\">\n <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\" [type]=\"'atictitop'\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n <div class=\"container flex flex-col md:flex-row\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-rounded top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title \|\| providerName}}</h1>\n <p>{{data?.description \| slice:0:descriptionMaxLength}}\n <span ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n <div class=\"block md:hidden overflow-y-auto mb-3\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n </div>\n <button\n (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{data?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStripTemplate let-data=\"data\">\n <ng-container ngIf=\"!data?.contentStrip?.hideSection\">\n <div class=\"flex justify-center relative\">\n <img class=\"absolute {{data?.contentStrip?.sectionImagePosition}}\" src=\"{{data?.contentStrip?.sectionImage}}\" alt=\"\">\n <div class=\"container \">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event,data)\"\n (emptyResponse)=\"hideContentStrip($event, data)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n [providerId]=\"providerId\"\n [widgetData]=\"data?.contentStrip\">\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #contributors let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n </div>\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{data.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n </div>\n </div>\n <div class=\"w-full section-divider pt-6\">\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 infra-sec margin-bottom-xl\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title2 hidden md:block\">\n {{infra?.detaulTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{infra?.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-8 margin-bottom-xl\">\n <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n </div>\n </div>\n </div>\n </div>\n <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n </div>\n <div class=\"slider-background1 mb-8\">\n <div class=\"container-balanced w-full slider-background-2\">\n <div class=\"info-slider\">\n <sb-uic-sliders class=\"infobanner\" [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" ngIf=\"!hideCompetencyBlock\">\n <div class=\"w-full container-balanced\">\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook\n (emptyResponse)=\"hideCompetency($event, competency)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"providerId\">\n </sb-uic-competency-passbook>\n </div>\n </div>\n <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #trainingCalendar let-trainingCalendar=\"trainingCalendar\">\n <div class=\"hidden md:block\">\n <div class=\"col-span-12 px-8 py-8\" [style.background]=\"trainingCalendar?.background\">\n <div class=\"container-balanced flex flex-col\">\n <div class=\"col-span-12 mat-subheading-1 margin-remove\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'grid'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"block md:hidden\">\n <div class=\"col-span-12 px-5 py-3 mob-header\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <div class=\"col-span-12\">\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'row'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"col-span-12 flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n</ng-template>\n<ng-template #learnerReviewBlock let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\" ngIf=\"!data?.hideSection\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-4 contributor-desc\">\n <div class=\"infra-box-review flex flex-col\">\n <div class=\"learner-title hidden md:block\">\n {{data?.detaulTitle}}\n </div>\n <div class=\"infra-title2 hidden md:block\">\n {{data?.myTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"learner-title\">{{data?.detaulTitle}}</span> <span class=\"infra-title2\"> {{data?.myTitle}}</span>\n </div> \n </div> \n </div>\n <div class=\"col-span-12 md:col-span-8\">\n <sb-uic-user-content-rating (emptyResponse)=\"hideLearnerReview($event, data)\" [formData]=\"data\" [providerId]=\"providerId\"></sb-uic-user-content-rating>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n","styles":[".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0;z-index:-1}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/contain round;width:100%;z-index:99}@media screen and (max-width:768px){::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.infobanner.banner-container{width:1014px!important}}@media screen and (min-width:1234px){.custombgsection{background-size:cover}}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":31,"character":29},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":32,"character":29},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":32,"character":55},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":32,"character":81}]}],"ngOnInit":[{"__symbolic":"method"}],"getNavitems":[{"__symbolic":"method"}],"scrollToSection":[{"__symbolic":"method"}],"hideCompetency":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"hideLearnerReview":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}],"raiseCompetencyTelemetry":[{"__symbolic":"method"}],"raiseTelemetry":[{"__symbolic":"method"}],"raiseNavTelemetry":[{"__symbolic":"method"}]}},"ɵcr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-national-learning","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\" [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>\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","styles":["::ng-deep.mat-app-background{background-color:#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 0 rgba(0,0,0,.06)}.topSection .logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .logo-box-rounded{width:112px;height:112px}.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 rgba(0,0,0,.06)}.topSection .mlogo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .mlogo-box-rounded{width:112px;height:112px}.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}}"]}]}],"members":{"sectionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"configDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"nwlConfiguration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":18,"character":15},"arguments":["environment"]}],null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":18,"character":69},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"EventService","line":18,"character":93}]}],"ngOnInit":[{"__symbolic":"method"}],"hideKeyHightlight":[{"__symbolic":"method"}],"showAllContent":[{"__symbolic":"method"}],"hideContentStrip":[{"__symbolic":"method"}],"raiseTabClick":[{"__symbolic":"method"}],"raiseTelemetryInteratEvent":[{"__symbolic":"method"}]}},"ɵcs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-key-highlights","template":"<ng-container ngIf=\"contentdata?.length && mode === 'desktop'\">\n <div class=\"key-highlighs-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [autoScroll]=\"true\"\n [currentIndex]=\"currentIndex\" \n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\"\n [customBanner]=\"true\"\n [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex flex-row key-wrapper items-center justify-center\">\n <div class=\"kh-description\">\n {{content?.title \| slice:0:titleMaxLength}}\n <span ngIf=\"content?.title?.length > titleMaxLength\">...</span>\n </div>\n </div>\n </div>\n </div> \n </sb-uic-sliders-ng-content>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"contentdata?.length && mode === 'mobile'\">\n <div class=\"p-5\">\n <div class=\"mob-key-highlighs-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [autoScroll]=\"true\"\n [currentIndex]=\"currentIndex\" \n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\"\n [customBanner]=\"true\"\n [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let content of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex flex-row mkey-wrapper items-center justify-center\">\n <div class=\"mkh-description\">\n {{content?.title \| slice:0:titleMaxLength }}\n <span ngIf=\"content?.title?.length > titleMaxLength\">...</span>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </div>\n</ng-container>","styles":[".kh-description{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:0 10px}.key-wrapper{background-color:#eaf1f8;padding:25px 16px;border-radius:50px}.mkey-wrapper{background-color:#eaf1f8;padding:16px;border-radius:50px}.mkh-description{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;padding:0 30px}"]}]}],"members":{"providerId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"emptyResponse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":18,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}]}},"ɵct":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-events","template":"<div class=\"flex items-center mb-4 mt-2 e-header\">\n <div class=\"event-title\">\n {{object?.title}}\n </div>\n <div class=\"flex gap-4\">\n <div class=\"events-select\">\n <select (change)=\"getEvents($event)\">\n <option value=\"{{d?.startDate}}\" ngFor=\"let d of daysBetween\" [selected]=\"currentDay === d.startDate\">{{d?.diplayFormat}}</option>\n </select>\n </div>\n <div class=\"flex gap-4\">\n <a [routerLink]=\"'/app/event-hub/home'\" class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer \">Show All <mat-icon>chevron_right</mat-icon></a>\n </div>\n </div>\n</div>\n<div class=\"grid grid-cols-1 gap-4\">\n <div class=\"events-card-wrapper\">\n <div ngIf=\"!loader\">\n <div ngIf=\"events?.length > 0\">\n <div ngFor=\"let event of events\">\n <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n </div>\n </div>\n <div ngIf=\"events?.length === 0\">\n <div class=\"flex item-center justify-center p-5 no-events\">\n No events exist.\n </div>\n </div>\n </div>\n <div ngIf=\"loader && events?.length === 0\">\n <div ngFor=\"let event of [1,2,3]\">\n <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n </div>\n </div>\n </div>\n</div>","styles":["@charset \"UTF-8\";.e-header{justify-content:space-between}.event-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.events-select{position:relative;display:inline-block;width:150px}.events-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.events-select:after{content:\"▼\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.no-events{border:1px solid #c3c3c3;border-radius:12px}"]}]}],"members":{"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"nwlEventsConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getDaysBetweenDates":[{"__symbolic":"method"}],"getEvents":[{"__symbolic":"method"}],"getEventsList":[{"__symbolic":"method"}]}},"ɵcu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-event-card","template":"<div class=\"events-card margin-bottom-m cursor-pointer\" ngIf=\"!loader\" (click)=\"redirectTo(eventDetails)\">\n <div class=\"flex gap-4\">\n <div class=\"event-poster\">\n <img class='poster' [src]=\"eventDetails.appIcon ? getPublicUrl(eventDetails.appIcon) : objectData?.defaultImage\" alt=\"\" />\n </div>\n <div class=\"flex flex-col\">\n <div class=\"flex\">\n <div class=\"flex event-label\">{{eventDetails?.resourceType}}</div>\n </div>\n <div class=\"orgName pt-2 pb-1\">\n {{eventDetails?.owner}}\n </div>\n <div class=\"event-title pt-1\">\n {{eventDetails?.name \| slice:0:descriptionMaxLength}}\n <span ngIf=\"eventDetails?.name?.length > descriptionMaxLength\">...</span>\n </div>\n <div class=\"event-date pt-2\">{{getEventDate(eventDetails)}}</div>\n </div>\n </div>\n</div>\n<div ngIf=\"loader\">\n <div class=\"events-card margin-bottom-m\">\n <div class=\"flex gap-4\">\n <div class=\"event-poster\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'180px'\" [height]=\"'107px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div class=\"flex\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'60px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex orgName pt-2 pb-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex event-title pt-1\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"event-date pt-2\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon '\" [width]=\"'355px'\" [height]=\"'21px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n</div>","styles":[".events-card{padding:16px;border-radius:12px;border:1px solid #c3c3c3}.events-card .poster{width:180px;height:107px;border-radius:12px}.events-card .event-label{border:1px solid #ef951e;background:rgba(239,149,30,.05);border-radius:45px;font:400 14px/16.8px Lato;padding:8px 12px}.events-card .orgName{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6}.events-card .event-title{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:left}.events-card .event-date{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;color:#1b4ca1}@media screen and (min-width:320px) and (max-width:769px){.events-card .poster{width:80px;height:69px}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"eventDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"loader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":17,"character":15},"arguments":["environment"]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":17,"character":71}]}],"getEventDate":[{"__symbolic":"method"}],"getPublicUrl":[{"__symbolic":"method"}],"redirectTo":[{"__symbolic":"method"}]}},"ɵcv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-mdo-leaderboard","template":"<div class=\"mdo-leaderboard-container\">\n <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n <div class=\"flex gap-2\">\n {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"flex item-center justify-center\" ngIf=\"expand\">\n <div class=\"flex fl-div\">\n <div class=\"pointer\">\n <span class=\"dot-dot\"></span>\n </div>\n </div>\n </div>\n <div class=\"l-content\" ngIf=\"expand\">\n <div class=\"horizontal-scroll-container\">\n <div class=\"scroll-content\">\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n <span class=\"tab-title\" [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n </div>\n </div>\n <div class=\"relative search-wrapper margin-top-m mb-5\">\n <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n </mat-icon>\n <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n aria-label=\"Search\" i18n-placeholder=\"search\" [(ngModel)]=\"searchTerm\"\n placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n </div>\n <div class=\"l-tab-data\">\n <div ngFor=\"let user of filteredData; let i = index\">\n <div class=\"flex flex-row item mb-{{filteredData.length - 1 === i ? 0 : 5}} gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" ngIf=\"user.row_num === 1\"/></div>\n <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n <div class=\"w-full\">\n <div class=\"flex flex-between gap-2\">\n <div>\n <div class=\"rank-name\">{{user.org_name}}</div>\n <div class=\"rank-points flex mt-1 gap-1\">\n <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n <div class=\"points\">{{user.total_points \|\| 0 }} points</div>\n </div>\n </div>\n <div class=\"rank-crown\" ngIf=\"[1,2,3].includes(user.row_num)\">\n <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"no-data px-1\" ngIf=\"filteredData?.length === 0\">\n No data found!\n </div>\n </div>\n </div>\n</div>\n","styles":[".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container{overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]}]}],"members":{"object":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"tabClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"}]}],"ngOnInit":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"getTabData":[{"__symbolic":"method"}],"getRank":[{"__symbolic":"method"}],"getMedal":[{"__symbolic":"method"}],"handleSearchQuery":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}]}},"ɵcw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sb-uic-highlights-of-week","template":"<div ngIf=\"contentdata.length\" class=\"highlights-of-the-week-container {{expand ? 'mb-4' : ''}}\">\n <ng-container ngIf=\"contentdata.length\">\n <div class=\"flex title pb-3 no-radius items-center justify-between\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div class=\"block md:hidden\">\n <img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\">\n </div> \n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div ngIf=\"expand\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"wh-wrapper no-radius\">\n <div class=\"player\">\n <video width=\"100%\" height=\"100%\" controls ngIf=\"i === currentIndex\">\n <source [src]=\"item.videoUrl\" type=\"video/mp4\">\n <source [src]=\"item.videoUrl\" type=\"application/x-mpegURL\" />\n </video>\n </div>\n <div class=\"player-title py-3\">\n {{item?.title}}\n </div>\n <div class=\"player-body\">\n {{item?.description}}\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </ng-container>\n</div>\n\n","styles":[".highlights-of-the-week-container ::ng-deep.banner-title{display:none}.highlights-of-the-week-container ::ng-deep.banner-meta{bottom:-37px}.highlights-of-the-week-container ::ng-deep.prev{margin-left:11px}.highlights-of-the-week-container ::ng-deep.next{margin-right:16px}.title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left;background-color:#d1dbec;padding:16px;border-top-left-radius:12px;border-top-right-radius:12px}.wh-wrapper{background-color:#d1dbec;padding:0 16px 16px;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.wh-wrapper .player{height:420px}.wh-wrapper .player-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.wh-wrapper .player-body{font-family:Lato;line-clamp:2;-webkit-line-clamp:2;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:320px) and (max-width:769px){.highlights-of-the-week-container ::ng-deep.prev{display:none!important}.highlights-of-the-week-container ::ng-deep.next{display:none!important}.wh-wrapper .player{height:215px}.no-radius{border-radius:0}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}]}},"ɵcx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sb-uic-speakers","template":"<div class=\"nlw-speakers-wrapper px-4 md:px-0 my-4 md:my-0\">\n <div class=\"flex speakers-title gap-2 justify-between pb-1\" ngIf=\"contentdata.length\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div ngIf=\"expand\" class=\"speakers-container margin-bottom-xl\" >\n <ng-container ngIf=\"contentdata.length\">\n <sb-uic-sliders-ng-content\n [title]=\"'providerName'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"contentdata\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div ngFor=\"let item of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"speakers-wrapper\">\n <div class=\"speaker-image-section\">\n <div class=\"flex items-center justify-center\">\n <div class=\"speaker-initial\" ngIf=\"!item.profileImage\">{{item?.initial}}</div>\n <img class='speaker-icon' [src]=\"item?.profileImage\" alt=\"\" ngIf=\"item.profileImage\"/>\n </div>\n </div>\n <div class=\"speaker-details\">\n <div class=\"flex items-center justify-center pb-2\">\n <div class=\"speaker-title\">{{item.name}}</div>\n </div>\n <div class=\"flex items-center justify-center\">\n <div class=\"speaker-description\">{{item.description}}</div>\n </div>\n <div class=\"flex items-center justify-center mt-2\">\n <button class=\"view-event-btn\" (click)=\"goToEvent(item)\">\n View Event\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </ng-container>\n </div>\n</div>","styles":[".speakers-container ::ng-deep.banner-title{display:none}.speakers-container ::ng-deep.prev{margin-left:0;background-color:rgba(255,255,255,0)!important;color:#000}.speakers-container ::ng-deep.next{margin-right:0;background-color:rgba(255,255,255,0)!important;color:#000}.speakers-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.speakers-wrapper{background-color:#fff;border-radius:12px;border:2px solid #1b4ca1;min-height:268px;max-height:268px;height:268px}.speaker-image-section{position:relative;background-color:#fff4ec;padding:24px;border-radius:12px;height:44px;background-image:url(/assets/icons/home/default-slider-image.svg)}.speaker-details{padding:24px;margin-top:8px}.speaker-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.speaker-description{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:center;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:44px}.speaker-initial{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:center;width:92px;height:92px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;border-radius:50%;border:4px solid #fff}.speaker-icon{width:92px;height:92px;border-radius:50%;border:4px solid #fff}.view-event-btn{padding:12px 16px;border-radius:12px;background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#fff;border:none;cursor:pointer}@media screen and (min-width:320px) and (max-width:769px){.nlw-speakers-wrapper{background-color:#d1dbec}.speakers-title{padding:16px 0}}::ng-deep .cbp-card-1 .banner-meta{bottom:-32px!important}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":18,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}],"goToEvent":[{"__symbolic":"method"}]}},"ɵcy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sb-uic-user-progress","template":"<div class=\"px-4 md:px-0 pt-4 md:pt-0 week-progress {{expand ? 'pb-4' : 'pb-1'}}\">\n <div class=\"flex user-progress-title gap-2 margin-bottom-xs items-center justify-between\">\n <div class=\"flex gap-2\">\n {{objectData?.title}}\n <div><img [src]=\"objectData?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"objectData?.infoText\"></div>\n </div>\n <div class=\"block md:hidden\">\n <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n </div>\n </div>\n <div class=\"user-progress-wrapper\" ngIf=\"expand\">\n <div class=\"user-rank flex items-center\">\n <div class=\"flex item-center\">\n <div class=\"current-rank\" ngIf=\"userProgress?.rank > 0\">#{{userProgress?.rank}} Rank</div>\n </div>\n </div>\n <div class=\"user-details-wrapper\">\n <div class=\"user-details flex gap-2\">\n <div class=\"user-initial\" ngIf=\"userProgress?.profile_image\">\n <img class=\"user-profile\" [src]=\"userProgress?.profile_image\" alt=\"\"/>\n </div>\n <div class=\"user-initial\" ngIf=\"!userProgress?.profile_image && userProgress?.fullname\">{{createInititals(userProgress?.fullname)}}</div>\n <div class=\"user-name pt-3\">{{userProgress?.fullname}}</div>\n </div>\n <div class=\"user-stats my-3\">\n <div class=\"flex gap-2 items-center justify-center\">\n <div class=\"my-hours\">\n <div class=\"flex items-center gap-3\">\n <img class=\"hours-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808794219_InProgress_Icon.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.total_learning_hours \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Learning Hours</div>\n </div>\n </div>\n </div>\n <div class=\"my-certificates\">\n <div class=\"flex items-center gap-3\">\n <img class=\"cert-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808775795_Certificate_icon.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.count \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Certificates</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex gap-2 items-center justify-center pt-3\">\n <div class=\"k-points\">\n <div class=\"flex items-center gap-3\">\n <img class=\"kp-point-icon\"\n src=\"https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726808815206_karma-badge.svg\" alt=\"\">\n <div>\n <div class=\"counter\">{{userProgress?.total_points \|\| 0}}</div>\n <div class=\"counter-title pt-1\">Karma Points</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"insights-wrapper\">\n <div class=\"insights-container\">\n <sb-uic-sliders-ng-content\n [title]=\"'p1'\"\n [currentIndex]=\"currentIndex\"\n (currentIndexValue)=\"getCurrentIndex($event)\"\n [loadNgContentData]=\"true\" [widgetData]=\"insitesData\"\n [customBanner]=\"true\" [autoScroll]=\"true\"\n [styleData]=\"styleData\">\n <div sliderbody>\n <div class=\"insights-item\" ngFor=\"let item of insitesData; let i = index\" [hidden]=\"i !== currentIndex\">\n <div class=\"flex gap-4\">\n <div class=\"insights-lable\">{{item?.label}}</div>\n <div class=\"flex items-center growth-positive\" ngIf=\"item?.growth === 'positive'\">\n <mat-icon class=\"positive-icon\">arrow_upward</mat-icon>\n <span class=\"positive-note pt-1\">+{{roundTo(item?.progress)}}%</span>\n </div>\n <div class=\"flex items-center growth-negative\" *ngIf=\"item?.growth === 'negative' && item?.progress > 0\">\n <mat-icon class=\"negative-icon\">arrow_downward</mat-icon>\n <span class=\"negative-note\">-{{roundTo(item?.progress)}}%</span>\n </div>\n </div>\n </div>\n </div>\n </sb-uic-sliders-ng-content>\n </div>\n </div>\n </div>\n </div>\n</div>\n","styles":[".user-progress-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.user-progress-wrapper{border-radius:12px}.user-rank{background:url(https://portal.dev.karmayogibharat.net/content-store/orgStore/0132238763297177601/1727267061524_shadow.png),linear-gradient(124.59deg,#266eeb 51.53%,#133f8b 140.2%);height:76px;border-top-left-radius:12px;border-top-right-radius:12px;border-left-color:#266eeb;border-right-color:#266eeb;border-top-color:#266eeb;padding-left:25%}.current-rank{padding:3px 10px;border-radius:15px;background-color:#fff;color:#f3962f;font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center}.user-details-wrapper{padding:0 8px;border:1px solid #e8e8e8;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fff}.user-details,.user-stats{padding:0 8px}.user-initial{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background-color:#000;color:#fff;border-radius:50px;border:3px solid #fff;margin-top:-30px}.user-profile{width:70px;height:70px;border-radius:50px}.user-name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.my-hours{padding:16px;background-color:#f0f3f4;border-radius:12px;width:50%;border:1px solid #c3c3c3}.my-certificates{padding:16px;background-color:#f0f3f4;width:50%;border-radius:12px;border:1px solid #c3c3c3}.k-points{padding:16px;background-color:#f0f3f4;width:40%;border-radius:12px;border:1px solid #c3c3c3}.hours-icon{background:linear-gradient(143.13deg,rgba(255,191,26,.15) 5.36%,rgba(255,64,128,.15) 94.64%);border-radius:50px;padding:5px}.counter-title{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.counter{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.cert-icon{background:linear-gradient(180deg,rgba(255,206,81,.24) 0,rgba(254,231,28,.24) 100%);border-radius:50px;padding:5px}.kp-point-icon{background:#dbe4ff;border-radius:50px;padding:5px;height:18px;width:18px}.insights-wrapper{padding:8px 0}.insights-container{background:rgba(243,150,47,.2);height:84px;border-radius:8px}.insights-container ::ng-deep .prev{display:none}.insights-container ::ng-deep .next{display:none}.insights-item{padding:16px}.insights-lable{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left}.positive-note{font-size:12px;font-weight:400;line-height:14.4px}.positive-icon{font-size:18px;height:18px;width:18px}.growth-positive{color:green}.growth-negative{color:red}.negative-icon{font-size:18px;height:18px;width:18px}.negative-note{font-size:12px;font-weight:400;line-height:14.4px}@media screen and (min-width:320px) and (max-width:769px){.week-progress{background-color:#d1dbec}}"]}]}],"members":{"objectData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"rootOrgId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"scrollableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":19,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵu"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","module":"@sunbird-cb/utils-v2","name":"ConfigurationsService","line":20,"character":71}]}],"ngOnInit":[{"__symbolic":"method"}],"getUserProgress":[{"__symbolic":"method"}],"getInsightsData":[{"__symbolic":"method"}],"roundTo":[{"__symbolic":"method"}],"getCurrentIndex":[{"__symbolic":"method"}],"createInititals":[{"__symbolic":"method"}],"toggleWeekHightlits":[{"__symbolic":"method"}]}}},"origins":{"ConsumptionService":"./lib/consumption.service","ConsumptionComponent":"./lib/consumption.component","ConsumptionModule":"./lib/consumption.module","WIDGET_REGISTERED_LIB_MODULES":"./lib/registration-lib.config","WIDGET_REGISTRATION_LIB_CONFIG":"./lib/registration-lib.config","ROOT_WIDGET_CONFIG":"./lib/consumption.config","WidgetContentLibService":"./lib/_services/widget-content-lib.service","WidgetUserServiceLib":"./lib/_services/widget-user-lib.service","ContentStripFacetFilterModule":"./lib/_common/strips/content-strip-facet-filter/content-strip-facet-filter.module","HttpLoaderFactory1":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.module","ContentStripWithTabsPillsModule":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.module","HttpLoaderFactory":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.module","ContentStripWithTabsLibModule":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.module","CommonStripModule":"./lib/_common/common-strip/common-strip.module","MyHammerConfig":"./lib/_common/sliders/sliders.module","SlidersLibModule":"./lib/_common/sliders/sliders.module","DataPointsModule":"./lib/_common/data-points/data-points.module","CardsModule":"./lib/_common/cards/cards.module","CompetencyPassbookModule":"./lib/_common/competency-passbook/competency-passbook.module","CompetencyPassbookMdoModule":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.module","CalenderModule":"./lib/_common/calender/calender.module","UserContentRatingLibModule":"./lib/_common/user-content-rating/user-content-rating-lib.module","AnnouncementsModule":"./lib/_common/announcements/announcements.module","ContentProgressModule":"./lib/_common/content-progress/content-progress.module","MDOChannelModule":"./lib/_common/microsites/mdo-channels/mdo-channel.module","ProvidersModule":"./lib/_common/microsites/providers/providers.module","NationalLearningModule":"./lib/_common/microsites/national-learning-week/national-learning.module","CommonMethodsService":"./lib/_services/common-methods.service","TopLearnersModule":"./lib/_common/top-learners/top-learners.module","CbpPlanModule":"./lib/_common/cbp-plan/cbp-plan.module","MdoLeaderboardModule":"./lib/_common/mdo-leaderboard/mdo-leaderboard.module","HighlightsOfWeekModule":"./lib/_common/highlights-of-week/highlights-of-week.module","SpeakersModule":"./lib/_common/speakers/speakers.module","UserProgressModule":"./lib/_common/user-progress/user-progress.module","DialogComponentsModule":"./lib/_common/dialog-components/dialog-components.module","KeyHighlightsModule":"./lib/_common/key-highlights/key-highlights.module","EventsModule":"./lib/_common/events/events.module","ɵa":"./lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component","ɵb":"./lib/_services/multilingual-translations.service","ɵc":"./lib/_services/configurations.service","ɵd":"./lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.module","ɵe":"./lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component","ɵf":"./lib/_common/sliders/sliders.component","ɵg":"./lib/_directives/navigation/navigation.module","ɵh":"./lib/_directives/navigation/navigation.directive","ɵi":"./lib/_directives/image-responsive/image-responsive.module","ɵj":"./lib/_directives/image-responsive/image-responsive.directive","ɵk":"./lib/_common/data-points/data-points.component","ɵl":"./lib/_services/insite-data.service","ɵm":"./lib/_common/skeleton-loader-lib/skeleton-loader-lib.module","ɵn":"./lib/_common/skeleton-loader-lib/skeleton-loader-lib.component","ɵo":"./lib/_common/calender/calender.component","ɵp":"./lib/_common/calender/calender-day/calender-day.component","ɵq":"./lib/_common/common-strip/common-strip.component","ɵr":"./lib/_common/announcements/announcements.component","ɵs":"./lib/_common/top-learners/top-learners.component","ɵt":"./lib/_common/cbp-plan/cbp-plan.component","ɵu":"./lib/_directives/scrollable-item/scrollable-item.directive","ɵv":"./lib/_directives/scrollable-item/scrollable-item.module","ɵw":"./lib/_common/sliders-ng-content/sliders-ng-content.module","ɵx":"./lib/_common/sliders-ng-content/sliders-ng-content.module","ɵy":"./lib/_common/sliders-ng-content/sliders-ng-content.component","ɵz":"./lib/_common/cards/card-resource/card-resource.component","ɵba":"./lib/_common/cards/cards.component","ɵbb":"./lib/_common/cards/card-portrait/card-portrait.component","ɵbc":"./lib/_common/cards/card-user/card-user.component","ɵbd":"./lib/_common/cards/card-landscape/card-landscape.component","ɵbe":"./lib/_common/cards/card-wide/card-wide.component","ɵbf":"./lib/_common/cards/card-mdo-channel/card-mdo-channel.component","ɵbg":"./lib/_common/cards/card-wide-v2/card-wide-v2.component","ɵbh":"./lib/_common/cards/card-karma-programs/card-karma-programs.component","ɵbi":"./lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component","ɵbj":"./lib/_common/cards/provider-card/provider-card.component","ɵbk":"./lib/_common/cards/card-portrait-ext/card-portrait-ext.component","ɵbl":"./lib/_common/cards/card-assessment/card-assessment/card-assessment.component","ɵbm":"./lib/_common/cards/card-progress-portrait-lib/card-progress-portrait-lib.component","ɵbn":"./lib/_services/certificate.service","ɵbo":"./lib/_common/cards/card-mdo-channel-v1/card-mdo-channel-v1.component","ɵbp":"./lib/_pipes/pipe-public-URL/pipe-public-URL.module","ɵbq":"./lib/_pipes/pipe-public-URL/pipe-public-URL.pipe","ɵbr":"./lib/_pipes/object-to-array/object-to-array.pipe.module","ɵbs":"./lib/_pipes/object-to-array/object-to-array.pipe","ɵbt":"./lib/_common/display-content-type-lib/display-content-type-lib.module","ɵbu":"./lib/_common/display-content-type-lib/display-content-type-lib.component","ɵbv":"./lib/_directives/default-thumbnail/default-thumbnail.module","ɵbw":"./lib/_directives/default-thumbnail/default-thumbnail.directive","ɵbx":"./lib/_pipes/pipe-duration-transform/pipe-duration-transform.module","ɵby":"./lib/_pipes/pipe-duration-transform/pipe-duration-transform.pipe","ɵbz":"./lib/_common/content-progress/content-progress.component","ɵca":"./lib/_common/dialog-components/certificate-dialog/certificate-dialog.component","ɵcb":"./lib/_common/avatar-photo-lib/avatar-photo-lib.module","ɵcc":"./lib/_common/avatar-photo-lib/avatar-photo-lib.component","ɵcd":"./lib/_common/strips/content-strip-facet-filter/content-strip-facet-filter.component","ɵce":"./lib/_common/strips/content-strip-with-tabs-pills/content-strip-with-tabs-pills.component","ɵcf":"./lib/_common/competency-passbook/competency-passbook.component","ɵcg":"./lib/_common/competency-passbook/competency-passbook.service","ɵch":"./lib/_common/pills/pills.module","ɵci":"./lib/_common/pills/pills.component","ɵcj":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.component","ɵck":"./lib/_common/competency-passbook-mdo/competency-passbook-mdo.service","ɵcl":"./lib/_common/user-content-rating/user-content-rating-lib.component","ɵcm":"./lib/_services/rating.service","ɵcn":"./lib/_common/user-content-rating/user-content-rating-lib.service","ɵco":"./lib/_common/microsites/mdo-channels/mdo-channel-v1/mdo-channel-v1.component","ɵcp":"./lib/_common/microsites/mdo-channels/mdo-channel-v2/mdo-channel-v2.component","ɵcq":"./lib/_common/microsites/providers/providers-v2/providers-v2.component","ɵcr":"./lib/_common/microsites/national-learning-week/national-learning/national-learning.component","ɵcs":"./lib/_common/key-highlights/key-highlights.component","ɵct":"./lib/_common/events/events.component","ɵcu":"./lib/_common/events/event-card/event-card.component","ɵcv":"./lib/_common/mdo-leaderboard/mdo-leaderboard.component","ɵcw":"./lib/_common/highlights-of-week/highlights-of-week.component","ɵcx":"./lib/_common/speakers/speakers.component","ɵcy":"./lib/_common/user-progress/user-progress.component"},"importAs":"@sunbird-cb/consumption"}