@sunbird-cb/consumption 0.0.85 → 0.0.87

package/fesm2015/sunbird-cb-consumption.js

@@ -18,7 +18,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import Hammer from 'hammerjs';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { jsPDF } from 'jspdf';
 
 /**
@@ -8680,7 +8680,7 @@ class ConsumptionModule {
 }
 ConsumptionModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [ConsumptionComponent,],
+                declarations: [ConsumptionComponent],
                 imports: [
                     ContentStripWithTabsLibModule,
                     SlidersLibModule
@@ -12126,6 +12126,1444 @@ const WIDGET_REGISTRATION_LIB_CONFIG = [
     }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NsContentStripWithFacets;
+(function (NsContentStripWithFacets) {
+    /**
+     * @record
+     */
+    function IContentStripMultiple() { }
+    NsContentStripWithFacets.IContentStripMultiple = IContentStripMultiple;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentStripMultiple.prototype.errorWidget;
+        /** @type {?|undefined} */
+        IContentStripMultiple.prototype.loader;
+        /** @type {?|undefined} */
+        IContentStripMultiple.prototype.noDataWidget;
+        /** @type {?} */
+        IContentStripMultiple.prototype.strips;
+        /** @type {?|undefined} */
+        IContentStripMultiple.prototype.isChannelStrip;
+    }
+    /**
+     * @record
+     */
+    function IContentStripUnit() { }
+    NsContentStripWithFacets.IContentStripUnit = IContentStripUnit;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.stripRequestFor;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.onTabClickRequest;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.hideViewMoreUrl;
+        /** @type {?} */
+        IContentStripUnit.prototype.type;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.disableTranslate;
+        /** @type {?} */
+        IContentStripUnit.prototype.key;
+        /** @type {?} */
+        IContentStripUnit.prototype.title;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.customeClass;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.nodataMsg;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.stripTitleLink;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.sliderConfig;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.tabs;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.titleDescription;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.name;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.mode;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.info;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.logo;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.preWidgets;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.postWidgets;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.stripConfig;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.canHideStrip;
+        /** @type {?} */
+        IContentStripUnit.prototype.showStrip;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.filters;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.selectAll;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.request;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.searchV6Type;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.stripBackground;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.noDataWidget;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.loader;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.loaderWidgets;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.errorWidget;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.refreshEvent;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.fetchLikes;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.secondaryHeading;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.viewMoreUrl;
+        /** @type {?|undefined} */
+        IContentStripUnit.prototype.data;
+    }
+    /**
+     * @record
+     */
+    function IStripRequestApi() { }
+    NsContentStripWithFacets.IStripRequestApi = IStripRequestApi;
+    if (false) {
+        /** @type {?} */
+        IStripRequestApi.prototype.path;
+        /** @type {?|undefined} */
+        IStripRequestApi.prototype.queryParams;
+    }
+    /**
+     * @record
+     */
+    function INetworkRequestApi() { }
+    NsContentStripWithFacets.INetworkRequestApi = INetworkRequestApi;
+    if (false) {
+        /** @type {?} */
+        INetworkRequestApi.prototype.path;
+        /** @type {?|undefined} */
+        INetworkRequestApi.prototype.data;
+    }
+    /**
+     * @record
+     */
+    function IStripInfo() { }
+    NsContentStripWithFacets.IStripInfo = IStripInfo;
+    if (false) {
+        /** @type {?} */
+        IStripInfo.prototype.mode;
+        /** @type {?|undefined} */
+        IStripInfo.prototype.visibilityMode;
+        /** @type {?} */
+        IStripInfo.prototype.icon;
+        /** @type {?} */
+        IStripInfo.prototype.widget;
+    }
+    /**
+     * @record
+     */
+    function IStripConfig() { }
+    if (false) {
+        /** @type {?} */
+        IStripConfig.prototype.cardSubType;
+        /** @type {?|undefined} */
+        IStripConfig.prototype.postCardForSearch;
+        /** @type {?|undefined} */
+        IStripConfig.prototype.intranetMode;
+        /** @type {?|undefined} */
+        IStripConfig.prototype.deletedMode;
+        /** @type {?|undefined} */
+        IStripConfig.prototype.contentTags;
+        /** @type {?|undefined} */
+        IStripConfig.prototype.hideShowAll;
+    }
+    /**
+     * @record
+     */
+    function IContentTags() { }
+    NsContentStripWithFacets.IContentTags = IContentTags;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentTags.prototype.daysSpan;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeContentType;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeMimeType;
+        /** @type {?} */
+        IContentTags.prototype.tag;
+        /** @type {?} */
+        IContentTags.prototype.criteriaField;
+    }
+    /**
+     * @record
+     */
+    function IContentStripResponseApi() { }
+    NsContentStripWithFacets.IContentStripResponseApi = IContentStripResponseApi;
+    if (false) {
+        /** @type {?} */
+        IContentStripResponseApi.prototype.contents;
+        /** @type {?|undefined} */
+        IContentStripResponseApi.prototype.hasMore;
+        /** @type {?|undefined} */
+        IContentStripResponseApi.prototype.pageState;
+        /** @type {?|undefined} */
+        IContentStripResponseApi.prototype.totalHits;
+    }
+    /**
+     * @record
+     */
+    function IContentStripTab() { }
+    NsContentStripWithFacets.IContentStripTab = IContentStripTab;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.pillsData;
+        /** @type {?} */
+        IContentStripTab.prototype.label;
+        /** @type {?} */
+        IContentStripTab.prototype.value;
+        /** @type {?} */
+        IContentStripTab.prototype.showTabDataCount;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.requestRequired;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.computeDataOnClick;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.computeDataOnClickKey;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.request;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.widgets;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.maxWidgets;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.fetchTabStatus;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.nodataMsg;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.tabLoading;
+        /** @type {?|undefined} */
+        IContentStripTab.prototype.facets;
+    }
+})(NsContentStripWithFacets || (NsContentStripWithFacets = {}));
+/** @enum {string} */
+const ApiRequestFor = {
+    SEARCH: 'search',
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ */
+function IStripUnitContentData$1() { }
+if (false) {
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.key;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.canHideStrip;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.mode;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.showStrip;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.disableTranslate;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.widgets;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.stripTitle;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.hideViewMoreUrl;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.stripTitleLink;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.sliderConfig;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.stripConfig;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.tabs;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.stripName;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.stripLogo;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.description;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.stripInfo;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.noDataWidget;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.errorWidget;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.showOnNoData;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.showOnLoader;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.showOnError;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.loaderWidgets;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.stripBackground;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.secondaryHeading;
+    /** @type {?} */
+    IStripUnitContentData$1.prototype.viewMoreUrl;
+    /** @type {?|undefined} */
+    IStripUnitContentData$1.prototype.request;
+}
+class ContentStripFacetFilterComponent extends WidgetBaseComponent {
+    /**
+     * @param {?} environment
+     * @param {?} contentSvc
+     * @param {?} loggerSvc
+     * @param {?} eventSvc
+     * @param {?} configSvc
+     * @param {?} utilitySvc
+     * @param {?} router
+     * @param {?} userSvc
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} _fb
+     */
+    constructor(environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, router, userSvc, translate, langtranslations, _fb) {
+        super();
+        this.contentSvc = contentSvc;
+        this.loggerSvc = loggerSvc;
+        this.eventSvc = eventSvc;
+        this.configSvc = configSvc;
+        this.utilitySvc = utilitySvc;
+        this.router = router;
+        this.userSvc = userSvc;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this._fb = _fb;
+        this.emptyResponse = new EventEmitter();
+        this.viewAllResponse = new EventEmitter();
+        this.telemtryResponse = new EventEmitter();
+        this.providerId = '';
+        this.emitViewAll = false;
+        this.channnelName = '';
+        this.id = `ws-strip-miltiple_${Math.random()}`;
+        this.stripsResultDataMap = {};
+        this.stripsKeyOrder = [];
+        this.showAccordionData = true;
+        this.showParentLoader = false;
+        this.showParentError = false;
+        this.showParentNoData = false;
+        this.errorDataCount = 0;
+        this.noDataCount = 0;
+        this.successDataCount = 0;
+        this.contentAvailable = true;
+        this.baseUrl = this.configSvc.sitePath || '';
+        this.veifiedKarmayogi = false;
+        this.changeEventSubscription = null;
+        this.defaultMaxWidgets = 12;
+        this.todaysEvents = [];
+        if (localStorage.getItem('websiteLanguage')) {
+            this.translate.setDefaultLang('en');
+            /** @type {?} */
+            let lang = JSON.stringify(localStorage.getItem('websiteLanguage'));
+            lang = lang.replace(/\"/g, '');
+            this.translate.use(lang);
+        }
+        this.environment = environment;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.initData();
+        this.contentSvc.telemetryData$.subscribe((/**
+         * @param {?} data
+         * @return {?}
+         */
+        (data) => {
+            this.telemtryResponse.emit(data);
+        }));
+        this.facetForm = this._fb.group({
+            org: ['0']
+        });
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    initData() {
+        this.stripsKeyOrder = this.widgetData && this.widgetData.strips && this.widgetData.strips.map((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => strip.key)) || [];
+        if (this.widgetData.loader && this.widgetData.strips.length) {
+            this.showParentLoader = true;
+        }
+        // Fetch the data
+        for (const strip of this.widgetData.strips) {
+            if (this.checkForEmptyWidget(strip)) {
+                this.fetchStripFromRequestData(strip, false);
+            }
+            else {
+                this.processStrip(strip, [], 'done', true, null);
+            }
+        }
+        // Subscription for changes
+        /** @type {?} */
+        const keyAndEvent = this.widgetData.strips
+            .map((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => ({
+            key: strip.key,
+            type: (strip.refreshEvent && strip.refreshEvent.eventType) || '',
+            from: (strip.refreshEvent && strip.refreshEvent.from.toString()) || '',
+        })))
+            .filter((/**
+         * @param {?} __0
+         * @return {?}
+         */
+        ({ key, type, from }) => key && type && from));
+        /** @type {?} */
+        const eventTypeSet = new Set(keyAndEvent.map((/**
+         * @param {?} e
+         * @return {?}
+         */
+        e => e.type)));
+        this.changeEventSubscription = this.eventSvc.events$
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => eventTypeSet.has(event.eventType))))
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
+            keyAndEvent
+                .filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => e.type === event.eventType && e.from === event.from))
+                .map((/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => e.key))
+                .forEach((/**
+             * @param {?} k
+             * @return {?}
+             */
+            k => this.fetchStripFromKey(k, false)));
+        }));
+    }
+    /**
+     * @private
+     * @param {?} key
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchStripFromKey(key, calculateParentStatus = true) {
+        /** @type {?} */
+        const stripData = this.widgetData.strips.find((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => strip.key === key));
+        if (stripData) {
+            this.fetchStripFromRequestData(stripData, calculateParentStatus);
+        }
+    }
+    /**
+     * @private
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchStripFromRequestData(strip, calculateParentStatus = true) {
+        // setting initial values
+        strip.loaderWidgets = this.transformSkeletonToWidgets(strip);
+        this.processStrip(strip, [], 'fetching', false, null);
+        if (strip && strip.stripRequestFor === ApiRequestFor.SEARCH && !strip.onTabClickRequest) {
+            this.fetchFromSearch(strip, calculateParentStatus);
+        }
+    }
+    /**
+     * @private
+     * @param {?} strip
+     * @return {?}
+     */
+    transformSkeletonToWidgets(strip) {
+        return [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 10].map((/**
+         * @param {?} _content
+         * @return {?}
+         */
+        _content => ({
+            widgetType: 'cardLib',
+            widgetSubType: 'cardContentLib',
+            widgetHostClass: 'mb-2',
+            widgetData: {
+                cardSubType: strip.loaderConfig && strip.loaderConfig.cardSubType || 'card-standard-skeleton',
+                cardCustomeClass: strip.customeClass ? strip.customeClass : '',
+            },
+        })));
+    }
+    /**
+     * @private
+     * @param {?} strip
+     * @param {?=} results
+     * @param {?=} fetchStatus
+     * @param {?=} calculateParentStatus
+     * @param {?=} _viewMoreUrl
+     * @param {?=} tabsResults
+     * @return {?}
+     */
+    processStrip(strip, results = [], fetchStatus, calculateParentStatus = true, _viewMoreUrl, tabsResults) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const stripData = {
+                viewMoreUrl: strip.viewMoreUrl,
+                key: strip.key,
+                canHideStrip: Boolean(strip.canHideStrip),
+                showStrip: this.getIfStripHidden(strip.key),
+                noDataWidget: strip.noDataWidget,
+                errorWidget: strip.errorWidget,
+                stripInfo: strip.info,
+                stripTitle: strip.title,
+                stripTitleLink: strip.stripTitleLink,
+                disableTranslate: strip.disableTranslate,
+                sliderConfig: strip.sliderConfig,
+                tabs: tabsResults ? tabsResults : strip.tabs,
+                stripName: strip.name,
+                mode: strip.mode,
+                stripConfig: strip.stripConfig,
+                stripBackground: strip.stripBackground,
+                secondaryHeading: strip.secondaryHeading,
+                loaderWidgets: strip.loaderWidgets || [],
+                hideViewMoreUrl: strip.hideViewMoreUrl || false,
+                widgets: fetchStatus === 'done'
+                    ? [
+                        ...(strip.preWidgets || []).map((/**
+                         * @param {?} w
+                         * @return {?}
+                         */
+                        w => (Object.assign({}, w, { widgetHostClass: `mb-2 ${w.widgetHostClass}` })))),
+                        ...results,
+                        ...(strip.postWidgets || []).map((/**
+                         * @param {?} w
+                         * @return {?}
+                         */
+                        w => (Object.assign({}, w, { widgetHostClass: `mb-2 ${w.widgetHostClass}` })))),
+                    ]
+                    : [],
+                showOnNoData: Boolean(strip.noDataWidget &&
+                    !((strip.preWidgets || []).length + results.length + (strip.postWidgets || []).length) &&
+                    fetchStatus === 'done'),
+                showOnLoader: Boolean(strip.loader && fetchStatus === 'fetching'),
+                showOnError: Boolean(strip.errorWidget && fetchStatus === 'error'),
+            };
+            // const stripData = this.stripsResultDataMap[strip.key]
+            this.stripsResultDataMap = Object.assign({}, this.stripsResultDataMap, { [strip.key]: stripData });
+            if (!tabsResults) {
+                if (calculateParentStatus &&
+                    (fetchStatus === 'done' || fetchStatus === 'error') &&
+                    stripData.widgets) {
+                    this.checkParentStatus(fetchStatus, stripData.widgets.length);
+                }
+                if (calculateParentStatus && !(results && results.length > 0)) {
+                    this.contentAvailable = false;
+                }
+                else if (results && results.length > 0) {
+                    this.contentAvailable = true;
+                }
+            }
+            else {
+                this.contentAvailable = true;
+            }
+        });
+    }
+    /**
+     * @private
+     * @param {?} fetchStatus
+     * @param {?} stripWidgetsCount
+     * @return {?}
+     */
+    checkParentStatus(fetchStatus, stripWidgetsCount) {
+        if (fetchStatus === 'done' && !stripWidgetsCount) {
+            this.noDataCount += 1;
+        }
+        else if (fetchStatus === 'done' && stripWidgetsCount) {
+            this.successDataCount += 1;
+        }
+        else if (fetchStatus === 'error') {
+            this.errorDataCount += 1;
+        }
+        /** @type {?} */
+        const settledCount = this.noDataCount + this.successDataCount + this.errorDataCount;
+        /** @type {?} */
+        const totalCount = this.widgetData.strips.length;
+        if (this.successDataCount > 0 && settledCount < totalCount) {
+            return;
+        }
+        this.showParentLoader = settledCount !== totalCount;
+        this.showParentNoData =
+            this.noDataCount > 0 && this.noDataCount + this.errorDataCount === totalCount;
+        this.showParentError = this.errorDataCount === totalCount;
+    }
+    /**
+     * @param {?} strip
+     * @return {?}
+     */
+    checkForEmptyWidget(strip) {
+        if (strip.request &&
+            ((strip.request.requestBody && Object.keys(strip.request.requestBody).length))) {
+            return true;
+        }
+        return false;
+    }
+    // strip settings
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    toggleInfo(data) {
+        /** @type {?} */
+        const stripInfo = this.stripsResultDataMap[data.key].stripInfo;
+        if (stripInfo) {
+            if (stripInfo.mode !== 'below') {
+                this.loggerSvc.warn(`strip info mode: ${stripInfo.mode} not implemented yet`);
+                stripInfo.mode = 'below';
+            }
+            if (stripInfo.mode === 'below') {
+                this.stripsResultDataMap[data.key].stripInfo = Object.assign({}, stripInfo, { visibilityMode: stripInfo.visibilityMode === 'hidden' ? 'visible' : 'hidden' });
+            }
+        }
+    }
+    /**
+     * @param {?} stripData
+     * @return {?}
+     */
+    raiseTelemetry(stripData) {
+        this.telemtryResponse.emit(stripData);
+    }
+    /**
+     * @param {?} key
+     * @return {?}
+     */
+    setHiddenForStrip(key) {
+        this.stripsResultDataMap[key].showStrip = false;
+        sessionStorage.setItem(`cstrip_${key}`, '1');
+    }
+    // selected pills data
+    /**
+     * @param {?} tabdata
+     * @param {?} tabIndex
+     * @return {?}
+     */
+    getSelectedPillIndex(tabdata, tabIndex) {
+        if (tabdata.pillsData && tabdata.pillsData.length) {
+            /** @type {?} */
+            let index = tabdata.pillsData.findIndex((/**
+             * @param {?} pill
+             * @return {?}
+             */
+            (pill) => {
+                return pill.selected;
+            }));
+            return index;
+        }
+        return 0;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getdata(data) {
+        if (data.stripInfo) {
+            return data.stripInfo.widget;
+        }
+        return {};
+    }
+    /**
+     * @param {?} tabEvent
+     * @param {?} pillIndex
+     * @param {?} stripMap
+     * @param {?} stripKey
+     * @return {?}
+     */
+    tabClicked(tabEvent, pillIndex, stripMap, stripKey) {
+        if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
+            stripMap.tabs[tabEvent.index].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+            stripMap.tabs[tabEvent.index].pillsData[pillIndex].tabLoading = true;
+            stripMap.showOnLoader = true;
+        }
+        /** @type {?} */
+        const data = {
+            label: `${tabEvent.tab.textLabel}`,
+            index: tabEvent.index,
+        };
+        this.eventSvc.raiseInteractTelemetry({
+            type: WsEvents.EnumInteractTypes.CLICK,
+            subType: WsEvents.EnumInteractSubTypes.HOME_PAGE_STRIP_TABS,
+            id: `${camelCase(data.label)}-tab`,
+        }, {}, {
+            module: WsEvents.EnumTelemetrymodules.HOME,
+        });
+        /** @type {?} */
+        const currentTabFromMap = stripMap.tabs && stripMap.tabs[tabEvent.index];
+        /** @type {?} */
+        const currentPillFromMap = stripMap.tabs && stripMap.tabs[tabEvent.index].pillsData[pillIndex];
+        /** @type {?} */
+        const currentStrip = this.widgetData.strips.find((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.key === stripKey));
+        if (this.stripsResultDataMap[stripKey] && currentTabFromMap) {
+            this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams = Object.assign({}, this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams, { tabSelected: currentTabFromMap.value, pillSelected: currentPillFromMap.value });
+        }
+        if (currentStrip && currentTabFromMap && !currentTabFromMap.computeDataOnClick && currentPillFromMap) {
+            if (currentPillFromMap.requestRequired && currentPillFromMap.request) {
+                if (currentPillFromMap.request.searchV6) {
+                    // this.getTabDataByNewReqSearchV6(currentStrip, tabEvent.index, currentTabFromMap, true);
+                }
+                stripMap.tabs[tabEvent.index].pillsData[pillIndex].tabLoading = false;
+            }
+            else {
+                this.getTabDataByfilter(currentStrip, currentTabFromMap, true);
+                if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
+                    stripMap.tabs[tabEvent.index].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+                    stripMap.tabs[tabEvent.index].pillsData[pillIndex].tabLoading = false;
+                    stripMap.showOnLoader = true;
+                    this.resetFilter(stripMap, tabEvent.index, pillIndex);
+                }
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
+                        stripMap.tabs[tabEvent.index].pillsData[pillIndex].fetchTabStatus = 'done';
+                        stripMap.tabs[tabEvent.index].pillsData[pillIndex].tabLoading = false;
+                        stripMap.showOnLoader = false;
+                        this.resetSelectedPill(stripMap.tabs[tabEvent.index].pillsData);
+                        stripMap.tabs[tabEvent.index].pillsData[pillIndex]['selected'] = true;
+                    }
+                }), 200);
+            }
+        }
+    }
+    /**
+     * @param {?} event
+     * @param {?} stripMap
+     * @param {?} stripKey
+     * @param {?} pillIndex
+     * @param {?} tabIndex
+     * @return {?}
+     */
+    pillClicked(event, stripMap, stripKey, pillIndex, tabIndex) {
+        if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+            stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+            stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = true;
+            stripMap.showOnLoader = true;
+        }
+        /** @type {?} */
+        const currentTabFromMap = stripMap.tabs && stripMap.tabs[tabIndex];
+        /** @type {?} */
+        const currentPillFromMap = stripMap.tabs && stripMap.tabs[tabIndex].pillsData[pillIndex];
+        /** @type {?} */
+        const currentStrip = this.widgetData.strips.find((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.key === stripKey));
+        if (this.stripsResultDataMap[stripKey] && currentTabFromMap) {
+            this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams = Object.assign({}, this.stripsResultDataMap[stripKey].viewMoreUrl.queryParams, { tabSelected: currentTabFromMap.value, pillSelected: currentPillFromMap.value });
+        }
+        if (currentStrip && currentTabFromMap && !currentTabFromMap.computeDataOnClick && currentPillFromMap) {
+            if (currentPillFromMap.requestRequired && currentPillFromMap.request) {
+                // call API to get tab data and process
+                // this.processStrip(currentStrip, [], 'fetching', true, null)
+                if (currentPillFromMap.request.searchV6) {
+                    // this.getTabDataByNewReqSearchV6(currentStrip, tabIndex, pillIndex, currentPillFromMap, true);
+                }
+                else if (currentPillFromMap.request.trendingSearch) {
+                    // this.getTabDataByNewReqTrending(currentStrip, tabIndex, pillIndex, currentPillFromMap, true);
+                }
+                // if (stripMap && stripMap.tabs && stripMap.tabs[tabEvent.index]) {
+                //   stripMap.tabs[tabEvent.index].tabLoading = false;
+                // }
+                stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+            }
+            else {
+                this.getTabDataByfilter(currentStrip, currentTabFromMap, true);
+                if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+                    stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+                    stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+                    stripMap.showOnLoader = true;
+                    this.resetFilter(stripMap, tabIndex, pillIndex);
+                }
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+                        stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'done';
+                        stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+                        stripMap.showOnLoader = false;
+                        this.resetSelectedPill(stripMap.tabs[tabIndex].pillsData);
+                        stripMap.tabs[tabIndex].pillsData[pillIndex]['selected'] = true;
+                    }
+                }), 200);
+            }
+        }
+    }
+    /**
+     * @param {?} pillData
+     * @return {?}
+     */
+    resetSelectedPill(pillData) {
+        if (pillData && pillData.length) {
+            pillData.forEach((/**
+             * @param {?} pill
+             * @return {?}
+             */
+            (pill) => {
+                pill['selected'] = false;
+            }));
+        }
+    }
+    /**
+     * @param {?} strip
+     * @param {?} currentTab
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    getTabDataByfilter(strip, currentTab, calculateParentStatus) {
+        // tslint:disable:no-console
+        console.log('strip -- ', strip);
+        // tslint:disable:no-console
+        console.log('currentTab -- ', currentTab);
+        // tslint:disable:no-console
+        console.log('calculateParentStatus-- ', calculateParentStatus);
+        // TODO: Write logic for individual filter if passed in config
+        // add switch case based on config key passed
+    }
+    /**
+     * @private
+     * @param {?} key
+     * @return {?}
+     */
+    getIfStripHidden(key) {
+        /** @type {?} */
+        const storageItem = sessionStorage.getItem(`cstrip_${key}`);
+        return Boolean(storageItem !== '1');
+    }
+    // translate labes
+    /**
+     * @param {?} label
+     * @param {?} type
+     * @return {?}
+     */
+    translateLabels(label, type) {
+        return this.langtranslations.translateLabel(label, type, '');
+    }
+    /**
+     * @param {?} stripData
+     * @param {?} path
+     * @param {?} queryParamsData
+     * @return {?}
+     */
+    redirectViewAll(stripData, path, queryParamsData) {
+        if (this.emitViewAll) {
+            this.viewAllResponse.emit(stripData);
+        }
+        else {
+            this.router.navigate([path], { queryParams: queryParamsData });
+        }
+    }
+    /**
+     * @param {?} index
+     * @param {?} item
+     * @return {?}
+     */
+    identify(index, item) {
+        if (index >= 0) { }
+        return item;
+    }
+    /**
+     * @param {?} index
+     * @param {?} item
+     * @return {?}
+     */
+    tracker(index, item) {
+        if (index >= 0) { }
+        return get(item, 'widgetData.content.identifier');
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getContineuLearningLenth(data) {
+        return data.widgets ? data.widgets.length : 0;
+    }
+    /**
+     * @param {?} key
+     * @return {?}
+     */
+    showAccordion(key) {
+        if (this.utilitySvc.isMobile && this.stripsResultDataMap[key].mode === 'accordion') {
+            return this.showAccordionData;
+        }
+        return true;
+    }
+    /**
+     * @param {?} wData
+     * @param {?} data
+     * @return {?}
+     */
+    checkCondition(wData, data) {
+        if (wData.strips[0].stripConfig && wData.strips[0].stripConfig.hideShowAll) {
+            return !wData.strips[0].stripConfig.hideShowAll;
+        }
+        return wData.strips[0].viewMoreUrl && data.widgets && data.widgets.length >= 4;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    checkVisible(data) {
+        return data.stripInfo && data.stripInfo.visibilityMode === 'visible';
+    }
+    /**
+     * @param {?} stripsResultDataMap
+     * @param {?} key
+     * @return {?}
+     */
+    getSelectedIndex(stripsResultDataMap, key) {
+        /** @type {?} */
+        let returnValue = 0;
+        return returnValue;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getLength(data) {
+        if (!data.tabs || !data.tabs.length) {
+            return data.widgets ? data.widgets.length : 0;
+        }
+        {
+            // if tabs are there check if each tab has widgets and get the tab with max widgets
+            /** @type {?} */
+            let tabWithMaxWidgets = {};
+            data.tabs.forEach((/**
+             * @param {?} tab
+             * @return {?}
+             */
+            (tab) => {
+                if (tab.pillsData && tab.pillsData.length) {
+                    tabWithMaxWidgets = tab.pillsData.reduce((/**
+                     * @param {?} prev
+                     * @param {?} current
+                     * @return {?}
+                     */
+                    (prev, current) => {
+                        if (!prev.widgets && !current.widgets) {
+                            return current;
+                        }
+                        if (prev.widgets && current.widgets) {
+                            return (prev.widgets.length > current.widgets.length) ? prev : current;
+                        }
+                        if (current.widgets && !prev.widgets) {
+                            return current;
+                        }
+                        if (!current.widgets && prev.widgets) {
+                            return prev;
+                        }
+                        return current;
+                        // return (prev.widgets && current.widgets && (prev.widgets.length > current.widgets.length) ) ? prev : current
+                        // tslint:disable-next-line: align
+                    }), data.tabs[0]);
+                }
+            }));
+            // if tabs has atleast 1 widgets then strip will show or else not
+            return tabWithMaxWidgets.widgets ? tabWithMaxWidgets.widgets.length : 0;
+        }
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    isStripShowing(data) {
+        /** @type {?} */
+        let count = 0;
+        if (data && data.key === this.environment.programStripKey && (!data.tabs || !data.tabs.length) &&
+            data.stripTitle === this.environment.programStripName && data.widgets.length > 0) {
+            data.widgets.forEach((/**
+             * @param {?} key
+             * @return {?}
+             */
+            (key) => {
+                if (key && key.widgetData.content.primaryCategory === this.environment.programStripPrimaryCategory) {
+                    count = count + 1;
+                }
+            }));
+            if (count > 0) {
+                data.showStrip = true;
+            }
+            else {
+                data.showStrip = false;
+            }
+        }
+        // console.log('data.key', data, data.key, data.widgets);
+        return data.showStrip;
+    }
+    /**
+     * @return {?}
+     */
+    get isMobile() {
+        return this.utilitySvc.isMobile || false;
+    }
+    // search api with facets
+    /**
+     * @param {?} strip
+     * @param {?} request
+     * @param {?} apiUrl
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    postRequestMethod(strip, request, apiUrl, calculateParentStatus) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((/**
+             * @param {?} resolve
+             * @param {?} reject
+             * @return {?}
+             */
+            (resolve, reject) => {
+                if (request && request) {
+                    this.contentSvc.postApiMethod(apiUrl, request).subscribe((/**
+                     * @param {?} results
+                     * @return {?}
+                     */
+                    results => {
+                        if (results.result && results.result.content) {
+                            /** @type {?} */
+                            const showViewMore = Boolean(results.result.content && results.result.content.length > 5 && strip.stripConfig && strip.stripConfig.postCardForSearch);
+                            /** @type {?} */
+                            const viewMoreUrl = showViewMore
+                                ? {
+                                    path: strip.viewMoreUrl && strip.viewMoreUrl.path || '',
+                                    queryParams: {
+                                        tab: 'Learn',
+                                        q: strip.viewMoreUrl && strip.viewMoreUrl.queryParams,
+                                        f: {},
+                                    },
+                                }
+                                : null;
+                            resolve({ results, viewMoreUrl });
+                        }
+                    }), (/**
+                     * @param {?} error
+                     * @return {?}
+                     */
+                    (error) => {
+                        this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        reject(error);
+                    }));
+                }
+            }));
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchFromSearch(strip, calculateParentStatus = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (strip.request && Object.keys(strip.request.requestBody).length) {
+                try {
+                    /** @type {?} */
+                    const response = yield this.postRequestMethod(strip, strip.request.requestBody, strip.request.apiUrl, calculateParentStatus);
+                    /** @type {?} */
+                    let tabIndex = 0;
+                    /** @type {?} */
+                    let pillIndex = 0;
+                    if (response.results && response.results.result) {
+                        this.mapAllDataWithFacets(strip, response.results.result.content, response.results.result.facets, calculateParentStatus);
+                        /** @type {?} */
+                        const widgets = this.transformContentsToWidgets(response.results.result.content, strip);
+                        /** @type {?} */
+                        let tabResults = [];
+                        // if (this.stripsResultDataMap[strip.key] && this.stripsResultDataMap[strip.key].tabs) {
+                        //   const allTabs = this.stripsResultDataMap[strip.key].tabs;
+                        //   const allPills = this.stripsResultDataMap[strip.key].tabs[tabIndex].pillsData;
+                        //   this.resetSelectedPill(allPills)
+                        //   if (allTabs && allTabs.length && allTabs[tabIndex]) {
+                        //     if(allPills && allPills.length && allPills[pillIndex]){
+                        //       allPills[pillIndex] = {
+                        //         ...allPills[pillIndex],
+                        //         widgets,
+                        //         fetchTabStatus: 'done',
+                        //         selected: true
+                        //       };
+                        //     }
+                        //     allTabs[tabIndex] = {
+                        //       ...allTabs[tabIndex],
+                        //       widgets,
+                        //       fetchTabStatus: 'done',
+                        //     };
+                        //     tabResults = allTabs;
+                        //   }
+                        // }
+                        // this.processStrip(
+                        //   strip,
+                        //   widgets,
+                        //   'done',
+                        //   calculateParentStatus,
+                        //   response.viewMoreUrl,
+                        //   tabResults // tabResults as widgets
+                        // );
+                    }
+                }
+                catch (error) {
+                    // Handle errors
+                    // console.error('Error:', error);
+                }
+            }
+        });
+    }
+    /**
+     * @param {?} strip
+     * @param {?} content
+     * @param {?} facets
+     * @param {?} calculateParentStatus
+     * @return {?}
+     */
+    mapAllDataWithFacets(strip, content, facets, calculateParentStatus) {
+        console.log(strip, content);
+        /** @type {?} */
+        const allTabs = this.stripsResultDataMap[strip.key].tabs;
+        /** @type {?} */
+        let facet = [];
+        allTabs.forEach((/**
+         * @param {?} ele
+         * @return {?}
+         */
+        (ele) => {
+            ele['fetchTabStatus'] = 'done';
+            /** @type {?} */
+            let filteredData = content.filter((/**
+             * @param {?} contEle
+             * @return {?}
+             */
+            (contEle) => contEle.nlwUserExp.includes(ele.value)))
+            // filteredData.forEach(element => {
+            //   facet =  [...facet,..._.difference(element.nlwOrgs ,facet)];
+            // });
+            ;
+            // filteredData.forEach(element => {
+            //   facet =  [...facet,..._.difference(element.nlwOrgs ,facet)];
+            // });
+            ele['widgets'] = filteredData;
+            ele.pillsData.forEach((/**
+             * @param {?} pill
+             * @return {?}
+             */
+            (pill) => {
+                if (pill.value === 'all') {
+                    pill['widgets'] = this.transformContentsToWidgets(filteredData, strip);
+                    pill['fetchTabStatus'] = 'done';
+                }
+                else if (pill.value === 'course') {
+                    /** @type {?} */
+                    let contentFilteredData = filteredData.filter((/**
+                     * @param {?} contEle
+                     * @return {?}
+                     */
+                    (contEle) => contEle.courseCategory.toLowerCase() === pill.value));
+                    pill['widgets'] = this.transformContentsToWidgets(contentFilteredData, strip);
+                    pill['fetchTabStatus'] = 'done';
+                }
+                else {
+                    /** @type {?} */
+                    let contentFilteredData = filteredData.filter((/**
+                     * @param {?} contEle
+                     * @return {?}
+                     */
+                    (contEle) => contEle.courseCategory.toLowerCase() !== 'course'));
+                    pill['widgets'] = this.transformContentsToWidgets(contentFilteredData, strip);
+                    pill['fetchTabStatus'] = 'done';
+                }
+            }));
+            // ele['facets'] = [{
+            //   name:'nlwOrgs',
+            //   values: facet
+            // }]
+            ele['facets'] = facets;
+        }));
+        strip.tabs[0].pillsData[0].fetchTabStatus = 'done';
+        strip.tabs[0].pillsData[0].tabLoading = false;
+        strip.showOnLoader = false;
+        this.resetSelectedPill(strip.tabs[0].pillsData);
+        strip.tabs[0].pillsData[0]['selected'] = true;
+        this.processStrip(strip, [], 'done', calculateParentStatus, strip.viewMoreUrl, allTabs // tabResults as widgets
+        );
+    }
+    /**
+     * @private
+     * @param {?} contents
+     * @param {?} strip
+     * @return {?}
+     */
+    transformContentsToWidgets(contents, strip) {
+        return (contents || []).map((/**
+         * @param {?} content
+         * @param {?} idx
+         * @return {?}
+         */
+        (content, idx) => (content ? {
+            widgetType: 'cardLib',
+            widgetSubType: 'cardContentLib',
+            widgetHostClass: 'mb-2',
+            widgetData: Object.assign({ content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
+        } : {
+            widgetType: 'card',
+            widgetSubType: 'cardContent',
+            widgetHostClass: 'mb-2',
+            widgetData: {},
+        })));
+    }
+    /**
+     * @param {?} eventData
+     * @param {?} stripMap
+     * @param {?} tabIndex
+     * @return {?}
+     */
+    getorgData(eventData, stripMap, tabIndex) {
+        console.log(eventData);
+        /** @type {?} */
+        let selectedValue = eventData.target.value;
+        /** @type {?} */
+        let pillIndex = this.getSelectedPillIndex(stripMap.tabs[tabIndex], tabIndex);
+        if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+            stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+            stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+            stripMap.showOnLoader = true;
+            /** @type {?} */
+            let returnedValues = stripMap.tabs[tabIndex].widgets.filter((/**
+             * @param {?} ele
+             * @return {?}
+             */
+            (ele) => {
+                /** @type {?} */
+                var words = ele.nlwOrgs.map((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                v => v.toLowerCase()));
+                return words.includes(selectedValue);
+            }));
+            stripMap.tabs[tabIndex].pillsData[pillIndex]['widgets'] = this.transformContentsToWidgets(returnedValues, stripMap);
+        }
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+                stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'done';
+                stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+                stripMap.showOnLoader = false;
+                this.resetSelectedPill(stripMap.tabs[tabIndex].pillsData);
+                stripMap.tabs[tabIndex].pillsData[pillIndex]['selected'] = true;
+            }
+        }), 200);
+    }
+    /**
+     * @param {?} stripMap
+     * @param {?} tabIndex
+     * @param {?} pillIndex
+     * @return {?}
+     */
+    resetFilter(stripMap, tabIndex, pillIndex) {
+        // let selectedValue = eventData.target.value
+        if (pillIndex) {
+            pillIndex = this.getSelectedPillIndex(stripMap.tabs[tabIndex], tabIndex);
+        }
+        this.facetForm.reset({
+            org: 0
+        });
+        if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+            stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'inprogress';
+            stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+            stripMap.showOnLoader = true;
+            // let returnedValues = stripMap.tabs[tabIndex].widgets.filter((ele: any) => {
+            //   var words = ele.nlwOrgs.map(v => v.toLowerCase());
+            //   return words.includes(selectedValue)
+            // })
+            /** @type {?} */
+            let contentData = stripMap.tabs[tabIndex].widgets || [];
+            stripMap.tabs[tabIndex].pillsData[pillIndex]['widgets'] = this.transformContentsToWidgets(contentData, stripMap);
+        }
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            if (stripMap && stripMap.tabs && stripMap.tabs[tabIndex]) {
+                stripMap.tabs[tabIndex].pillsData[pillIndex].fetchTabStatus = 'done';
+                stripMap.tabs[tabIndex].pillsData[pillIndex].tabLoading = false;
+                stripMap.showOnLoader = false;
+                this.resetSelectedPill(stripMap.tabs[tabIndex].pillsData);
+                stripMap.tabs[tabIndex].pillsData[pillIndex]['selected'] = true;
+            }
+        }), 200);
+    }
+}
+ContentStripFacetFilterComponent.decorators = [
+    { type: 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}"]
+            }] }
+];
+/** @nocollapse */
+ContentStripFacetFilterComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] },
+    { type: WidgetContentService },
+    { type: LoggerService },
+    { type: EventService },
+    { type: ConfigurationsService$1 },
+    { type: UtilityService },
+    { type: Router },
+    { type: WidgetUserService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService },
+    { type: FormBuilder }
+];
+ContentStripFacetFilterComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    emptyResponse: [{ type: Output }],
+    viewAllResponse: [{ type: Output }],
+    telemtryResponse: [{ type: Output }],
+    providerId: [{ type: Input }],
+    emitViewAll: [{ type: Input }],
+    channnelName: [{ type: Input }],
+    id: [{ type: HostBinding, args: ['id',] }]
+};
+if (false) {
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.widgetData;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.emptyResponse;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.viewAllResponse;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.telemtryResponse;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.providerId;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.emitViewAll;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.channnelName;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.id;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.stripsResultDataMap;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.stripsKeyOrder;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.showAccordionData;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.showParentLoader;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.showParentError;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.showParentNoData;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.errorDataCount;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.noDataCount;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.successDataCount;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.contentAvailable;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.baseUrl;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.veifiedKarmayogi;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.environment;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.changeEventSubscription;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.defaultMaxWidgets;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.enrollInterval;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.todaysEvents;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.enrollmentMapData;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.facetForm;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.contentSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.loggerSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.eventSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.configSvc;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.utilitySvc;
+    /** @type {?} */
+    ContentStripFacetFilterComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.userSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    ContentStripFacetFilterComponent.prototype._fb;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -12133,58 +13571,58 @@ const WIDGET_REGISTRATION_LIB_CONFIG = [
 /**
  * @record
  */
-function IStripUnitContentData$1() { }
+function IStripUnitContentData$2() { }
 if (false) {
     /** @type {?} */
-    IStripUnitContentData$1.prototype.key;
+    IStripUnitContentData$2.prototype.key;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.canHideStrip;
+    IStripUnitContentData$2.prototype.canHideStrip;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.mode;
+    IStripUnitContentData$2.prototype.mode;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.showStrip;
+    IStripUnitContentData$2.prototype.showStrip;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.disableTranslate;
+    IStripUnitContentData$2.prototype.disableTranslate;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.widgets;
+    IStripUnitContentData$2.prototype.widgets;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.stripTitle;
+    IStripUnitContentData$2.prototype.stripTitle;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.stripTitleLink;
+    IStripUnitContentData$2.prototype.stripTitleLink;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.sliderConfig;
+    IStripUnitContentData$2.prototype.sliderConfig;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.stripConfig;
+    IStripUnitContentData$2.prototype.stripConfig;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.tabs;
+    IStripUnitContentData$2.prototype.tabs;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.stripName;
+    IStripUnitContentData$2.prototype.stripName;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.stripLogo;
+    IStripUnitContentData$2.prototype.stripLogo;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.description;
+    IStripUnitContentData$2.prototype.description;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.stripInfo;
+    IStripUnitContentData$2.prototype.stripInfo;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.noDataWidget;
+    IStripUnitContentData$2.prototype.noDataWidget;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.errorWidget;
+    IStripUnitContentData$2.prototype.errorWidget;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.showOnNoData;
+    IStripUnitContentData$2.prototype.showOnNoData;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.showOnLoader;
+    IStripUnitContentData$2.prototype.showOnLoader;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.showOnError;
+    IStripUnitContentData$2.prototype.showOnError;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.loaderWidgets;
+    IStripUnitContentData$2.prototype.loaderWidgets;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.stripBackground;
+    IStripUnitContentData$2.prototype.stripBackground;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.secondaryHeading;
+    IStripUnitContentData$2.prototype.secondaryHeading;
     /** @type {?} */
-    IStripUnitContentData$1.prototype.viewMoreUrl;
+    IStripUnitContentData$2.prototype.viewMoreUrl;
     /** @type {?|undefined} */
-    IStripUnitContentData$1.prototype.request;
+    IStripUnitContentData$2.prototype.request;
 }
 class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
     /**
@@ -13783,6 +15221,59 @@ ContentStripWithTabsPillsModule.decorators = [
             },] }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+const ɵ0$6 = HttpLoaderFactory1;
+class ContentStripFacetFilterModule {
+}
+ContentStripFacetFilterModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ContentStripFacetFilterComponent],
+                imports: [
+                    SbUiResolverModule,
+                    CommonModule,
+                    RouterModule,
+                    HorizontalScrollerV2Module,
+                    MatProgressSpinnerModule,
+                    MatToolbarModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatTooltipModule,
+                    MatListModule,
+                    MatSidenavModule,
+                    MatCardModule,
+                    MatExpansionModule,
+                    MatRadioModule,
+                    MatChipsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatDialogModule,
+                    MatSnackBarModule,
+                    MatSelectModule,
+                    MatDatepickerModule,
+                    MatNativeDateModule,
+                    MatTableModule,
+                    MatCheckboxModule,
+                    MatProgressSpinnerModule,
+                    MatButtonToggleModule,
+                    MatTabsModule,
+                    ReactiveFormsModule,
+                    MatAutocompleteModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0$6,
+                            deps: [HttpClient],
+                        },
+                    }),
+                ],
+                entryComponents: [ContentStripFacetFilterComponent],
+                exports: [ContentStripFacetFilterComponent],
+            },] }
+];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -14935,7 +16426,7 @@ CompetencyPassbookMdoModule.decorators = [
  */
 /** @type {?} */
 const PROXY_SLAG_V8 = '/apis/proxies/v8';
-const ɵ0$6 = /**
+const ɵ0$7 = /**
  * @param {?} contentId
  * @param {?} contentType
  * @param {?} userId
@@ -14954,7 +16445,7 @@ const ɵ0$6 = /**
 (contentId, userID) => `${PROXY_SLAG_V8}/ratings/v1/read/${contentId}/Course/${userID}`;
 /** @type {?} */
 const API_END_POINTS$3 = {
-    GET_RATING: (ɵ0$6),
+    GET_RATING: (ɵ0$7),
     ADD_OR_UPDATE: `${PROXY_SLAG_V8}/ratings/v1/upsert`,
     GET_RATING_SUMMARY: (ɵ1$3),
     GET_RATING_LOOKUP: `${PROXY_SLAG_V8}/ratings/v1/ratingLookUp`,
@@ -15588,7 +17079,7 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-const ɵ0$7 = HttpLoaderFactory;
+const ɵ0$8 = HttpLoaderFactory;
 class MDOChannelModule {
 }
 MDOChannelModule.decorators = [
@@ -15613,7 +17104,7 @@ MDOChannelModule.decorators = [
                     TranslateModule.forRoot({
                         loader: {
                             provide: TranslateLoader,
-                            useFactory: ɵ0$7,
+                            useFactory: ɵ0$8,
                             deps: [HttpClient],
                         },
                     }),
@@ -15893,7 +17384,7 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-const ɵ0$8 = HttpLoaderFactory;
+const ɵ0$9 = HttpLoaderFactory;
 class ProvidersModule {
 }
 ProvidersModule.decorators = [
@@ -15917,7 +17408,7 @@ ProvidersModule.decorators = [
                     TranslateModule.forRoot({
                         loader: {
                             provide: TranslateLoader,
-                            useFactory: ɵ0$8,
+                            useFactory: ɵ0$9,
                             deps: [HttpClient],
                         },
                     }),
@@ -16022,7 +17513,7 @@ class NationalLearningComponent {
 NationalLearningComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-national-learning',
-                template: "<div class=\"container-fluid white-background nlm-micro-sites micro-white\" id=\"nlm-micro-sites\">\n    <div class=\"flex flex-col flex-1\">\n        <ng-container *ngIf=\"sectionList?.length\">\n            <ng-container *ngFor=\"let section of sectionList\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                        <ng-container *ngFor=\"let column of section.column\">\n                            <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                                <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                    <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'contentSection'\" [ngTemplateOutlet]=\"contentSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </section>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"w-full topSection\">\n        <div *ngIf=\"data.sliderData && data.sliderData.sliders\">\n            <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n        </div>\n        <div *ngIf=\"data && data.metrics\">\n            <div class=\"block md:hidden\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwCol'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n            <div class=\"hidden md:block\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwRow'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"block md:hidden\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"hidden md:block\">\n                        <div class=\"flex flex items-center justify-center gap-10\">\n                            <div class=\"mr-4 logo-box-container\">\n                                <div class=\"flex logo-box-rounded top mr-4\">\n                                    <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                                </div>\n                            </div>\n                            <div class=\"w-full md:w-9/12 flex-1 flex flex-col pr-3\">\n                                <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                                <div class=\"description\">{{data?.description | slice:0:descriptionMaxLength}}\n                                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden\">\n                        <div class=\"flex flex-col items-center justify-center margin-bottom-xl px-5\">\n                            <div class=\"mlogo-box-rounded\">\n                                <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                            </div>\n                        </div>\n                        <div class=\"flex flex-col px-5\">\n                            <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                            <div class=\"mdescription\">{{data?.description | slice:0:descriptionMaxLength}}\n                                <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container margin-top-xl\">\n                    <div class=\"hidden md:block\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #contentSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.leftContent.colspan}}\">\n                    <div *ngIf=\"data.leftContent.data.weekHighlights.data\">\n                        <sb-uic-highlights-of-week\n                            [objectData]=\"data.leftContent.data.weekHighlights.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-{{data.rightContent.colspan}}\">\n                    <div *ngIf=\"data.rightContent.data.myprogress\">\n                        <sb-uic-user-progress\n                            [objectData]=\"data.rightContent.data.myprogress.data\" [rootOrgId]=\"configDetails?.unMappedUser?.rootOrgId\">\n                        </sb-uic-user-progress>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.speakerOftheDay\">\n                        <sb-uic-speakers\n                            [objectData]=\"data.rightContent.data.speakerOftheDay.data\">\n                        </sb-uic-speakers>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.mdoLeaderboard\">\n                        <sb-uic-mdo-leaderboard\n                            [object]=\"data.rightContent.data.mdoLeaderboard.data\"\n                            (tabClicked)=\"raiseTabClick($event)\"></sb-uic-mdo-leaderboard>\n                    </div>\n\n                    <div class=\"block md:hidden\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n",
+                template: "<div class=\"container-fluid white-background nlm-micro-sites micro-white\" id=\"nlm-micro-sites\">\n    <div class=\"flex flex-col flex-1\">\n        <ng-container *ngIf=\"sectionList?.length\">\n            <ng-container *ngFor=\"let section of sectionList\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\" [ngClass]=\"{'container': section.wrapperClass}\">\n                        <ng-container *ngFor=\"let column of section.column\">\n                            <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                                <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                    <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'contentSection'\" [ngTemplateOutlet]=\"contentSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </section>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"w-full topSection\">\n        <div *ngIf=\"data.sliderData && data.sliderData.sliders\">\n            <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n        </div>\n        <div *ngIf=\"data && data.metrics\">\n            <div class=\"block md:hidden\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwCol'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n            <div class=\"hidden md:block\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwRow'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"block md:hidden\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"hidden md:block\">\n                        <div class=\"flex flex items-center justify-center gap-10\">\n                            <div class=\"mr-4 logo-box-container\">\n                                <div class=\"flex logo-box-rounded top mr-4\">\n                                    <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                                </div>\n                            </div>\n                            <div class=\"w-full md:w-9/12 flex-1 flex flex-col pr-3\">\n                                <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                                <div class=\"description\">{{data?.description | slice:0:descriptionMaxLength}}\n                                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden\">\n                        <div class=\"flex flex-col items-center justify-center margin-bottom-xl px-5\">\n                            <div class=\"mlogo-box-rounded\">\n                                <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                            </div>\n                        </div>\n                        <div class=\"flex flex-col px-5\">\n                            <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                            <div class=\"mdescription\">{{data?.description | slice:0:descriptionMaxLength}}\n                                <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container margin-top-xl\">\n                    <div class=\"hidden md:block\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #contentSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.leftContent.colspan}}\">\n                    <div *ngIf=\"data.leftContent.data.weekHighlights.data\">\n                        <sb-uic-highlights-of-week\n                            [objectData]=\"data.leftContent.data.weekHighlights.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data?.leftContent?.data?.exploreLearningContent?.strips[0]\">\n                            <sb-uic-content-strip-facet-filter [widgetData]=\"data?.leftContent?.data?.exploreLearningContent\"></sb-uic-content-strip-facet-filter>\n                        </div>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-{{data.rightContent.colspan}}\">\n                    <div *ngIf=\"data.rightContent.data.myprogress\">\n                        <sb-uic-user-progress\n                            [objectData]=\"data.rightContent.data.myprogress.data\" [rootOrgId]=\"configDetails?.unMappedUser?.rootOrgId\">\n                        </sb-uic-user-progress>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.speakerOftheDay\">\n                        <sb-uic-speakers\n                            [objectData]=\"data.rightContent.data.speakerOftheDay.data\">\n                        </sb-uic-speakers>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.mdoLeaderboard\">\n                        <sb-uic-mdo-leaderboard\n                            [object]=\"data.rightContent.data.mdoLeaderboard.data\"\n                            (tabClicked)=\"raiseTabClick($event)\"></sb-uic-mdo-leaderboard>\n                    </div>\n\n                    <div class=\"block md:hidden\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data?.leftContent?.data?.exploreLearningContent?.strips[0]\">\n                            <sb-uic-content-strip-facet-filter [widgetData]=\"data?.leftContent?.data?.exploreLearningContent\"></sb-uic-content-strip-facet-filter>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n",
                 styles: ["::ng-deep.mat-app-background{background-color:#fff!important}.nlw-mandatoryCourse ::ng-deep.capitalize{font-size:20px;line-height:24.38px}.nlm-micro-sites ::ng-deep.container{max-width:1200px!important}.nlm-micro-sites ::ng-deep.banner-container{padding-bottom:0!important}.topSection ::ng-deep.prev{margin-left:15px!important}.topSection ::ng-deep.next{margin-right:15px!important}.topSection .stats-header{display:flex;align-items:center;justify-content:center;position:absolute;left:43.5%;top:-20px;text-transform:capitalize}.topSection .stats-title{display:flex;align-items:center;justify-content:center;background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px}.topSection .my-arrow{font-size:12px}.topSection .less-opacity1{opacity:.75}.topSection .less-opacity2{opacity:.5}.topSection .details-wrapper{padding:16px;display:flex;gap:50px}.topSection .logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.topSection .logo-box-container{width:112px;height:72px}}.topSection .logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.topSection .logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .logo-box-rounded{width:112px;height:112px}.topSection .logo-box-rounded .logo-img{max-width:84px}}.topSection .mlogo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 8px 3px rgba(0,0,0,.06)}.topSection .mlogo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.topSection .mlogo-box-rounded{width:112px;height:112px}.topSection .mlogo-box-rounded .logo-img{max-width:84px}}.topSection .txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.topSection .description-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;padding-bottom:16px}.topSection .description{font-family:Lato;font-size:16px;font-weight:400;line-height:24px;text-align:left}.topSection .mdescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}@media screen and (min-width:320px) and (max-width:769px){.topSection ::ng-deep.prev{margin-left:15px!important}.topSection ::ng-deep.next{margin-right:15px!important}.topSection ::ng-deep.banner-container{min-height:212px!important}}"]
             }] }
 ];
@@ -16279,7 +17770,7 @@ class EventsComponent {
 EventsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-events',
-                template: "<div class=\"flex items-center mb-4 mt-2 e-header\">\n    <div class=\"event-title\">\n        {{object?.title}}\n    </div>\n    <div class=\"events-select\">\n        <select (change)=\"getEvents($event)\">\n            <option value=\"{{d?.startDate}}\" *ngFor=\"let d of daysBetween\" [selected]=\"currentDay === d.startDate\">{{d?.diplayFormat}}</option>\n        </select>\n    </div>\n</div>\n<div class=\"grid grid-cols-1 gap-4\">\n    <div class=\"events-card-wrapper\">\n        <div *ngIf=\"!loader\">\n            <div *ngIf=\"events?.length > 0\">\n                <div *ngFor=\"let event of events\">\n                    <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n                </div>\n            </div>\n            <div *ngIf=\"events?.length === 0\">\n                <div class=\"flex item-center justify-center p-5 no-events\">\n                    No events exist.\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"loader && events?.length === 0\">\n            <div *ngFor=\"let event of [1,2,3]\">\n                <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n            </div>\n        </div>\n    </div>\n</div>",
+                template: "<div class=\"flex items-center mb-4 mt-2 e-header\">\n    <div class=\"event-title\">\n        {{object?.title}}\n    </div>\n   <div class=\"flex gap-4\">\n        <div class=\"events-select\">\n            <select (change)=\"getEvents($event)\">\n                <option value=\"{{d?.startDate}}\" *ngFor=\"let d of daysBetween\" [selected]=\"currentDay === d.startDate\">{{d?.diplayFormat}}</option>\n            </select>\n        </div>\n        <div class=\"flex gap-4\">\n            <a  [routerLink]=\"'/app/event-hub/home'\" class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer \">Show All <mat-icon>chevron_right</mat-icon></a>\n        </div>\n   </div>\n</div>\n<div class=\"grid grid-cols-1 gap-4\">\n    <div class=\"events-card-wrapper\">\n        <div *ngIf=\"!loader\">\n            <div *ngIf=\"events?.length > 0\">\n                <div *ngFor=\"let event of events\">\n                    <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n                </div>\n            </div>\n            <div *ngIf=\"events?.length === 0\">\n                <div class=\"flex item-center justify-center p-5 no-events\">\n                    No events exist.\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"loader && events?.length === 0\">\n            <div *ngFor=\"let event of [1,2,3]\">\n                <sb-uic-event-card [objectData]=\"object\" [eventDetails]=\"event\" [loader]=\"loader\"></sb-uic-event-card>\n            </div>\n        </div>\n    </div>\n</div>",
                 styles: ["@charset \"UTF-8\";.e-header{justify-content:space-between}.event-title{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.events-select{position:relative;display:inline-block;width:150px}.events-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:25px;padding:10px 30px 10px 10px;font-size:16px;font-family:Arial,sans-serif;width:100%;height:100%;cursor:pointer}.events-select:after{content:\"\u25BC\";position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#555}.no-events{border:1px solid #c3c3c3;border-radius:12px}"]
             }] }
 ];
@@ -16402,6 +17893,7 @@ EventsModule.decorators = [
                     CommonModule,
                     RouterModule,
                     SkeletonLoaderLibModule,
+                    MatIconModule
                 ],
                 exports: [EventsComponent, EventCardComponent]
             },] }
@@ -16872,17 +18364,18 @@ class UserProgressComponent {
      * @return {?}
      */
     getUserProgress() {
+        debugger;
         this.insightSvc.fetchUserProgress().subscribe((/**
          * @param {?} res
          * @return {?}
          */
         (res) => {
             if (res && res.result && res.result.userLeaderBoard) {
-                this.userProgress = res.result.userLeaderBoard[0];
-            }
-            if (!this.userProgress.fullname && this.configSvc && this.configSvc.userProfile && this.configSvc.userProfile.firstName) {
-                this.userProgress['fullname'] = this.configSvc.userProfile.firstName;
-                this.userProgress['profile_image'] = this.configSvc.userProfile.profileImageUrl;
+                this.userProgress = res.result.userLeaderBoard;
+                if (!this.userProgress.fullname && this.configSvc && this.configSvc.userProfile && this.configSvc.userProfile.firstName) {
+                    this.userProgress['fullname'] = this.configSvc.userProfile.firstName;
+                    this.userProgress['profile_image'] = this.configSvc.userProfile.profileImageUrl;
+                }
             }
         }), (/**
          * @param {?} error
@@ -17063,7 +18556,8 @@ NationalLearningModule.decorators = [
                     MdoLeaderboardModule,
                     HighlightsOfWeekModule,
                     SpeakersModule,
-                    UserProgressModule
+                    UserProgressModule,
+                    ContentStripFacetFilterModule
                 ],
                 exports: [
                     NationalLearningComponent,
@@ -17085,5 +18579,5 @@ NationalLearningModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnnouncementsModule, CalenderModule, CardsModule, CbpPlanModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, DialogComponentsModule, EventsModule, HighlightsOfWeekModule, HttpLoaderFactory, HttpLoaderFactory1, KeyHighlightsModule, MDOChannelModule, MdoLeaderboardModule, MyHammerConfig, NationalLearningModule, ProvidersModule, ROOT_WIDGET_CONFIG, SlidersLibModule, SpeakersModule, TopLearnersModule, UserContentRatingLibModule, UserProgressModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardResourceComponent as ɵba, CardsComponent as ɵbb, CardPortraitComponent as ɵbc, CardUserComponent as ɵbd, CardLandscapeComponent as ɵbe, CardWideComponent as ɵbf, CardMDOChannelComponent as ɵbg, CardWideV2Component as ɵbh, CardKarmaProgramsComponent as ɵbi, CardKarmaProgramsV2Component as ɵbj, ProviderCardComponent as ɵbk, CardPortraitExtComponent as ɵbl, CardAssessmentComponent as ɵbm, CardProgressPortraitLibComponent as ɵbn, CertificateService as ɵbo, CardMdoChannelV1Component as ɵbp, PipePublicURLModule as ɵbq, PipePublicURL as ɵbr, ObjectToArrayPipeModule as ɵbs, ObjectToArrayPipe as ɵbt, DisplayContentTypeLibModule as ɵbu, DisplayContentTypeLibComponent as ɵbv, DefaultThumbnailModule as ɵbw, DefaultThumbnailDirective as ɵbx, PipeDurationTransformModule as ɵby, PipeDurationTransformPipe as ɵbz, MultilingualTranslationsService as ɵc, ContentProgressComponent as ɵca, CertificateDialogComponent as ɵcb, AvatarPhotoLibModule as ɵcc, AvatarPhotoLibComponent as ɵcd, ContentStripWithTabsPillsComponent as ɵce, CompetencyPassbookComponent as ɵcf, CompetencyPassbookService as ɵcg, PillsModule as ɵch, PillsComponent as ɵci, CompetencyPassbookMdoComponent as ɵcj, CompetencyPassbookMdoService as ɵck, UserContentRatingLibComponent as ɵcl, RatingService as ɵcm, UserContentRatingLibService as ɵcn, MdoChannelV1Component as ɵco, MdoChannelV2Component as ɵcp, ProvidersV2Component as ɵcq, NationalLearningComponent as ɵcr, KeyHighlightsComponent as ɵcs, EventsComponent as ɵct, EventCardComponent as ɵcu, MdoLeaderboardComponent as ɵcv, HighlightsOfWeekComponent as ɵcw, SpeakersComponent as ɵcx, UserProgressComponent as ɵcy, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, TopLearnersComponent as ɵt, CbpPlanComponent as ɵu, ScrollableItemDirective as ɵv, ScrollableItemModule as ɵw, MyHammerConfig$1 as ɵx, SlidersNgContentLibModule as ɵy, SlidersNgContentLibComponent as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CbpPlanModule, CommonMethodsService, CommonStripModule, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentProgressModule, ContentStripFacetFilterModule, ContentStripWithTabsLibModule, ContentStripWithTabsPillsModule, DataPointsModule, DialogComponentsModule, EventsModule, HighlightsOfWeekModule, HttpLoaderFactory, HttpLoaderFactory1, KeyHighlightsModule, MDOChannelModule, MdoLeaderboardModule, MyHammerConfig, NationalLearningModule, ProvidersModule, ROOT_WIDGET_CONFIG, SlidersLibModule, SpeakersModule, TopLearnersModule, UserContentRatingLibModule, UserProgressModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardResourceComponent as ɵba, CardsComponent as ɵbb, CardPortraitComponent as ɵbc, CardUserComponent as ɵbd, CardLandscapeComponent as ɵbe, CardWideComponent as ɵbf, CardMDOChannelComponent as ɵbg, CardWideV2Component as ɵbh, CardKarmaProgramsComponent as ɵbi, CardKarmaProgramsV2Component as ɵbj, ProviderCardComponent as ɵbk, CardPortraitExtComponent as ɵbl, CardAssessmentComponent as ɵbm, CardProgressPortraitLibComponent as ɵbn, CertificateService as ɵbo, CardMdoChannelV1Component as ɵbp, PipePublicURLModule as ɵbq, PipePublicURL as ɵbr, ObjectToArrayPipeModule as ɵbs, ObjectToArrayPipe as ɵbt, DisplayContentTypeLibModule as ɵbu, DisplayContentTypeLibComponent as ɵbv, DefaultThumbnailModule as ɵbw, DefaultThumbnailDirective as ɵbx, PipeDurationTransformModule as ɵby, PipeDurationTransformPipe as ɵbz, MultilingualTranslationsService as ɵc, ContentProgressComponent as ɵca, CertificateDialogComponent as ɵcb, AvatarPhotoLibModule as ɵcc, AvatarPhotoLibComponent as ɵcd, ContentStripFacetFilterComponent as ɵce, ContentStripWithTabsPillsComponent as ɵcf, CompetencyPassbookComponent as ɵcg, CompetencyPassbookService as ɵch, PillsModule as ɵci, PillsComponent as ɵcj, CompetencyPassbookMdoComponent as ɵck, CompetencyPassbookMdoService as ɵcl, UserContentRatingLibComponent as ɵcm, RatingService as ɵcn, UserContentRatingLibService as ɵco, MdoChannelV1Component as ɵcp, MdoChannelV2Component as ɵcq, ProvidersV2Component as ɵcr, NationalLearningComponent as ɵcs, KeyHighlightsComponent as ɵct, EventsComponent as ɵcu, EventCardComponent as ɵcv, MdoLeaderboardComponent as ɵcw, HighlightsOfWeekComponent as ɵcx, SpeakersComponent as ɵcy, UserProgressComponent as ɵcz, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, TopLearnersComponent as ɵt, CbpPlanComponent as ɵu, ScrollableItemDirective as ɵv, ScrollableItemModule as ɵw, MyHammerConfig$1 as ɵx, SlidersNgContentLibModule as ɵy, SlidersNgContentLibComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map