@sunbird-cb/consumption 0.0.87 → 0.0.88

package/bundles/sunbird-cb-consumption.umd.js

@@ -15366,8 +15366,8 @@
         ContentStripFacetFilterComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-content-strip-facet-filter',
-                        template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\" class=\"block md:hidden\">\n                  <div \n                    class=\"ml-4 pl-2 view-more ws-mat-default-text  \">\n                    <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                      (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                      <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                      <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                    </a>\n                  </div>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n                    <ng-template mat-tab-label>\n                      <span><span *ngIf=\"!tab?.disableTranslate\">{{ translateLabels(tab?.label, 'home') }}</span>\n                      <span *ngIf=\"tab?.disableTranslate\">{{tab?.label}}</span> &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n\n                    <div class=\"wfull\" *ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n                      <div class=\"flex justify-between item-center flex-wrap gap-4\">\n                        <div class=\"\">\n                          <ng-container *ngFor=\"let facet of tab?.facets\">\n                            <form [formGroup]=\"facetForm\">\n                            <div class=\"facets-select\">\n                              <select formControlName=\"org\" (change)=\"getorgData($event,  stripsResultDataMap[key], tabIndex)\">\n                                <option value=\"0\" selected disabled>Choose by organisation</option>\n                                <option value=\"{{d.name}}\" *ngFor=\"let d of facet.values\" >{{d.name}}</option>\n                              </select>\n                            </div>\n                          </form>\n                          </ng-container>\n                        </div>\n                        <div>\n                          <ng-container >\n                            <mat-chip-list  class=\"content-pill-data\" aria-label=\"Fish selection\">\n                                <ng-container *ngFor=\"let pill of tab?.pillsData;let p = index\">\n                                    <mat-chip [selected]=\"pill?.selected\" (click)=\"pillClicked($event, stripsResultDataMap[key], key, p, tabIndex)\">\n                                      <span class=\"pill-name\">{{pill?.label}}</span></mat-chip>\n                                </ng-container>\n                            </mat-chip-list>\n                          </ng-container>\n                        </div>\n                         <!-- viewAll start-->\n                          <div *ngIf=\"!stripsResultDataMap[key]?.hideViewMoreUrl && checkCondition(widgetData , stripsResultDataMap[key])\" class=\" hidden md:block\">\n                            <div  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                              <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                                (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                                <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                                <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                              </a>\n                            </div>\n                          </div>\n                            \n                          <!-- viewAll end-->\n                      </div>\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                                <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                     <ng-container *ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n                      <div *ngIf=\"((tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done') &&\n                      (!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets || !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                     </ng-container>\n                      <ng-container *ngIf=\"(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done' || tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.tabLoading\">\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets| slice:0:(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
-                        styles: ["@charset \"UTF-8\";.facets-select{position:relative;display:inline-block;width:250px}.facets-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.facets-select:after{content:\"\u25BC\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected .pill-name{color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip{cursor:pointer!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background:#1b4ca1!important;color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip{background:#fff!important;border:1px solid rgba(0,0,0,.0784313725)!important}"]
+                        template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\" class=\"block md:hidden\">\n                  <div \n                    class=\"ml-4 pl-2 view-more ws-mat-default-text  \">\n                    <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                      (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                      <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                      <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                    </a>\n                  </div>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n                    <ng-template mat-tab-label>\n                      <span><span *ngIf=\"!tab?.disableTranslate\">{{ translateLabels(tab?.label, 'home') }}</span>\n                      <span class=\"tab-highlight\" *ngIf=\"tab?.disableTranslate\">{{tab?.label}}</span> &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n\n                    <div class=\"wfull\" *ngIf=\"tab?.pillsData && tab?.pillsData?.length\">\n                      <div class=\"flex justify-between item-center flex-wrap gap-4\">\n                        <div class=\"\">\n                          <ng-container *ngFor=\"let facet of tab?.facets\">\n                            <form [formGroup]=\"facetForm\">\n                            <div class=\"facets-select\">\n                              <select formControlName=\"org\" (change)=\"getorgData($event,  stripsResultDataMap[key], tabIndex)\">\n                                <option value=\"0\" selected disabled>Choose by organisation</option>\n                                <option value=\"{{d.name}}\" *ngFor=\"let d of facet.values\" >{{d.name}}</option>\n                              </select>\n                            </div>\n                          </form>\n                          </ng-container>\n                        </div>\n                        <div>\n                          <ng-container >\n                            <mat-chip-list  class=\"content-pill-data\" aria-label=\"Fish selection\">\n                                <ng-container *ngFor=\"let pill of tab?.pillsData;let p = index\">\n                                    <mat-chip [selected]=\"pill?.selected\" (click)=\"pillClicked($event, stripsResultDataMap[key], key, p, tabIndex)\">\n                                      <span class=\"pill-name\">{{pill?.label}}</span></mat-chip>\n                                </ng-container>\n                            </mat-chip-list>\n                          </ng-container>\n                        </div>\n                         <!-- viewAll start-->\n                          <div *ngIf=\"!stripsResultDataMap[key]?.hideViewMoreUrl && checkCondition(widgetData , stripsResultDataMap[key])\" class=\" hidden md:block\">\n                            <div  class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                              <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\" \n                                (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                                <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                                <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                              </a>\n                            </div>\n                          </div>\n                            \n                          <!-- viewAll end-->\n                      </div>\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                                <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                     <ng-container *ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n                      <div *ngIf=\"((tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done') &&\n                      (!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets || !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                     </ng-container>\n                      <ng-container *ngIf=\"(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done' || tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.tabLoading\">\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets| slice:0:(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
+                        styles: ["@charset \"UTF-8\";.facets-select{position:relative;display:inline-block;width:250px}.facets-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.facets-select:after{content:\"\u25BC\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.tab-highlight{color:#1b4ca1!important;font-weight:700}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-selected .pill-name{color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip{cursor:pointer!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background:#1b4ca1!important;color:#fff!important}::ng-deep mat-chip-list.content-pill-data .mat-chip-list-wrapper .mat-chip.mat-standard-chip{background:#fff!important;border:1px solid rgba(0,0,0,.0784313725)!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -20584,7 +20584,7 @@
                      * @param {?} user
                      * @return {?}
                      */
-                    function (user) { return (__assign({}, user, { children: [], selected: false })); }));
+                    function (user) { return (__assign({}, user, { children: [], selected: false })); })).slice(0, 5);
                 }
             }), (/**
              * @param {?} error
@@ -20616,7 +20616,7 @@
              * @param {?} user
              * @return {?}
              */
-            function (user) { return (__assign({}, user, { children: [], selected: false })); }));
+            function (user) { return (__assign({}, user, { children: [], selected: false })); })).slice(0, 5);
             /** @type {?} */
             var nameStr = '';
             switch (name) {
@@ -20690,7 +20690,7 @@
                  * @param {?} user
                  * @return {?}
                  */
-                function (user) { return (__assign({}, user, { children: [] })); }));
+                function (user) { return (__assign({}, user, { children: [] })); })).slice(0, 5);
             }
             else {
                 this.filteredData = this.result.mdoLeaderBoard
@@ -20703,7 +20703,7 @@
                  * @param {?} user
                  * @return {?}
                  */
-                function (user) { return (__assign({}, user, { children: [] })); }));
+                function (user) { return (__assign({}, user, { children: [] })); })).slice(0, 5);
             }
         };
         /**
@@ -20718,7 +20718,7 @@
         MdoLeaderboardComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-mdo-leaderboard',
-                        template: "<div class=\"mdo-leaderboard-container\">\n    <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n        <div class=\"flex gap-2\">\n            {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n        </div>\n        <div class=\"block md:hidden\">\n            <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex item-center justify-center\" *ngIf=\"expand\">\n        <div class=\"flex fl-div\">\n            <div class=\"pointer\">\n                <span class=\"dot-dot\"></span>\n            </div>\n        </div>\n    </div>\n    <div class=\"l-content\" *ngIf=\"expand\">\n        <div class=\"horizontal-scroll-container\">\n            <div class=\"scroll-content\">\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n            </div>\n        </div>\n        <div class=\"relative search-wrapper margin-top-m mb-5\">\n            <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n            </mat-icon>\n            <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n                aria-label=\"Search\" i18n-placeholder=\"search\"  [(ngModel)]=\"searchTerm\"\n                placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n        </div>\n        <div class=\"l-tab-data\">\n            <div *ngFor=\"let user of filteredData\">\n                <div class=\"flex flex-row item mb-5 gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n                    <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" *ngIf=\"user.row_num === 1\"/></div>\n                    <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n                    <div class=\"w-full\">\n                        <div class=\"flex flex-between gap-2\">\n                            <div>\n                                <div class=\"rank-name\">{{user.org_name}}</div>\n                                <div class=\"rank-points flex mt-1 gap-1\">\n                                    <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n                                    <div class=\"points\">{{user.total_points || 0 }} points</div>\n                                </div>\n                            </div>\n                            <div class=\"rank-crown\" *ngIf=\"[1,2,3].includes(user.row_num)\">\n                                <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"no-data px-1\" *ngIf=\"filteredData?.length === 0\">\n                No data found!\n            </div>\n        </div>\n    </div>\n</div>\n",
+                        template: "<div class=\"mdo-leaderboard-container\">\n    <div class=\"flex l-title gap-2 items-center justify-between px-4 md:px-0 py-4 md:py-0\">\n        <div class=\"flex gap-2\">\n            {{object?.title}} <div><img [src]=\"object?.infoIcon\" alt=\"\" i18n-matTooltip [matTooltip]=\"object?.infoText\"></div>\n        </div>\n        <div class=\"block md:hidden\">\n            <mat-icon (click)=\"toggleWeekHightlits()\">expand_more</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex item-center justify-center\" *ngIf=\"expand\">\n        <div class=\"flex fl-div\">\n            <div class=\"pointer\">\n                <span class=\"dot-dot\"></span>\n            </div>\n        </div>\n    </div>\n    <div class=\"l-content\" *ngIf=\"expand\">\n        <div class=\"horizontal-scroll-container\">\n            <div class=\"scroll-content\">\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XL' }\" (click)=\"getTabData('XL')\">Greater than 50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'L' }\" (click)=\"getTabData('L')\">10K-50K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'M' }\" (click)=\"getTabData('M')\">1K-10K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'S' }\" (click)=\"getTabData('S')\">500-1K</span>\n                <span class=\"tab-title\"  [ngClass]=\"{'active' : currentTab === 'XS' }\" (click)=\"getTabData('XS')\">Less than 500</span>\n            </div>\n        </div>\n        <div class=\"relative search-wrapper margin-top-m mb-5\">\n            <mat-icon matPrefix class=\"flex absolute items-center justify-center mr-2 icon-search\">search\n            </mat-icon>\n            <input type=\"search\" name=\"searchKey\" class=\"search-field\" i18-aria-label\n                aria-label=\"Search\" i18n-placeholder=\"search\"  [(ngModel)]=\"searchTerm\"\n                placeholder=\"Search your MDO\" (keyup)=\"handleSearchQuery($event)\" />\n        </div>\n        <div class=\"l-tab-data\">\n            <div *ngFor=\"let user of filteredData; let i = index\">\n                <div class=\"flex flex-row item mb-{{filteredData.length - 1 === i ? 0 : 5}} gap-3 {{user.row_num === 1 ? 'relative' : ''}}\" >\n                    <div><img class=\"crown absolute\" src=\"assets/images/national-learning/rank-crown.svg\" *ngIf=\"user.row_num === 1\"/></div>\n                    <div class=\"{{getRank(user.row_num)}}\">{{user.row_num}}</div>\n                    <div class=\"w-full\">\n                        <div class=\"flex flex-between gap-2\">\n                            <div>\n                                <div class=\"rank-name\">{{user.org_name}}</div>\n                                <div class=\"rank-points flex mt-1 gap-1\">\n                                    <img class=\"nlw-kb\" src=\"assets/icons/home/karma-badge.svg\"/>\n                                    <div class=\"points\">{{user.total_points || 0 }} points</div>\n                                </div>\n                            </div>\n                            <div class=\"rank-crown\" *ngIf=\"[1,2,3].includes(user.row_num)\">\n                                <img class=\"nlw-animation\" [src]=\"getMedal(user.row_num)\"/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"no-data px-1\" *ngIf=\"filteredData?.length === 0\">\n                No data found!\n            </div>\n        </div>\n    </div>\n</div>\n",
                         styles: [".l-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.l-content{background-color:#e9eef6;border-radius:16px;padding:16px}.horizontal-scroll-container{overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;height:32px}.horizontal-scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-block}.tab-title{font-family:Lato;font-size:14px;line-height:16.8px;text-align:left;cursor:pointer;padding:0 15px 8px;border-bottom:2px solid #c3c3c3}.active{font-weight:700;border-bottom:2px solid #1b4ca1}.search-field{height:34px;padding:0 16px 0 40px;border-radius:52px;background:#fff;border:2px solid rgba(0,0,0,.0784313725);width:100%}.icon-search{top:10px;left:15px;height:15px;width:17px}.item{border-radius:12px;background-color:#fff;padding:16px;align-items:flex-start}.rank1{background:#ffca28;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank2{background:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;color:#fff}.rank3{background:#ff8228;font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px}.rank0{font-family:Lato;font-size:14px;font-weight:700;line-height:9px;text-align:center;border-radius:50%;padding:10px;border:1px solid #c3c3c3}.rank-name{font-family:Montserrat;line-height:1.5em;font-size:16px;font-weight:600;text-align:left;align-items:center;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}.rank-points{align-items:center}.nlw-kb{height:24px;width:24px}.points{font-family:Lato;font-size:14px;font-weight:600;line-height:16.8px;text-align:right}.crown{left:10px;top:0;width:36px;height:36px}.l-tab-data{height:520px;overflow:auto;padding-bottom:16px}.l-tab-data::-webkit-scrollbar{display:none}.pointer{margin-bottom:-59px;border-radius:41px;background:#c3c3c3;border:35px solid #e9eef6}.dot-dot{width:7px;display:flex;height:7px;background:#c3c3c3;margin-top:-25px;border-radius:10px}@media screen and (min-width:320px) and (max-width:769px){.mdo-leaderboard-container{background-color:#d1dbec}}"]
                     }] }
         ];