@sunbird-cb/consumption 0.0.64 → 0.0.66
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 +138 -16
- 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/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +144 -28
- package/esm2015/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.model.js +5 -1
- package/esm2015/lib/_common/data-points/data-points.component.js +2 -2
- package/esm2015/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +1 -1
- package/esm2015/lib/_common/sliders/sliders.component.js +1 -1
- package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +136 -14
- package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.model.js +5 -1
- package/esm5/lib/_common/data-points/data-points.component.js +2 -2
- package/esm5/lib/_common/microsites/providers/providers-v2/providers-v2.component.js +1 -1
- package/esm5/lib/_common/sliders/sliders.component.js +1 -1
- package/fesm2015/sunbird-cb-consumption.js +146 -30
- package/fesm2015/sunbird-cb-consumption.js.map +1 -1
- package/fesm5/sunbird-cb-consumption.js +138 -16
- package/fesm5/sunbird-cb-consumption.js.map +1 -1
- package/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.d.ts +2 -0
- package/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.model.d.ts +2 -0
- package/package.json +1 -1
- package/sunbird-cb-consumption.metadata.json +1 -1
|
@@ -4573,6 +4573,9 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
4573
4573
|
else if (currentTabFromMap.request.playlistRead) {
|
|
4574
4574
|
this.getTabDataByNewReqPlaylistReadContent(currentStrip, tabEvent.index, currentTabFromMap, true);
|
|
4575
4575
|
}
|
|
4576
|
+
else if (currentTabFromMap.request.ciosContent) {
|
|
4577
|
+
this.getTabDataByCiosSearch(currentStrip, tabEvent.index, currentTabFromMap, true);
|
|
4578
|
+
}
|
|
4576
4579
|
if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
|
|
4577
4580
|
stripMap.tabs[tabEvent.index].tabLoading = false;
|
|
4578
4581
|
}
|
|
@@ -5320,6 +5323,30 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
5320
5323
|
widgetData: {},
|
|
5321
5324
|
})));
|
|
5322
5325
|
}
|
|
5326
|
+
/**
|
|
5327
|
+
* @private
|
|
5328
|
+
* @param {?} contents
|
|
5329
|
+
* @param {?} currentTab
|
|
5330
|
+
* @return {?}
|
|
5331
|
+
*/
|
|
5332
|
+
transformAllTabContentsToWidgets(contents, currentTab) {
|
|
5333
|
+
return (contents || []).map((/**
|
|
5334
|
+
* @param {?} content
|
|
5335
|
+
* @param {?} idx
|
|
5336
|
+
* @return {?}
|
|
5337
|
+
*/
|
|
5338
|
+
(content, idx) => (content ? {
|
|
5339
|
+
widgetType: 'cardLib',
|
|
5340
|
+
widgetSubType: 'cardContentLib',
|
|
5341
|
+
widgetHostClass: 'mb-2',
|
|
5342
|
+
widgetData: Object.assign({ content }, (content.batch && { batch: content.batch }), { cardSubType: currentTab.stripConfig && currentTab.stripConfig.cardSubType, cardCustomeClass: currentTab.customeClass ? currentTab.customeClass : '', context: { pageSection: currentTab.value, position: idx }, intranetMode: currentTab.stripConfig && currentTab.stripConfig.intranetMode, deletedMode: currentTab.stripConfig && currentTab.stripConfig.deletedMode, contentTags: currentTab.stripConfig && currentTab.stripConfig.contentTags }),
|
|
5343
|
+
} : {
|
|
5344
|
+
widgetType: 'card',
|
|
5345
|
+
widgetSubType: 'cardContent',
|
|
5346
|
+
widgetHostClass: 'mb-2',
|
|
5347
|
+
widgetData: {},
|
|
5348
|
+
})));
|
|
5349
|
+
}
|
|
5323
5350
|
/**
|
|
5324
5351
|
* @param {?} strip
|
|
5325
5352
|
* @param {?=} calculateParentStatus
|
|
@@ -5451,8 +5478,8 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
5451
5478
|
getTabDataByNewReqPlaylistReadContent(strip, tabIndex, currentTab, calculateParentStatus) {
|
|
5452
5479
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5453
5480
|
if (currentTab.request &&
|
|
5454
|
-
|
|
5455
|
-
|
|
5481
|
+
currentTab.request.playlistRead &&
|
|
5482
|
+
currentTab.request.playlistRead.type) {
|
|
5456
5483
|
currentTab.request.apiUrl = this.getFullUrl(currentTab.request.apiUrl, currentTab.request.playlistRead.type);
|
|
5457
5484
|
}
|
|
5458
5485
|
try {
|
|
@@ -5484,7 +5511,17 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
5484
5511
|
// }
|
|
5485
5512
|
if (response.results && response.results.result) {
|
|
5486
5513
|
/** @type {?} */
|
|
5487
|
-
|
|
5514
|
+
let content = response.results.result.content;
|
|
5515
|
+
/** @type {?} */
|
|
5516
|
+
let widgets = [];
|
|
5517
|
+
if (currentTab.value === 'providers') {
|
|
5518
|
+
/** @type {?} */
|
|
5519
|
+
let featuredProviders = JSON.parse(content.featuredProviders || '[]');
|
|
5520
|
+
widgets = this.transformAllTabContentsToWidgets(featuredProviders, currentTab);
|
|
5521
|
+
}
|
|
5522
|
+
else {
|
|
5523
|
+
widgets = this.transformAllTabContentsToWidgets(content, currentTab);
|
|
5524
|
+
}
|
|
5488
5525
|
/** @type {?} */
|
|
5489
5526
|
let tabResults = [];
|
|
5490
5527
|
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
|
|
@@ -5538,28 +5575,49 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
5538
5575
|
*/
|
|
5539
5576
|
fetchCiosContentData(strip, calculateParentStatus = true) {
|
|
5540
5577
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5541
|
-
if (strip
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
if (strip.request &&
|
|
5545
|
-
strip.request.ciosContent &&
|
|
5546
|
-
strip.request.ciosContent.filterCriteriaMap) {
|
|
5547
|
-
originalFilters = strip.request.ciosContent.filterCriteriaMap;
|
|
5548
|
-
strip.request.ciosContent.filterCriteriaMap = this.postMethodFilters(strip.request.ciosContent.filterCriteriaMap);
|
|
5549
|
-
}
|
|
5550
|
-
try {
|
|
5578
|
+
if (strip && strip.request.ciosContent && Object.keys(strip.request.ciosContent).length) {
|
|
5579
|
+
if (strip.tabs && strip.tabs.length) {
|
|
5580
|
+
// TODO: Have to extract requestRequired to outer level of tabs config
|
|
5551
5581
|
/** @type {?} */
|
|
5552
|
-
const
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5582
|
+
const firstTab = strip.tabs[0];
|
|
5583
|
+
if (firstTab.requestRequired && firstTab.value === 'trainingInstitutions') {
|
|
5584
|
+
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
|
|
5585
|
+
/** @type {?} */
|
|
5586
|
+
const allTabs = this.stripsResultDataMap[strip.key].tabs;
|
|
5587
|
+
/** @type {?} */
|
|
5588
|
+
const currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
|
|
5589
|
+
this.getTabDataByCiosSearch(strip, 0, currentTabFromMap, calculateParentStatus);
|
|
5590
|
+
}
|
|
5591
|
+
}
|
|
5592
|
+
if (firstTab.requestRequired && firstTab.value === 'providers') {
|
|
5593
|
+
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
|
|
5594
|
+
/** @type {?} */
|
|
5595
|
+
const allTabs = this.stripsResultDataMap[strip.key].tabs;
|
|
5557
5596
|
/** @type {?} */
|
|
5558
|
-
|
|
5559
|
-
|
|
5560
|
-
|
|
5597
|
+
const currentTabFromMap = (/** @type {?} */ ((allTabs && allTabs.length && allTabs[0])));
|
|
5598
|
+
this.getTabDataByNewReqPlaylistReadContent(strip, 0, currentTabFromMap, calculateParentStatus);
|
|
5599
|
+
}
|
|
5600
|
+
}
|
|
5601
|
+
}
|
|
5602
|
+
else {
|
|
5603
|
+
try {
|
|
5604
|
+
/** @type {?} */
|
|
5605
|
+
const response = yield this.postRequestMethod(strip, strip.request.ciosContent, strip.request.apiUrl, calculateParentStatus);
|
|
5606
|
+
// console.log('calling after - response, ', response)
|
|
5607
|
+
if (response && response.results) {
|
|
5608
|
+
// console.log('calling after-- ')
|
|
5609
|
+
if (response.results.data && response.results.data.length) {
|
|
5610
|
+
/** @type {?} */
|
|
5611
|
+
let extContentData = response.results.data;
|
|
5612
|
+
if (extContentData.length) {
|
|
5613
|
+
this.processStrip(strip, this.transformContentsToWidgets(extContentData, strip), 'done', calculateParentStatus, response.viewMoreUrl);
|
|
5614
|
+
}
|
|
5615
|
+
else {
|
|
5616
|
+
this.emptyResponse.emit(true);
|
|
5617
|
+
}
|
|
5561
5618
|
}
|
|
5562
5619
|
else {
|
|
5620
|
+
this.processStrip(strip, [], 'error', calculateParentStatus, null);
|
|
5563
5621
|
this.emptyResponse.emit(true);
|
|
5564
5622
|
}
|
|
5565
5623
|
}
|
|
@@ -5568,15 +5626,73 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
|
|
|
5568
5626
|
this.emptyResponse.emit(true);
|
|
5569
5627
|
}
|
|
5570
5628
|
}
|
|
5571
|
-
|
|
5572
|
-
this.processStrip(strip, [], 'error', calculateParentStatus, null);
|
|
5629
|
+
catch (error) {
|
|
5573
5630
|
this.emptyResponse.emit(true);
|
|
5631
|
+
// Handle errors
|
|
5632
|
+
// console.error('Error:', error);
|
|
5574
5633
|
}
|
|
5575
5634
|
}
|
|
5576
|
-
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
|
|
5635
|
+
}
|
|
5636
|
+
});
|
|
5637
|
+
}
|
|
5638
|
+
/**
|
|
5639
|
+
* @param {?} strip
|
|
5640
|
+
* @param {?} tabIndex
|
|
5641
|
+
* @param {?} _currentTab
|
|
5642
|
+
* @param {?} calculateParentStatus
|
|
5643
|
+
* @return {?}
|
|
5644
|
+
*/
|
|
5645
|
+
getTabDataByCiosSearch(strip, tabIndex, _currentTab, calculateParentStatus) {
|
|
5646
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5647
|
+
try {
|
|
5648
|
+
/** @type {?} */
|
|
5649
|
+
const response = yield this.contentSvc.postApiMethod(strip.request.apiUrl, strip.request.ciosContent).toPromise();
|
|
5650
|
+
;
|
|
5651
|
+
if (response && response.data && response.data.length) {
|
|
5652
|
+
/** @type {?} */
|
|
5653
|
+
const widgets = this.transformContentsToWidgets(response.data, strip);
|
|
5654
|
+
/** @type {?} */
|
|
5655
|
+
let tabResults = [];
|
|
5656
|
+
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
|
|
5657
|
+
/** @type {?} */
|
|
5658
|
+
const allTabs = this.stripsResultDataMap[strip.key].tabs;
|
|
5659
|
+
if (allTabs && allTabs.length && allTabs[tabIndex]) {
|
|
5660
|
+
allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { widgets, fetchTabStatus: 'done' });
|
|
5661
|
+
tabResults = allTabs;
|
|
5662
|
+
}
|
|
5663
|
+
}
|
|
5664
|
+
this.processStrip(strip, widgets, 'done', calculateParentStatus, response.viewMoreUrl, tabResults // tabResults as widgets
|
|
5665
|
+
);
|
|
5666
|
+
}
|
|
5667
|
+
else {
|
|
5668
|
+
/** @type {?} */
|
|
5669
|
+
let tabResults = [];
|
|
5670
|
+
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
|
|
5671
|
+
/** @type {?} */
|
|
5672
|
+
const allTabs = this.stripsResultDataMap[strip.key].tabs;
|
|
5673
|
+
if (allTabs && allTabs.length && allTabs[tabIndex]) {
|
|
5674
|
+
allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
|
|
5675
|
+
tabResults = allTabs;
|
|
5676
|
+
}
|
|
5677
|
+
}
|
|
5678
|
+
this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
|
|
5679
|
+
}
|
|
5680
|
+
}
|
|
5681
|
+
catch (error) {
|
|
5682
|
+
console.error('Error:', error);
|
|
5683
|
+
/** @type {?} */
|
|
5684
|
+
let tabResults = [];
|
|
5685
|
+
if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs && this.stripsResultDataMap[strip.key].tabs.length) {
|
|
5686
|
+
/** @type {?} */
|
|
5687
|
+
const allTabs = this.stripsResultDataMap[strip.key].tabs;
|
|
5688
|
+
if (allTabs && allTabs.length && allTabs[tabIndex]) {
|
|
5689
|
+
allTabs[tabIndex] = Object.assign({}, allTabs[tabIndex], { fetchTabStatus: 'done' });
|
|
5690
|
+
tabResults = allTabs;
|
|
5691
|
+
}
|
|
5692
|
+
this.processStrip(strip, [], 'error', calculateParentStatus, null, tabResults);
|
|
5693
|
+
}
|
|
5694
|
+
else {
|
|
5695
|
+
this.processStrip(strip, [], 'error', calculateParentStatus, null);
|
|
5580
5696
|
}
|
|
5581
5697
|
}
|
|
5582
5698
|
});
|
|
@@ -5897,7 +6013,7 @@ SlidersLibComponent.decorators = [
|
|
|
5897
6013
|
{ type: Component, args: [{
|
|
5898
6014
|
selector: 'sb-uic-sliders',
|
|
5899
6015
|
template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}} {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n class=\"banner-overlay {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n <div class=\"banner WidgetInstanceId\" \n *ngFor=\"let slide of widgetData; let i = index\" \n [hidden]=\"i !== currentIndex\" \n [ngStyle]=\"{\n 'border-width': isMobile? styleData?.responsive?.imageBorderWidth : styleData?.imageBorderWidth,\n 'border-color': isMobile? styleData?.responsive?.imageBorderColor : styleData?.imageBorderColor,\n 'border-style': isMobile? styleData?.responsive?.imageBorderStyle: styleData?.imageBorderStyle}\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"{{type === 'atictitopbanner' ? 'banner-image' : 'bannerimage-mdo'}}\" />\n </div>\n </a>\n <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n class=\"banner-title text-truncate {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n </ng-container>\n <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">❮</a>\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">❯</a>\n </div>\n</div>\n<div class=\"banner-container-solo {{type === 'atictitop' ? 'atictitopbanner' : ''}}\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\" *ngIf=\"widgetData?.length == 1\">\n <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n *ngIf=\"widgetData?.length\">\n <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n [queryParams]=\"widgetData[currentIndex].queryParams || {}\"\n [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\n <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n </div>\n <div class=\"banner-meta\">\n <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n {{ widgetData[currentIndex].title }}\n </a>\n <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n (click)=\"slideTo(j)\"></span>\n </div>\n </div>\n <button *ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\">❮</a>\n </button>\n <button *ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">❯</a>\n </button>\n\n</div> -->\n<ng-container *ngIf=\"!widgetData?.length\">\n <div class=\"slider default-slider h-full\">\n <div class=\"relative h-full\">\n <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n <div class=\"default-title rounded-full\">\n <p class=\"mat-h1\">{{title}}</p>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
5900
|
-
styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:769px){.atictitopbanner{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:380px;display:block;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner .bannerimage-mdo{width:100%;display:block;height:inherit;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px;background:#f5f6fa;-o-object-fit:
|
|
6016
|
+
styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}@media screen and (min-width:769px){.atictitopbanner{height:380px!important}}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:380px;display:block;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner .bannerimage-mdo{width:100%;display:block;height:inherit;border-radius:inherit;-o-object-fit:cover;object-fit:cover}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px;background:#f5f6fa;-o-object-fit:cover;object-fit:cover;height:inherit}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}@media screen and (min-width:769px){.navigation.middle-inline .prev{left:18%!important}.navigation.middle-inline .next{right:6%!important}}"]
|
|
5901
6017
|
}] }
|
|
5902
6018
|
];
|
|
5903
6019
|
/** @nocollapse */
|
|
@@ -6374,7 +6490,7 @@ class DataPointsComponent {
|
|
|
6374
6490
|
DataPointsComponent.decorators = [
|
|
6375
6491
|
{ type: Component, args: [{
|
|
6376
6492
|
selector: 'sb-uic-data-points',
|
|
6377
|
-
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div>\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColor\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
6493
|
+
template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && !isDataLoading\">\n <div class=\"logodiv margin-bottom-s\">\n <img alt=\"Application Logo\" class=\"logoimg\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo_Horizontal.svg\">\n </div>\n <div *ngFor=\"let obj of objectData; let i = index\">\n <div class=\"flex flex-row gap-3 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\"\n [style.background]=\"obj?.iconBackgroupColorV2\"\n [style.borderColor]=\"obj?.valueColorV2\">\n <img class=\"v2-objIcon\" [src]=\"obj.icon\" />\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div class=\"v2-value\" [style.color]=\"obj?.valueColorV2\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColorV2\">\n {{obj?.label}}\n </div>\n <div class=\"flex flex-row dot-container\" *ngIf=\"i+1 !== objectData.length\">\n <div class=\"v2-dot\"\n [style.background]=\"obj?.valueColorV2\"\n [style.borderColor]=\"obj?.labelColorV2\"></div>\n <div class=\"v2-border\" [style.background]=\"obj?.labelColorV2\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div class=\"mob-image-container-v2\" [style.borderColor]=\"obj?.valueColorV2\">\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon-v2\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColorMobV2\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColorV2\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && !isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow' && !isDataLoading\">\n <div class=\"flex space-around\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div singleFlexeRow flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{converToIndianSystem(obj?.value)}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows-V2' && isDataLoading\">\n <div *ngFor=\"let obj of [1,2,3,4]l let i = index\">\n <div class=\"flex flex-row gap-4 {{(i+1 === objectData.length ? '' : 'pb-5')}}\">\n <div class=\"v2-icons-div\">\n <div class=\"v2-icon-contaier\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'55px'\"\n [height]=\"'55px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n <div class=\"v2-content-div\">\n <div class=\"flex flex-col\">\n <div class=\"v2-value\" [style.color]=\"obj?.valueColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"v2-label\" [style.color]=\"obj?.labelColor\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'16px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div> \n </div>\n </div>\n</ng-container>\n\n<ng-container>\n <div class=\"w-full metrics-web customdiv\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'singleFlexeRow' && isDataLoading\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'20px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-full\" *ngIf=\"layoutType === 'singleRow-v2' && isDataLoading\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div flex-item\" [style.background]=\"obj?.backgroundV2\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'24px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'24px'\" [height]=\"'19px'\">\n </sb-uic-skeleton-loader>\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'100px'\" [height]=\"'18px'\">\n </sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
|
|
6378
6494
|
styles: ["@font-face{font-family:Poppins;src:url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff) format('woff')}.mob-image-container-v2{height:28px;width:28px;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #fff}.mobjIcon-v2{width:18px;height:18px}.v2-icon-contaier{height:45px;width:45px;border:1px solid #fff;border-radius:50%;align-items:center;display:flex;justify-content:center}.v2-value{font-family:Poppins;font-size:20px;font-weight:600;line-height:20px;text-align:left;padding-bottom:5px;padding-left:10px}.v2-label{font-family:Poppins;font-size:12px;font-weight:400;line-height:18px;text-align:left;padding-bottom:5px;padding-left:10px}.dot-container{align-items:center}.v2-dot{width:9px;height:9px;border:2px solid #fff;border-radius:50%}.v2-border{height:1px;width:182px}.white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-flex-item{flex:0 0 auto;white-space:nowrap}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left;width:230px;text-overflow:ellipsis;overflow:hidden}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}.space-around{justify-content:space-evenly}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}@media screen and (min-width:1280px){.customdiv{margin-left:24%}}@media screen and (min-width:1690px){.customdiv{margin-left:34%}}@media screen and (min-width:1904px){.customdiv{margin-left:44%}}.logodiv{background:#fff;width:150px;border-radius:45px;text-align:center;padding:8px 0 2px}.logoimg{width:114px}"]
|
|
6379
6495
|
}] }
|
|
6380
6496
|
];
|
|
@@ -15406,7 +15522,7 @@ ProvidersV2Component.decorators = [
|
|
|
15406
15522
|
{ type: Component, args: [{
|
|
15407
15523
|
selector: 'sb-uic-providers-v2',
|
|
15408
15524
|
template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n <div class=\"flex flex-col flex-1\">\n <ng-container *ngIf=\"sectionList?.length\">\n <ng-container *ngFor=\"let section of sectionList\">\n <ng-container *ngIf=\"section?.enabled\">\n <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\">\n <ng-container *ngFor=\"let column of section.column\">\n <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'trainingCalendar'\" [ngTemplateOutlet]=\"trainingCalendar\"\n [ngTemplateOutletContext]=\"{trainingCalendar: column.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contributors'\" [ngTemplateOutlet]=\"contributors\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'infra'\" [ngTemplateOutlet]=\"infra\"\n [ngTemplateOutletContext]=\"{infra: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container>\n <ng-container *ngSwitchCase=\"'contentTopStrip'\" [ngTemplateOutlet]=\"contentStrip\"\n [ngTemplateOutletContext]=\"{contentStrip: column?.data}\"></ng-container> \n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n [ngTemplateOutletContext]=\"{competency: column}\"></ng-container> \n <ng-container *ngSwitchCase=\"'learnerReview'\" [ngTemplateOutlet]=\"learnerReviewBlock\"\n [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container> \n </ng-container>\n </div>\n </ng-container>\n </section>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n</div>\n<div class=\"container-fluid\" *ngIf=\"navList?.length\">\n <div class=\"flex sticky-navigator gap-4\">\n <mat-icon class=\"nav-up-arrow cursor-pointer\" (click)=\"scrollToSection('section-micro-sites')\">arrow_upwards</mat-icon>\n <ng-container *ngFor=\"let section of navList\">\n <ng-container *ngIf=\"section.navigation\">\n <div class=\"nav-button\" (click)=\"scrollToSection(section?.key); raiseNavTelemetry(section?.title)\">{{section?.title}}</div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n <!-- <div class=\"w-full grid grid-cols-12 gap-4\"> -->\n <div class=\"col-span-12 \">\n <div class=\"grid grid-cols-12\">\n <div class=\"hidden md:block p-5 custombgsection\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n </div>\n <div class=\"col-span-3\"></div>\n <div class=\"col-span-12 md:col-span-9\">\n <div class=\"slider h-full\" *ngIf=\"data?.sliderData?.sliders\">\n <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\" [type]=\"'atictitop'\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n <div class=\"container flex flex-col md:flex-row\">\n <div class=\"mr-4 logo-box-container\">\n <div class=\"flex logo-box-rounded top mr-4\">\n <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n </div>\n </div>\n <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || providerName}}</h1>\n <p>{{data?.description | slice:0:descriptionMaxLength}}\n <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n </p>\n <div class=\"block md:hidden overflow-y-auto mb-3\">\n <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n </div>\n <button\n (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{data?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStrip let-contentStrip=\"contentStrip\">\n <ng-container *ngIf=\"!contentStrip?.hideSection\">\n <div class=\"flex justify-center relative mt-8 mb-8\">\n <img class=\"absolute {{contentStrip?.sectionImagePosition}}\" src=\"{{contentStrip?.sectionImage}}\" alt=\"\">\n <div class=\"container \">\n <div class=\"w-full\">\n <sb-uic-content-strip-with-tabs\n [emitViewAll]=\"true\"\n (viewAllResponse)=\"showAllContent($event,contentStrip)\"\n (emptyResponse)=\"hideContentStrip($event, contentStrip)\"\n (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n [providerId]=\"providerId\"\n [widgetData]=\"contentStrip\">\n </sb-uic-content-strip-with-tabs>\n </div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #contributors let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n </div>\n <div class=\"infra-title-v2 hidden md:block\">\n {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{data.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-9\">\n <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n </div>\n </div>\n <div class=\"w-full section-divider pt-6\">\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 infra-sec margin-bottom-xl\">\n <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\n <div class=\"infra-box flex flex-col\">\n <div class=\"infra-title2 hidden md:block\">\n {{infra?.detaulTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n </div>\n <div class=\"infra-description padding-top-s\">\n {{infra?.description}}\n </div>\n </div>\n </div>\n <div class=\"col-span-12 md:col-span-8 margin-bottom-xl\">\n <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n </div>\n </div>\n </div>\n </div>\n <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n </div>\n <div class=\"slider-background1 mb-8\">\n <div class=\"container-balanced w-full slider-background-2\">\n <div class=\"info-slider\">\n <sb-uic-sliders class=\"infobanner\" [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n <div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock\">\n <div class=\"w-full container-balanced\">\n <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n <sb-uic-competency-passbook\n (emptyResponse)=\"hideCompetency($event, competency)\"\n (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n [objectData]=\"competency\"\n [providerId]=\"providerId\">\n </sb-uic-competency-passbook>\n </div>\n </div>\n <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #trainingCalendar let-trainingCalendar=\"trainingCalendar\">\n <div class=\"hidden md:block\">\n <div class=\"col-span-12 px-8 py-8\" [style.background]=\"trainingCalendar?.background\">\n <div class=\"container-balanced flex flex-col\">\n <div class=\"col-span-12 mat-subheading-1 margin-remove\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'grid'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"block md:hidden\">\n <div class=\"col-span-12 px-5 py-3 mob-header\">{{trainingCalendar?.title}}: {{currentMonthAndYear}}</div>\n <div class=\"col-span-12\">\n <sb-uic-calender\n [objectData]=\"trainingCalendar\"\n [fetchDataFromApi]=\"true\"\n [layoutType]=\"'row'\"\n [defaultDays]=\"trainingCalendar?.defaultDays\"\n [providerId]=\"providerId\">\n </sb-uic-calender>\n </div>\n <div class=\"col-span-12 flex item-center justify-center\">\n <button mat-button type=\"button\"\n (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n {{trainingCalendar?.contentButton?.title}}\n </span>\n </button>\n </div>\n </div>\n</ng-template>\n<ng-template #learnerReviewBlock let-data=\"data\">\n <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\" *ngIf=\"!data?.hideSection\">\n <div class=\"container\">\n <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n <div class=\"col-span-12 md:col-span-4 contributor-desc\">\n <div class=\"infra-box-review flex flex-col\">\n <div class=\"learner-title hidden md:block\">\n {{data?.detaulTitle}}\n </div>\n <div class=\"infra-title2 hidden md:block\">\n {{data?.myTitle}}\n </div>\n <div class=\"block md:hidden\">\n <span class=\"learner-title\">{{data?.detaulTitle}}</span> <span class=\"infra-title2\"> {{data?.myTitle}}</span>\n </div> \n </div> \n </div>\n <div class=\"col-span-12 md:col-span-8\">\n <sb-uic-user-content-rating (emptyResponse)=\"hideLearnerReview($event, data)\" [formData]=\"data\" [providerId]=\"providerId\"></sb-uic-user-content-rating>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n",
|
|
15409
|
-
styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:768px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/
|
|
15525
|
+
styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:768px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1720693634596_MDOChannel_RightGraphic%202.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1721911475656_new.png) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:769px){.custombgsection{width:30%}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.custombgsection{width:38%}.infobanner.banner-container{width:1014px!important}}"]
|
|
15410
15526
|
}] }
|
|
15411
15527
|
];
|
|
15412
15528
|
/** @nocollapse */
|