@sunbird-cb/consumption 0.0.27 → 0.0.28
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.
- package/bundles/sunbird-cb-consumption.umd.js +86 -76
- package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
- package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
- package/esm2015/lib/_common/cards/card-karma-programs/card-karma-programs.component.js +33 -26
- package/esm2015/lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component.js +23 -23
- package/esm2015/lib/_common/cards/card-landscape/card-landscape.component.js +10 -22
- package/esm2015/lib/_common/cards/card-portrait/card-portrait.component.js +3 -3
- package/esm2015/lib/_common/cards/cards.component.js +2 -2
- package/esm2015/lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component.js +20 -5
- package/esm5/lib/_common/cards/card-karma-programs/card-karma-programs.component.js +35 -29
- package/esm5/lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component.js +24 -24
- package/esm5/lib/_common/cards/card-landscape/card-landscape.component.js +11 -22
- package/esm5/lib/_common/cards/card-portrait/card-portrait.component.js +3 -3
- package/esm5/lib/_common/cards/cards.component.js +2 -2
- package/esm5/lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component.js +20 -5
- package/fesm2015/sunbird-cb-consumption.js +82 -72
- package/fesm2015/sunbird-cb-consumption.js.map +1 -1
- package/fesm5/sunbird-cb-consumption.js +86 -76
- package/fesm5/sunbird-cb-consumption.js.map +1 -1
- package/lib/_common/cards/card-karma-programs/card-karma-programs.component.d.ts +6 -2
- package/lib/_common/cards/card-karma-programs-v2/card-karma-programs-v2.component.d.ts +5 -2
- package/lib/_common/cards/card-landscape/card-landscape.component.d.ts +2 -1
- package/package.json +1 -1
- package/sunbird-cb-consumption.metadata.json +1 -1
|
@@ -460,14 +460,29 @@
|
|
|
460
460
|
}
|
|
461
461
|
this.activeNav = 0;
|
|
462
462
|
}
|
|
463
|
-
if (elem.scrollWidth === Math.round(elem.clientWidth + elem.scrollLeft)) {
|
|
463
|
+
// if (elem.scrollWidth === Math.round(elem.clientWidth + elem.scrollLeft)) {
|
|
464
|
+
// if (this.loadStatus === 'hasMore') {
|
|
465
|
+
// this.loadNext.emit();
|
|
466
|
+
// } else {
|
|
467
|
+
// if(!this.sliderConfig.arrowsAlwaysOn) {
|
|
468
|
+
// this.enableNext = false;
|
|
469
|
+
// }
|
|
470
|
+
// if (this.bottomDotsArray.length) {
|
|
471
|
+
// this.activeNav = this.bottomDotsArray.length - 1;
|
|
472
|
+
// }
|
|
473
|
+
// }
|
|
474
|
+
// }
|
|
475
|
+
// if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
|
|
476
|
+
// this.activeNav = Math.ceil(elem.scrollLeft / elem.clientWidth);
|
|
477
|
+
// }
|
|
478
|
+
/** @type {?} */
|
|
479
|
+
var widthDiff = Math.abs(elem.scrollWidth - Math.round(elem.clientWidth + elem.scrollLeft));
|
|
480
|
+
if (widthDiff === 0 || widthDiff === 1) {
|
|
464
481
|
if (this.loadStatus === 'hasMore') {
|
|
465
482
|
this.loadNext.emit();
|
|
466
483
|
}
|
|
467
484
|
else {
|
|
468
|
-
|
|
469
|
-
this.enableNext = false;
|
|
470
|
-
}
|
|
485
|
+
this.enableNext = false;
|
|
471
486
|
if (this.bottomDotsArray.length) {
|
|
472
487
|
this.activeNav = this.bottomDotsArray.length - 1;
|
|
473
488
|
}
|
|
@@ -8764,7 +8779,7 @@
|
|
|
8764
8779
|
CardsComponent.decorators = [
|
|
8765
8780
|
{ type: core.Component, args: [{
|
|
8766
8781
|
selector: 'sb-uic-cards',
|
|
8767
|
-
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-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></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>\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 (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\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n <sb-uic-card-landscape
|
|
8782
|
+
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-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></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>\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 (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\" [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 [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 #cardMdo>\n <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgram>\n <sb-uic-card-karma-programs [randomColorApply]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\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>",
|
|
8768
8783
|
styles: [""]
|
|
8769
8784
|
}] }
|
|
8770
8785
|
];
|
|
@@ -8930,8 +8945,8 @@
|
|
|
8930
8945
|
CardPortraitComponent.decorators = [
|
|
8931
8946
|
{ type: core.Component, args: [{
|
|
8932
8947
|
selector: 'sb-uic-card-portrait',
|
|
8933
|
-
template: "<ng-container *ngIf=\"!isCardLoading\">\n <mat-card class=\"card-standard-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)=\"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=\"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]\">\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>",
|
|
8934
|
-
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-all;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}"]
|
|
8948
|
+
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\" 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]\">\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>",
|
|
8949
|
+
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-all;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}"]
|
|
8935
8950
|
}] }
|
|
8936
8951
|
];
|
|
8937
8952
|
/** @nocollapse */
|
|
@@ -9530,6 +9545,7 @@
|
|
|
9530
9545
|
this.configSvc = configSvc;
|
|
9531
9546
|
this.isCardLoading = false;
|
|
9532
9547
|
this.contentData = new core.EventEmitter();
|
|
9548
|
+
this.triggerTelemetry = new core.EventEmitter();
|
|
9533
9549
|
this.isCardFlipped = false;
|
|
9534
9550
|
this.acbpConstants = NsCardContent$1.ACBPConst;
|
|
9535
9551
|
this.showFlip = false;
|
|
@@ -9599,29 +9615,15 @@
|
|
|
9599
9615
|
this.contentData.emit(contentData);
|
|
9600
9616
|
};
|
|
9601
9617
|
/**
|
|
9618
|
+
* @param {?} content
|
|
9602
9619
|
* @return {?}
|
|
9603
9620
|
*/
|
|
9604
9621
|
CardLandscapeComponent.prototype.raiseTelemetry = /**
|
|
9622
|
+
* @param {?} content
|
|
9605
9623
|
* @return {?}
|
|
9606
9624
|
*/
|
|
9607
|
-
function () {
|
|
9608
|
-
|
|
9609
|
-
// return
|
|
9610
|
-
// }
|
|
9611
|
-
this.events.raiseInteractTelemetry({
|
|
9612
|
-
type: 'click',
|
|
9613
|
-
subType: this.widgetType + "-" + this.widgetSubType,
|
|
9614
|
-
id: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
|
|
9615
|
-
}, {
|
|
9616
|
-
id: this.widgetData.content.identifier,
|
|
9617
|
-
type: this.widgetData.content.primaryCategory,
|
|
9618
|
-
//context: this.widgetData.context,
|
|
9619
|
-
rollup: {},
|
|
9620
|
-
ver: "" + this.widgetData.content.version + '',
|
|
9621
|
-
}, {
|
|
9622
|
-
pageIdExt: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
|
|
9623
|
-
module: lodash.camelCase(this.widgetData.content.primaryCategory),
|
|
9624
|
-
});
|
|
9625
|
+
function (content) {
|
|
9626
|
+
this.triggerTelemetry.emit(content);
|
|
9625
9627
|
};
|
|
9626
9628
|
/**
|
|
9627
9629
|
* @return {?}
|
|
@@ -9652,7 +9654,7 @@
|
|
|
9652
9654
|
CardLandscapeComponent.decorators = [
|
|
9653
9655
|
{ type: core.Component, args: [{
|
|
9654
9656
|
selector: 'sb-uic-card-landscape',
|
|
9655
|
-
template: "<ng-container *ngIf=\"!isCardLoading\">\n <a class=\"cursor-pointer\" (click)=\"raiseTelemetry();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 \" [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]\">\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 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>",
|
|
9657
|
+
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 \" [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]\">\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 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>",
|
|
9656
9658
|
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-all;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)}}"]
|
|
9657
9659
|
}] }
|
|
9658
9660
|
];
|
|
@@ -9670,7 +9672,8 @@
|
|
|
9670
9672
|
showIntranetContent: [{ type: core.Input }],
|
|
9671
9673
|
isIntranetAllowedSettings: [{ type: core.Input }],
|
|
9672
9674
|
isCardLoading: [{ type: core.Input }],
|
|
9673
|
-
contentData: [{ type: core.Output }]
|
|
9675
|
+
contentData: [{ type: core.Output }],
|
|
9676
|
+
triggerTelemetry: [{ type: core.Output }]
|
|
9674
9677
|
};
|
|
9675
9678
|
return CardLandscapeComponent;
|
|
9676
9679
|
}());
|
|
@@ -9688,6 +9691,8 @@
|
|
|
9688
9691
|
/** @type {?} */
|
|
9689
9692
|
CardLandscapeComponent.prototype.contentData;
|
|
9690
9693
|
/** @type {?} */
|
|
9694
|
+
CardLandscapeComponent.prototype.triggerTelemetry;
|
|
9695
|
+
/** @type {?} */
|
|
9691
9696
|
CardLandscapeComponent.prototype.isCardFlipped;
|
|
9692
9697
|
/** @type {?} */
|
|
9693
9698
|
CardLandscapeComponent.prototype.defaultThumbnail;
|
|
@@ -10231,12 +10236,14 @@
|
|
|
10231
10236
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
10232
10237
|
*/
|
|
10233
10238
|
var CardKarmaProgramsComponent = /** @class */ (function () {
|
|
10234
|
-
function CardKarmaProgramsComponent(events, translate, langtranslations, configSvc) {
|
|
10239
|
+
function CardKarmaProgramsComponent(events, translate, langtranslations, configSvc, contSvc, router) {
|
|
10235
10240
|
var _this = this;
|
|
10236
10241
|
this.events = events;
|
|
10237
10242
|
this.translate = translate;
|
|
10238
10243
|
this.langtranslations = langtranslations;
|
|
10239
10244
|
this.configSvc = configSvc;
|
|
10245
|
+
this.contSvc = contSvc;
|
|
10246
|
+
this.router = router;
|
|
10240
10247
|
this.randomColorApply = false;
|
|
10241
10248
|
this.userData = new core.EventEmitter();
|
|
10242
10249
|
this.widgetType = '';
|
|
@@ -10300,30 +10307,6 @@
|
|
|
10300
10307
|
}
|
|
10301
10308
|
}
|
|
10302
10309
|
};
|
|
10303
|
-
/**
|
|
10304
|
-
* @return {?}
|
|
10305
|
-
*/
|
|
10306
|
-
CardKarmaProgramsComponent.prototype.raiseTelemetry = /**
|
|
10307
|
-
* @return {?}
|
|
10308
|
-
*/
|
|
10309
|
-
function () {
|
|
10310
|
-
// if(this.forPreview){
|
|
10311
|
-
// return
|
|
10312
|
-
// }
|
|
10313
|
-
this.events.raiseInteractTelemetry({
|
|
10314
|
-
type: 'click',
|
|
10315
|
-
subType: this.widgetType + "-" + this.widgetSubType,
|
|
10316
|
-
id: lodash.camelCase(this.widgetData.content.userId) + "-card",
|
|
10317
|
-
}, {
|
|
10318
|
-
id: this.widgetData.content.userId,
|
|
10319
|
-
// type: this.widgetData.user.primaryCategory,
|
|
10320
|
-
//context: this.widgetData.context,
|
|
10321
|
-
rollup: {},
|
|
10322
|
-
}, {
|
|
10323
|
-
pageIdExt: lodash.camelCase('user') + "-card",
|
|
10324
|
-
module: lodash.camelCase('user'),
|
|
10325
|
-
});
|
|
10326
|
-
};
|
|
10327
10310
|
Object.defineProperty(CardKarmaProgramsComponent.prototype, "getRandomColors", {
|
|
10328
10311
|
get: /**
|
|
10329
10312
|
* @return {?}
|
|
@@ -10336,10 +10319,25 @@
|
|
|
10336
10319
|
enumerable: true,
|
|
10337
10320
|
configurable: true
|
|
10338
10321
|
});
|
|
10322
|
+
/**
|
|
10323
|
+
* @param {?} data
|
|
10324
|
+
* @return {?}
|
|
10325
|
+
*/
|
|
10326
|
+
CardKarmaProgramsComponent.prototype.redirectTo = /**
|
|
10327
|
+
* @param {?} data
|
|
10328
|
+
* @return {?}
|
|
10329
|
+
*/
|
|
10330
|
+
function (data) {
|
|
10331
|
+
if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
|
|
10332
|
+
data['typeOfTelemetry'] = 'karma-programs';
|
|
10333
|
+
}
|
|
10334
|
+
this.contSvc.changeTelemetryData(data);
|
|
10335
|
+
this.router.navigate(["/app/learn/karma-programs/" + data.title + "/" + data.playListKey + "/" + data.orgId + "/micro-sites"]);
|
|
10336
|
+
};
|
|
10339
10337
|
CardKarmaProgramsComponent.decorators = [
|
|
10340
10338
|
{ type: core.Component, args: [{
|
|
10341
10339
|
selector: 'sb-uic-card-karma-programs',
|
|
10342
|
-
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)=\"
|
|
10340
|
+
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-col h-full\">\n <div class=\"image-container\">\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.title\" />\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?.title\" />\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?.title\" />\n </ng-template>\n </ng-container>\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>",
|
|
10343
10341
|
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: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: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-all;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}"]
|
|
10344
10342
|
}] }
|
|
10345
10343
|
];
|
|
@@ -10348,7 +10346,9 @@
|
|
|
10348
10346
|
{ type: utilsV2.EventService },
|
|
10349
10347
|
{ type: core$1.TranslateService },
|
|
10350
10348
|
{ type: utilsV2.MultilingualTranslationsService },
|
|
10351
|
-
{ type: utilsV2.ConfigurationsService }
|
|
10349
|
+
{ type: utilsV2.ConfigurationsService },
|
|
10350
|
+
{ type: WidgetContentService },
|
|
10351
|
+
{ type: router.Router }
|
|
10352
10352
|
]; };
|
|
10353
10353
|
CardKarmaProgramsComponent.propDecorators = {
|
|
10354
10354
|
widgetData: [{ type: core.Input }],
|
|
@@ -10396,6 +10396,16 @@
|
|
|
10396
10396
|
* @private
|
|
10397
10397
|
*/
|
|
10398
10398
|
CardKarmaProgramsComponent.prototype.configSvc;
|
|
10399
|
+
/**
|
|
10400
|
+
* @type {?}
|
|
10401
|
+
* @private
|
|
10402
|
+
*/
|
|
10403
|
+
CardKarmaProgramsComponent.prototype.contSvc;
|
|
10404
|
+
/**
|
|
10405
|
+
* @type {?}
|
|
10406
|
+
* @private
|
|
10407
|
+
*/
|
|
10408
|
+
CardKarmaProgramsComponent.prototype.router;
|
|
10399
10409
|
}
|
|
10400
10410
|
|
|
10401
10411
|
/**
|
|
@@ -10403,14 +10413,16 @@
|
|
|
10403
10413
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
10404
10414
|
*/
|
|
10405
10415
|
var CardKarmaProgramsV2Component = /** @class */ (function () {
|
|
10406
|
-
function CardKarmaProgramsV2Component(events, translate, langtranslations, configSvc) {
|
|
10416
|
+
function CardKarmaProgramsV2Component(events, translate, langtranslations, configSvc, router) {
|
|
10407
10417
|
var _this = this;
|
|
10408
10418
|
this.events = events;
|
|
10409
10419
|
this.translate = translate;
|
|
10410
10420
|
this.langtranslations = langtranslations;
|
|
10411
10421
|
this.configSvc = configSvc;
|
|
10422
|
+
this.router = router;
|
|
10412
10423
|
this.randomColorApply = false;
|
|
10413
10424
|
this.userData = new core.EventEmitter();
|
|
10425
|
+
this.raiseTemeletry = new core.EventEmitter();
|
|
10414
10426
|
this.widgetType = '';
|
|
10415
10427
|
this.widgetSubType = '';
|
|
10416
10428
|
this.randomColors = [
|
|
@@ -10473,28 +10485,17 @@
|
|
|
10473
10485
|
}
|
|
10474
10486
|
};
|
|
10475
10487
|
/**
|
|
10488
|
+
* @param {?} content
|
|
10476
10489
|
* @return {?}
|
|
10477
10490
|
*/
|
|
10478
|
-
CardKarmaProgramsV2Component.prototype.
|
|
10491
|
+
CardKarmaProgramsV2Component.prototype.redirectTo = /**
|
|
10492
|
+
* @param {?} content
|
|
10479
10493
|
* @return {?}
|
|
10480
10494
|
*/
|
|
10481
|
-
function () {
|
|
10482
|
-
|
|
10483
|
-
//
|
|
10484
|
-
|
|
10485
|
-
this.events.raiseInteractTelemetry({
|
|
10486
|
-
type: 'click',
|
|
10487
|
-
subType: this.widgetType + "-" + this.widgetSubType,
|
|
10488
|
-
id: lodash.camelCase(this.widgetData.content.userId) + "-card",
|
|
10489
|
-
}, {
|
|
10490
|
-
id: this.widgetData.content.userId,
|
|
10491
|
-
// type: this.widgetData.user.primaryCategory,
|
|
10492
|
-
//context: this.widgetData.context,
|
|
10493
|
-
rollup: {},
|
|
10494
|
-
}, {
|
|
10495
|
-
pageIdExt: lodash.camelCase('user') + "-card",
|
|
10496
|
-
module: lodash.camelCase('user'),
|
|
10497
|
-
});
|
|
10495
|
+
function (content) {
|
|
10496
|
+
this.raiseTemeletry.emit(content);
|
|
10497
|
+
//this.router.navigate([`/app/learn/karma-programs/${content.identifier}/${content.identifier}/micro-sites`])
|
|
10498
|
+
this.router.navigate(['/app/learn/karma-programs/India%20post/0132593267437813768program/0132593267437813768/micro-sites']);
|
|
10498
10499
|
};
|
|
10499
10500
|
Object.defineProperty(CardKarmaProgramsV2Component.prototype, "getRandomColors", {
|
|
10500
10501
|
get: /**
|
|
@@ -10511,7 +10512,7 @@
|
|
|
10511
10512
|
CardKarmaProgramsV2Component.decorators = [
|
|
10512
10513
|
{ type: core.Component, args: [{
|
|
10513
10514
|
selector: 'sb-uic-card-karma-programs-v2',
|
|
10514
|
-
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)=\"
|
|
10515
|
+
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.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.title\" />\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.title\" />\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.title\" />\n </ng-template>\n </ng-container>\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>",
|
|
10515
10516
|
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-all;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:190px;height:106px;max-height:106px;border-radius:12px}}"]
|
|
10516
10517
|
}] }
|
|
10517
10518
|
];
|
|
@@ -10520,12 +10521,14 @@
|
|
|
10520
10521
|
{ type: utilsV2.EventService },
|
|
10521
10522
|
{ type: core$1.TranslateService },
|
|
10522
10523
|
{ type: utilsV2.MultilingualTranslationsService },
|
|
10523
|
-
{ type: utilsV2.ConfigurationsService }
|
|
10524
|
+
{ type: utilsV2.ConfigurationsService },
|
|
10525
|
+
{ type: router.Router }
|
|
10524
10526
|
]; };
|
|
10525
10527
|
CardKarmaProgramsV2Component.propDecorators = {
|
|
10526
10528
|
widgetData: [{ type: core.Input }],
|
|
10527
10529
|
randomColorApply: [{ type: core.Input }],
|
|
10528
|
-
userData: [{ type: core.Output }]
|
|
10530
|
+
userData: [{ type: core.Output }],
|
|
10531
|
+
raiseTemeletry: [{ type: core.Output }]
|
|
10529
10532
|
};
|
|
10530
10533
|
return CardKarmaProgramsV2Component;
|
|
10531
10534
|
}());
|
|
@@ -10537,6 +10540,8 @@
|
|
|
10537
10540
|
/** @type {?} */
|
|
10538
10541
|
CardKarmaProgramsV2Component.prototype.userData;
|
|
10539
10542
|
/** @type {?} */
|
|
10543
|
+
CardKarmaProgramsV2Component.prototype.raiseTemeletry;
|
|
10544
|
+
/** @type {?} */
|
|
10540
10545
|
CardKarmaProgramsV2Component.prototype.defaultThumbnail;
|
|
10541
10546
|
/** @type {?} */
|
|
10542
10547
|
CardKarmaProgramsV2Component.prototype.sourceLogos;
|
|
@@ -10568,6 +10573,11 @@
|
|
|
10568
10573
|
* @private
|
|
10569
10574
|
*/
|
|
10570
10575
|
CardKarmaProgramsV2Component.prototype.configSvc;
|
|
10576
|
+
/**
|
|
10577
|
+
* @type {?}
|
|
10578
|
+
* @private
|
|
10579
|
+
*/
|
|
10580
|
+
CardKarmaProgramsV2Component.prototype.router;
|
|
10571
10581
|
}
|
|
10572
10582
|
|
|
10573
10583
|
/**
|