@sunbird-cb/consumption 0.0.14 → 0.0.15

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 (35) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +113 -35
  2. package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
  3. package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
  4. package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
  5. package/esm2015/lib/_common/announcements/announcements.component.js +39 -0
  6. package/esm2015/lib/_common/announcements/announcements.module.js +21 -0
  7. package/esm2015/lib/_common/cards/card-user/card-user.component.js +2 -2
  8. package/esm2015/lib/_common/data-points/data-points.component.js +3 -3
  9. package/esm2015/lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component.js +11 -3
  10. package/esm2015/lib/_common/sliders/sliders.component.js +2 -2
  11. package/esm2015/lib/_common/sliders/sliders.model.js +7 -1
  12. package/esm2015/lib/consumption.module.js +4 -2
  13. package/esm2015/public-api.js +2 -1
  14. package/esm2015/sunbird-cb-consumption.js +30 -29
  15. package/esm5/lib/_common/announcements/announcements.component.js +49 -0
  16. package/esm5/lib/_common/announcements/announcements.module.js +25 -0
  17. package/esm5/lib/_common/cards/card-user/card-user.component.js +2 -2
  18. package/esm5/lib/_common/data-points/data-points.component.js +3 -3
  19. package/esm5/lib/_common/horizontal-scroller-v2/horizontal-scroller-v2.component.js +11 -3
  20. package/esm5/lib/_common/sliders/sliders.component.js +2 -2
  21. package/esm5/lib/_common/sliders/sliders.model.js +7 -1
  22. package/esm5/lib/consumption.module.js +4 -2
  23. package/esm5/public-api.js +2 -1
  24. package/esm5/sunbird-cb-consumption.js +30 -29
  25. package/fesm2015/sunbird-cb-consumption.js +72 -8
  26. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  27. package/fesm5/sunbird-cb-consumption.js +84 -8
  28. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  29. package/lib/_common/announcements/announcements.component.d.ts +7 -0
  30. package/lib/_common/announcements/announcements.module.d.ts +2 -0
  31. package/lib/_common/sliders/sliders.model.d.ts +6 -0
  32. package/package.json +1 -1
  33. package/public-api.d.ts +1 -0
  34. package/sunbird-cb-consumption.d.ts +28 -27
  35. package/sunbird-cb-consumption.metadata.json +1 -1
@@ -388,7 +388,11 @@
388
388
  left: this.horizontalScrollElem.nativeElement.scrollLeft - clientWidth,
389
389
  behavior: 'smooth',
390
390
  });
391
- this.activeNav -= 1;
391
+ /** @type {?} */
392
+ var elem = this.horizontalScrollElem.nativeElement;
393
+ if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
394
+ this.activeNav -= 1;
395
+ }
392
396
  }
393
397
  };
394
398
  /**
@@ -408,7 +412,11 @@
408
412
  left: this.horizontalScrollElem.nativeElement.scrollLeft + clientWidth,
409
413
  behavior: 'smooth',
410
414
  });
411
- this.activeNav += 1;
415
+ /** @type {?} */
416
+ var elem = this.horizontalScrollElem.nativeElement;
417
+ if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
418
+ this.activeNav += 1;
419
+ }
412
420
  }
413
421
  };
414
422
  /**
@@ -6058,7 +6066,7 @@
6058
6066
  SlidersLibComponent.decorators = [
6059
6067
  { type: core.Component, args: [{
6060
6068
  selector: 'sb-uic-sliders',
6061
- template: "<div class=\"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 <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 <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)\">&#10094;</a>\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n </div>\n</div>\n<div class=\"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<!-- <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\">&#10094;</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\">&#10095;</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",
6069
+ template: "<div class=\"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 <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=\"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\"\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)\">&#10094;</a>\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n </div>\n</div>\n<div class=\"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<!-- <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\">&#10094;</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\">&#10095;</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",
6062
6070
  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}.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 .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}}"]
6063
6071
  }] }
6064
6072
  ];
@@ -6534,8 +6542,8 @@
6534
6542
  DataPointsComponent.decorators = [
6535
6543
  { type: core.Component, args: [{
6536
6544
  selector: 'sb-uic-data-points',
6537
- 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 }\">\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\" >{{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\" *ngIf=\"layoutType === 'singleRow'\">\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\">\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\">{{obj?.value | number: '1.1-2'}}</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\">{{item?.value}}</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\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web\" *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</ng-container>",
6538
- styles: [".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)}.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}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@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}}"]
6545
+ 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 }\">\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\" *ngIf=\"layoutType === 'singleRow'\">\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\">\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\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web\" *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</ng-container>\n",
6546
+ styles: [".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)}.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}.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}@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}}"]
6539
6547
  }] }
6540
6548
  ];
6541
6549
  /** @nocollapse */
@@ -7980,6 +7988,73 @@
7980
7988
  return CommonStripModule;
7981
7989
  }());
7982
7990
 
7991
+ /**
7992
+ * @fileoverview added by tsickle
7993
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
7994
+ */
7995
+ var AnnouncementsComponent = /** @class */ (function () {
7996
+ function AnnouncementsComponent() {
7997
+ }
7998
+ /**
7999
+ * @return {?}
8000
+ */
8001
+ AnnouncementsComponent.prototype.ngOnInit = /**
8002
+ * @return {?}
8003
+ */
8004
+ function () {
8005
+ };
8006
+ /**
8007
+ * @param {?} item
8008
+ * @return {?}
8009
+ */
8010
+ AnnouncementsComponent.prototype.viewMoreOrLess = /**
8011
+ * @param {?} item
8012
+ * @return {?}
8013
+ */
8014
+ function (item) {
8015
+ if (item.value.length > 152) {
8016
+ item.expanded = !item.expanded;
8017
+ }
8018
+ };
8019
+ AnnouncementsComponent.decorators = [
8020
+ { type: core.Component, args: [{
8021
+ selector: 'sb-uic-announcements',
8022
+ template: "<p>announcements works!</p>\n<div class=\"w-full\">\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=\"key-list\">\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>\n</div>",
8023
+ 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{max-height:600px;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}.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}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
8024
+ }] }
8025
+ ];
8026
+ /** @nocollapse */
8027
+ AnnouncementsComponent.ctorParameters = function () { return []; };
8028
+ AnnouncementsComponent.propDecorators = {
8029
+ objectData: [{ type: core.Input }]
8030
+ };
8031
+ return AnnouncementsComponent;
8032
+ }());
8033
+ if (false) {
8034
+ /** @type {?} */
8035
+ AnnouncementsComponent.prototype.objectData;
8036
+ }
8037
+
8038
+ /**
8039
+ * @fileoverview added by tsickle
8040
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8041
+ */
8042
+ var AnnouncementsModule = /** @class */ (function () {
8043
+ function AnnouncementsModule() {
8044
+ }
8045
+ AnnouncementsModule.decorators = [
8046
+ { type: core.NgModule, args: [{
8047
+ declarations: [AnnouncementsComponent],
8048
+ imports: [
8049
+ common.CommonModule,
8050
+ SkeletonLoaderLibModule
8051
+ ],
8052
+ exports: [AnnouncementsComponent],
8053
+ },] }
8054
+ ];
8055
+ return AnnouncementsModule;
8056
+ }());
8057
+
7983
8058
  /**
7984
8059
  * @fileoverview added by tsickle
7985
8060
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7999,7 +8074,8 @@
7999
8074
  SlidersLibModule,
8000
8075
  DataPointsModule,
8001
8076
  CalenderModule,
8002
- CommonStripModule
8077
+ CommonStripModule,
8078
+ AnnouncementsModule
8003
8079
  ],
8004
8080
  },] }
8005
8081
  ];
@@ -8869,7 +8945,7 @@
8869
8945
  CardUserComponent.decorators = [
8870
8946
  { type: core.Component, args: [{
8871
8947
  selector: 'sb-uic-card-user',
8872
- 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\">\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>",
8948
+ 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>",
8873
8949
  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{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-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-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}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;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}"]
8874
8950
  }] }
8875
8951
  ];
@@ -10896,6 +10972,7 @@
10896
10972
  return UserContentRatingLibModule;
10897
10973
  }());
10898
10974
 
10975
+ exports.AnnouncementsModule = AnnouncementsModule;
10899
10976
  exports.CalenderModule = CalenderModule;
10900
10977
  exports.CardsModule = CardsModule;
10901
10978
  exports.CommonMethodsService = CommonMethodsService;
@@ -10915,27 +10992,28 @@
10915
10992
  exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
10916
10993
  exports.ɵa = ContentStripWithTabsLibComponent;
10917
10994
  exports.ɵb = WidgetContentService;
10918
- exports.ɵba = PipePublicURL;
10919
- exports.ɵbb = DisplayContentTypeLibModule;
10920
- exports.ɵbc = DisplayContentTypeLibComponent;
10921
- exports.ɵbd = DefaultThumbnailModule;
10922
- exports.ɵbe = DefaultThumbnailDirective;
10923
- exports.ɵbf = PipeDurationTransformModule;
10924
- exports.ɵbg = PipeDurationTransformPipe;
10925
- exports.ɵbh = CompetencyPassbookComponent;
10926
- exports.ɵbi = CompetencyPassbookService;
10927
- exports.ɵbj = PillsModule;
10928
- exports.ɵbk = PillsComponent;
10929
- exports.ɵbl = UserContentRatingLibComponent;
10930
- exports.ɵbm = ScrollableItemDirective;
10931
- exports.ɵbn = RatingService;
10932
- exports.ɵbo = UserContentRatingLibService;
10933
- exports.ɵbp = AvatarPhotoLibModule;
10934
- exports.ɵbq = AvatarPhotoLibComponent;
10935
- exports.ɵbr = MyHammerConfig$1;
10936
- exports.ɵbs = SlidersNgContentLibModule;
10937
- exports.ɵbt = SlidersNgContentLibComponent;
10938
- exports.ɵbu = ScrollableItemModule;
10995
+ exports.ɵba = PipePublicURLModule;
10996
+ exports.ɵbb = PipePublicURL;
10997
+ exports.ɵbc = DisplayContentTypeLibModule;
10998
+ exports.ɵbd = DisplayContentTypeLibComponent;
10999
+ exports.ɵbe = DefaultThumbnailModule;
11000
+ exports.ɵbf = DefaultThumbnailDirective;
11001
+ exports.ɵbg = PipeDurationTransformModule;
11002
+ exports.ɵbh = PipeDurationTransformPipe;
11003
+ exports.ɵbi = CompetencyPassbookComponent;
11004
+ exports.ɵbj = CompetencyPassbookService;
11005
+ exports.ɵbk = PillsModule;
11006
+ exports.ɵbl = PillsComponent;
11007
+ exports.ɵbm = UserContentRatingLibComponent;
11008
+ exports.ɵbn = ScrollableItemDirective;
11009
+ exports.ɵbo = RatingService;
11010
+ exports.ɵbp = UserContentRatingLibService;
11011
+ exports.ɵbq = AvatarPhotoLibModule;
11012
+ exports.ɵbr = AvatarPhotoLibComponent;
11013
+ exports.ɵbs = MyHammerConfig$1;
11014
+ exports.ɵbt = SlidersNgContentLibModule;
11015
+ exports.ɵbu = SlidersNgContentLibComponent;
11016
+ exports.ɵbv = ScrollableItemModule;
10939
11017
  exports.ɵc = WidgetUserService;
10940
11018
  exports.ɵd = MultilingualTranslationsService;
10941
11019
  exports.ɵe = ConfigurationsService;
@@ -10953,13 +11031,13 @@
10953
11031
  exports.ɵq = CalenderComponent;
10954
11032
  exports.ɵr = CalenderDayComponent;
10955
11033
  exports.ɵs = CommonStripComponent;
10956
- exports.ɵt = CardResourceComponent;
10957
- exports.ɵu = CardsComponent;
10958
- exports.ɵv = CardPortraitComponent;
10959
- exports.ɵw = CardUserComponent;
10960
- exports.ɵx = CardLandscapeComponent;
10961
- exports.ɵy = CardWideComponent;
10962
- exports.ɵz = PipePublicURLModule;
11034
+ exports.ɵt = AnnouncementsComponent;
11035
+ exports.ɵu = CardResourceComponent;
11036
+ exports.ɵv = CardsComponent;
11037
+ exports.ɵw = CardPortraitComponent;
11038
+ exports.ɵx = CardUserComponent;
11039
+ exports.ɵy = CardLandscapeComponent;
11040
+ exports.ɵz = CardWideComponent;
10963
11041
 
10964
11042
  Object.defineProperty(exports, '__esModule', { value: true });
10965
11043