@jeraldj/discussions-ui 8.0.3-v16

package/fesm2022/jeraldj-discussions-ui.mjs

@@ -0,0 +1,3929 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Component, Input, Inject, Pipe, Output, NgModule, HostBinding, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import ___default from 'lodash';
+import { Subject, timer, ReplaySubject, interval, combineLatest } from 'rxjs';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { map } from 'rxjs/operators';
+import * as i2 from '@jeraldj/client-services';
+import { CsModule } from '@jeraldj/client-services';
+import * as i1$1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
+import _$1, { orderBy } from 'lodash-es';
+import { EventEmitter as EventEmitter$1 } from 'events';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import * as i9 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import * as i7 from 'ngx-chips';
+import { TagInputModule } from 'ngx-chips';
+
+/* tslint:enable */
+class DiscussionEventsService {
+    constructor() {
+        this.telemetryEvent = new Subject();
+        this.actionEvent = new EventEmitter();
+    }
+    emitTelemetry(event) {
+        console.log('Lib Event', event);
+        if (!_.isEmpty(event)) {
+            this.telemetryEvent.next(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionEventsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionEventsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class TelemetryUtilsService {
+    constructor(discussionEvents, router) {
+        this.discussionEvents = discussionEvents;
+        this.router = router;
+        this._context = [];
+        this.currentObj = {};
+    }
+    setContext(context) {
+        this._context = context;
+        this.currentObj = _.last(context);
+    }
+    uppendContext(data) {
+        const matchedC = _.find(this._context, { id: data.id });
+        if (!_.isEmpty(data) && !_.isEqual(data, matchedC)) {
+            this._context.push(data);
+        }
+        this.currentObj = _.last(this._context);
+    }
+    deleteContext(prevTopic) {
+        const topic = _.find(this._context, prevTopic);
+        if (topic) {
+            this._context = _.reject(this._context, topic);
+        }
+    }
+    getContext() {
+        return this._context;
+    }
+    logImpression(pageId) {
+        this.discussionEvents.emitTelemetry({});
+        const impressionEvent = {
+            eid: 'IMPRESSION',
+            edata: {
+                type: 'view',
+                pageid: pageId,
+                uri: this.router.url
+            }
+        };
+        if (this.currentObj) {
+            impressionEvent.context = { cdata: [{
+                        id: _.get(this.currentObj, 'id').toString(),
+                        type: _.get(this.currentObj, 'type')
+                    }
+                ] };
+        }
+        this.discussionEvents.emitTelemetry(impressionEvent);
+    }
+    logInteract(event, pageId) {
+        const target = _.get(event, 'currentTarget.attributes.id') || _.get(event, 'target.attributes.id') ||
+            _.get(event, 'srcElement.attributes.id');
+        const interactEvent = {
+            eid: 'INTERACT',
+            edata: {
+                id: _.get(target, 'value') || _.get(event, 'action'),
+                type: 'CLICK',
+                pageid: pageId
+            }
+        };
+        if (this.currentObj) {
+            const object = {
+                id: _.get(this.currentObj, 'id').toString(),
+                type: _.get(this.currentObj, 'type'),
+                ver: '1'
+            };
+            object['rollup'] = this._context.length > 1 ? this.getRollUp() : {};
+            interactEvent.context = {
+                cdata: [{
+                        id: _.get(this.currentObj, 'id').toString(),
+                        type: _.get(this.currentObj, 'type')
+                    }], object
+            };
+        }
+        this.discussionEvents.emitTelemetry(interactEvent);
+    }
+    getRollUp() {
+        const rollUp = {};
+        const data = _.reject(this._context, this.currentObj);
+        if (this._context.length > 1) {
+            data.forEach((element, index) => {
+                console.log('rollup', element);
+                rollUp['l' + (index + 1)] = element.toString();
+            });
+        }
+        if (_.get(this.currentObj, 'type') !== 'Post') {
+            return rollUp;
+        }
+        return {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TelemetryUtilsService, deps: [{ token: DiscussionEventsService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TelemetryUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TelemetryUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: DiscussionEventsService }, { type: i1.Router }]; } });
+
+class CategoryCardComponent {
+    constructor() { }
+    ngOnInit() {
+        console.log(this.category);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryCardComponent, selector: "lib-category-card", inputs: { category: "category" }, ngImport: i0, template: "<div class=\"category-card\" tabindex=\"0\" role=\"link\">\n    <div class=\"category-card-header\">\n      <div class=\"category-card-header-image\">\n        <img src=\"./assets/discussion-ui/images/Buffer-512.webp\" alt=\"category card icon\" class=\"category-card-img\">\n      </div>\n        <div class=\"category-card-header-label\" [innerHTML]=\"category.name\"></div>\n    </div>\n    <p class=\"category-card-header-text\">{{category.description}}</p>\n    <div class=\"category-card-main\">\n      <div class=\"category-card-main-content\">\n        <div class=\"discussion-label\">{{category.totalTopicCount}} Discussions</div>\n        <div class=\"post-label\">{{category.totalPostCount}} Posts</div>\n      </div>\n    <div><img src=\"./assets/discussion-ui/images/eye-icon.png\" class=\"eye-icon\" alt=\"eye icon\">\n    </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-category-card-label: var(--df-text);--df-category-card-text: var(--df-text)}.category-card{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;border-radius:.25rem;height:11rem;width:auto;padding:1rem;cursor:pointer}.category-card .category-card-header{display:flex;flex-direction:row;align-items:center}.category-card .category-card-header .category-card-header-image{border:.0625rem solid var(--red-0);border-radius:50%;max-width:3.125rem;width:100%;height:3.125rem;position:relative}.category-card .category-card-header .category-card-header-image .category-card-img{position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem}.category-card .category-card-header .category-card-header-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--df-category-card-label);word-break:break-word;margin:0 .5rem;font-weight:700}.category-card .category-card-header-text{color:var(--df-category-card-text);-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;word-break:break-all;padding:.5rem 0;font-size:.875rem}.category-card .category-card-main{display:flex;justify-content:space-between;align-items:center;color:var(--df-category-card-text);margin:.5rem 0;font-size:.875rem;font-weight:700}.category-card .category-card-main .category-card-main-content{display:flex}.category-card .category-card-main .post-label{margin:0 1rem}.category-card .category-card-main .eye-icon{width:1.4rem;height:1.4rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-category-card', template: "<div class=\"category-card\" tabindex=\"0\" role=\"link\">\n    <div class=\"category-card-header\">\n      <div class=\"category-card-header-image\">\n        <img src=\"./assets/discussion-ui/images/Buffer-512.webp\" alt=\"category card icon\" class=\"category-card-img\">\n      </div>\n        <div class=\"category-card-header-label\" [innerHTML]=\"category.name\"></div>\n    </div>\n    <p class=\"category-card-header-text\">{{category.description}}</p>\n    <div class=\"category-card-main\">\n      <div class=\"category-card-main-content\">\n        <div class=\"discussion-label\">{{category.totalTopicCount}} Discussions</div>\n        <div class=\"post-label\">{{category.totalPostCount}} Posts</div>\n      </div>\n    <div><img src=\"./assets/discussion-ui/images/eye-icon.png\" class=\"eye-icon\" alt=\"eye icon\">\n    </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-category-card-label: var(--df-text);--df-category-card-text: var(--df-text)}.category-card{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;border-radius:.25rem;height:11rem;width:auto;padding:1rem;cursor:pointer}.category-card .category-card-header{display:flex;flex-direction:row;align-items:center}.category-card .category-card-header .category-card-header-image{border:.0625rem solid var(--red-0);border-radius:50%;max-width:3.125rem;width:100%;height:3.125rem;position:relative}.category-card .category-card-header .category-card-header-image .category-card-img{position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem}.category-card .category-card-header .category-card-header-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--df-category-card-label);word-break:break-word;margin:0 .5rem;font-weight:700}.category-card .category-card-header-text{color:var(--df-category-card-text);-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;word-break:break-all;padding:.5rem 0;font-size:.875rem}.category-card .category-card-main{display:flex;justify-content:space-between;align-items:center;color:var(--df-category-card-text);margin:.5rem 0;font-size:.875rem;font-weight:700}.category-card .category-card-main .category-card-main-content{display:flex}.category-card .category-card-main .post-label{margin:0 1rem}.category-card .category-card-main .eye-icon{width:1.4rem;height:1.4rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { category: [{
+                type: Input
+            }] } });
+
+class DiscussCardComponent {
+    constructor() { }
+    ngOnInit() {
+        console.log('discussionData', this.discussionData);
+    }
+    getBgColor(tagTitle) {
+        const bgColor = this.stringToColor(tagTitle.toLowerCase());
+        const color = this.getContrast();
+        return { color, 'background-color': bgColor };
+    }
+    stringToColor(title) {
+        let hash = 0;
+        for (let i = 0; i < title.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = title.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        // tslint:disable-next-line: prefer-template
+        const colour = 'hsl(' + hue + ',100%,30%)';
+        return colour;
+    }
+    getContrast() {
+        return 'rgba(255, 255, 255, 80%)';
+    }
+    IsSingleComent(postCount) {
+        if (postCount && (postCount - 1) == 1) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussCardComponent, selector: "lib-discuss-card", inputs: { discussionData: "discussionData" }, ngImport: i0, template: "<!-- Card container -->\n<div class=\"discuss-card-content\" tabindex=\"0\" role=\"link\">\n\n  <!-- Card header -->\n  <div tabindex=\"0\" role=\"link\">\n      <!-- <a href=\"javascript:void(0)\" i18n-aria-label tabindex=\"0\" role=\"link\"> -->\n        <h3 class='discuss-card-title' *ngIf=\"discussionData?.title\" [innerHTML]=\"discussionData?.title\"></h3>\n        <h3 class='discuss-card-title' *ngIf=\"!discussionData?.title && discussionData?.topic?.title\" [innerHTML]=\"discussionData?.topic?.title\"></h3>\n        <h3 class='discuss-card-title' *ngIf=\"!discussionData?.title && !discussionData?.topic?.title && discussionData?.name\" [innerHTML]=\"discussionData?.name\"></h3>\n      <!-- </a> -->\n\n    <!-- Card subtitle -->\n    <div class=\"discuss-card-subtitle\">\n      <div class=\"card-label-container\">\n        <div *ngIf=\"discussionData?.category?.name\" class=\"discuss-card-label\">\n          <img src=\"./assets/discussion-ui/images/Buffer-512.webp\" alt=\"category card icon\" width=\"20px\" class=\"mr-4\">\n          {{discussionData.category.name}}\n        </div>\n        <div>\n          <span class=\"dot\"></span>\n          <span class=\"discuss-user-label\" *ngIf=\"discussionData?.user?.username\">{{discussionData?.user?.username}}</span>\n          <span class=\"discuss-user-label\" *ngIf=\"!(discussionData?.user?.username)\">{{'Anonymous'}}</span>\n        </div>\n      </div>\n\n      <div class=\"timing\">{{discussionData.lastposttime | date}}</div>\n      <!-- <span class=\"margin-left-l\">{{discussionData.timestamp | pipeRelativeTime}}</span> -->\n    </div>\n    <!-- /Card subtitle -->\n  </div>\n  <!-- /Card header -->\n\n  <!-- Card content -->\n  <div class=\"tags\">\n    <ng-container *ngIf=\"discussionData && discussionData.tags && discussionData.tags.length > 0\">\n      <span *ngFor=\"let tag of discussionData.tags\" class=\"tag\" [ngStyle]=\"getBgColor(tag.value)\">\n        {{tag.value}}\n      </span>\n    </ng-container>\n  </div>\n  <!-- /Card content -->\n\n  <!-- Card footer -->\n  <div class=\"discuss-card-comments\">\n    <div class=\"comments-content\">\n      <span class=\"votes-content\">\n        <!-- <mat-icon class=\"cursor-pointer\">import_export</mat-icon> -->\n        <img src=\"./assets/discussion-ui/images/votes.svg\" alt=\"votes icon\">\n        <span>{{(discussionData.upvotes + discussionData.downvotes) || 0 }} Votes</span>\n      </span>\n      <span class=\"views-content\">\n        <!-- <mat-icon>trending_up</mat-icon> -->\n        <img src=\"./assets/discussion-ui/images/views.svg\" alt=\"views icon\">\n        <span>{{discussionData.viewcount || 0}} Views</span>\n      </span>\n    </div>\n    <div class=\"comments-count\">{{((discussionData.postcount || 1) -1) }}\n        comments\n    </div>\n  </div>\n\n  <!-- /Card footer -->\n</div>\n<!-- /Card header -->", styles: [".discuss-card-content{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:1rem;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;word-break:break-all;cursor:pointer;width:auto}.discuss-card-content .discuss-card-title{margin:0;color:var(--df-text);cursor:pointer;font-size:1rem;font-weight:700;word-break:break-word}.discuss-card-content .discuss-card-subtitle{margin:8px 0 0;font-size:.875rem;display:flex;align-items:center}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle{align-items:flex-start}}.discuss-card-content .discuss-card-subtitle .card-label-container{display:flex;align-items:center}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .card-label-container{margin-right:auto;flex-wrap:wrap}}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label{color:var(--primary);display:flex;align-items:center}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label img{margin-right:.25rem}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label{flex-basis:100%}}.discuss-card-content .discuss-card-subtitle .card-label-container .dot{height:.375rem;width:.375rem;background-color:var(--gray-400);border-radius:50%;display:inline-block;margin:0 .5rem;position:relative;bottom:.0625rem}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-user-label{word-break:break-word}.discuss-card-content .discuss-card-subtitle .timing{margin:0 .5rem}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .timing{flex:0 0 auto}}.discuss-card-content .discuss-card-comments{display:flex;justify-content:space-between;font-size:.875rem;flex-wrap:wrap;font-weight:700;align-items:center;padding-top:.5rem}.discuss-card-content .discuss-card-comments .comments-content{display:flex}.discuss-card-content .discuss-card-comments .comments-content .votes-content,.discuss-card-content .discuss-card-comments .comments-content .views-content{display:flex;align-items:center;font-size:.875rem}.discuss-card-content .discuss-card-comments .comments-content .votes-content span,.discuss-card-content .discuss-card-comments .comments-content .views-content span{margin:0 .5rem}.discuss-card-content .discuss-card-comments .comments-content .views-content{margin-left:1.5rem}.discuss-card-content .discuss-card-comments .comments-content .votes-content img,.discuss-card-content .discuss-card-comments .comments-content .views-content img{height:1rem;width:1rem;cursor:pointer}.discuss-card-content .discuss-card-comments .comments-count{color:var(--primary);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-card', template: "<!-- Card container -->\n<div class=\"discuss-card-content\" tabindex=\"0\" role=\"link\">\n\n  <!-- Card header -->\n  <div tabindex=\"0\" role=\"link\">\n      <!-- <a href=\"javascript:void(0)\" i18n-aria-label tabindex=\"0\" role=\"link\"> -->\n        <h3 class='discuss-card-title' *ngIf=\"discussionData?.title\" [innerHTML]=\"discussionData?.title\"></h3>\n        <h3 class='discuss-card-title' *ngIf=\"!discussionData?.title && discussionData?.topic?.title\" [innerHTML]=\"discussionData?.topic?.title\"></h3>\n        <h3 class='discuss-card-title' *ngIf=\"!discussionData?.title && !discussionData?.topic?.title && discussionData?.name\" [innerHTML]=\"discussionData?.name\"></h3>\n      <!-- </a> -->\n\n    <!-- Card subtitle -->\n    <div class=\"discuss-card-subtitle\">\n      <div class=\"card-label-container\">\n        <div *ngIf=\"discussionData?.category?.name\" class=\"discuss-card-label\">\n          <img src=\"./assets/discussion-ui/images/Buffer-512.webp\" alt=\"category card icon\" width=\"20px\" class=\"mr-4\">\n          {{discussionData.category.name}}\n        </div>\n        <div>\n          <span class=\"dot\"></span>\n          <span class=\"discuss-user-label\" *ngIf=\"discussionData?.user?.username\">{{discussionData?.user?.username}}</span>\n          <span class=\"discuss-user-label\" *ngIf=\"!(discussionData?.user?.username)\">{{'Anonymous'}}</span>\n        </div>\n      </div>\n\n      <div class=\"timing\">{{discussionData.lastposttime | date}}</div>\n      <!-- <span class=\"margin-left-l\">{{discussionData.timestamp | pipeRelativeTime}}</span> -->\n    </div>\n    <!-- /Card subtitle -->\n  </div>\n  <!-- /Card header -->\n\n  <!-- Card content -->\n  <div class=\"tags\">\n    <ng-container *ngIf=\"discussionData && discussionData.tags && discussionData.tags.length > 0\">\n      <span *ngFor=\"let tag of discussionData.tags\" class=\"tag\" [ngStyle]=\"getBgColor(tag.value)\">\n        {{tag.value}}\n      </span>\n    </ng-container>\n  </div>\n  <!-- /Card content -->\n\n  <!-- Card footer -->\n  <div class=\"discuss-card-comments\">\n    <div class=\"comments-content\">\n      <span class=\"votes-content\">\n        <!-- <mat-icon class=\"cursor-pointer\">import_export</mat-icon> -->\n        <img src=\"./assets/discussion-ui/images/votes.svg\" alt=\"votes icon\">\n        <span>{{(discussionData.upvotes + discussionData.downvotes) || 0 }} Votes</span>\n      </span>\n      <span class=\"views-content\">\n        <!-- <mat-icon>trending_up</mat-icon> -->\n        <img src=\"./assets/discussion-ui/images/views.svg\" alt=\"views icon\">\n        <span>{{discussionData.viewcount || 0}} Views</span>\n      </span>\n    </div>\n    <div class=\"comments-count\">{{((discussionData.postcount || 1) -1) }}\n        comments\n    </div>\n  </div>\n\n  <!-- /Card footer -->\n</div>\n<!-- /Card header -->", styles: [".discuss-card-content{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:1rem;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;word-break:break-all;cursor:pointer;width:auto}.discuss-card-content .discuss-card-title{margin:0;color:var(--df-text);cursor:pointer;font-size:1rem;font-weight:700;word-break:break-word}.discuss-card-content .discuss-card-subtitle{margin:8px 0 0;font-size:.875rem;display:flex;align-items:center}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle{align-items:flex-start}}.discuss-card-content .discuss-card-subtitle .card-label-container{display:flex;align-items:center}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .card-label-container{margin-right:auto;flex-wrap:wrap}}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label{color:var(--primary);display:flex;align-items:center}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label img{margin-right:.25rem}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-card-label{flex-basis:100%}}.discuss-card-content .discuss-card-subtitle .card-label-container .dot{height:.375rem;width:.375rem;background-color:var(--gray-400);border-radius:50%;display:inline-block;margin:0 .5rem;position:relative;bottom:.0625rem}.discuss-card-content .discuss-card-subtitle .card-label-container .discuss-user-label{word-break:break-word}.discuss-card-content .discuss-card-subtitle .timing{margin:0 .5rem}@media screen and (max-width: 768px){.discuss-card-content .discuss-card-subtitle .timing{flex:0 0 auto}}.discuss-card-content .discuss-card-comments{display:flex;justify-content:space-between;font-size:.875rem;flex-wrap:wrap;font-weight:700;align-items:center;padding-top:.5rem}.discuss-card-content .discuss-card-comments .comments-content{display:flex}.discuss-card-content .discuss-card-comments .comments-content .votes-content,.discuss-card-content .discuss-card-comments .comments-content .views-content{display:flex;align-items:center;font-size:.875rem}.discuss-card-content .discuss-card-comments .comments-content .votes-content span,.discuss-card-content .discuss-card-comments .comments-content .views-content span{margin:0 .5rem}.discuss-card-content .discuss-card-comments .comments-content .views-content{margin-left:1.5rem}.discuss-card-content .discuss-card-comments .comments-content .votes-content img,.discuss-card-content .discuss-card-comments .comments-content .views-content img{height:1rem;width:1rem;cursor:pointer}.discuss-card-content .discuss-card-comments .comments-count{color:var(--primary);font-weight:700}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { discussionData: [{
+                type: Input
+            }] } });
+
+class AvatarPhotoComponent {
+    constructor() {
+        this.size = '';
+        this.randomColor = false;
+        this.showInitials = false;
+        this.random = Math.random().toString(36).slice(2);
+        // public initials!: string
+        this.colors = [
+            // '#EB7181', // red
+            '#306933', // green
+            // '#000000', // black
+            // '#3670B2', // blue
+            // '#4E9E87',
+            // '#7E4C8D',
+        ];
+        this.randomcolors = [
+            '#EB7181',
+            '#006400',
+            '#000000',
+            '#3670B2',
+            '#4E9E87',
+            '#7E4C8D',
+        ];
+    }
+    ngOnInit() {
+        if (!this.photoUrl) {
+            this.showInitials = true;
+            if (!this.initials) {
+                this.createInititals();
+            }
+            const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+            this.circleColor = this.colors[randomIndex];
+            if (this.randomColor) {
+                const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomcolors.length));
+                this.circleColor = this.randomcolors[randomIndex1];
+            }
+        }
+    }
+    createInititals() {
+        let initials = '';
+        const array = `${this.name} `.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (let i = 0; i < this.name.length; i += 1) {
+                if (this.name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (this.name.charAt(i) === this.name.charAt(i)) {
+                    initials += this.name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        this.initials = initials.toUpperCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarPhotoComponent, selector: "lib-avatar-photo", inputs: { photoUrl: "photoUrl", name: "name", size: "size", randomColor: "randomColor", initials: "initials" }, ngImport: i0, template: "<div [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-xl-s' : size=== 'xl-s',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color':  circleColor }\">\n  <img *ngIf=\"!showInitials\" src=\"{{photoUrl}}\" [alt]=\"photoUrl? '' :(name || initials || size || random)\">\n\n  <div *ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n    {{ initials }}\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarPhotoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-avatar-photo', template: "<div [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-xl-s' : size=== 'xl-s',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color':  circleColor }\">\n  <img *ngIf=\"!showInitials\" src=\"{{photoUrl}}\" [alt]=\"photoUrl? '' :(name || initials || size || random)\">\n\n  <div *ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n    {{ initials }}\n  </div>\n</div>" }]
+        }], propDecorators: { photoUrl: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], randomColor: [{
+                type: Input
+            }], initials: [{
+                type: Input
+            }] } });
+
+const urlConfig = {
+    // endpoint configs...!
+    host: 'http://localhost:3002',
+    // host: 'https://dev.sunbirded.org',
+    apiSlug: '/discussion',
+    apiBasePath: () => `${urlConfig.host}${urlConfig.apiSlug}`,
+    // URLs...!
+    getAllCategories: () => `${urlConfig.apiBasePath()}/categories`,
+    getSingleCategoryDetails: (cid) => `${urlConfig.apiBasePath()}/category/${cid}`,
+    getAllTags: () => `${urlConfig.apiBasePath()}/tags`,
+    getTagBasedDiscussion: (tag) => `${urlConfig.apiBasePath()}/tags/${tag}`,
+    createPost: () => `${urlConfig.apiBasePath()}/v3/topics`,
+    votePost: (pid) => `${urlConfig.apiBasePath()}/v3/posts/${pid}/vote`,
+    replyPost: (tid) => `${urlConfig.apiBasePath()}/v3/topics/${tid}`,
+    bookmarkPost: (pid) => `${urlConfig.apiBasePath()}/v3/posts/${pid}/bookmark`,
+    recentPost: () => `${urlConfig.apiBasePath()}/recent`,
+    popularPost: () => `${urlConfig.apiBasePath()}/popular`,
+    unread: () => `${urlConfig.apiBasePath()}/topics/unread/total`,
+    getTopic: () => `${urlConfig.apiBasePath()}/topic`,
+    profile: () => `${urlConfig.apiBasePath()}/users/me`,
+    fetchProfile: (slug) => `${urlConfig.apiBasePath()}/users/${slug}/about`,
+    listUpVote: (slug) => `${urlConfig.apiBasePath()}/user/${slug}/upvoted`,
+    listDownVoted: (slug) => `${urlConfig.apiBasePath()}/user/${slug}/downvoted`,
+    listSaved: (slug) => `${urlConfig.apiBasePath()}/user/${slug}/bookmarks`,
+    fetchNetworkProfile: `user/profileDetails/getUserRegistry`,
+    userDetails: (username) => `${urlConfig.apiBasePath()}/user/${username}`,
+    getContextBasedTopics: (slug) => `${urlConfig.apiBasePath()}/category/${slug}`,
+    registerUser: () => `${urlConfig.apiBasePath()}/user/v1/create`,
+    getContextBasedDiscussion: () => `${urlConfig.apiBasePath()}/category/list`,
+    getContextBasedTagDiscussion: () => `${urlConfig.apiBasePath()}/tags/list`
+};
+
+/* tslint:enable */
+const CONTEXT_PROPS = {
+    cid: 'cid',
+    tid: 'tid',
+    uid: 'uid'
+};
+class DiscussionService {
+    constructor(http, csModule) {
+        this.http = http;
+        this.csModule = csModule;
+        // tslint:disable-next-line:variable-name
+        this._context = {};
+        this.alertEvent = new Subject();
+        // TODO: Take from the logged in user data;
+        // this.usr = this.configSvc.userProfile
+        this.usr = { userId: '1234' };
+        console.log('CsModule init---', CsModule.instance);
+        this.csDiscussionService = CsModule.instance.discussionService;
+    }
+    initializeUserDetails(userId) {
+        userId = userId;
+        this.userDetails = JSON.parse(sessionStorage.getItem('dFUserDetails'));
+        this.fetchUserProfile(userId).subscribe(response => {
+            this.userDetails = response;
+            sessionStorage.setItem('dFUserDetails', JSON.stringify(response));
+        }, (error) => {
+            // TODO: toaster error
+            console.log('error fetching user details');
+        });
+    }
+    appendPage(page, url) {
+        if (page) {
+            return `${url}?page=${page}`;
+        }
+        return `${url}?page=1`;
+    }
+    fetchAllTags() {
+        // const tags = this.http.get(urlConfig.getAllTags())
+        //   .toPromise();
+        // return tags;
+        console.log('innn fetchAllTags');
+        return this.csDiscussionService.fetchAllTags();
+    }
+    createPost(data) {
+        // return this.http.post(urlConfig.createPost(), data);
+        return this.csDiscussionService.createPost(data);
+    }
+    /**
+     * @description To get all the categories
+     */
+    fetchAllCategories() {
+        // return this.http.get<NSDiscussData.ICategorie[]>(urlConfig.getAllCategories()).pipe(
+        //   map((data: any) => {
+        //       // Taking only "categories" from the response
+        //       const resp = (data as any).categories;
+        //       return resp;
+        //   }),
+        //   catchError( error => {
+        //     return throwError( 'Something went wrong!' );
+        //   })
+        // );
+        console.log('in fetchall categories');
+        return this.csDiscussionService.fetchAllCategories().pipe(map((data) => data.categories));
+    }
+    fetchSingleCategoryDetails(cid) {
+        return this.csDiscussionService.fetchSingleCategoryDetails(cid);
+        // return this.http.get<NSDiscussData.ICategorie>(urlConfig.getSingleCategoryDetails(cid));
+    }
+    fetchSingleCategoryDetailsSort(cid, sort, page) {
+        return this.csDiscussionService.fetchSingleCategoryDetails(cid);
+    }
+    fetchAllTag() {
+        return this.csDiscussionService.fetchAllTags();
+        // return this.http.get(urlConfig.getAllTags());
+    }
+    contextBasedTags(data) {
+        return this.csDiscussionService.contextBasedTags(data);
+        // return this.http.get(urlConfig.getAllTags());
+    }
+    fetchPostDetails() {
+        return this.csDiscussionService.fetchAllTags();
+        // return this.http.get(urlConfig.getAllTags());
+    }
+    votePost(pid, data) {
+        return this.csDiscussionService.votePost(pid, data);
+        // const url = urlConfig.votePost(pid);
+        // return this.http.post(url, data);
+    }
+    deleteVotePost(pid) {
+        // const url = urlConfig.votePost(pid);
+        // return this.http.delete(url);
+        return this.csDiscussionService.deleteVotePost(pid);
+    }
+    bookmarkPost(pid) {
+        // const url = urlConfig.bookmarkPost(pid);
+        // return this.http.post(url, {});
+        return this.csDiscussionService.bookmarkPost(pid);
+    }
+    deleteBookmarkPost(pid) {
+        // const url = urlConfig.bookmarkPost(pid);
+        // return this.http.delete(url);
+        return this.csDiscussionService.deleteBookmarkPost(pid);
+    }
+    replyPost(tid, data) {
+        // const url = urlConfig.replyPost(tid);
+        // return this.http.post(url, data);
+        return this.csDiscussionService.replyPost(tid, data);
+    }
+    fetchRecentPost(pageId) {
+        return this.csDiscussionService.recentPost(_.get(this._userDetails, 'username'), pageId);
+    }
+    getTagBasedDiscussion(tag, page) {
+        return this.csDiscussionService.getTagBasedDiscussion(tag);
+    }
+    getContextBasedDiscussion(data) {
+        return this.csDiscussionService.getContextBasedDiscussion(data);
+    }
+    getContextBasedTagDiscussion(data) {
+        return this.csDiscussionService.getContextBasedTagDiscussion(data);
+    }
+    fetchPopularD(page) {
+        return this.csDiscussionService.popularPost(page);
+    }
+    fetchTopicById(topicId, slug, page) {
+        // let url = urlConfig.getTopic() + '/' + topicId.toString() + '/' + slug;
+        // url = this.appendPage(page, url);
+        // return this.http.get(url);
+        return this.csDiscussionService.fetchTopicById(topicId, slug, page);
+    }
+    fetchTopicByIdSort(topicId, sort, page) {
+        // let url = urlConfig.getTopic + topicId.toString();
+        // url = this.appendPage(page, url);
+        // return this.http.get(`${url}&sort=${sort}`);
+        return this.csDiscussionService.fetchTopicById(topicId, sort, page);
+    }
+    fetchUnreadCOunt() {
+        // return this.http.get<any>(urlConfig.unread());
+        return this.csDiscussionService.fetchUnreadCOunt();
+    }
+    // fetchProfile() {
+    //   // return this.http.get(urlConfig.profile());
+    //   return this.csDiscussionService.fetchProfile();
+    // }
+    fetchProfileInfo(slug) {
+        // return this.http.get(urlConfig.fetchProfile(slug));
+        return this.csDiscussionService.fetchProfileInfo(slug);
+    }
+    fetchUpvoted(pageId) {
+        // return this.http.get(urlConfig.listUpVote(_.get(this._userDetails, 'username')));
+        return this.csDiscussionService.fetchUpvoted(_.get(this._userDetails, 'username'), pageId);
+    }
+    fetchDownvoted(pageId) {
+        // return this.http.get(urlConfig.listDownVoted(_.get(this._userDetails, 'username')));
+        return this.csDiscussionService.fetchDownvoted(_.get(this._userDetails, 'username'), pageId);
+    }
+    fetchSaved(pageId) {
+        // return this.http.get(urlConfig.listSaved(_.get(this._userDetails, 'username')));
+        return this.csDiscussionService.fetchSaved(_.get(this._userDetails, 'username'), pageId);
+    }
+    fetchBestPost(pageId) {
+        return this.csDiscussionService.fetchBestPost(_.get(this._userDetails, 'username'), pageId);
+    }
+    fetchUserProfile(userId) {
+        // return this.http.get<any>(urlConfig.userDetails(userName));
+        return this.csDiscussionService.getUserDetails(userId);
+    }
+    getContextBasedTopic(slug, pageId) {
+        // return this.http.get(urlConfig.getContextBasedTopics(slug));
+        return this.csDiscussionService.getContextBasedTopic(slug, pageId);
+    }
+    registerUser(data) {
+        return this.http.post(urlConfig.registerUser(), data);
+    }
+    createForum(data) {
+        return this.csDiscussionService.createForum(data);
+    }
+    getForumIds(data) {
+        return this.csDiscussionService.getForumIds(data).toPromise();
+    }
+    set userDetails(userDetails) {
+        this._userDetails = userDetails;
+    }
+    get userDetails() {
+        return this._userDetails;
+    }
+    set userId(userId) {
+        this._userId = userId;
+    }
+    get userId() {
+        return this._userId;
+    }
+    set forumIds(ids) {
+        this._forumIds = ids;
+    }
+    get forumIds() {
+        return this._forumIds;
+    }
+    setContext(key, value) {
+        if (CONTEXT_PROPS[key]) {
+            this._context[key] = value;
+        }
+        else {
+            console.log('Context can not be set for this key: ', key);
+        }
+    }
+    getContext(key) {
+        return key ? this._context[key] : this._context;
+    }
+    editPost(pid, data) {
+        return this.csDiscussionService.editPost(pid, data);
+    }
+    deletePost(pid, uid) {
+        return this.csDiscussionService.deletePost(pid, uid);
+    }
+    editTopic(tid, data) {
+        return this.csDiscussionService.editTopic(tid, data);
+    }
+    deleteTopic(tid) {
+        return this.csDiscussionService.deleteTopic(tid);
+    }
+    /** To check the error code and show alert message
+     *  if it is 502 - error
+     */
+    showTrafficAlert(errorObject) {
+        const errorCode = _.get(errorObject, 'response.responseCode');
+        if (errorCode) {
+            if ([502, '502'].includes(errorCode)) {
+                this.alertEvent.next();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionService, deps: [{ token: i1$1.HttpClient }, { token: 'CsModule' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: i2.CsModule, decorators: [{
+                    type: Inject,
+                    args: ['CsModule']
+                }] }]; } });
+
+/* tslint:enable */
+class AppLoaderComponent {
+    constructor(discussionService) {
+        this.discussionService = discussionService;
+    }
+    ngOnInit() {
+        this.headerMessage = 'Please wait';
+        this.loaderMessage = 'We are fetching details';
+        if (this.data) {
+            this.headerMessage = _.get(this.data, 'headerMessage') || this.headerMessage;
+            this.loaderMessage = _.get(this.data, 'loaderMessage') || this.loaderMessage;
+        }
+        this.countDown = timer(10000)
+            .subscribe(() => {
+            this.discussionService.alertEvent.next();
+        });
+    }
+    ngOnDestroy() {
+        this.countDown.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppLoaderComponent, deps: [{ token: DiscussionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppLoaderComponent, selector: "lib-app-loader", inputs: { data: "data" }, ngImport: i0, template: "<ng-container>\n  <div class=\"dt-app-loader-container\">\n    <img src=\"./assets/discussion-ui/images/loader-icon.svg\" width=\"50px\">\n    <div class=\"loader-content\">\n        <div class=\"loader-label\">\n          {{headerMessage}}\n        </div>\n        <p>{{loaderMessage}}</p>\n      </div>\n  </div>\n</ng-container>", styles: [".dt-app-loader-container{background:var(--gray-100);width:94%!important;margin:1rem auto;border-radius:1.5rem;border:0px;display:flex;padding:1rem}\\200b  .loader-content{margin:0 1rem;font-size:.875rem}\\200b  .loader-label{font-weight:700;margin-bottom:.25rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-app-loader', template: "<ng-container>\n  <div class=\"dt-app-loader-container\">\n    <img src=\"./assets/discussion-ui/images/loader-icon.svg\" width=\"50px\">\n    <div class=\"loader-content\">\n        <div class=\"loader-label\">\n          {{headerMessage}}\n        </div>\n        <p>{{loaderMessage}}</p>\n      </div>\n  </div>\n</ng-container>", styles: [".dt-app-loader-container{background:var(--gray-100);width:94%!important;margin:1rem auto;border-radius:1.5rem;border:0px;display:flex;padding:1rem}\\200b  .loader-content{margin:0 1rem;font-size:.875rem}\\200b  .loader-label{font-weight:700;margin-bottom:.25rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: DiscussionService }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+var categories = [
+	{
+		cid: 1,
+		name: "Announcements",
+		description: "Check here for announcements about NodeBB",
+		icon: "fa-bullhorn",
+		slug: "1/announcements",
+		topic_count: 73,
+		disabled: 0,
+		order: 1,
+		bgColor: "#e57373",
+		link: "",
+		"class": "col-lg-4 col-md-6 col-xs-12",
+		numRecentReplies: 1,
+		color: "#ffffff",
+		post_count: 884,
+		parentCid: 0,
+		descriptionParsed: "<p>Check here for announcements about NodeBB</p>\n",
+		minTags: 0,
+		maxTags: 5,
+		isSection: 0,
+		totalPostCount: 854,
+		totalTopicCount: 73,
+		tagWhitelist: [
+		],
+		"unread-class": "unread",
+		children: [
+		],
+		posts: [
+			{
+				pid: 79553,
+				timestamp: 1597704130970,
+				content: "<p dir=\"auto\">A bug in our validation logic made it possible to change the password of any user on a running NodeBB forum by sending a specially crafted <a href=\"http://socket.io\" rel=\"nofollow\">socket.io</a> call to the server.</p>\n<p dir=\"auto\">We have resolved this in the latest version of NodeBB, and the fix has already been rolled out as a patch on all of our hosted customers.</p>\n<p dir=\"auto\">For more information on the vulnerability as well as instructions on how to resolve this issue, please have a look here: <a href=\"https://github.com/NodeBB/NodeBB/security/advisories/GHSA-hr66-c8pg-5mg7\" rel=\"nofollow\">https://github.com/NodeBB/NodeBB/security/advisories/GHSA-hr66-c8pg-5mg7</a></p>\n<p dir=\"auto\"><strong>Click <a href=\"https://blog.nodebb.org/nodebb-1-14-3/\" rel=\"nofollow\">here</a> to see the full blog post</strong></p>\n",
+				timestampISO: "2020-08-17T22:42:10.970Z",
+				user: {
+					uid: 3,
+					username: "psychobunny",
+					userslug: "psychobunny",
+					picture: "https://i.imgur.com/ltvPqkU.gif",
+					displayname: "psychobunny",
+					"icon:text": "P",
+					"icon:bgColor": "#f44336"
+				},
+				index: 1,
+				cid: 1,
+				parentCid: 0,
+				topic: {
+					slug: "14967/nodebb-v1-14-3-a-critical-security-update",
+					title: "NodeBB v1.14.3: A Critical Security Update"
+				}
+			}
+		],
+		teaser: {
+			url: "/post/79553",
+			timestampISO: "2020-08-17T22:42:10.970Z",
+			pid: 79553,
+			topic: {
+				slug: "14967/nodebb-v1-14-3-a-critical-security-update",
+				title: "NodeBB v1.14.3: A Critical Security Update"
+			}
+		}
+	},
+	{
+		cid: 2,
+		name: "General Discussion",
+		description: "A place to talk about whatever you want",
+		icon: "fa-comment",
+		slug: "2/general-discussion",
+		topic_count: 3188,
+		order: 2,
+		bgColor: "#ba68c8",
+		link: "",
+		"class": "col-lg-4 col-md-6 col-xs-12",
+		numRecentReplies: 1,
+		color: "#ffffff",
+		post_count: 20024,
+		descriptionParsed: "<p dir=\"auto\">A place to talk about whatever you want</p>\n",
+		minTags: 0,
+		maxTags: 5,
+		parentCid: 0,
+		disabled: 0,
+		isSection: 0,
+		totalPostCount: 20024,
+		totalTopicCount: 3188,
+		tagWhitelist: [
+		],
+		"unread-class": "",
+		children: [
+		],
+		posts: [
+			{
+				pid: 80371,
+				timestamp: 1605714102926,
+				content: "<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/16106\">@gotwf</a> pardon the late response, I've adopted your suggestion, thanks! </p>\n<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/2\">@julian</a> good to know! And apparently my spammers were all \"human-powered\"; ever since I made the changes suggested by <a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/1\">@baris</a>  the blacklist hits and spam accounts have dropped to zero!</p>\n<p dir=\"auto\">Hopefully it stays that way so I can focus on content </p>\n<p dir=\"auto\">Cheers</p>\n",
+				timestampISO: "2020-11-18T15:41:42.926Z",
+				user: {
+					uid: 19985,
+					username: "Nefarius",
+					userslug: "nefarius",
+					picture: "https://i.imgur.com/v798aRw.png",
+					displayname: "Nefarius",
+					"icon:text": "N",
+					"icon:bgColor": "#673ab7"
+				},
+				index: 6,
+				cid: 2,
+				parentCid: 0,
+				topic: {
+					slug: "15119/spam-registration-amount-and-handling-is-unbearable",
+					title: "Spam registration amount and handling is unbearable"
+				}
+			}
+		],
+		teaser: {
+			url: "/post/80371",
+			timestampISO: "2020-11-18T15:41:42.926Z",
+			pid: 80371,
+			topic: {
+				slug: "15119/spam-registration-amount-and-handling-is-unbearable",
+				title: "Spam registration amount and handling is unbearable"
+			}
+		}
+	},
+	{
+		link: "",
+		"class": "col-lg-4 col-md-6 col-xs-12",
+		icon: "fa-github",
+		description: "Stay tuned here to hear more about new releases and features of NodeBB!",
+		order: 3,
+		topic_count: 1158,
+		name: "NodeBB Development",
+		cid: 3,
+		post_count: 6760,
+		numRecentReplies: 1,
+		bgColor: "#4fc3f7",
+		slug: "3/nodebb-development",
+		color: "#ffffff",
+		disabled: 0,
+		descriptionParsed: "<p>Stay tuned here to hear more about new releases and features of NodeBB!</p>\n",
+		isSection: 0,
+		minTags: 0,
+		maxTags: 5,
+		parentCid: 0,
+		totalPostCount: 17980,
+		totalTopicCount: 2992,
+		tagWhitelist: [
+		],
+		"unread-class": "unread",
+		children: [
+			{
+				cid: 5,
+				name: "Feature Requests",
+				description: "You have a cool idea about NodeBB? Post it here.",
+				icon: "fa-lightbulb-o",
+				slug: "5/feature-requests",
+				topic_count: 692,
+				order: 1,
+				bgColor: "#ffb74d",
+				link: "",
+				"class": "col-lg-4 col-md-6 col-xs-12",
+				numRecentReplies: 1,
+				color: "#ffffff",
+				post_count: 4176,
+				parentCid: 3,
+				disabled: 0,
+				minTags: 0,
+				maxTags: 5,
+				isSection: 0,
+				totalPostCount: 4176,
+				totalTopicCount: 692,
+				descriptionParsed: "You have a cool idea about NodeBB? Post it here.",
+				tagWhitelist: [
+				],
+				"unread-class": "unread",
+				children: [
+				],
+				parent: {
+					link: "",
+					"class": "col-lg-4 col-md-6 col-xs-12",
+					icon: "fa-github",
+					description: "Stay tuned here to hear more about new releases and features of NodeBB!",
+					order: 3,
+					topic_count: 1158,
+					name: "NodeBB Development",
+					cid: 3,
+					post_count: 6760,
+					numRecentReplies: 1,
+					bgColor: "#4fc3f7",
+					slug: "3/nodebb-development",
+					color: "#ffffff",
+					disabled: 0,
+					descriptionParsed: "<p>Stay tuned here to hear more about new releases and features of NodeBB!</p>\n",
+					isSection: 0,
+					minTags: 0,
+					maxTags: 5,
+					parentCid: 0,
+					totalPostCount: 6760,
+					totalTopicCount: 1158,
+					tagWhitelist: [
+					],
+					"unread-class": "unread"
+				},
+				posts: [
+					{
+						pid: 80380,
+						timestamp: 1605820679025,
+						content: "<p dir=\"auto\"><a class=\"plugin-mentions-user plugin-mentions-a\" href=\"https://community.nodebb.org/uid/2\">@julian</a> if this makes sense to you, do you think this can be a part of \"canned responses\" plugin?</p>\n",
+						timestampISO: "2020-11-19T21:17:59.025Z",
+						user: {
+							uid: 16848,
+							username: "crazycells",
+							userslug: "crazycells",
+							picture: "https://i.imgur.com/fnkHctr.png",
+							displayname: "crazycells",
+							"icon:text": "C",
+							"icon:bgColor": "#009688"
+						},
+						index: 2,
+						cid: 5,
+						parentCid: 3,
+						topic: {
+							slug: "15137/canned-explanations-reasons-for-user-ban",
+							title: "canned explanations(reasons) for user ban"
+						}
+					}
+				]
+			}
+		]
+	}
+];
+var topics = [
+	{
+		cid: 13,
+		lastposttime: 1606632795076,
+		mainPid: 17647,
+		postcount: 1,
+		slug: "8917/hello-this-is-my-new-post",
+		tid: 8917,
+		timestamp: 1606632795069,
+		title: "Hello this is my new post",
+		uid: 104,
+		viewcount: 1,
+		deleted: 0,
+		locked: 0,
+		pinned: 0,
+		upvotes: 0,
+		downvotes: 0,
+		deleterUid: 0,
+		titleRaw: "Hello this is my new post",
+		timestampISO: "2020-11-29T06:53:15.069Z",
+		lastposttimeISO: "2020-11-29T06:53:15.076Z",
+		votes: 0,
+		teaserPid: null,
+		category: {
+			cid: 13,
+			name: "Administration",
+			slug: "13/administration",
+			icon: "fa-comments",
+			backgroundImage: null,
+			imageClass: "cover",
+			bgColor: "#DC9656",
+			color: "#fff",
+			disabled: 0
+		},
+		user: {
+			uid: 104,
+			username: "5cad153a-29f0-4cc6-8344-ad5fc06ffb1d",
+			fullname: "arunkumar pilli",
+			userslug: "5cad153a-29f0-4cc6-8344-ad5fc06ffb1d",
+			reputation: 0,
+			postcount: 1,
+			picture: null,
+			signature: null,
+			banned: 0,
+			status: "online",
+			"icon:text": "5",
+			"icon:bgColor": "#1b5e20",
+			banned_until_readable: "Not Banned"
+		},
+		teaser: {
+			pid: 17647,
+			uid: 104,
+			timestamp: 1606632795076,
+			tid: 8917,
+			content: "adding new post in igot discussions\n",
+			timestampISO: "2020-11-29T06:53:15.076Z",
+			user: {
+				uid: 104,
+				username: "5cad153a-29f0-4cc6-8344-ad5fc06ffb1d",
+				userslug: "5cad153a-29f0-4cc6-8344-ad5fc06ffb1d",
+				picture: null,
+				"icon:text": "5",
+				"icon:bgColor": "#1b5e20"
+			},
+			index: 1
+		},
+		tags: [
+		],
+		isOwner: false,
+		ignored: false,
+		unread: true,
+		bookmark: 3,
+		unreplied: false,
+		icons: [
+		],
+		index: 0
+	},
+	{
+		cid: 9,
+		lastposttime: 1606297869195,
+		mainPid: 17635,
+		postcount: 5,
+		slug: "8912/why-is-bangalore-s-infrastructure-bad",
+		tid: 8912,
+		timestamp: 1606134890874,
+		title: "Why is Bangalore&#x27;s infrastructure bad?",
+		uid: 113,
+		viewcount: 36,
+		downvotes: 0,
+		upvotes: 2,
+		teaserPid: 17646,
+		deleted: 0,
+		locked: 0,
+		pinned: 0,
+		deleterUid: 0,
+		titleRaw: "Why is Bangalore's infrastructure bad?",
+		timestampISO: "2020-11-23T12:34:50.874Z",
+		lastposttimeISO: "2020-11-25T09:51:09.195Z",
+		votes: 2,
+		category: {
+			cid: 9,
+			name: "Infrastructure",
+			slug: "9/infrastructure",
+			icon: "fa-comments",
+			backgroundImage: null,
+			imageClass: "cover",
+			bgColor: "#86C1B9",
+			color: "#333",
+			disabled: 0
+		},
+		user: {
+			uid: 113,
+			username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			fullname: "Manimegalai Mohan",
+			userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			reputation: 3,
+			postcount: 16,
+			picture: null,
+			signature: null,
+			banned: 0,
+			status: "offline",
+			"icon:text": "1",
+			"icon:bgColor": "#3f51b5",
+			banned_until_readable: "Not Banned"
+		},
+		teaser: {
+			pid: 17635,
+			uid: 113,
+			timestamp: 1606134890882,
+			tid: 8912,
+			content: "Why is Bangalore's infrastructure bad?\n",
+			timestampISO: "2020-11-23T12:34:50.882Z",
+			user: {
+				uid: 113,
+				username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				picture: null,
+				"icon:text": "1",
+				"icon:bgColor": "#3f51b5"
+			},
+			index: 1
+		},
+		tags: [
+		],
+		isOwner: false,
+		ignored: false,
+		unread: true,
+		bookmark: 7,
+		unreplied: false,
+		icons: [
+		],
+		index: 1
+	},
+	{
+		cid: 13,
+		lastposttime: 1606201083049,
+		mainPid: 17645,
+		postcount: 1,
+		slug: "8916/origin-of-solar-system",
+		tid: 8916,
+		timestamp: 1606201083043,
+		title: "Origin of Solar system",
+		uid: 113,
+		viewcount: 10,
+		deleted: 0,
+		locked: 0,
+		pinned: 0,
+		upvotes: 0,
+		downvotes: 0,
+		deleterUid: 0,
+		titleRaw: "Origin of Solar system",
+		timestampISO: "2020-11-24T06:58:03.043Z",
+		lastposttimeISO: "2020-11-24T06:58:03.049Z",
+		votes: 0,
+		teaserPid: null,
+		category: {
+			cid: 13,
+			name: "Administration",
+			slug: "13/administration",
+			icon: "fa-comments",
+			backgroundImage: null,
+			imageClass: "cover",
+			bgColor: "#DC9656",
+			color: "#fff",
+			disabled: 0
+		},
+		user: {
+			uid: 113,
+			username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			fullname: "Manimegalai Mohan",
+			userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			reputation: 3,
+			postcount: 16,
+			picture: null,
+			signature: null,
+			banned: 0,
+			status: "offline",
+			"icon:text": "1",
+			"icon:bgColor": "#3f51b5",
+			banned_until_readable: "Not Banned"
+		},
+		teaser: {
+			pid: 17645,
+			uid: 113,
+			timestamp: 1606201083049,
+			tid: 8916,
+			content: "Solar system\n",
+			timestampISO: "2020-11-24T06:58:03.049Z",
+			user: {
+				uid: 113,
+				username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				picture: null,
+				"icon:text": "1",
+				"icon:bgColor": "#3f51b5"
+			},
+			index: 1
+		},
+		tags: [
+		],
+		isOwner: false,
+		ignored: false,
+		unread: true,
+		bookmark: 3,
+		unreplied: false,
+		icons: [
+		],
+		index: 2
+	},
+	{
+		cid: 11,
+		lastposttime: 1606198830431,
+		mainPid: 17644,
+		postcount: 1,
+		slug: "8915/who-opened-up-the-indian-economy",
+		tid: 8915,
+		timestamp: 1606198830424,
+		title: "Who opened up the indian economy?",
+		uid: 113,
+		viewcount: 5,
+		deleted: 0,
+		locked: 0,
+		pinned: 0,
+		upvotes: 0,
+		downvotes: 0,
+		deleterUid: 0,
+		titleRaw: "Who opened up the indian economy?",
+		timestampISO: "2020-11-24T06:20:30.424Z",
+		lastposttimeISO: "2020-11-24T06:20:30.431Z",
+		votes: 0,
+		teaserPid: null,
+		category: {
+			cid: 11,
+			name: "Economy",
+			slug: "11/economy",
+			icon: "fa-comments",
+			backgroundImage: null,
+			imageClass: "cover",
+			bgColor: "#F7CA88",
+			color: "#333",
+			disabled: 0
+		},
+		user: {
+			uid: 113,
+			username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			fullname: "Manimegalai Mohan",
+			userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+			reputation: 3,
+			postcount: 16,
+			picture: null,
+			signature: null,
+			banned: 0,
+			status: "offline",
+			"icon:text": "1",
+			"icon:bgColor": "#3f51b5",
+			banned_until_readable: "Not Banned"
+		},
+		teaser: {
+			pid: 17644,
+			uid: 113,
+			timestamp: 1606198830431,
+			tid: 8915,
+			content: "Who opened up the indian economy?\n",
+			timestampISO: "2020-11-24T06:20:30.431Z",
+			user: {
+				uid: 113,
+				username: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				userslug: "1c2d792e-392b-4d98-b18e-af5ea69340b2",
+				picture: null,
+				"icon:text": "1",
+				"icon:bgColor": "#3f51b5"
+			},
+			index: 1
+		},
+		tags: [
+		],
+		isOwner: false,
+		ignored: false,
+		unread: true,
+		bookmark: 3,
+		unreplied: false,
+		icons: [
+		],
+		index: 3
+	},
+	{
+		cid: 11,
+		lastposttime: 1606135442960,
+		mainPid: 17637,
+		postcount: 4,
+		slug: "8914/how-covid-will-impact-indian-economy",
+		tid: 8914,
+		timestamp: 1606135371841,
+		title: "How covid will impact indian economy ?",
+		uid: 5,
+		viewcount: 10,
+		teaserPid: 17640,
+		deleted: 0,
+		locked: 0,
+		pinned: 0,
+		upvotes: 0,
+		downvotes: 0,
+		deleterUid: 0,
+		titleRaw: "How covid will impact indian economy ?",
+		timestampISO: "2020-11-23T12:42:51.841Z",
+		lastposttimeISO: "2020-11-23T12:44:02.960Z",
+		votes: 0,
+		category: {
+			cid: 11,
+			name: "Economy",
+			slug: "11/economy",
+			icon: "fa-comments",
+			backgroundImage: null,
+			imageClass: "cover",
+			bgColor: "#F7CA88",
+			color: "#333",
+			disabled: 0
+		},
+		user: {
+			uid: 5,
+			username: "9cdd9f76-2584-4ae5-940d-3f51dce020dc",
+			fullname: "Christopher F'des",
+			userslug: "9cdd9f76-2584-4ae5-940d-3f51dce020dc",
+			reputation: 8,
+			postcount: 13,
+			picture: null,
+			signature: null,
+			banned: 0,
+			status: "offline",
+			"icon:text": "9",
+			"icon:bgColor": "#ff5722",
+			banned_until_readable: "Not Banned"
+		},
+		teaser: {
+			pid: 17637,
+			uid: 5,
+			timestamp: 1606135371849,
+			tid: 8914,
+			content: "How covid will impact indian economy ?\n",
+			timestampISO: "2020-11-23T12:42:51.849Z",
+			user: {
+				uid: 5,
+				username: "9cdd9f76-2584-4ae5-940d-3f51dce020dc",
+				userslug: "9cdd9f76-2584-4ae5-940d-3f51dce020dc",
+				picture: null,
+				"icon:text": "9",
+				"icon:bgColor": "#ff5722"
+			},
+			index: 1
+		},
+		tags: [
+		],
+		isOwner: false,
+		ignored: false,
+		unread: true,
+		bookmark: 6,
+		unreplied: false,
+		icons: [
+		],
+		index: 4
+	}
+];
+var ROUTES = {
+	TOPIC: "/discussion-forum/topic/",
+	DISCUSSION: "/discussion-forum/",
+	CATEGORY: "/discussion-forum/category/",
+	TAG: "/discussion-forum/tags/"
+};
+var MENUOPTIONS = [
+	{
+		route: "all-discussions",
+		label: "All discussions",
+		enable: false
+	},
+	{
+		route: "categories",
+		label: "Categories",
+		enable: true
+	},
+	{
+		route: "tags",
+		label: "Tags",
+		enable: true
+	},
+	{
+		route: "my-discussion",
+		label: "My discussion",
+		enable: true
+	}
+];
+var CATEGORY = "category";
+var CATEGORY_DETAILS = "categoryDetails";
+var CATEGORY_HOME = "categoryHome";
+var TAG_ALL_DISCUSS = "tagAllDiscuss";
+var TAGS = "TAGS";
+var TAGSALL = "TAGSALL";
+var constants = {
+	categories: categories,
+	topics: topics,
+	ROUTES: ROUTES,
+	MENUOPTIONS: MENUOPTIONS,
+	CATEGORY: CATEGORY,
+	CATEGORY_DETAILS: CATEGORY_DETAILS,
+	CATEGORY_HOME: CATEGORY_HOME,
+	TAG_ALL_DISCUSS: TAG_ALL_DISCUSS,
+	TAGS: TAGS,
+	TAGSALL: TAGSALL
+};
+
+class ConfigService {
+    constructor(activatedRoute, discussionService) {
+        this.activatedRoute = activatedRoute;
+        this.discussionService = discussionService;
+        this.setCategoryId = new ReplaySubject(1);
+    }
+    ngOnInit() {
+    }
+    setConfig(activatedRoute) {
+        activatedRoute.data.subscribe((config) => {
+            this._config = config.data;
+        });
+    }
+    setConfigFromParams(activatedRoute) {
+        activatedRoute.queryParams.subscribe((params) => {
+            const obj = {
+                userId: _.get(params, 'userId'),
+                categories: JSON.parse(_.get(params, 'categories'))
+            };
+            this._config = obj;
+        });
+    }
+    setConfigFromWidgetBaseClass(config) {
+        this._config = config;
+    }
+    getConfig() {
+        return this._config;
+    }
+    getCategories() {
+        this.getParams = this.getConfig();
+        return _.get(this.getParams, 'categories');
+    }
+    hasContext() {
+        this.hasContextData = this.getCategories() ?
+            (this.getCategories().result ? this.getCategories().result.length : null)
+            : null;
+        return this.hasContextData;
+    }
+    getContext() {
+        this.getContextData = this.getCategories() ?
+            (this.getCategories().result ? this.getCategories().result : null)
+            : null;
+        return this.getContextData;
+    }
+    setCategoryid(id) {
+        this.categoryId = id;
+        this.setCategoryId.next(id);
+    }
+    getHeaderOption() {
+        return this._config.headerOptions !== undefined ? this._config.headerOptions : true;
+    }
+    getBannerOption() {
+        return this._config.bannerOption ? this._config.bannerOption : false;
+    }
+    getCategoryid() {
+        return this.categoryId;
+    }
+    getRouterSlug() {
+        return this._config.routerSlug ? this._config.routerSlug : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService, deps: [{ token: i1.ActivatedRoute }, { token: DiscussionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: DiscussionService }]; } });
+
+// import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+class EventsService {
+    constructor() {
+        this._navItemSource = new BehaviorSubject(0);
+        // Observable navItem stream
+        this.navItem$ = this._navItemSource.asObservable();
+        this.registeredEvents = [];
+        this.toggleMenuItem = new ReplaySubject(1);
+    }
+    /**
+     * This function is used to update the states in widget with data
+     * @param  {} data
+     * TODO: Not being used anymore have to cleanup
+     */
+    toggle(data) {
+        this.toggleMenuItem.next(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EventsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EventsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+//TODO: Need to cleanup this service since we are not gonna use
+class WrapperNavigateService {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.closeSideNav = new EventEmitter$1();
+    }
+    navigate(input) {
+        //  this._eventService.toggle(input)
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WrapperNavigateService, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WrapperNavigateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WrapperNavigateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: EventsService }]; } });
+
+class RouterServiceService {
+    constructor(router) {
+        this.router = router;
+    }
+    navigate(input) {
+        // this.router.navigate(url)
+        this.router.navigate([input.data.url], { queryParams: input.data.queryParams, queryParamsHandling: "merge" });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterServiceService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterServiceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterServiceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
+
+class NavigationServiceService {
+    constructor(wrapperService, routerService) {
+        this.wrapperService = wrapperService;
+        this.routerService = routerService;
+        this.navigateService = "routerService";
+    }
+    /**
+     * used to intialize the navigation service with the wrapperservice or routerservice
+     * @param  {string} wrapperService
+     */
+    initService(wrapperService) {
+        this.navigateService = wrapperService;
+    }
+    /**
+     * used for navigating  to the other pages based on the service initalized
+     * @param  {} input
+     */
+    navigate(input) {
+        if (this.navigateService === 'routerService') {
+            this.routerService.navigate(input);
+        }
+        else {
+            this.wrapperService.navigate(input);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationServiceService, deps: [{ token: WrapperNavigateService }, { token: RouterServiceService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationServiceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationServiceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: WrapperNavigateService }, { type: RouterServiceService }]; } });
+
+class PipeRelativeTimePipe {
+    transform(value) {
+        if (value) {
+            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+            if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
+                return 'Just now';
+            const intervals = {
+                'year': 31536000,
+                'month': 2592000,
+                'week': 604800,
+                'day': 86400,
+                'hour': 3600,
+                'minute': 60,
+                'second': 1
+            };
+            let counter;
+            for (const i in intervals) {
+                counter = Math.floor(seconds / intervals[i]);
+                if (counter > 0)
+                    if (counter === 1) {
+                        return counter + ' ' + i + ' ago'; // singular (1 day ago)
+                    }
+                    else {
+                        return counter + ' ' + i + 's ago'; // plural (2 days ago)
+                    }
+            }
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeRelativeTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipeRelativeTimePipe, name: "pipeRelativeTime" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeRelativeTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'pipeRelativeTime',
+                }]
+        }] });
+
+class RelatedDiscussionComponent {
+    constructor(router, configService, discussionService, navigationService) {
+        this.router = router;
+        this.configService = configService;
+        this.discussionService = discussionService;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.fetchSingleCategoryLoader = false;
+    }
+    ngOnInit() {
+    }
+    ngOnChanges() {
+        if (this.catId) {
+            this.fetchRelatedDiscussionData(this.catId);
+        }
+    }
+    fetchRelatedDiscussionData(cid) {
+        this.fetchSingleCategoryLoader = true;
+        this.discussionService.fetchSingleCategoryDetails(cid).subscribe((data) => {
+            this.relatedDiscussions = [];
+            _$1.filter(data.topics, (topic) => {
+                if (topic.deleted === 0 && this.topicId !== topic.tid) {
+                    this.relatedDiscussions.push(topic);
+                }
+            });
+            this.fetchSingleCategoryLoader = false;
+        }, (err) => {
+            console.log('Error in fetching category details');
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError)
+            this.fetchSingleCategoryLoader = false;
+        });
+    }
+    getDiscussion(discuss) {
+        const input = { data: { url: `${this.configService.getRouterSlug()}${ROUTES.DISCUSSION}topic/${discuss.slug}`, queryParams: {} } };
+        this.navigationService.navigate(input);
+        this.stateChange.emit(discuss);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelatedDiscussionComponent, deps: [{ token: i1.Router }, { token: ConfigService }, { token: DiscussionService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RelatedDiscussionComponent, selector: "lib-related-discussion", inputs: { catId: "catId", topicId: "topicId" }, outputs: { stateChange: "stateChange" }, usesOnChanges: true, ngImport: i0, template: "<h5 aria-label=\"Related discussions\" class=\"related-discuss-label\">Related discussions</h5>\n<ng-container *ngIf=\"relatedDiscussions && relatedDiscussions.length > 0\">\n    <div *ngFor=\"let discussion of relatedDiscussions | slice:0:5;\" class=\"related-discuss-card df-card\" tabindex=\"0\">\n        <label role=\"link\" tabindex=\"0\" aria-label=\"related discussion post df-text-color\"\n            class=\"related-discuss-card-content discuss-user-label\" (click)=\"getDiscussion(discussion)\"\n            [innerHTML]=\"discussion?.title\">\n        </label>\n        <div class=\"related-discuss-card-description mt-8\">\n            <div class=\"category-name\" [innerHTML]=\"discussion.category.name\"></div>\n            <div class=\"dot\"></div>\n            <div class=\"time\">{{ discussion.timestamp | pipeRelativeTime }}</div>\n        </div>\n    </div>\n</ng-container>", styles: ["::ng-deep:root{--df-related-card-bg:var(--df-background)}.related-discuss-card{padding:1rem;display:flex;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-related-card-bg);color:var(--df-text);margin-bottom:1rem;flex-direction:column;max-width:18.75rem}@media (max-width: 768px){.related-discuss-card{max-width:100%}}.related-discuss-label{font-weight:700;margin:0 0 1rem;color:var(--df-text)}@media (max-width: 768px){.related-discuss-label{margin:1rem 0}}.related-discuss-card-content{margin:0;cursor:pointer;font-size:.875rem;font-weight:700;word-break:break-all}.related-discuss-card-description{display:flex;align-items:center;font-size:.875rem;flex-wrap:wrap;margin-top:.5rem}.related-discuss-card-description .dot{height:.375rem;width:.375rem;background-color:var(--gray-400);border-radius:50%;display:inline-block;margin:0 .5rem;position:relative;bottom:0}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.SlicePipe, name: "slice" }, { kind: "pipe", type: PipeRelativeTimePipe, name: "pipeRelativeTime" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelatedDiscussionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-related-discussion', template: "<h5 aria-label=\"Related discussions\" class=\"related-discuss-label\">Related discussions</h5>\n<ng-container *ngIf=\"relatedDiscussions && relatedDiscussions.length > 0\">\n    <div *ngFor=\"let discussion of relatedDiscussions | slice:0:5;\" class=\"related-discuss-card df-card\" tabindex=\"0\">\n        <label role=\"link\" tabindex=\"0\" aria-label=\"related discussion post df-text-color\"\n            class=\"related-discuss-card-content discuss-user-label\" (click)=\"getDiscussion(discussion)\"\n            [innerHTML]=\"discussion?.title\">\n        </label>\n        <div class=\"related-discuss-card-description mt-8\">\n            <div class=\"category-name\" [innerHTML]=\"discussion.category.name\"></div>\n            <div class=\"dot\"></div>\n            <div class=\"time\">{{ discussion.timestamp | pipeRelativeTime }}</div>\n        </div>\n    </div>\n</ng-container>", styles: ["::ng-deep:root{--df-related-card-bg:var(--df-background)}.related-discuss-card{padding:1rem;display:flex;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-related-card-bg);color:var(--df-text);margin-bottom:1rem;flex-direction:column;max-width:18.75rem}@media (max-width: 768px){.related-discuss-card{max-width:100%}}.related-discuss-label{font-weight:700;margin:0 0 1rem;color:var(--df-text)}@media (max-width: 768px){.related-discuss-label{margin:1rem 0}}.related-discuss-card-content{margin:0;cursor:pointer;font-size:.875rem;font-weight:700;word-break:break-all}.related-discuss-card-description{display:flex;align-items:center;font-size:.875rem;flex-wrap:wrap;margin-top:.5rem}.related-discuss-card-description .dot{height:.375rem;width:.375rem;background-color:var(--gray-400);border-radius:50%;display:inline-block;margin:0 .5rem;position:relative;bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: ConfigService }, { type: DiscussionService }, { type: NavigationServiceService }]; }, propDecorators: { catId: [{
+                type: Input
+            }], topicId: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+class PipeFilterPipe {
+    transform(value, keys, term) {
+        if (!term) {
+            return value;
+        }
+        return (value || []).filter((item) => keys.split(',')
+            .some(key => item.hasOwnProperty(key) && new RegExp(`^${term}$`, 'gi').test(item[key])));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipeFilterPipe, name: "pipeFilter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'pipeFilter'
+                }]
+        }] });
+
+/* tslint:enable */
+class SortByPipe {
+    transform(data, sortField, sortOrder) {
+        if (!data || !data.length || sortOrder === '' || !sortOrder) {
+            return data;
+        }
+        if (!sortField || sortField === '') {
+            data = data.map(e => e.trim());
+            if (sortOrder === 'asc') {
+                return data.sort();
+            }
+            else {
+                return data.sort().reverse();
+            }
+        }
+        data.forEach((obj) => {
+            obj[sortField] = obj[sortField].trim();
+        });
+        return orderBy(data, [sortField], [sortOrder]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SortByPipe, name: "sortBy" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortBy'
+                }]
+        }] });
+
+class SplitInitialsPipe {
+    transform(value) {
+        if (value) {
+            let userInitial = '';
+            const name = value.split(' ');
+            name.forEach(element => {
+                userInitial = userInitial + element.charAt(0);
+            });
+            return userInitial;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitInitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SplitInitialsPipe, name: "splitInitials" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitInitialsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'splitInitials'
+                }]
+        }] });
+
+class PipeListFilterPipe {
+    transform(value, keys, term) {
+        if (!term) {
+            return value;
+        }
+        return (value || []).filter((item) => keys.split(',')
+            .some(key => item.hasOwnProperty(key)
+            && item[key] && (`${item[key]} `).toLocaleLowerCase().includes(term.toLocaleLowerCase())));
+        // new RegExp(`^${term}$`, 'gi').test(item[key])
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipeListFilterPipe, name: "pipeListFilter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipeListFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'pipeListFilter',
+                }]
+        }] });
+
+class PipesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, declarations: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe, SplitInitialsPipe, PipeListFilterPipe], imports: [CommonModule], exports: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe, SplitInitialsPipe, PipeListFilterPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe, SplitInitialsPipe, PipeListFilterPipe],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [PipeFilterPipe, SortByPipe, PipeRelativeTimePipe, SplitInitialsPipe, PipeListFilterPipe]
+                }]
+        }] });
+
+class PostReplyComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.showCancel = true;
+        this.mode = 'add';
+        this.actionEvent = new EventEmitter();
+        this.isButtonEnabled = false;
+    }
+    ngOnInit() {
+        console.log('conent came', this.content);
+        this.initializeFormFields();
+    }
+    initializeFormFields() {
+        this.replyForm = this.formBuilder.group({
+            replyContent: ['', Validators.required]
+        });
+        this.replyForm.valueChanges.subscribe(val => {
+            this.isButtonEnabled = this.validateForm();
+        });
+    }
+    validateForm() {
+        if (this.replyForm.status === 'VALID') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    isFieldValid(field) {
+        let valueNoWhiteSpace = this.replyForm.get(field).value;
+        if (valueNoWhiteSpace) {
+            const length = valueNoWhiteSpace.length;
+            if (length >= 2 && valueNoWhiteSpace.charAt(length - 2) === " ") {
+                this.replyForm.patchValue({ replyContent: this.replyForm.get(field).value.trim() });
+            }
+            else {
+                this.replyForm.patchValue({ replyContent: this.replyForm.get(field).value.trimStart() });
+            }
+        }
+        return !this.replyForm.get(field).valid && this.replyForm.get(field).dirty;
+    }
+    onReplyClick(mode) {
+        // tslint:disable-next-line:no-string-literal
+        this.actionEvent.emit({ action: mode, content: this.replyForm.controls['replyContent'].value.trim() });
+    }
+    onCancelClick() {
+        this.actionEvent.emit({ action: 'cancel' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PostReplyComponent, deps: [{ token: i2$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PostReplyComponent, selector: "lib-post-reply", inputs: { showCancel: "showCancel", mode: "mode", content: "content" }, outputs: { actionEvent: "actionEvent" }, ngImport: i0, template: "<form [formGroup]=\"replyForm\">\n  <div appearance=\"outline\" class=\"text-form-field\">\n    <label class=\"text-form-label\">Your answer here</label>\n    <textarea placeholder=\"Type here (minimum 10 characters)\" \n      minlength=\"10\" aria-label=\"Type your message here\"\n      formControlName=\"replyContent\" \n      class=\"text-content\"\n      [ngModel]=\"content\"\n      [ngClass]=\"{'is-invalid' : isFieldValid('replyContent')}\">\n  </textarea>\n  </div>\n</form>\n<div class=\"updatePostActions\">\n    <button class=\"df-btn df-btn-normal df-cancel-btn\"\n      *ngIf=\"showCancel\"\n      (click)=\"onCancelClick()\" \n      id=\"cancel-update-post\" \n      type=\"button\">\n      <span class=\"text-white\">Cancel</span>\n    </button>\n    <button [ngClass]=\"{'df-btn-disabled': !isButtonEnabled }\" \n      *ngIf=\"mode === 'edit'\"\n      [disabled]=\"!isButtonEnabled\" \n      class=\"df-btn df-btn-normal df-btn-primary\" \n      (click)=\"onReplyClick('edit')\" \n      id=\"update-post\"\n      type=\"button\">\n      <span class=\"text-white\">Update</span>\n    </button>\n    <button [ngClass]=\"{'df-btn-disabled': !replyForm.valid }\" \n      *ngIf=\"mode !== 'edit'\"\n      [disabled]=\"!isButtonEnabled\" \n      class=\"df-btn df-btn-normal df-btn-primary\" \n      (click)=\"onReplyClick('reply')\" \n      id=\"update-post\"\n      type=\"button\">\n      <span class=\"text-white\">Post Reply</span>\n    </button>\n</div>", styles: [".text-form-field{display:flex;flex-direction:column}.text-form-label{font-size:.875rem;margin-bottom:1rem}.text-content{min-height:6.75rem;max-height:33.75rem;margin-bottom:.875rem;background-color:var(--df-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;cursor:pointer;outline:0;padding:.5rem .875rem}.updatePostActions{display:flex;justify-content:flex-end;margin-bottom:1rem}.df-update-btn,.df-post-reply-btn{margin:.5rem 0}.cancel-update-post{margin-right:20px}.df-btn-disabled{background-color:var(--gray-100);border:solid var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PostReplyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-post-reply', template: "<form [formGroup]=\"replyForm\">\n  <div appearance=\"outline\" class=\"text-form-field\">\n    <label class=\"text-form-label\">Your answer here</label>\n    <textarea placeholder=\"Type here (minimum 10 characters)\" \n      minlength=\"10\" aria-label=\"Type your message here\"\n      formControlName=\"replyContent\" \n      class=\"text-content\"\n      [ngModel]=\"content\"\n      [ngClass]=\"{'is-invalid' : isFieldValid('replyContent')}\">\n  </textarea>\n  </div>\n</form>\n<div class=\"updatePostActions\">\n    <button class=\"df-btn df-btn-normal df-cancel-btn\"\n      *ngIf=\"showCancel\"\n      (click)=\"onCancelClick()\" \n      id=\"cancel-update-post\" \n      type=\"button\">\n      <span class=\"text-white\">Cancel</span>\n    </button>\n    <button [ngClass]=\"{'df-btn-disabled': !isButtonEnabled }\" \n      *ngIf=\"mode === 'edit'\"\n      [disabled]=\"!isButtonEnabled\" \n      class=\"df-btn df-btn-normal df-btn-primary\" \n      (click)=\"onReplyClick('edit')\" \n      id=\"update-post\"\n      type=\"button\">\n      <span class=\"text-white\">Update</span>\n    </button>\n    <button [ngClass]=\"{'df-btn-disabled': !replyForm.valid }\" \n      *ngIf=\"mode !== 'edit'\"\n      [disabled]=\"!isButtonEnabled\" \n      class=\"df-btn df-btn-normal df-btn-primary\" \n      (click)=\"onReplyClick('reply')\" \n      id=\"update-post\"\n      type=\"button\">\n      <span class=\"text-white\">Post Reply</span>\n    </button>\n</div>", styles: [".text-form-field{display:flex;flex-direction:column}.text-form-label{font-size:.875rem;margin-bottom:1rem}.text-content{min-height:6.75rem;max-height:33.75rem;margin-bottom:.875rem;background-color:var(--df-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;cursor:pointer;outline:0;padding:.5rem .875rem}.updatePostActions{display:flex;justify-content:flex-end;margin-bottom:1rem}.df-update-btn,.df-post-reply-btn{margin:.5rem 0}.cancel-update-post{margin-right:20px}.df-btn-disabled{background-color:var(--gray-100);border:solid var(--gray-100)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }]; }, propDecorators: { showCancel: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], actionEvent: [{
+                type: Output
+            }] } });
+
+// import { EventService } from '@sunbird-cb/utils'
+class SlidersComponent {
+    constructor() {
+        this.id = `banner_${Math.random()}`;
+        this.currentIndex = 0;
+        this.slideInterval = null;
+        // super()
+    }
+    ngOnInit() {
+        this.reInitiateSlideInterval();
+    }
+    reInitiateSlideInterval() {
+        console.log('---------------', this.bannerData);
+        if (this.bannerData.widgetData.length > 1) {
+            try {
+                if (this.slideInterval) {
+                    this.slideInterval.unsubscribe();
+                }
+            }
+            catch (e) {
+            }
+            finally {
+                this.slideInterval = interval(8000).subscribe(() => {
+                    if (this.currentIndex === this.bannerData.widgetData.length - 1) {
+                        this.currentIndex = 0;
+                    }
+                    else {
+                        this.currentIndex += 1;
+                    }
+                });
+            }
+        }
+    }
+    slideTo(index) {
+        if (index >= 0 && index < this.bannerData.widgetData.length) {
+            this.currentIndex = index;
+        }
+        else if (index === this.bannerData.widgetDatalength) {
+            this.currentIndex = 0;
+        }
+        else {
+            this.currentIndex = this.bannerData.widgetData.length + index;
+        }
+        this.reInitiateSlideInterval();
+    }
+    get isOpenInNewTab() {
+        const currentData = this.bannerData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.bannerData[this.currentIndex].openInNewTab) {
+            return true;
+        }
+        return false;
+    }
+    openInNewTab() {
+        const currentData = this.bannerData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.bannerData[this.currentIndex].openInNewTab) {
+            window.open(currentData.redirectUrl);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersComponent, selector: "ws-widget-sliders", inputs: { bannerData: "bannerData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n    *ngIf=\"bannerData.widgetData?.length > 1\">\n\n    <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of bannerData.widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <p>{{slide.banners | json}}</p>\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n    </div>\n    <div class=\"banner-meta\">\n        <!-- <a [routerLink]=\" !isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\"\n            class=\"banner-title text-truncate\" *ngIf=\"widgetData[currentIndex].title\"\n            [title]=\"widgetData[currentIndex].title\">\n            {{ widgetData[currentIndex].title }}\n        </a> -->\n        <div class=\"dots-container\" *ngIf=\"bannerData.widgetData?.length > 1\">\n            <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of bannerData.widgetData; let j = index\"\n                (click)=\"slideTo(j)\"></span>\n        </div>\n    </div>\n    <a *ngIf=\"bannerData.widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"bannerData.widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n</div>\n<div class=\"banner-container-solo\" *ngIf=\"bannerData.widgetData?.length == 1\">\n    <img i18n-alt alt=\"Page Banner\" [src]=\"bannerData.widgetData[0].banners.xl\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}.banner .banner-image{width:100%;min-height:243px;display:block;height:350px;border-radius:12px}.banner-meta{text-align:center;z-index:2;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;font-size:1.1rem}.banner-meta .dots-container{display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;margin:0 6px;background-color:#787878bf;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#d3d3d3}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ws-widget-sliders', template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n    *ngIf=\"bannerData.widgetData?.length > 1\">\n\n    <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of bannerData.widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <p>{{slide.banners | json}}</p>\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n    </div>\n    <div class=\"banner-meta\">\n        <!-- <a [routerLink]=\" !isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\"\n            class=\"banner-title text-truncate\" *ngIf=\"widgetData[currentIndex].title\"\n            [title]=\"widgetData[currentIndex].title\">\n            {{ widgetData[currentIndex].title }}\n        </a> -->\n        <div class=\"dots-container\" *ngIf=\"bannerData.widgetData?.length > 1\">\n            <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of bannerData.widgetData; let j = index\"\n                (click)=\"slideTo(j)\"></span>\n        </div>\n    </div>\n    <a *ngIf=\"bannerData.widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"bannerData.widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n</div>\n<div class=\"banner-container-solo\" *ngIf=\"bannerData.widgetData?.length == 1\">\n    <img i18n-alt alt=\"Page Banner\" [src]=\"bannerData.widgetData[0].banners.xl\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}.banner .banner-image{width:100%;min-height:243px;display:block;height:350px;border-radius:12px}.banner-meta{text-align:center;z-index:2;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;font-size:1.1rem}.banner-meta .dots-container{display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;margin:0 6px;background-color:#787878bf;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#d3d3d3}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { bannerData: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['id']
+            }] } });
+
+// import { IGroup } from '../../infy/routes/navigator/models/navigator.model'
+var NSDiscussData;
+(function (NSDiscussData) {
+    let IPageName;
+    (function (IPageName) {
+        IPageName["HOME"] = "discussion-home";
+        IPageName["START"] = "discussion-start";
+        IPageName["DETAILS"] = "discussion-details";
+        IPageName["CATEGORY"] = "discussion-category";
+        IPageName["TAGS"] = "discussion-category";
+        IPageName["MY_DISCUSSION"] = "my-discussion";
+        IPageName["LIB_ENTRY"] = "lib-entry";
+        IPageName["LOAD_ALERT"] = "load-alert";
+    })(IPageName = NSDiscussData.IPageName || (NSDiscussData.IPageName = {}));
+})(NSDiscussData || (NSDiscussData = {}));
+
+/* tslint:enable */
+class LoadAlertComponent {
+    constructor(telemetryUtils) {
+        this.telemetryUtils = telemetryUtils;
+        this.close = new EventEmitter();
+        this.exit = new EventEmitter();
+    }
+    ngOnInit() {
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.LOAD_ALERT);
+    }
+    exitForum(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.LOAD_ALERT);
+        this.exit.emit(event);
+    }
+    closeModal(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.LOAD_ALERT);
+        this.close.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadAlertComponent, deps: [{ token: TelemetryUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadAlertComponent, selector: "lib-load-alert", outputs: { close: "close", exit: "exit" }, ngImport: i0, template: "<div class=\"modal fade\" id=\"alertModal\">\n    <div class=\"df-dimmer-alert-modal\">\n        <div class=\"df-alert-modal\">  \n        <div class=\"df-alert-modal-header\">Alert</div> \n        <div class=\"df-alert-modal-content\">\n            <label class=\"df-alert-label\">We are experiencing high traffic.Please try after sometime.</label>\n        </div>\n        <div class=\"df-alert-modal-buttons\">\n            <button class=\"df-btn df-btn-normal df-btn-primary df-alert-close-btn\" id=\"load-alert-close\" (click)=\"exitForum($event)\">Close</button>\n        </div>\n        </div>\n    </div>\n</div>", styles: ["#alertModal{display:block;opacity:2!important}.df-dimmer-alert-modal{position:fixed;inset:0;background:#000c;z-index:99999;opacity:1;transition:opacity .1s ease-in;pointer-events:auto}.df-dimmer-alert-modal .df-alert-modal{max-width:30rem;width:100%;margin:0 auto;border-radius:.1875rem;background:var(--white);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:auto;height:auto}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-header{background-color:var(--primary);color:var(--white);font-weight:700;font-size:1rem;padding:.5rem 1rem;border-bottom:0 solid var(--gray-100);min-height:2.5rem;line-height:1.5rem}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-content{padding:1rem;min-height:3.75rem}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-content .df-alert-label{display:inline-block;margin-bottom:0;font-size:.8125rem;font-weight:700}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-buttons{padding:.5rem 1rem;background:var(--white);border-top:.0625rem solid var(--gray-100);min-height:3.5rem;display:flex;flex-direction:row-reverse;align-items:center;cursor:pointer}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-load-alert', template: "<div class=\"modal fade\" id=\"alertModal\">\n    <div class=\"df-dimmer-alert-modal\">\n        <div class=\"df-alert-modal\">  \n        <div class=\"df-alert-modal-header\">Alert</div> \n        <div class=\"df-alert-modal-content\">\n            <label class=\"df-alert-label\">We are experiencing high traffic.Please try after sometime.</label>\n        </div>\n        <div class=\"df-alert-modal-buttons\">\n            <button class=\"df-btn df-btn-normal df-btn-primary df-alert-close-btn\" id=\"load-alert-close\" (click)=\"exitForum($event)\">Close</button>\n        </div>\n        </div>\n    </div>\n</div>", styles: ["#alertModal{display:block;opacity:2!important}.df-dimmer-alert-modal{position:fixed;inset:0;background:#000c;z-index:99999;opacity:1;transition:opacity .1s ease-in;pointer-events:auto}.df-dimmer-alert-modal .df-alert-modal{max-width:30rem;width:100%;margin:0 auto;border-radius:.1875rem;background:var(--white);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:auto;height:auto}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-header{background-color:var(--primary);color:var(--white);font-weight:700;font-size:1rem;padding:.5rem 1rem;border-bottom:0 solid var(--gray-100);min-height:2.5rem;line-height:1.5rem}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-content{padding:1rem;min-height:3.75rem}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-content .df-alert-label{display:inline-block;margin-bottom:0;font-size:.8125rem;font-weight:700}.df-dimmer-alert-modal .df-alert-modal .df-alert-modal-buttons{padding:.5rem 1rem;background:var(--white);border-top:.0625rem solid var(--gray-100);min-height:3.5rem;display:flex;flex-direction:row-reverse;align-items:center;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: TelemetryUtilsService }]; }, propDecorators: { close: [{
+                type: Output
+            }], exit: [{
+                type: Output
+            }] } });
+
+class ElementsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ElementsModule, declarations: [PostReplyComponent,
+            CategoryCardComponent,
+            DiscussCardComponent,
+            AvatarPhotoComponent,
+            AppLoaderComponent,
+            RelatedDiscussionComponent,
+            SlidersComponent,
+            LoadAlertComponent], imports: [CommonModule, PipesModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [CategoryCardComponent,
+            DiscussCardComponent,
+            AvatarPhotoComponent,
+            AppLoaderComponent,
+            RelatedDiscussionComponent,
+            AppLoaderComponent,
+            PostReplyComponent,
+            SlidersComponent,
+            LoadAlertComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementsModule, imports: [CommonModule, PipesModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PostReplyComponent,
+                        CategoryCardComponent,
+                        DiscussCardComponent,
+                        AvatarPhotoComponent,
+                        AppLoaderComponent,
+                        RelatedDiscussionComponent,
+                        SlidersComponent,
+                        LoadAlertComponent
+                    ],
+                    imports: [
+                        CommonModule, PipesModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ],
+                    exports: [
+                        CategoryCardComponent,
+                        DiscussCardComponent,
+                        AvatarPhotoComponent,
+                        AppLoaderComponent,
+                        RelatedDiscussionComponent,
+                        AppLoaderComponent,
+                        PostReplyComponent,
+                        SlidersComponent,
+                        LoadAlertComponent
+                    ]
+                }]
+        }] });
+
+/* tslint:enable */
+class SidePannelComponent {
+    constructor(router, discussService, activatedRoute, telemetryUtils, configService) {
+        this.router = router;
+        this.discussService = discussService;
+        this.activatedRoute = activatedRoute;
+        this.telemetryUtils = telemetryUtils;
+        this.configService = configService;
+        this.defaultPage = 'categories';
+        this.menu = [];
+        this.showSideMenu = true;
+    }
+    ngOnInit() {
+        // TODO: loader or spinner
+        this.telemetryUtils.setContext([]);
+        this.hideSidePanel = document.body.classList.contains('widget');
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
+        this.data = this.configService.getConfig();
+        const menuArr = _.get(this.data, 'menuOptions') && _.get(this.data, 'menuOptions').length > 0
+            ? this.data.menuOptions : MENUOPTIONS;
+        // })
+        for (let i = 0; i < menuArr.length; i++) {
+            if (menuArr[i].enable) {
+                this.menu.push(menuArr[i]);
+            }
+        }
+    }
+    isActive(selectedItem) {
+        this.landingPage = this.data.defaultLandingPage ? this.data.defaultLandingPage : 'categories';
+        if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
+            if (!this.selectedTab) {
+                this.selectedTab = selectedItem;
+            }
+            return true;
+        }
+        else if (selectedItem === this.landingPage && !this.selectedTab) {
+            return true;
+        }
+        return false;
+    }
+    navigate(pageName, event) {
+        this.selectedTab = pageName;
+        this.telemetryUtils.setContext([]);
+        if (event) {
+            this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
+        }
+        this.router.navigate([`${this.configService.getRouterSlug()}${ROUTES.DISCUSSION}${pageName}`], { queryParamsHandling: "merge" });
+        this.closeNav();
+    }
+    ngOnDestroy() {
+        if (this.paramsSubscription) {
+            this.paramsSubscription.unsubscribe();
+        }
+    }
+    showMenuButton() {
+        this.showSideMenu = this.showSideMenu ? false : true;
+    }
+    closeNav() {
+        this.showSideMenu = this.showSideMenu ? false : true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidePannelComponent, deps: [{ token: i1.Router }, { token: DiscussionService }, { token: i1.ActivatedRoute }, { token: TelemetryUtilsService }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidePannelComponent, selector: "lib-side-pannel", ngImport: i0, template: "<ul class=\"sb-sidebar-menu pl-0\" *ngIf=\"!hideSidePanel\">\n  <!-- <li class=\"df-sidebar-menu-list\" *ngIf=\"false\" (click)=\"navigate('home', $event)\" id=\"all-discussions\"><a>All discussions</a></li> -->\n  <li *ngFor='let d of menu' class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': isActive(d.route)}\"\n    (click)=\"navigate(d.route, $event)\" id=\"d.route\"><a>{{d.label}}</a></li>\n    <!-- <li class=\"df-sidebar-menu-list\" id=\"leader-board\"><a>Leaderboard</a></li> -->\n</ul>\n\n<!-- for mobile-view -->\n<button type=\"button\" class=\"open-btn\" (click)=\"showMenuButton()\">\u2630</button> \n<div class=\"overlay-sidebar\" *ngIf=\"!showSideMenu\">\n  <div class=\"overlay-sidebar__menu\">\n      <a href=\"javascript:void(0)\" class=\"close-btn\" (click)=\"closeNav()\">&times;</a>\n      <div class=\"overlay-sidebar__menu__content\">\n        <ul class=\"sb-sidebar-menu-mob pl-0\">\n          <li *ngFor='let d of menu' class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': isActive(d.route)}\"\n          (click)=\"navigate(d.route, $event)\" id=\"d.route\"><a>{{d.label}}</a></li>\n          <!-- <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" *ngIf=\"false\" (click)=\"navigate('home', $event)\" id=\"all-discussions\"><a>All discussions</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': selectedTab === 'categories'}\" (click)=\"navigate('categories', $event)\" id=\"discussion-categories\"><a>Categories</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\"[ngClass]=\"{'menu-active': selectedTab === 'tags'}\" (click)=\"navigate('tags', $event)\" id=\"discussion-tags\"><a>Tags</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': selectedTab === 'my-discussion'}\" (click)=\"navigate('my-discussion', $event)\" id=\"my-discussion\"><a>My discussions</a></li> -->\n      </ul>\n      </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-sidebar-menu-text: var(--gray-600);--df-sidebar-menu-active-text: var(--primary);--df-sidebar-menu-bl:var(--primary);--df-sidebar-menu-active-bg: var(--df-common-bg);--open-btn-bg: var(--white);--open-btn-color: var(--gray-800);--df-overlay-sidebar-bg:var(--black);--df-overlay-sidebar-bg-menu:#f5f6fa}.sb-sidebar-menu{list-style-type:none;margin-bottom:0;height:100%;display:inline}.df-sidebar-menu-list{margin-bottom:.5rem;padding:.75rem 1rem;font-size:14px;color:var(--df-sidebar-menu-text);border-left:.125rem solid transparent;cursor:pointer}.df-sidebar-menu-list.menu-active,.df-sidebar-menu-list:hover{background-color:var(--df-sidebar-menu-active-bg);font-weight:700;border-left:.1875rem solid var(--df-sidebar-menu-bl);color:var(--df-sidebar-menu-active-text);border-bottom:0px}.sb-sidebar-menu-mob{list-style-type:none;margin-bottom:0;height:100%;display:inline}.open-btn,.overlay-sidebar{display:none}@media (max-width: 768px){.sb-sidebar-menu{display:none}.open-btn{display:inline;border:none;cursor:pointer;height:2.5rem;width:2.5rem;border-radius:1rem;font-size:1.375rem;background-color:var(--open-btn-bg);box-shadow:3px 3px 2px #0000001a;color:var(--open-btn-color)}.overlay-sidebar{height:100vh;width:100%;overflow:hidden;background:#0006;inset:0;position:absolute;display:inline;z-index:3;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.overlay-sidebar__menu{position:relative;top:0;height:100%;width:15rem;right:0;z-index:100000;overflow-y:auto;overflow-x:hidden;background-color:var(--df-overlay-sidebar-bg-menu);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #000}.overlay-sidebar__menu .close-btn{font-size:2.5rem;display:flex;justify-content:flex-end;padding-right:1rem;cursor:pointer}.overlay-sidebar__menu__content{padding:0 1rem;height:100%}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidePannelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-side-pannel', template: "<ul class=\"sb-sidebar-menu pl-0\" *ngIf=\"!hideSidePanel\">\n  <!-- <li class=\"df-sidebar-menu-list\" *ngIf=\"false\" (click)=\"navigate('home', $event)\" id=\"all-discussions\"><a>All discussions</a></li> -->\n  <li *ngFor='let d of menu' class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': isActive(d.route)}\"\n    (click)=\"navigate(d.route, $event)\" id=\"d.route\"><a>{{d.label}}</a></li>\n    <!-- <li class=\"df-sidebar-menu-list\" id=\"leader-board\"><a>Leaderboard</a></li> -->\n</ul>\n\n<!-- for mobile-view -->\n<button type=\"button\" class=\"open-btn\" (click)=\"showMenuButton()\">\u2630</button> \n<div class=\"overlay-sidebar\" *ngIf=\"!showSideMenu\">\n  <div class=\"overlay-sidebar__menu\">\n      <a href=\"javascript:void(0)\" class=\"close-btn\" (click)=\"closeNav()\">&times;</a>\n      <div class=\"overlay-sidebar__menu__content\">\n        <ul class=\"sb-sidebar-menu-mob pl-0\">\n          <li *ngFor='let d of menu' class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': isActive(d.route)}\"\n          (click)=\"navigate(d.route, $event)\" id=\"d.route\"><a>{{d.label}}</a></li>\n          <!-- <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" *ngIf=\"false\" (click)=\"navigate('home', $event)\" id=\"all-discussions\"><a>All discussions</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': selectedTab === 'categories'}\" (click)=\"navigate('categories', $event)\" id=\"discussion-categories\"><a>Categories</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\"[ngClass]=\"{'menu-active': selectedTab === 'tags'}\" (click)=\"navigate('tags', $event)\" id=\"discussion-tags\"><a>Tags</a></li>\n          <li class=\"df-sidebar-menu-list\" tabindex=\"0\" role=\"link\" [ngClass]=\"{'menu-active': selectedTab === 'my-discussion'}\" (click)=\"navigate('my-discussion', $event)\" id=\"my-discussion\"><a>My discussions</a></li> -->\n      </ul>\n      </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-sidebar-menu-text: var(--gray-600);--df-sidebar-menu-active-text: var(--primary);--df-sidebar-menu-bl:var(--primary);--df-sidebar-menu-active-bg: var(--df-common-bg);--open-btn-bg: var(--white);--open-btn-color: var(--gray-800);--df-overlay-sidebar-bg:var(--black);--df-overlay-sidebar-bg-menu:#f5f6fa}.sb-sidebar-menu{list-style-type:none;margin-bottom:0;height:100%;display:inline}.df-sidebar-menu-list{margin-bottom:.5rem;padding:.75rem 1rem;font-size:14px;color:var(--df-sidebar-menu-text);border-left:.125rem solid transparent;cursor:pointer}.df-sidebar-menu-list.menu-active,.df-sidebar-menu-list:hover{background-color:var(--df-sidebar-menu-active-bg);font-weight:700;border-left:.1875rem solid var(--df-sidebar-menu-bl);color:var(--df-sidebar-menu-active-text);border-bottom:0px}.sb-sidebar-menu-mob{list-style-type:none;margin-bottom:0;height:100%;display:inline}.open-btn,.overlay-sidebar{display:none}@media (max-width: 768px){.sb-sidebar-menu{display:none}.open-btn{display:inline;border:none;cursor:pointer;height:2.5rem;width:2.5rem;border-radius:1rem;font-size:1.375rem;background-color:var(--open-btn-bg);box-shadow:3px 3px 2px #0000001a;color:var(--open-btn-color)}.overlay-sidebar{height:100vh;width:100%;overflow:hidden;background:#0006;inset:0;position:absolute;display:inline;z-index:3;transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.overlay-sidebar__menu{position:relative;top:0;height:100%;width:15rem;right:0;z-index:100000;overflow-y:auto;overflow-x:hidden;background-color:var(--df-overlay-sidebar-bg-menu);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #000}.overlay-sidebar__menu .close-btn{font-size:2.5rem;display:flex;justify-content:flex-end;padding-right:1rem;cursor:pointer}.overlay-sidebar__menu__content{padding:0 1rem;height:100%}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: DiscussionService }, { type: i1.ActivatedRoute }, { type: TelemetryUtilsService }, { type: ConfigService }]; } });
+
+/* tslint:enable */
+class LibEntryComponent {
+    constructor(activatedRoute, discussionService, configService, location, navigationServiceService, discussionEventService, telemetryUtils) {
+        this.activatedRoute = activatedRoute;
+        this.discussionService = discussionService;
+        this.configService = configService;
+        this.location = location;
+        this.navigationServiceService = navigationServiceService;
+        this.discussionEventService = discussionEventService;
+        this.telemetryUtils = telemetryUtils;
+        this.headerOption = true;
+        this.currentRoute = 'all-discussions';
+        this.showLoaderAlert = false;
+        this.bannerSubscription = this.activatedRoute.data.subscribe(data => {
+            if (data && data.pageData) {
+                this.banner = data.pageData.data.banner || [];
+            }
+        });
+    }
+    ngOnInit() {
+        /**
+         * calling the initservice to tell navigationservice to use the router service
+         * because this component is invoke only in router approach
+         */
+        this.navigationServiceService.initService('routerService');
+        this.histtoryStartIndex = window.history.length - 1;
+        this.configService.setConfig(this.activatedRoute);
+        // this.activatedRoute.data.subscribe((data) => {
+        this.data = this.configService.getConfig();
+        if (!this.data) {
+            // fallback for query params
+            this.configService.setConfigFromParams(this.activatedRoute);
+            this.data = this.configService.getConfig();
+        }
+        this.discussionService.userId = _.get(this.data, 'userId');
+        const rawCategories = _.get(this.data, 'categories');
+        this.discussionService.forumIds = _.get(rawCategories, 'result');
+        this.discussionService.initializeUserDetails(this.discussionService.userId);
+        this.handleLoaderAlert();
+    }
+    handleLoaderAlert() {
+        this.subscription = this.discussionService.alertEvent.subscribe(() => {
+            this.showLoaderAlert = true;
+        });
+    }
+    goBack() {
+        const eventAction = {
+            action: 'DF_BACK'
+        };
+        this.discussionEventService.emitTelemetry(eventAction);
+        this.location.back();
+    }
+    close(event) {
+        this.showLoaderAlert = false;
+        const eventAction = {
+            action: 'DF_CLOSE'
+        };
+        this.discussionEventService.emitTelemetry(eventAction);
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.LIB_ENTRY);
+        window.history.go(-(window.history.length - this.histtoryStartIndex));
+    }
+    closeLoadAlert() {
+        this.showLoaderAlert = false;
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    onScrollTopActive(event) {
+        window.scroll({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibEntryComponent, deps: [{ token: i1.ActivatedRoute }, { token: DiscussionService }, { token: ConfigService }, { token: i6.Location }, { token: NavigationServiceService }, { token: DiscussionEventsService }, { token: TelemetryUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LibEntryComponent, selector: "lib-lib-entry", host: { classAttribute: "flex-1 main_discuss_lib" }, ngImport: i0, template: "<div class=\"sbt-inside-page-container ui container\">\n    <div class=\"df-header\">\n        <button type=\"button\" class=\"df-btn df-btn-normal df-btn-primary df-back-btn\" tabindex=\"0\" autofocus\n            role=\"button\" (click)=\"goBack()\">\n            <img src=\"./assets/discussion-ui/images/back-img.png\" alt=\"back icon\" />\n            Back\n        </button>\n        <button (click)=\"close($event)\" class=\"df-btn df-btn-normal df-btn-danger df-close-btn\" tabindex=\"0\"\n            id=\"close-discussion-forum\" type=\"button\" autofocus>\n            Close\n            <img src=\"./assets/discussion-ui/images/close.png\" alt=\"close icon\" />\n        </button>\n    </div>\n\n    <div class=\"discussion-forum-content\">\n        <div class=\"discuss-left-panel\">\n            <lib-side-pannel></lib-side-pannel>\n        </div>\n        <div class=\"discuss-right-panel\">\n            <router-outlet (activate)=\"onScrollTopActive($event)\"></router-outlet>\n        </div>\n    </div>\n</div>\n\n<lib-load-alert *ngIf=\"showLoaderAlert\" (exit)=\"close($event)\" (close)=\"closeLoadAlert()\"></lib-load-alert>", styles: ["::ng-deep:root{--df-header-bg:var(--df-common-bg)}.df-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--df-header-bg);margin-bottom:1rem}.df-header .df-back-btn{display:flex;align-items:center}.df-header .df-back-btn img{width:1rem;height:1rem;margin-right:.25rem;filter:invert(1)}.df-header .df-close-btn img{width:.5rem;height:.5rem;margin-left:.25rem;filter:invert(1)}.discussion-forum-content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1.5rem}@media (max-width: 768px){.discussion-forum-content{grid-template-columns:1fr}}.ui.container{display:block;max-width:100%!important}@media only screen and (max-width: 767px){.ui.container{width:auto!important;margin-left:1em!important;margin-right:1em!important}}@media only screen and (max-width: 1800px) and (min-width: 768px){.ui.container{width:90%;margin-left:auto!important;margin-right:auto!important}}\n"], dependencies: [{ kind: "component", type: SidePannelComponent, selector: "lib-side-pannel" }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: LoadAlertComponent, selector: "lib-load-alert", outputs: ["close", "exit"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LibEntryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-lib-entry', host: { class: 'flex-1 main_discuss_lib', }, template: "<div class=\"sbt-inside-page-container ui container\">\n    <div class=\"df-header\">\n        <button type=\"button\" class=\"df-btn df-btn-normal df-btn-primary df-back-btn\" tabindex=\"0\" autofocus\n            role=\"button\" (click)=\"goBack()\">\n            <img src=\"./assets/discussion-ui/images/back-img.png\" alt=\"back icon\" />\n            Back\n        </button>\n        <button (click)=\"close($event)\" class=\"df-btn df-btn-normal df-btn-danger df-close-btn\" tabindex=\"0\"\n            id=\"close-discussion-forum\" type=\"button\" autofocus>\n            Close\n            <img src=\"./assets/discussion-ui/images/close.png\" alt=\"close icon\" />\n        </button>\n    </div>\n\n    <div class=\"discussion-forum-content\">\n        <div class=\"discuss-left-panel\">\n            <lib-side-pannel></lib-side-pannel>\n        </div>\n        <div class=\"discuss-right-panel\">\n            <router-outlet (activate)=\"onScrollTopActive($event)\"></router-outlet>\n        </div>\n    </div>\n</div>\n\n<lib-load-alert *ngIf=\"showLoaderAlert\" (exit)=\"close($event)\" (close)=\"closeLoadAlert()\"></lib-load-alert>", styles: ["::ng-deep:root{--df-header-bg:var(--df-common-bg)}.df-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--df-header-bg);margin-bottom:1rem}.df-header .df-back-btn{display:flex;align-items:center}.df-header .df-back-btn img{width:1rem;height:1rem;margin-right:.25rem;filter:invert(1)}.df-header .df-close-btn img{width:.5rem;height:.5rem;margin-left:.25rem;filter:invert(1)}.discussion-forum-content{display:grid;grid-template-columns:1fr 4fr;grid-gap:1.5rem}@media (max-width: 768px){.discussion-forum-content{grid-template-columns:1fr}}.ui.container{display:block;max-width:100%!important}@media only screen and (max-width: 767px){.ui.container{width:auto!important;margin-left:1em!important;margin-right:1em!important}}@media only screen and (max-width: 1800px) and (min-width: 768px){.ui.container{width:90%;margin-left:auto!important;margin-right:auto!important}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: DiscussionService }, { type: ConfigService }, { type: i6.Location }, { type: NavigationServiceService }, { type: DiscussionEventsService }, { type: TelemetryUtilsService }]; } });
+
+class DiscussUtilsService {
+    constructor() { }
+    stringToColor(title) {
+        let hash = 0;
+        for (let i = 0; i < title.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = title.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        // tslint:disable-next-line: prefer-template
+        const colour = 'hsl(' + hue + ',100%,30%)';
+        return colour;
+    }
+    getContrast() {
+        return 'rgba(255, 255, 255, 80%)';
+    }
+    /**
+     * The htmlDecode() method parses a string containing either HTML or XML
+     * @param  {any} str
+     */
+    htmlDecode(str) {
+        const doc = new DOMParser().parseFromString(str, "text/html");
+        return doc.documentElement.textContent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/* tslint:enable */
+class DiscussStartComponent {
+    constructor(discussService, formBuilder, telemetryUtils, configService, discussUtils) {
+        this.discussService = discussService;
+        this.formBuilder = formBuilder;
+        this.telemetryUtils = telemetryUtils;
+        this.configService = configService;
+        this.discussUtils = discussUtils;
+        this.close = new EventEmitter();
+        this.editable = true;
+        this.postTagsArray = [];
+        this.uploadSaveData = false;
+        this.showErrorMsg = false;
+        this.showSelectCategory = false;
+        this.createErrorMsg = '';
+        this.defaultError = 'Something went wrong, Please try again after sometime!';
+        this.enableSubmitButton = false;
+    }
+    ngOnInit() {
+        document.querySelector('[tabindex="-1"]').focus();
+        // debugger
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.START);
+        this.cIds = this.configService.getCategories();
+        if (this.categoryId) {
+            this.showSelectCategory = false;
+        }
+        else {
+            this.showSelectCategory = true;
+        }
+        this.initializeData();
+        this.initializeFormFields(this.topicData);
+    }
+    initializeFormFields(topicData) {
+        this.startForm = this.formBuilder.group({
+            question: [null, [Validators.required, Validators.minLength(8)]],
+            description: [null, [Validators.required, Validators.minLength(8)]],
+            tags: [],
+            category: []
+        });
+        this.startForm.valueChanges.subscribe(val => {
+            this.validateForm();
+        });
+        /** If popup is in edit mode */
+        if (topicData) {
+            const tags = _.map(_.get(topicData, 'tags'), (element) => {
+                return _.get(element, 'value');
+            });
+            /** calling htmlDecode method to get the parsed string */
+            this.startForm.controls['question'].setValue(this.discussUtils.htmlDecode(_.get(topicData, 'title')));
+            this.startForm.controls['description'].setValue(_.get(topicData, 'posts[0].content').replace(/<[^>]+>/g, ''));
+            this.startForm.controls['tags'].setValue(tags);
+            this.validateForm();
+        }
+    }
+    isFieldValid(field) {
+        let valueNoWhiteSpace = this.startForm.get(field).value;
+        if (valueNoWhiteSpace) {
+            const index = valueNoWhiteSpace.length;
+            if (index >= 2 && valueNoWhiteSpace.charAt(index - 2) === " ") {
+                this.startForm.patchValue({ replyContent: this.startForm.get(field).value.trim() });
+            }
+            else {
+                this.startForm.patchValue({ replyContent: this.startForm.get(field).value.trimStart() });
+            }
+        }
+        return (!this.startForm.get(field).valid && this.startForm.get(field).dirty);
+    }
+    validateForm() {
+        if (this.startForm.status === 'VALID') {
+            this.enableSubmitButton = true;
+        }
+        else {
+            this.enableSubmitButton = false;
+        }
+    }
+    initializeData() {
+        // debugger
+        if (this.configService.hasContext() && !this.categoryId) {
+            const req = {
+                cids: this.cIds.result
+            };
+            this.discussService.getContextBasedDiscussion(req).subscribe((data) => {
+                this.allCategories = data.result;
+                if (this.startForm.get('category')) { }
+                this.startForm.controls['category'].setValue(this.allCategories[0].cid);
+            });
+        }
+        else if (this.categoryId) {
+            const req = {
+                cids: [this.categoryId]
+            };
+            this.showSelectCategory = false;
+            this.editable = false;
+            this.discussService.getContextBasedDiscussion(req).subscribe((data) => {
+                this.allCategories = data.result;
+                if (this.startForm.get('category')) { }
+                this.startForm.controls.category.setValue(this.allCategories[0].cid);
+            });
+        }
+        else {
+            this.discussService.fetchAllCategories().subscribe((data) => {
+                this.allCategories = data;
+                if (this.startForm.get('category')) { }
+                this.startForm.controls['category'].setValue(this.allCategories[1].cid);
+            });
+        }
+        this.discussService.fetchAllTag().subscribe(data => {
+            const tags = _.get(data, 'tags');
+            this.allTags = _.map(tags, (tag) => tag.value);
+        });
+    }
+    showError(meta) {
+        if (meta) {
+            return true;
+        }
+        return false;
+    }
+    submitPost(form) {
+        this.uploadSaveData = true;
+        this.showErrorMsg = false;
+        const postCreateReq = {
+            cid: this.categoryId ? this.categoryId : parseInt(form.value.category),
+            title: form.value.question,
+            content: form.value.description,
+            tags: form.value.tags,
+        };
+        this.discussService.createPost(postCreateReq).subscribe(() => {
+            this.closeModal('success');
+            form.reset();
+            this.uploadSaveData = false;
+            // success toast;
+            // this.openSnackbar(this.toastSuccess.nativeElement.value)
+            // close the modal
+        }, err => {
+            this.closeModal('discard');
+            // error toast
+            // .openSnackbar(this.toastError.nativeElement.value)
+            this.uploadSaveData = false;
+            if (err) {
+                if (err.error && err.error.message) {
+                    this.showErrorMsg = true;
+                    this.createErrorMsg = err.error.message.split('|')[1] || this.defaultError;
+                }
+            }
+        });
+    }
+    /**
+     * @param  {any} form
+     * @description - It will emit an event when popup is opened in edit topic/thread mode
+     *                Here, as 'tid', we are passing the main topic pid from the post array
+     */
+    updatePost(form) {
+        const updateTopicRequest = {
+            title: form.value.question,
+            content: form.value.description,
+            tags: form.value.tags,
+            uid: _.get(this.topicData, 'uid')
+        };
+        this.close.emit({
+            action: 'update',
+            tid: _.get(this.topicData, 'posts[0].pid'),
+            request: updateTopicRequest
+        });
+    }
+    closeModal(eventMessage) {
+        this.close.emit({ message: eventMessage });
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.START);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussStartComponent, deps: [{ token: DiscussionService }, { token: i2$1.UntypedFormBuilder }, { token: TelemetryUtilsService }, { token: ConfigService }, { token: DiscussUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussStartComponent, selector: "lib-discuss-start", inputs: { categoryId: "categoryId", topicData: "topicData", mode: "mode" }, outputs: { close: "close" }, ngImport: i0, template: "<!--modals-->\n<div class=\"modal fade\" id=\"myModal\">\n  <div class=\"discussion-start-modal\">\n    <div class=\"discussion-start-modal-content\" id=\"topic-scroll\" tabindex=\"-1\" role=\"dialog\">\n      <form [formGroup]=\"startForm\" class=\"discussion-start-form\">\n\n        <div class=\"start-form-content\" *ngIf=\"showSelectCategory\" [ngClass]=\"{ 'is-invalid': showError('subTitle') }\">\n          <label class=\"start-form-label\">Select category*</label>\n          <div class=\"start-form-field\">\n            <label class=\"start-form-label\" for=\"myList\">Select list </label>\n            <select formControlName=\"category\" #category [required]=\"true\" id=\"myList\" class=\"select-category\">\n              <option [value]=\"c.cid\" *ngFor=\"let c of allCategories\" [innerHTML]=\"c.name\"></option>\n            </select>\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('category').valid\" i18n=\"category Error|Explains category is required\">\n            category is mandatory</small>\n        </div>\n\n        <div class=\"start-form-content\" [ngClass]=\"{ 'is-invalid': showError('subTitle') }\">\n          <label class=\"start-form-label\">Discussion topic*</label>\n          <div class=\"start-form-field\">\n            <input [ngClass]=\"{'is-invalid' : isFieldValid('question')}\" class=\"start-form-field-control\" placeholder=\"Type here (minimum 8 characters)\"\n              formControlName=\"question\" #question maxlength=\"1000\" />\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('question').valid\" i18n=\"question Error|Explains question is required\">\n            Question is mandatory. It should be minimum of\n            8 characters</small>\n        </div>\n\n        <div class=\"start-form-content\">\n          <div class=\"start-form-field\">\n            <label class=\"start-form-label\" for=\"description\">Please elaborate your question or idea here*</label>\n            <textarea [ngClass]=\"{'is-invalid' : isFieldValid('description')}\" minlength=\"8\" class=\"start-form-field-control\" rows=\"8\" formControlName=\"description\"\n              #description name=\"moretext\" placeholder=\"Type here (minimum 8 characters)\" id=\"description\"></textarea>\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('description').valid\"\n            i18n=\"description Error|Explains description is required\"> Description is mandatory. It should be minimum of\n            8 characters </small>\n        </div>\n\n        <div #postTags [ngClass]=\"{ 'is-invalid': showError('tags') }\" class=\"start-tags\">\n          <label class=\"mb-0\">Tags</label>\n          <div *ngFor=\"let tag of postTagsArray\">\n            {{ tag }}\n          </div>\n          <!-- TODO: check the padding for placeholder -->\n          <tag-input class=\"tag-input\" secondaryPlaceholder=\"Add a tag and press Enter\" formControlName=\"tags\"\n            [modelAsStrings]=\"true\">\n          </tag-input>\n        </div>\n\n        <div *ngIf=\"showErrorMsg\">\n          <small class=\"mandatory-label\">\n            {{createErrorMsg}}\n          </small>\n        </div>\n\n        <div class=\"start-modal-buttons\">\n          <button (click)=\"closeModal('discard');logTelemetry($event)\" mat-raised-button type=\"button\"\n            class=\"df-btn df-btn-normal df-cancel-btn\" id=\"discard-discussion-start-form\">Cancel\n          </button>\n          <span *ngIf=\"uploadSaveData\">\n          </span>\n          <button *ngIf=\"mode !== 'edit'\" type=\"submit\" class=\"df-btn df-btn-normal df-btn-primary df-submit-btn\"\n            [ngClass]=\"{'df-btn-disabled': !enableSubmitButton }\" [disabled]=\"!enableSubmitButton\"\n            (click)=\"submitPost(startForm);logTelemetry($event)\" id=\"submit-discussion-start-form\">\n            <span class=\"text-white\">Submit</span>\n          </button>\n          <button *ngIf=\"mode === 'edit'\" type=\"submit\" class=\"df-btn df-btn-normal df-btn-primary df-update-btn\"\n            [ngClass]=\"{'df-btn-disabled': !enableSubmitButton }\" [disabled]=\"!enableSubmitButton\"\n            (click)=\"updatePost(startForm);logTelemetry($event)\" id=\"update-topic-popup\">\n            <span class=\"text-white\">Update</span>\n          </button>\n        </div>\n        \u200B\n      </form>\n      \u200B\n      <input type=\"hidden\" i18-value i18-aria-value aria-value=\"Post created successful\"\n        value=\"Post created successfully!\" #toastSuccess />\n      <input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create post\"\n        value=\"Error in creating new post!\" #toastError />\n    </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-modal-content-bg: var(--df-common-bg);--df-modal-field-control-bg: var(--df-background);--df-tag-bg:var(--df-e9e8d9);--df-ng-tag-bg: var(--df-background)}.discussion-start-modal{position:fixed;inset:0;background:#000c;z-index:99999;opacity:1;transition:opacity .1s ease-in;pointer-events:auto}.discussion-start-modal .discussion-start-modal-content{max-width:50rem;width:90%;position:relative;margin:0 auto;padding:1rem;border-radius:.1875rem;background:var(--df-modal-content-bg);color:var(--df-text);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:auto;max-height:calc(100% - 156px)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-content{margin-bottom:.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-label{display:inline-block;margin-bottom:.5rem;font-size:.8125rem;font-weight:700}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field{position:relative;margin-bottom:0}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .select-category{border:.0625rem solid var(--gray-200);color:var(--df-text);margin:0 .5rem;padding:.5rem .25rem;background:var(--df-field-control-bg)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control{background-color:var(--df-modal-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;width:96%;cursor:pointer;outline:none;padding:.5rem .875rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control:focus,.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control .active{border-color:var(--primary-400)!important}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .mandatory-label{font-size:.75rem;color:var(--red-100)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons{float:right}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-submit-btn,.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-update-btn{margin-left:.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-cancel-btn{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;border:0;margin:0 .5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-btn-disabled{background-color:var(--gray-100)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-tags{margin-bottom:1.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-tags label{display:inline-block;font-size:.8125rem;font-weight:700;margin-bottom:0}#myModal{display:block;opacity:2!important}::ng-deep .ng2-tag-input{border:.0625rem solid var(--gray-200)!important;color:var(--df-text)!important;display:block;font-size:.8125rem!important;max-width:100%;padding:.25rem .5rem;margin:.5rem 0;background:var(--df-field-control-bg);border-radius:.1875rem;border-bottom:.0625rem solid var(--gray-200)!important}::ng-deep .ng2-tag-input--focused{border-color:var(--primary-400)!important}::ng-deep .ng2-tag-input__text-input{height:2.25rem;margin:0 .5rem;color:var(--df-text);background:var(--df-ng-tag-bg)}::ng-deep .ng2-tag-input.active{border-color:var(--primary-400)!important}::ng-deep tag{background:var(--df-tag-bg)!important;color:var(--df-text)!important}::ng-deep tag:first-child{margin-left:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussStartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-start', template: "<!--modals-->\n<div class=\"modal fade\" id=\"myModal\">\n  <div class=\"discussion-start-modal\">\n    <div class=\"discussion-start-modal-content\" id=\"topic-scroll\" tabindex=\"-1\" role=\"dialog\">\n      <form [formGroup]=\"startForm\" class=\"discussion-start-form\">\n\n        <div class=\"start-form-content\" *ngIf=\"showSelectCategory\" [ngClass]=\"{ 'is-invalid': showError('subTitle') }\">\n          <label class=\"start-form-label\">Select category*</label>\n          <div class=\"start-form-field\">\n            <label class=\"start-form-label\" for=\"myList\">Select list </label>\n            <select formControlName=\"category\" #category [required]=\"true\" id=\"myList\" class=\"select-category\">\n              <option [value]=\"c.cid\" *ngFor=\"let c of allCategories\" [innerHTML]=\"c.name\"></option>\n            </select>\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('category').valid\" i18n=\"category Error|Explains category is required\">\n            category is mandatory</small>\n        </div>\n\n        <div class=\"start-form-content\" [ngClass]=\"{ 'is-invalid': showError('subTitle') }\">\n          <label class=\"start-form-label\">Discussion topic*</label>\n          <div class=\"start-form-field\">\n            <input [ngClass]=\"{'is-invalid' : isFieldValid('question')}\" class=\"start-form-field-control\" placeholder=\"Type here (minimum 8 characters)\"\n              formControlName=\"question\" #question maxlength=\"1000\" />\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('question').valid\" i18n=\"question Error|Explains question is required\">\n            Question is mandatory. It should be minimum of\n            8 characters</small>\n        </div>\n\n        <div class=\"start-form-content\">\n          <div class=\"start-form-field\">\n            <label class=\"start-form-label\" for=\"description\">Please elaborate your question or idea here*</label>\n            <textarea [ngClass]=\"{'is-invalid' : isFieldValid('description')}\" minlength=\"8\" class=\"start-form-field-control\" rows=\"8\" formControlName=\"description\"\n              #description name=\"moretext\" placeholder=\"Type here (minimum 8 characters)\" id=\"description\"></textarea>\n          </div>\n          <small class=\"mandatory-label\" *ngIf=\"!startForm.get('description').valid\"\n            i18n=\"description Error|Explains description is required\"> Description is mandatory. It should be minimum of\n            8 characters </small>\n        </div>\n\n        <div #postTags [ngClass]=\"{ 'is-invalid': showError('tags') }\" class=\"start-tags\">\n          <label class=\"mb-0\">Tags</label>\n          <div *ngFor=\"let tag of postTagsArray\">\n            {{ tag }}\n          </div>\n          <!-- TODO: check the padding for placeholder -->\n          <tag-input class=\"tag-input\" secondaryPlaceholder=\"Add a tag and press Enter\" formControlName=\"tags\"\n            [modelAsStrings]=\"true\">\n          </tag-input>\n        </div>\n\n        <div *ngIf=\"showErrorMsg\">\n          <small class=\"mandatory-label\">\n            {{createErrorMsg}}\n          </small>\n        </div>\n\n        <div class=\"start-modal-buttons\">\n          <button (click)=\"closeModal('discard');logTelemetry($event)\" mat-raised-button type=\"button\"\n            class=\"df-btn df-btn-normal df-cancel-btn\" id=\"discard-discussion-start-form\">Cancel\n          </button>\n          <span *ngIf=\"uploadSaveData\">\n          </span>\n          <button *ngIf=\"mode !== 'edit'\" type=\"submit\" class=\"df-btn df-btn-normal df-btn-primary df-submit-btn\"\n            [ngClass]=\"{'df-btn-disabled': !enableSubmitButton }\" [disabled]=\"!enableSubmitButton\"\n            (click)=\"submitPost(startForm);logTelemetry($event)\" id=\"submit-discussion-start-form\">\n            <span class=\"text-white\">Submit</span>\n          </button>\n          <button *ngIf=\"mode === 'edit'\" type=\"submit\" class=\"df-btn df-btn-normal df-btn-primary df-update-btn\"\n            [ngClass]=\"{'df-btn-disabled': !enableSubmitButton }\" [disabled]=\"!enableSubmitButton\"\n            (click)=\"updatePost(startForm);logTelemetry($event)\" id=\"update-topic-popup\">\n            <span class=\"text-white\">Update</span>\n          </button>\n        </div>\n        \u200B\n      </form>\n      \u200B\n      <input type=\"hidden\" i18-value i18-aria-value aria-value=\"Post created successful\"\n        value=\"Post created successfully!\" #toastSuccess />\n      <input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create post\"\n        value=\"Error in creating new post!\" #toastError />\n    </div>\n  </div>\n</div>", styles: ["::ng-deep:root{--df-modal-content-bg: var(--df-common-bg);--df-modal-field-control-bg: var(--df-background);--df-tag-bg:var(--df-e9e8d9);--df-ng-tag-bg: var(--df-background)}.discussion-start-modal{position:fixed;inset:0;background:#000c;z-index:99999;opacity:1;transition:opacity .1s ease-in;pointer-events:auto}.discussion-start-modal .discussion-start-modal-content{max-width:50rem;width:90%;position:relative;margin:0 auto;padding:1rem;border-radius:.1875rem;background:var(--df-modal-content-bg);color:var(--df-text);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:auto;max-height:calc(100% - 156px)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-content{margin-bottom:.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-label{display:inline-block;margin-bottom:.5rem;font-size:.8125rem;font-weight:700}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field{position:relative;margin-bottom:0}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .select-category{border:.0625rem solid var(--gray-200);color:var(--df-text);margin:0 .5rem;padding:.5rem .25rem;background:var(--df-field-control-bg)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control{background-color:var(--df-modal-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;width:96%;cursor:pointer;outline:none;padding:.5rem .875rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control:focus,.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-form-field .start-form-field-control .active{border-color:var(--primary-400)!important}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .mandatory-label{font-size:.75rem;color:var(--red-100)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons{float:right}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-submit-btn,.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-update-btn{margin-left:.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-cancel-btn{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;border:0;margin:0 .5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-modal-buttons .df-btn-disabled{background-color:var(--gray-100)}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-tags{margin-bottom:1.5rem}.discussion-start-modal .discussion-start-modal-content .discussion-start-form .start-tags label{display:inline-block;font-size:.8125rem;font-weight:700;margin-bottom:0}#myModal{display:block;opacity:2!important}::ng-deep .ng2-tag-input{border:.0625rem solid var(--gray-200)!important;color:var(--df-text)!important;display:block;font-size:.8125rem!important;max-width:100%;padding:.25rem .5rem;margin:.5rem 0;background:var(--df-field-control-bg);border-radius:.1875rem;border-bottom:.0625rem solid var(--gray-200)!important}::ng-deep .ng2-tag-input--focused{border-color:var(--primary-400)!important}::ng-deep .ng2-tag-input__text-input{height:2.25rem;margin:0 .5rem;color:var(--df-text);background:var(--df-ng-tag-bg)}::ng-deep .ng2-tag-input.active{border-color:var(--primary-400)!important}::ng-deep tag{background:var(--df-tag-bg)!important;color:var(--df-text)!important}::ng-deep tag:first-child{margin-left:.5rem!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DiscussionService }, { type: i2$1.UntypedFormBuilder }, { type: TelemetryUtilsService }, { type: ConfigService }, { type: DiscussUtilsService }]; }, propDecorators: { categoryId: [{
+                type: Input
+            }], topicData: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+
+/* tslint:enable */
+class DiscussHomeComponent {
+    constructor(router, route, discussionService, configService, telemetryUtils, navigationService) {
+        this.router = router;
+        this.route = route;
+        this.discussionService = discussionService;
+        this.configService = configService;
+        this.telemetryUtils = telemetryUtils;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.discussionList = [];
+        this.showStartDiscussionModal = false;
+        // categoryId: string;
+        this.isTopicCreator = false;
+        this.showLoader = false;
+        this.currentActivePage = 1;
+        this.pagination = Object.create({});
+        // Input parameters for infinite scroll
+        this.InfiniteScrollConfig = {
+            modalScrollDistance: 2,
+            modalScrollThrottle: 50
+        };
+        // Input parameters for infinite scroll
+        this.modalScrollDistance = -12;
+        this.modalScrollThrottle = 500;
+        this.scrollUpDistance = 5;
+        this.currentPage = 0;
+    }
+    ngOnInit() {
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
+        this.route.params.subscribe(params => {
+            this.configService.setCategoryId.subscribe((categoryIds) => {
+                this.routeParams = categoryIds;
+                // categoryIds = this.discussionService.getContext(CONTEXT_PROPS.cid)
+                categoryIds = this.categoryId ? this.categoryId : categoryIds;
+                this.getDiscussionList(categoryIds);
+            });
+            this.routeParams = params;
+            this.categoryId = this.discussionService.getContext(CONTEXT_PROPS.cid);
+            // this.getDiscussionList(_.get(this.routeParams, 'slug'));
+        });
+    }
+    /**
+    * @description - set the scroll container height
+    */
+    ngAfterViewChecked() {
+        if (this.elementView && this.elementView.nativeElement && !this.elementView.nativeElement.style.height) {
+            // the number 10 is just a random value to reduce the height of the parent container to the infinite scroll
+            this.elementView.nativeElement.style.height = (this.elementView.nativeElement.clientHeight - 10) + 'px';
+        }
+    }
+    navigateToDiscussionDetails(discussionData) {
+        const matchedTopic = _.find(this.telemetryUtils.getContext(), { type: 'Topic' });
+        if (matchedTopic) {
+            this.telemetryUtils.deleteContext(matchedTopic);
+        }
+        this.telemetryUtils.uppendContext({
+            id: _.get(discussionData, 'tid'),
+            type: 'Topic'
+        });
+        let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : '';
+        let input = { data: { url: `${routerSlug}${ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`, queryParams: {}, tid: discussionData.tid, title: discussionData.title }, action: CATEGORY_DETAILS };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ tid: discussionData.tid, title: discussionData.title, action: this.categoryHomeAction });
+    }
+    /**
+     * @description - To get all the topics
+     * @param - required cid as a slug
+     */
+    getDiscussionList(slug) {
+        this.showLoader = true;
+        const scrollIndex = this.pagination.currentPage ? this.pagination.currentPage : 1;
+        this.discussionService.getContextBasedTopic(slug, scrollIndex).subscribe(data => {
+            this.pagination = data.pagination;
+            this.showLoader = false;
+            this.isTopicCreator = _.get(data, 'privileges.topics:create') === true ? true : false;
+            this.discussionList = [...this.discussionList, ...(_.union(_.get(data, 'topics'), _.get(data, 'children')))];
+        }, error => {
+            this.showLoader = false;
+            // error code check
+            this.discussionService.showTrafficAlert(error);
+            // TODO: Toaster
+            console.log('error fetching topic list', error);
+        });
+    }
+    startDiscussion() {
+        this.showStartDiscussionModal = true;
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
+    }
+    closeModal(event) {
+        if (_.get(event, 'message') === 'success') {
+            this.discussionList = [];
+            this.pagination.currentPage = this.pagination.first.page;
+            this.getDiscussionList(_.get(this.routeParams, 'slug'));
+        }
+        this.showStartDiscussionModal = false;
+    }
+    /**
+     * @description - call the topic get api when scrolled down
+     */
+    onModalScrollDown() {
+        if (this.pagination.currentPage !== this.pagination.pageCount) {
+            this.pagination.currentPage = this.pagination.next.page;
+            this.getDiscussionList(_.get(this.routeParams, 'slug'));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussHomeComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: DiscussionService }, { token: ConfigService }, { token: TelemetryUtilsService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussHomeComponent, selector: "lib-discuss-home", inputs: { categoryId: "categoryId", categoryHomeAction: "categoryHomeAction" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "elementView", first: true, predicate: ["scrollContainerHeight"], descendants: true }], ngImport: i0, template: "<button *ngIf=\"isTopicCreator\" (click)=\"startDiscussion();logTelemetry($event)\" role=\"link\" tabindex=\"0\"\n    class=\"df-btn df-btn-normal df-btn-primary df-start-btn\" data-toggle=\"modal\" data-target=\"#myModal\" data-backdrop=\"static\" data-keyboard=\"false\"\n    id=\"start-discussion\">Start Discussion</button>\n<div *ngIf=\"discussionList && discussionList.length > 0\" class=\"topic-list-container\" id=\"topic-scroll\" #scrollContainerHeight>\n    <div [infiniteScrollContainer]=\"'.topic-list-container'\" infinite-scroll class=\"infinite-scroll\"\n        [scrollWindow]=\"false\" [infiniteScrollDistance]=\"InfiniteScrollConfig.modalScrollDistance\" [fromRoot]=\"true\"\n        [infiniteScrollThrottle]=\"InfiniteScrollConfig.modalScrollThrottle\" (scrolled)=\"onModalScrollDown()\">\n        <div *ngFor=\"let discussionData of discussionList\"\n            (click)=\"navigateToDiscussionDetails(discussionData);logTelemetry($event)\" id=\"topic-card\">\n            <lib-discuss-card [discussionData]=\"discussionData\"></lib-discuss-card>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"!(discussionList && discussionList.length > 0)\">\n    <div class=\"no-card-content\" id=\"topic-card\" tabindex=\"0\">\n        <div class=\"no-data-label\">No Data</div>\n        <div>\n            <span>&nbsp;</span>\n        </div>\n    </div>\n</ng-container>\n<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<lib-discuss-start [categoryId]=\"categoryId\" (close)=\"closeModal($event)\" *ngIf=\"showStartDiscussionModal\">\n</lib-discuss-start>", styles: [".df-start-btn{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiscussCardComponent, selector: "lib-discuss-card", inputs: ["discussionData"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }, { kind: "directive", type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: DiscussStartComponent, selector: "lib-discuss-start", inputs: ["categoryId", "topicData", "mode"], outputs: ["close"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-home', template: "<button *ngIf=\"isTopicCreator\" (click)=\"startDiscussion();logTelemetry($event)\" role=\"link\" tabindex=\"0\"\n    class=\"df-btn df-btn-normal df-btn-primary df-start-btn\" data-toggle=\"modal\" data-target=\"#myModal\" data-backdrop=\"static\" data-keyboard=\"false\"\n    id=\"start-discussion\">Start Discussion</button>\n<div *ngIf=\"discussionList && discussionList.length > 0\" class=\"topic-list-container\" id=\"topic-scroll\" #scrollContainerHeight>\n    <div [infiniteScrollContainer]=\"'.topic-list-container'\" infinite-scroll class=\"infinite-scroll\"\n        [scrollWindow]=\"false\" [infiniteScrollDistance]=\"InfiniteScrollConfig.modalScrollDistance\" [fromRoot]=\"true\"\n        [infiniteScrollThrottle]=\"InfiniteScrollConfig.modalScrollThrottle\" (scrolled)=\"onModalScrollDown()\">\n        <div *ngFor=\"let discussionData of discussionList\"\n            (click)=\"navigateToDiscussionDetails(discussionData);logTelemetry($event)\" id=\"topic-card\">\n            <lib-discuss-card [discussionData]=\"discussionData\"></lib-discuss-card>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"!(discussionList && discussionList.length > 0)\">\n    <div class=\"no-card-content\" id=\"topic-card\" tabindex=\"0\">\n        <div class=\"no-data-label\">No Data</div>\n        <div>\n            <span>&nbsp;</span>\n        </div>\n    </div>\n</ng-container>\n<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<lib-discuss-start [categoryId]=\"categoryId\" (close)=\"closeModal($event)\" *ngIf=\"showStartDiscussionModal\">\n</lib-discuss-start>", styles: [".df-start-btn{margin-bottom:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: DiscussionService }, { type: ConfigService }, { type: TelemetryUtilsService }, { type: NavigationServiceService }]; }, propDecorators: { categoryId: [{
+                type: Input
+            }], categoryHomeAction: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], elementView: [{
+                type: ViewChild,
+                args: ['scrollContainerHeight']
+            }] } });
+
+/* tslint:enable */
+class DiscussCategoryComponent {
+    constructor(discussService, configService, router, activatedRoute, telemetryUtils, navigationService) {
+        this.discussService = discussService;
+        this.configService = configService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.telemetryUtils = telemetryUtils;
+        this.navigationService = navigationService;
+        this.categories = [];
+        this.stateChange = new EventEmitter();
+        this.pageId = 0;
+        this.isTopicCreator = false;
+        this.showStartDiscussionModal = false;
+        this.showLoader = false;
+    }
+    ngOnInit() {
+        /** It will look for the queryParams, if back button is clicked,
+         * the queryParams will change and it will fetch the categories
+         * if there is no queryParams available, then it will fetch the default categories of the forumIds
+         */
+        this.telemetryUtils.setContext([]);
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.CATEGORY);
+        this.forumIds = this.categoryIds ? this.categoryIds : this.discussService.forumIds;
+        this.paramsSubscription = this.activatedRoute.queryParams.subscribe((params) => {
+            if (_.get(params, 'cid')) {
+                this.navigateToDiscussionPage(_.get(params, 'cid'));
+            }
+            else {
+                this.categories = [];
+                if (this.forumIds.length) {
+                    this.fetchAllAvailableCategories(this.forumIds);
+                }
+                else {
+                    this.fetchAllCategories();
+                }
+            }
+        });
+    }
+    fetchAllAvailableCategories(ids) {
+        this.showLoader = true;
+        ids.forEach((cid) => {
+            this.fetchCategory(cid).subscribe(data => {
+                this.showLoader = false;
+                this.categories.push(data);
+            }, error => {
+                // TODO: Toast error
+                // error code check
+                this.discussService.showTrafficAlert(error);
+                console.log('issue fetching category', error);
+                this.showLoader = false;
+            });
+        });
+    }
+    fetchAllCategories() {
+        this.showLoader = true;
+        this.discussService.fetchAllCategories().subscribe(data => {
+            this.showLoader = false;
+            this.categories = data;
+        }, error => {
+            // TODO: Toast error
+            // error code check
+            this.discussService.showTrafficAlert(error);
+            console.log('issue fetching category', error);
+            this.showLoader = false;
+        });
+    }
+    fetchCategory(cid) {
+        return this.discussService.fetchSingleCategoryDetails(cid);
+    }
+    /**
+     * It will fetch the children for each category click.
+     * if there is no children available the it will redirect to the topic list page
+     */
+    navigateToDiscussionPage(cid, slug) {
+        this.showLoader = true;
+        this.telemetryUtils.uppendContext({ id: cid, type: 'Category' });
+        this.discussService.fetchSingleCategoryDetails(cid).subscribe(response => {
+            this.showLoader = false;
+            this.categoryId = _.get(response, 'cid');
+            this.isTopicCreator = _.get(response, 'privileges.topics:create') === true ? true : false;
+            this.showStartDiscussionModal = false;
+            let input;
+            if (_.get(response, 'children').length > 0) {
+                this.router.navigate([], { relativeTo: this.activatedRoute.parent, queryParams: { cid: this.categoryId } });
+                // input = { data: { url: '', queryParams: { cid: this.categoryId } }, action: this.categoryAction}
+                // this.navigationService.navigate(input)
+                _.get(response, 'children').forEach(subCategoryData => {
+                    this.categories.push(subCategoryData);
+                });
+            }
+            else {
+                this.discussService.setContext(CONTEXT_PROPS.cid, this.categoryId);
+                this.configService.setCategoryid(this.categoryId);
+                let routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : '';
+                input = { data: { url: `${routerSlug}${ROUTES.CATEGORY}${this.categoryId}`, queryParams: {} }, action: CATEGORY_HOME, };
+                this.navigationService.navigate(input);
+                this.stateChange.emit({ action: this.categoryAction, categoryId: this.categoryId });
+            }
+        }, error => {
+            // error code check
+            this.discussService.showTrafficAlert(error);
+            this.showLoader = false;
+            // TODO: Toast error
+            console.log('issue fetching category', error);
+        });
+    }
+    startDiscussion() {
+        this.showStartDiscussionModal = true;
+    }
+    closeModal(event) {
+        this.showStartDiscussionModal = false;
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.CATEGORY);
+    }
+    ;
+    ngOnDestroy() {
+        if (this.paramsSubscription) {
+            this.paramsSubscription.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussCategoryComponent, deps: [{ token: DiscussionService }, { token: ConfigService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: TelemetryUtilsService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussCategoryComponent, selector: "lib-discuss-category", inputs: { categoryIds: "categoryIds", categoryAction: "categoryAction" }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n <button (click)=\"startDiscussion();logTelemetry($event)\" *ngIf=\"isTopicCreator\" class=\"df-btn df-btn-primary df-btn-normal mb-16\" id=\"start-discussion\">Start Discussion</button>\n  <div class=\"discuss-category-cards\">\n    <ng-container  *ngFor=\"let data of categories\">\n      <div (click)=\"navigateToDiscussionPage(data?.cid, data?.slug);logTelemetry($event)\" class=\"categories-card-content\" id=\"category-card\">\n      <lib-category-card [category]=\"data\" ></lib-category-card>\n      </div>\n    </ng-container>\n  </div>\n\n  <lib-discuss-start (close)=\"closeModal($event)\" [categoryId]=\"categoryId\" *ngIf=\"showStartDiscussionModal\" ></lib-discuss-start>\n", styles: [".discuss-category-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));grid-gap:1.5rem;margin-bottom:1.5rem;cursor:pointer;position:relative;z-index:unset}@media (max-width: 700px){.discuss-category-cards{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryCardComponent, selector: "lib-category-card", inputs: ["category"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }, { kind: "component", type: DiscussStartComponent, selector: "lib-discuss-start", inputs: ["categoryId", "topicData", "mode"], outputs: ["close"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-category', template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n <button (click)=\"startDiscussion();logTelemetry($event)\" *ngIf=\"isTopicCreator\" class=\"df-btn df-btn-primary df-btn-normal mb-16\" id=\"start-discussion\">Start Discussion</button>\n  <div class=\"discuss-category-cards\">\n    <ng-container  *ngFor=\"let data of categories\">\n      <div (click)=\"navigateToDiscussionPage(data?.cid, data?.slug);logTelemetry($event)\" class=\"categories-card-content\" id=\"category-card\">\n      <lib-category-card [category]=\"data\" ></lib-category-card>\n      </div>\n    </ng-container>\n  </div>\n\n  <lib-discuss-start (close)=\"closeModal($event)\" [categoryId]=\"categoryId\" *ngIf=\"showStartDiscussionModal\" ></lib-discuss-start>\n", styles: [".discuss-category-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));grid-gap:1.5rem;margin-bottom:1.5rem;cursor:pointer;position:relative;z-index:unset}@media (max-width: 700px){.discuss-category-cards{grid-template-columns:1fr}}\n"] }]
+        }], ctorParameters: function () { return [{ type: DiscussionService }, { type: ConfigService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: TelemetryUtilsService }, { type: NavigationServiceService }]; }, propDecorators: { categoryIds: [{
+                type: Input
+            }], categoryAction: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+/* tslint:enable */
+class DiscussTagsComponent {
+    constructor(discussionService, telemetryUtils, router, activatedRoute, configService, discussUtils, navigationService) {
+        this.discussionService = discussionService;
+        this.telemetryUtils = telemetryUtils;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.configService = configService;
+        this.discussUtils = discussUtils;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.showLoader = false;
+    }
+    ngOnInit() {
+        this.telemetryUtils.setContext([]);
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.TAGS);
+        this.cIds = this.configService.getCategories();
+        if (this.configService.hasContext()) {
+            this.getContextBasedTags(this.cIds.result);
+        }
+        else {
+            this.fetchAllTags();
+        }
+    }
+    fetchAllTags() {
+        this.showLoader = true;
+        this.discussionService.fetchAllTag().subscribe(data => {
+            this.showLoader = false;
+            this.filteredTags = _.get(data, 'tags');
+        }, error => {
+            this.showLoader = false;
+            // TODO: toaster
+            console.log('error fetching tags');
+        });
+    }
+    getContextBasedTags(cid) {
+        const req = {
+            cids: cid
+        };
+        this.showLoader = true;
+        this.discussionService.contextBasedTags(req).subscribe(data => {
+            this.showLoader = false;
+            this.filteredTags = _.get(data, 'result');
+        }, error => {
+            this.showLoader = false;
+            // TODO: toaster
+            console.log('error fetching tags');
+        });
+    }
+    getBgColor(tagTitle) {
+        const bgColor = this.discussUtils.stringToColor(tagTitle.toLowerCase());
+        const color = this.discussUtils.getContrast();
+        return { color, 'background-color': bgColor };
+    }
+    getAllDiscussions(tag) {
+        this.queryParam = tag.value;
+        const tagdata = {
+            tagname: ''
+        };
+        tagdata.tagname = tag.value;
+        this.queryParam = tagdata;
+        const routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : '';
+        const input = { data: { url: `${routerSlug}${ROUTES.TAG}tag-discussions`,
+                queryParams: this.queryParam, tagName: this.queryParam.tagName }, action: 'tagsAll' };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ action: TAG_ALL_DISCUSS, title: tag.value, tid: 'sd' });
+        // tslint:disable-next-line: max-line-length
+        // this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TAG}tag-discussions`], { queryParams: this.queryParam });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussTagsComponent, deps: [{ token: DiscussionService }, { token: TelemetryUtilsService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: ConfigService }, { token: DiscussUtilsService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussTagsComponent, selector: "lib-discuss-tags", outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<div class=\"flex flex-1 margin-top-m flex-column discussion-tag-content\">\n  <ng-container *ngIf=\"filteredTags && filteredTags.length > 0\">\n    <div class=\"tags\">\n      <div *ngFor=\"let tag of filteredTags \" class=\"tag\" [ngStyle]=\"getBgColor(tag.value)\"\n        (click)=\"getAllDiscussions(tag)\">\n        <!-- Can enable random colors from below commented code -->\n        <!-- <div *ngFor=\"let tag of filteredTags | pipeFilter:'score,value':query\"\n        class=\"tag text-capitalize\" [ngStyle]=\"getBgColor(tag.value)\"> -->\n        <span class=\"margin-left-m\">{{tag.value}}</span>\n        <span class=\"ws-mat-default-text count\">{{tag.score}}</span>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\u200B\n\u200B\n<div class=\"tag-empty-container\" *ngIf=\"!showLoader && !filteredTags.length\">\n  <div class=\"tag-empty-img\"><img src=\"./assets/discussion-ui/images/empty.svg\" alt=\"empty image\"></div>\n  <label class=\"tag-empty-label\">No tags Available !</label>\n  <p class=\"tag-empty-text\">Stay tuned ! we will be updating our tags library and add them here</p>\n</div>\n", styles: ["::ng-deep:root{--df-tag-empty-bg:var(--df-common-bg)}.sb-search-box{display:flex;align-items:center;border:0px}.sb-search-box .sb-search-input{width:100%;font-size:.875rem;min-height:2rem;outline:0;border-radius:0;line-height:normal;background:none;padding:1em;border-radius:.25rem;border:0px}.search-icon{width:1.125rem;height:1.125rem;margin:1rem 0rem 1rem 1rem}.sb-search-box .input-div{border-radius:1.5rem;background:var(--white);display:flex;align-items:center;border:.0625rem solid var(--gray-100);width:100%}.sb-search-box .input-div:hover{border-color:var(--primary)}.tag{cursor:pointer}@media (max-width: 768px){.discuss-tags{flex-direction:column}}.tag-empty-container{background:var(--white);background:var(--df-tag-empty-bg);color:var(--df-text);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:1.5rem;height:100%;border-radius:.25rem;min-height:28.125rem}.tag-empty-container .tag-empty-img{width:100%;max-width:13.875rem}.tag-empty-container .tag-empty-label{font-size:.875rem;font-weight:700;margin:1.5rem 0 .75rem;color:var(--black)!important}.tag-empty-container .tag-empty-text{font-size:.875rem;font-weight:400;text-align:center;color:var(--black)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-tags', template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<div class=\"flex flex-1 margin-top-m flex-column discussion-tag-content\">\n  <ng-container *ngIf=\"filteredTags && filteredTags.length > 0\">\n    <div class=\"tags\">\n      <div *ngFor=\"let tag of filteredTags \" class=\"tag\" [ngStyle]=\"getBgColor(tag.value)\"\n        (click)=\"getAllDiscussions(tag)\">\n        <!-- Can enable random colors from below commented code -->\n        <!-- <div *ngFor=\"let tag of filteredTags | pipeFilter:'score,value':query\"\n        class=\"tag text-capitalize\" [ngStyle]=\"getBgColor(tag.value)\"> -->\n        <span class=\"margin-left-m\">{{tag.value}}</span>\n        <span class=\"ws-mat-default-text count\">{{tag.score}}</span>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\u200B\n\u200B\n<div class=\"tag-empty-container\" *ngIf=\"!showLoader && !filteredTags.length\">\n  <div class=\"tag-empty-img\"><img src=\"./assets/discussion-ui/images/empty.svg\" alt=\"empty image\"></div>\n  <label class=\"tag-empty-label\">No tags Available !</label>\n  <p class=\"tag-empty-text\">Stay tuned ! we will be updating our tags library and add them here</p>\n</div>\n", styles: ["::ng-deep:root{--df-tag-empty-bg:var(--df-common-bg)}.sb-search-box{display:flex;align-items:center;border:0px}.sb-search-box .sb-search-input{width:100%;font-size:.875rem;min-height:2rem;outline:0;border-radius:0;line-height:normal;background:none;padding:1em;border-radius:.25rem;border:0px}.search-icon{width:1.125rem;height:1.125rem;margin:1rem 0rem 1rem 1rem}.sb-search-box .input-div{border-radius:1.5rem;background:var(--white);display:flex;align-items:center;border:.0625rem solid var(--gray-100);width:100%}.sb-search-box .input-div:hover{border-color:var(--primary)}.tag{cursor:pointer}@media (max-width: 768px){.discuss-tags{flex-direction:column}}.tag-empty-container{background:var(--white);background:var(--df-tag-empty-bg);color:var(--df-text);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:1.5rem;height:100%;border-radius:.25rem;min-height:28.125rem}.tag-empty-container .tag-empty-img{width:100%;max-width:13.875rem}.tag-empty-container .tag-empty-label{font-size:.875rem;font-weight:700;margin:1.5rem 0 .75rem;color:var(--black)!important}.tag-empty-container .tag-empty-text{font-size:.875rem;font-weight:400;text-align:center;color:var(--black)!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DiscussionService }, { type: TelemetryUtilsService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: ConfigService }, { type: DiscussUtilsService }, { type: NavigationServiceService }]; }, propDecorators: { stateChange: [{
+                type: Output
+            }] } });
+
+/* tslint:enable */
+class MyDiscussionComponent {
+    constructor(discussService, configService, router, telemetryUtils) {
+        this.discussService = discussService;
+        this.configService = configService;
+        this.router = router;
+        this.telemetryUtils = telemetryUtils;
+        this.discussionList = []; // this is for posts
+        this.currentFilter = 'timestamp';
+        this.userInitial = '';
+        this.showLoader = false;
+        this.pagination = Object.create({});
+        // Input parameters for infinite scroll
+        this.InfiniteScrollConfig = {
+            modalScrollDistance: 2,
+            modalScrollThrottle: 50
+        };
+    }
+    /** To fetch user details */
+    fetchUserProfile(userName) {
+        this.discussService.fetchUserProfile(userName).subscribe(response => {
+            this.showLoader = false;
+            console.log(response);
+            this.data = response;
+            if (_.get(this.data, 'posts')) {
+                this.discussionList = _.get(this.data, 'posts').filter(p => (p.isMainPost === true));
+            }
+            // if (this.configSvc.userProfile) {
+            //   localStorage.setItem(this.configSvc.userProfile.userId, this.profilePhoto);
+            // }
+        }, error => {
+            this.showLoader = false;
+            // error code check
+            this.discussService.showTrafficAlert(error);
+            // TODO: Toaster
+            console.log('error fetching user details');
+        });
+    }
+    ngOnInit() {
+        this.telemetryUtils.setContext([]);
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.MY_DISCUSSION);
+        this.filter(this.currentFilter, false);
+    }
+    /**
+     * @description - set the scroll container height
+     */
+    ngAfterViewChecked() {
+        if (this.elementView && this.elementView.nativeElement && !this.elementView.nativeElement.style.height) {
+            // the number 10 is just a random value to reduce the height of the parent container to the infinite scroll
+            this.elementView.nativeElement.style.height = (this.elementView.nativeElement.clientHeight - 10) + 'px';
+        }
+    }
+    /**
+     * @param  {string|'timestamp'|'best'|'saved'|'watched'|'upvoted'|'downvoted'} key
+     * @param  {boolean} resetpagination - its used to reset the pagination value based on the filter data
+     */
+    filter(key, resetpagination) {
+        this.currentFilter = key;
+        if (key) {
+            // reset the currentpage value to 1 and reset the discussionList data based on the respective api response when the filter is changed
+            if (resetpagination) {
+                this.discussionList = [];
+                this.pagination.currentPage = 1;
+            }
+            // setting the current page index 
+            const scrollIndex = this.pagination.currentPage ? this.pagination.currentPage : 1;
+            this.showLoader = true;
+            switch (key) {
+                case 'timestamp':
+                    this.getRecentTopics(scrollIndex);
+                    break;
+                case 'best':
+                    // this.discussionList = _.uniqBy(this.data.bestPosts, 'tid');
+                    this.discussService.fetchBestPost(scrollIndex).subscribe(result => {
+                        if (result) {
+                            const bestPost = result['posts'].filter(p => (p.isMainPost === true));
+                            this.discussionList = [...this.discussionList, ...bestPost];
+                            this.pagination = _.get(result, 'pagination');
+                            this.showLoader = false;
+                        }
+                        else {
+                            this.showLoader = false;
+                            this.discussionList = [];
+                        }
+                    }, error => {
+                        // error code check
+                        this.discussService.showTrafficAlert(error);
+                    });
+                    break;
+                case 'saved':
+                    this.discussService.fetchSaved(scrollIndex).subscribe(response => {
+                        if (response) {
+                            // this.discussionList = _.uniqBy(response['posts'], 'tid');
+                            this.discussionList = [...this.discussionList, ...response['posts']];
+                            this.pagination = _.get(response, 'pagination');
+                            this.showLoader = false;
+                        }
+                        else {
+                            this.showLoader = false;
+                            this.discussionList = [];
+                        }
+                    }, 
+                    // tslint:disable-next-line
+                    (error) => {
+                        // error code check
+                        this.discussService.showTrafficAlert(error);
+                        this.discussionList = [];
+                    });
+                    break;
+                case 'watched':
+                    this.showLoader = false;
+                    this.discussionList = [];
+                    break;
+                case 'upvoted':
+                    this.discussService.fetchUpvoted(scrollIndex).subscribe(response => {
+                        if (response) {
+                            // this.discussionList = _.uniqBy(response['posts'], 'tid');
+                            const upvoted = response['posts'].filter(p => (p.isMainPost === true));
+                            this.pagination = _.get(response, 'pagination');
+                            this.discussionList = [...this.discussionList, ...upvoted];
+                            this.showLoader = false;
+                        }
+                        else {
+                            this.showLoader = false;
+                            this.discussionList = [];
+                        }
+                    }, 
+                    // tslint:disable-next-line
+                    (error) => {
+                        this.discussionList = [];
+                        // error code check
+                        this.discussService.showTrafficAlert(error);
+                    });
+                    break;
+                case 'downvoted':
+                    this.discussService.fetchDownvoted(scrollIndex).subscribe(response => {
+                        if (response) {
+                            // this.discussionList = _.uniqBy(response['posts'], 'tid');
+                            const downvoted = response['posts'].filter(p => (p.isMainPost === true));
+                            this.discussionList = [...this.discussionList, ...downvoted];
+                            this.pagination = _.get(response, 'pagination');
+                            this.showLoader = false;
+                        }
+                        else {
+                            this.showLoader = false;
+                            this.discussionList = [];
+                        }
+                    }, 
+                    // tslint:disable-next-line
+                    (error) => {
+                        this.discussionList = [];
+                        // error code check
+                        this.discussService.showTrafficAlert(error);
+                    });
+                    break;
+                default:
+                    // this.discussionList = _.uniqBy(this.data.latestPosts, 'tid');
+                    this.pagination = _.get(this.data, 'pagination');
+                    this.discussionList = _.get(this.data, 'latestPosts');
+                    break;
+            }
+        }
+    }
+    navigateToDiscussionDetails(discussionData) {
+        console.log('discussionData', discussionData);
+        const slug = _.get(discussionData, 'slug') || _.get(discussionData, 'topic.slug');
+        this.router.navigate([`${this.configService.getRouterSlug()}${ROUTES.TOPIC}${slug}`]);
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.MY_DISCUSSION);
+    }
+    /**
+     * @description - getting the recent post data
+     * @param  {number} scrollIndex
+     */
+    getRecentTopics(scrollIndex) {
+        const userId = this.discussService.userId;
+        // const userSlug = this.discussService.userDetails.userslug;
+        combineLatest([
+            this.discussService.fetchUserProfile(userId),
+            this.discussService.fetchRecentPost(scrollIndex)
+        ]).subscribe(result => {
+            console.log('getRecentTopics', result);
+            this.showLoader = false;
+            this.data = _.merge(result[0], result[1]);
+            this.discussionList = [...this.discussionList, ...(_.get(this.data, 'posts'))];
+            this.discussionList = this.discussionList.filter(p => (p.isMainPost === true));
+            this.pagination = _.get(this.data, 'pagination');
+        }, error => {
+            this.showLoader = false;
+            console.log(error);
+        });
+    }
+    /**
+     * @description - call the topic get api when scrolled down and setting the limit of API Call
+     */
+    onModalScrollDown() {
+        if (this.pagination.currentPage !== this.pagination.pageCount) {
+            this.pagination.currentPage = this.pagination.next.page;
+            const resetpagination = false;
+            // using settimeout to avoid the function call before getting the pagination response from api, 
+            // because the api is called twice with the same page index
+            setTimeout(() => {
+                this.filter(this.currentFilter, resetpagination);
+            }, 800);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MyDiscussionComponent, deps: [{ token: DiscussionService }, { token: ConfigService }, { token: i1.Router }, { token: TelemetryUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MyDiscussionComponent, selector: "lib-my-discussion", viewQueries: [{ propertyName: "elementView", first: true, predicate: ["scrollContainerHeight"], descendants: true }], ngImport: i0, template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n\n<div class=\"profileCard\">\n  <div class=\"profile-card-content\">\n    <div class=\"profile-header-image\">\n      <div class=\"box-text\">\n        <span class=\"box-label\"></span>{{ data?.username | splitInitials }}\n      </div>\n    </div>\n    <div>\n      <div class=\"profile-label name\" [innerHTML]=\"data?.username\"></div>\n      <div class=\"profile-label department\">{{ department }}</div>\n      <div class=\"profile-label location\">{{ location }}</div>\n      <div class=\"profile-label email\">{{ data?.email || data?.username }}</div>\n      <ng-container>\n        <div class=\"my-discuss-topics\">\n          <div class=\"my-discuss-topics__content\">\n            <div class=\"my-discuss-label\">\n              <span class=\"number\">{{ data?.topiccount || 0 }}</span>\n              Discussions\n            </div>\n            <div class=\"post-count-area my-discuss-label\">\n              <span class=\"number\">{{ data?.postcount || 0 }}</span>\n              Posts\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <!-- Enable lated when other user can visit your profile -->\n            <!-- <span class=\"noocoments\" mat-card-subtitle>Last online {{data?.lastonline | pipeRelativeTime}}</span> -->\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-container>\n  <div class=\"recent-tabs\">\n    <div class=\"tabs-content\">\n      <div class=\"tabs-filter\">\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'timestamp',\n            'ws-mat-accent-border font-medium': currentFilter !== 'timestamp'\n          }\" (click)=\"filter('timestamp', true); logTelemetry($event)\" id=\"recent-post\">\n          Recent posts\n        </a>\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'best',\n            'ws-mat-accent-border font-medium': currentFilter !== 'best'\n          }\" (click)=\"filter('best', true); logTelemetry($event)\" id=\"best-post\">\n          Best posts\n        </a>\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'saved',\n            'ws-mat-accent-border font-medium': currentFilter !== 'saved'\n          }\" (click)=\"filter('saved', true); logTelemetry($event)\" id=\"saved-post\">\n          Saved posts\n        </a>\n        <!-- <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option \" [ngClass]=\"{'ws-mat-accent-border-active' : currentFilter === 'watched',\n                                            'ws-mat-accent-border font-medium':currentFilter !== 'watched'}\" mat-button\n            (click)=\"filter('watched')\">\n            Watched </a> -->\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'upvoted',\n            'ws-mat-accent-border font-medium': currentFilter !== 'upvoted'\n          }\" (click)=\"filter('upvoted', true); logTelemetry($event)\" id=\"upvoted-post\">\n          Upvoted\n        </a>\n\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'downvoted',\n            'ws-mat-accent-border font-medium': currentFilter !== 'downvoted'\n          }\" (click)=\"filter('downvoted', true); logTelemetry($event)\" id=\"downvoted-post\">\n          Downvoted\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div *ngIf=\"discussionList && discussionList.length > 0\" class=\"topic-list-container\" id=\"topic-scroll\"\n  #scrollContainerHeight>\n  <!--infinite scroll-->\n  <div [infiniteScrollContainer]=\"'.topic-list-container'\" infinite-scroll class=\"infinite-scroll\"\n    [scrollWindow]=\"false\" [infiniteScrollDistance]=\"InfiniteScrollConfig.modalScrollDistance\" [fromRoot]=\"true\"\n    [infiniteScrollThrottle]=\"InfiniteScrollConfig.modalScrollThrottle\" (scrolled)=\"onModalScrollDown()\">\n    <ng-container *ngFor=\"let data of discussionList\">\n      <div (click)=\"navigateToDiscussionDetails(data); logTelemetry($event)\" id=\"discuss-card\">\n        <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<ng-container *ngIf=\"!(discussionList && discussionList.length > 0)\">\n  <div class=\"no-card-content\" tabindex=\"0\">\n    <div class=\"no-data-label\">No Data</div>\n    <div>\n      <span>&nbsp;</span>\n    </div>\n  </div>\n</ng-container>", styles: ["::ng-deep:root{--df-box-text:var(--white);--df-profile-bg: var(--primary-400)}.profileCard{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:0;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;width:auto}.profileCard .profile-card-content{display:flex;flex-wrap:wrap}.profileCard .profile-card-content .profile-header-image{display:flex;justify-content:center;align-items:center;width:100%;border-radius:.25rem;max-width:9.5rem;height:8.4375rem;border:.0625rem solid var(--gray-100);margin-right:1.5rem;background:var(--df-profile-bg);text-align:center}.profileCard .profile-card-content .profile-header-image .box-text{font-size:4rem;color:var(--df-box-text);text-transform:uppercase}.profileCard .profile-card-content .profile-header-image .box-text .box-label{color:var(--white);font-size:1rem;line-height:.75rem;letter-spacing:.2625px;text-transform:uppercase}.profileCard .profile-card-content .profile-label{font-weight:700;margin-bottom:.5rem;font-size:.875rem}.profileCard .profile-card-content .name{font-size:1rem}.profileCard .profile-card-content .my-discuss-topics{font-size:.875rem;margin:1rem 0;font-weight:600}.profileCard .profile-card-content .my-discuss-topics__content{display:flex}.profileCard .profile-card-content .my-discuss-topics__content .my-discussion-label{margin:0 .5rem}.profileCard .profile-card-content .my-discuss-topics__content .my-discussion-label .number{color:var(--primary-300)}.profileCard .profile-card-content .my-discuss-topics__content .post-count-area{margin-left:2rem}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiscussCardComponent, selector: "lib-discuss-card", inputs: ["discussionData"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }, { kind: "directive", type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: SplitInitialsPipe, name: "splitInitials" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MyDiscussionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-my-discussion', template: "<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n\n<div class=\"profileCard\">\n  <div class=\"profile-card-content\">\n    <div class=\"profile-header-image\">\n      <div class=\"box-text\">\n        <span class=\"box-label\"></span>{{ data?.username | splitInitials }}\n      </div>\n    </div>\n    <div>\n      <div class=\"profile-label name\" [innerHTML]=\"data?.username\"></div>\n      <div class=\"profile-label department\">{{ department }}</div>\n      <div class=\"profile-label location\">{{ location }}</div>\n      <div class=\"profile-label email\">{{ data?.email || data?.username }}</div>\n      <ng-container>\n        <div class=\"my-discuss-topics\">\n          <div class=\"my-discuss-topics__content\">\n            <div class=\"my-discuss-label\">\n              <span class=\"number\">{{ data?.topiccount || 0 }}</span>\n              Discussions\n            </div>\n            <div class=\"post-count-area my-discuss-label\">\n              <span class=\"number\">{{ data?.postcount || 0 }}</span>\n              Posts\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <!-- Enable lated when other user can visit your profile -->\n            <!-- <span class=\"noocoments\" mat-card-subtitle>Last online {{data?.lastonline | pipeRelativeTime}}</span> -->\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-container>\n  <div class=\"recent-tabs\">\n    <div class=\"tabs-content\">\n      <div class=\"tabs-filter\">\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'timestamp',\n            'ws-mat-accent-border font-medium': currentFilter !== 'timestamp'\n          }\" (click)=\"filter('timestamp', true); logTelemetry($event)\" id=\"recent-post\">\n          Recent posts\n        </a>\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'best',\n            'ws-mat-accent-border font-medium': currentFilter !== 'best'\n          }\" (click)=\"filter('best', true); logTelemetry($event)\" id=\"best-post\">\n          Best posts\n        </a>\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'saved',\n            'ws-mat-accent-border font-medium': currentFilter !== 'saved'\n          }\" (click)=\"filter('saved', true); logTelemetry($event)\" id=\"saved-post\">\n          Saved posts\n        </a>\n        <!-- <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option \" [ngClass]=\"{'ws-mat-accent-border-active' : currentFilter === 'watched',\n                                            'ws-mat-accent-border font-medium':currentFilter !== 'watched'}\" mat-button\n            (click)=\"filter('watched')\">\n            Watched </a> -->\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'upvoted',\n            'ws-mat-accent-border font-medium': currentFilter !== 'upvoted'\n          }\" (click)=\"filter('upvoted', true); logTelemetry($event)\" id=\"upvoted-post\">\n          Upvoted\n        </a>\n\n        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{\n            'tabs-active': currentFilter === 'downvoted',\n            'ws-mat-accent-border font-medium': currentFilter !== 'downvoted'\n          }\" (click)=\"filter('downvoted', true); logTelemetry($event)\" id=\"downvoted-post\">\n          Downvoted\n        </a>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div *ngIf=\"discussionList && discussionList.length > 0\" class=\"topic-list-container\" id=\"topic-scroll\"\n  #scrollContainerHeight>\n  <!--infinite scroll-->\n  <div [infiniteScrollContainer]=\"'.topic-list-container'\" infinite-scroll class=\"infinite-scroll\"\n    [scrollWindow]=\"false\" [infiniteScrollDistance]=\"InfiniteScrollConfig.modalScrollDistance\" [fromRoot]=\"true\"\n    [infiniteScrollThrottle]=\"InfiniteScrollConfig.modalScrollThrottle\" (scrolled)=\"onModalScrollDown()\">\n    <ng-container *ngFor=\"let data of discussionList\">\n      <div (click)=\"navigateToDiscussionDetails(data); logTelemetry($event)\" id=\"discuss-card\">\n        <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<lib-app-loader *ngIf=\"showLoader\"></lib-app-loader>\n<ng-container *ngIf=\"!(discussionList && discussionList.length > 0)\">\n  <div class=\"no-card-content\" tabindex=\"0\">\n    <div class=\"no-data-label\">No Data</div>\n    <div>\n      <span>&nbsp;</span>\n    </div>\n  </div>\n</ng-container>", styles: ["::ng-deep:root{--df-box-text:var(--white);--df-profile-bg: var(--primary-400)}.profileCard{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:0;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;width:auto}.profileCard .profile-card-content{display:flex;flex-wrap:wrap}.profileCard .profile-card-content .profile-header-image{display:flex;justify-content:center;align-items:center;width:100%;border-radius:.25rem;max-width:9.5rem;height:8.4375rem;border:.0625rem solid var(--gray-100);margin-right:1.5rem;background:var(--df-profile-bg);text-align:center}.profileCard .profile-card-content .profile-header-image .box-text{font-size:4rem;color:var(--df-box-text);text-transform:uppercase}.profileCard .profile-card-content .profile-header-image .box-text .box-label{color:var(--white);font-size:1rem;line-height:.75rem;letter-spacing:.2625px;text-transform:uppercase}.profileCard .profile-card-content .profile-label{font-weight:700;margin-bottom:.5rem;font-size:.875rem}.profileCard .profile-card-content .name{font-size:1rem}.profileCard .profile-card-content .my-discuss-topics{font-size:.875rem;margin:1rem 0;font-weight:600}.profileCard .profile-card-content .my-discuss-topics__content{display:flex}.profileCard .profile-card-content .my-discuss-topics__content .my-discussion-label{margin:0 .5rem}.profileCard .profile-card-content .my-discuss-topics__content .my-discussion-label .number{color:var(--primary-300)}.profileCard .profile-card-content .my-discuss-topics__content .post-count-area{margin-left:2rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: DiscussionService }, { type: ConfigService }, { type: i1.Router }, { type: TelemetryUtilsService }]; }, propDecorators: { elementView: [{
+                type: ViewChild,
+                args: ['scrollContainerHeight']
+            }] } });
+
+const MSGS = {
+    deletePost: `Are you sure you want to delete this Post? This can't be undone.`,
+    deleteTopic: `Are you sure you want to delete this topic? Your action cannot be undone.`
+};
+class DiscussionDetailsComponent {
+    constructor(route, discussionService, configService, formBuilder, router, telemetryUtils, renderer, location, navigationService) {
+        this.route = route;
+        this.discussionService = discussionService;
+        this.configService = configService;
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.telemetryUtils = telemetryUtils;
+        this.renderer = renderer;
+        this.location = location;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.currentActivePage = 1;
+        this.currentFilter = 'timestamp'; // 'recent
+        this.pager = {};
+        this.fetchSingleCategoryLoader = false;
+        this.editMode = false;
+        this.updatedPost = false;
+        this.showEditTopicModal = false;
+        this.dropdownContent = true;
+        this.showLoader = false;
+        /**
+         * @description - It will check for the outside click while kebab menu is in open mode.
+         */
+        this.renderer.listen('window', 'click', (e) => {
+            // tslint:disable-next-line:no-string-literal
+            if (e.target['id'] !== 'group-actions') {
+                this.dropdownContent = true;
+            }
+        });
+    }
+    ngOnInit() {
+        this.initializeFormFiled();
+        if (this.widget) {
+            this.fetchSingleCategoryLoader = true;
+        }
+        if (!this.topicId && !this.slug) {
+            this.route.params.subscribe(params => {
+                this.routeParams = params;
+                this.slug = _.get(this.routeParams, 'slug');
+                this.topicId = _.get(this.routeParams, 'topicId');
+                this.refreshPostData(this.currentActivePage);
+                // this.getRealtedDiscussion(this.cid)
+            });
+        }
+        else {
+            this.refreshPostData(this.currentActivePage);
+            // this.getRealtedDiscussion(this.cid)
+        }
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.DETAILS);
+    }
+    // tslint:disable-next-line: use-life-cycle-interface
+    ngOnChanges() {
+        if (!this.topicId && !this.slug) {
+            this.route.params.subscribe(params => {
+                this.routeParams = params;
+                this.slug = _.get(this.routeParams, 'slug');
+                this.topicId = _.get(this.routeParams, 'topicId');
+                this.refreshPostData(this.currentActivePage);
+                // this.getRealtedDiscussion(this.cid)
+            });
+        }
+        else {
+            this.refreshPostData(this.currentActivePage);
+            // this.getRealtedDiscussion(this.cid)
+        }
+    }
+    // new method
+    acceptData(discuss) {
+        // debugger
+        const matchedTopic = _.find(this.telemetryUtils.getContext(), { type: 'Topic' });
+        if (matchedTopic) {
+            this.telemetryUtils.deleteContext(matchedTopic);
+        }
+        this.telemetryUtils.uppendContext({
+            id: _.get(discuss, 'tid'),
+            type: 'Topic'
+        });
+        const slug = _.trim(_.get(discuss, 'slug'));
+        const input = {
+            data: { url: `${this.configService.getRouterSlug()}${ROUTES.TOPIC}${slug}`, queryParams: {} },
+            action: CATEGORY_DETAILS
+        };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ action: CATEGORY_DETAILS, title: discuss.title, tid: discuss.tid });
+    }
+    initializeFormFiled() {
+        this.postAnswerForm = this.formBuilder.group({
+            answer: [],
+        });
+        this.UpdatePostAnswerForm = this.formBuilder.group({
+            updatedAnswer: [],
+        });
+        this.replyForm = this.formBuilder.group({
+            reply: []
+        });
+    }
+    async refreshPostData(page) {
+        if (this.currentFilter === 'timestamp') {
+            this.discussionService.fetchTopicById(this.topicId, this.slug, page).subscribe((data) => {
+                this.appendResponse(data);
+                this.showLoader = true;
+            }, (err) => {
+                // error code check
+                this.discussionService.showTrafficAlert(err);
+                console.log('Error in fetching topics');
+                // toast message
+                // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+            });
+        }
+        else {
+            this.discussionService.fetchTopicByIdSort(this.topicId, 'voted', page).subscribe((data) => {
+                this.appendResponse(data);
+                this.showLoader = true;
+            }, (err) => {
+                // error code check
+                this.discussionService.showTrafficAlert(err);
+                console.log('Error in fetching topics');
+            });
+        }
+    }
+    appendResponse(data) {
+        this.data = data;
+        this.paginationData = _.get(data, 'pagination');
+        // TODO: After updating the nodebb version to v1.18.6 or above. Remove the fallback after 2/3 releases.
+        this.mainUid = _.get(data, 'loggedInUser.uid') || _.get(data, 'privileges.uid');
+        this.categoryId = _.get(data, 'cid');
+        this.topicId = _.get(data, 'tid');
+    }
+    setPagination() {
+        this.pager = {
+            startIndex: this.paginationData.first.page,
+            endIndex: this.paginationData.last.page,
+            pages: this.paginationData.pages,
+            currentPage: this.paginationData.currentPage,
+            totalPage: this.paginationData.pageCount,
+        };
+    }
+    upvote(discuss) {
+        const req = {
+            delta: 1,
+        };
+        this.processVote(discuss, req);
+    }
+    downvote(discuss) {
+        const req = {
+            delta: -1,
+        };
+        this.processVote(discuss, req);
+    }
+    async processVote(discuss, req) {
+        if (discuss && discuss.uid) {
+            this.discussionService.votePost(discuss.pid, req).subscribe(() => {
+                // toast
+                // this.openSnackbar(this.toastSuccess.nativeElement.value);
+                this.postAnswerForm.reset();
+                this.refreshPostData(this.currentActivePage);
+            }, (err) => {
+                // error code check
+                this.discussionService.showTrafficAlert(err);
+                // toast
+                // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+            });
+        }
+    }
+    bookmark(discuss) {
+        this.discussionService.bookmarkPost(discuss.pid).subscribe(data => {
+            // toast
+            // this.openSnackbar('Bookmark added successfully!');
+            this.refreshPostData(this.currentActivePage);
+        }, (err) => {
+            // error code check
+            this.discussionService.showTrafficAlert(err);
+            // toast
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+        });
+    }
+    unBookMark(discuss) {
+        this.discussionService.deleteBookmarkPost(discuss.pid).subscribe(data => {
+            // toast
+            this.refreshPostData(this.currentActivePage);
+        }, (err) => {
+            // error code check
+            this.discussionService.showTrafficAlert(err);
+            // toast
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+        });
+    }
+    deleteVote(discuss) {
+        this.discussionService.deleteVotePost(discuss.pid).subscribe(data => {
+            // toast
+            this.refreshPostData(this.currentActivePage);
+        }, (err) => {
+            // error code check
+            this.discussionService.showTrafficAlert(err);
+            // toast
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+        });
+    }
+    postReply(replyContent, post) {
+        const req = {
+            content: replyContent,
+        };
+        this.postAnswerForm.controls['answer'].setValue('');
+        if (post && post.tid) {
+            this.discussionService.replyPost(post.tid, req).subscribe(() => {
+                // toast
+                // this.openSnackbar('Your reply was saved succesfuly!');
+                // this.fetchNewData = true;
+                this.refreshPostData(this.currentActivePage);
+            }, (err) => {
+                // error code check
+                this.discussionService.showTrafficAlert(err);
+                // toast
+                // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+            });
+        }
+    }
+    postCommentsReply(replyContent, post) {
+        const req = {
+            content: replyContent,
+            toPid: post.pid,
+        };
+        if (post && post.tid) {
+            this.discussionService.replyPost(post.tid, req).subscribe(() => {
+                // toast
+                // this.openSnackbar('Your reply was saved succesfuly!');
+                this.refreshPostData(this.currentActivePage);
+            }, (err) => {
+                // error code check
+                this.discussionService.showTrafficAlert(err);
+                // toast
+                // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError);
+            });
+        }
+    }
+    confirmDelete(pid) {
+        if (window.confirm(MSGS.deletePost)) {
+            this.deletePost(pid);
+        }
+    }
+    filter(key) {
+        if (key) {
+            this.currentFilter = key;
+            this.refreshPostData(this.currentActivePage);
+        }
+    }
+    navigateWithPage(page) {
+        if (page !== this.currentActivePage) {
+            this.router.navigate([`${this.configService.getRouterSlug()}${ROUTES.CATEGORY} ${this.topicId}`], { queryParams: { page }, queryParamsHandling: "merge" });
+        }
+    }
+    showError(meta) {
+        if (meta) {
+            return true;
+        }
+        return false;
+    }
+    getBgColor(tagTitle) {
+        const bgColor = this.stringToColor(tagTitle.toLowerCase());
+        const color = this.getContrast();
+        return { color, 'background-color': bgColor };
+    }
+    stringToColor(title) {
+        let hash = 0;
+        for (let i = 0; i < title.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = title.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        // tslint:disable-next-line: prefer-template
+        const colour = 'hsl(' + hue + ',100%,30%)';
+        return colour;
+    }
+    getContrast() {
+        return 'rgba(255, 255, 255, 80%)';
+    }
+    logTelemetry(event, data) {
+        const pid = _.get(data, 'pid') || _.get(data, 'mainPid') ?
+            { id: _.get(data, 'pid') || _.get(data, 'mainPid'), type: 'Post' } : {};
+        this.telemetryUtils.uppendContext(pid);
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.DETAILS);
+    }
+    onEditMode(UpdatePostStatus) {
+        if (UpdatePostStatus) {
+            this.editMode = true;
+        }
+        else {
+            this.editMode = false;
+        }
+    }
+    getRealtimePost(post, index) {
+        this.editMode = true;
+        this.editContentIndex = index;
+        this.contentPost = _.get(post, 'content').replace(/<[^>]*>/g, '');
+        post.toggle = false;
+    }
+    updatePost(updatedPostContent, pid) {
+        this.editMode = false;
+        const req = {
+            content: updatedPostContent,
+            title: '',
+            tags: [],
+            uid: this.mainUid
+        };
+        this.discussionService.editPost(pid, req).subscribe((data) => {
+            // TODO: Success toast
+            this.refreshPostData(this.currentActivePage);
+        }, (error) => {
+            // error code check
+            this.discussionService.showTrafficAlert(error);
+            // TODO: error toast
+            console.log('e', error);
+        });
+        console.log(pid);
+    }
+    deletePost(postId) {
+        this.discussionService.deletePost(postId, this.mainUid).subscribe((data) => {
+            // TODO: Success toast
+            this.refreshPostData(this.currentActivePage);
+        }, (error) => {
+            // error code check
+            this.discussionService.showTrafficAlert(error);
+            // TODO: error toast
+            console.log('e', error);
+        });
+    }
+    editReplyHandler(event, post) {
+        if (_.get(event, 'action') === 'cancel') {
+            this.onEditMode(false);
+        }
+        else if (_.get(event, 'action') === 'edit') {
+            this.updatePost(_.get(event, 'content'), _.get(post, 'pid'));
+            this.logTelemetry(event, post);
+        }
+    }
+    commentReplyHandler(event, post) {
+        if (_.get(event, 'action') === 'cancel') {
+            this.togglePost(post);
+        }
+        else if (_.get(event, 'action') === 'reply') {
+            this.postCommentsReply(_.get(event, 'content'), post);
+            this.logTelemetry(event, post);
+        }
+    }
+    postReplyHandler(event, post) {
+        if (_.get(event, 'action') === 'reply') {
+            this.postReply(_.get(event, 'content'), post);
+            this.logTelemetry(event, post);
+        }
+    }
+    togglePost(post) {
+        post.toggle = !post.toggle;
+        this.onEditMode(false);
+    }
+    /**
+     * @description - It will trigger the event handlers and close the update thread popup.
+     */
+    closeModal(event) {
+        console.log('close event', event);
+        if (_.get(event, 'action') === 'update') {
+            this.editTopicHandler(event, _.get(event, 'tid'), _.get(event, 'request'));
+        }
+        this.showEditTopicModal = false;
+    }
+    /**
+     * @description - It will open update thread popup.
+     */
+    editTopic(event, topicData) {
+        this.showEditTopicModal = true;
+        this.logTelemetry(event, topicData);
+    }
+    /**
+     * @description - It will all the update topic api. If success, then will refresh the data.
+     */
+    editTopicHandler(event, tid, updateTopicRequest) {
+        this.logTelemetry(event, this.editableTopicDetails);
+        this.discussionService.editPost(tid, updateTopicRequest).subscribe(data => {
+            console.log('update success', data);
+            this.refreshPostData(this.currentActivePage);
+        }, error => {
+            // error code check
+            this.discussionService.showTrafficAlert(error);
+            console.log('error while updating', error);
+        });
+    }
+    /**
+     * @description - It will open the confirmation popup before deleting the topic,
+     *                If clicked yes, then will call the delete topic handler.
+     */
+    deleteTopic(event, topicData) {
+        if (window.confirm(MSGS.deleteTopic)) {
+            this.logTelemetry(event, topicData);
+            this.deleteTopicHandler(_.get(topicData, 'tid'));
+        }
+    }
+    /**
+     * @description - It will all the delete topic api. If success, then will navigate back to the previous page.
+     */
+    deleteTopicHandler(topicId) {
+        this.discussionService.deleteTopic(topicId).subscribe(data => {
+            this.location.back();
+        }, error => {
+            // error code check
+            this.discussionService.showTrafficAlert(error);
+            console.log('error while deleting', error);
+        });
+    }
+    /**
+     * @description - It will toggle the kebab menu click
+     */
+    onMenuClick() {
+        this.dropdownContent = !this.dropdownContent;
+    }
+    ngOnDestroy() {
+        if (this.paramsSubscription) {
+            this.paramsSubscription.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: DiscussionService }, { token: ConfigService }, { token: i2$1.UntypedFormBuilder }, { token: i1.Router }, { token: TelemetryUtilsService }, { token: i0.Renderer2 }, { token: i6.Location }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussionDetailsComponent, selector: "lib-discussion-details", inputs: { topicId: "topicId", slug: "slug", widget: "widget" }, outputs: { stateChange: "stateChange" }, usesOnChanges: true, ngImport: i0, template: "<lib-app-loader *ngIf=\"!showLoader\"></lib-app-loader>\n<div class=\"discuss-details-content\" *ngIf=\"showLoader\">\n  <div class=\"discussion-details\" tabindex=\"0\" role=\"link\">\n\n      <!-- header -->\n      <div class=\"discuss-card-kabab-menu\">\n        <h3 class=\"discussion-card-title df-label-color\" [innerHTML]=\"data?.title\"></h3>\n        <div *ngIf=\"data?.uid === mainUid\">\n          <div class=\"kabab-menu\" id=\"group-actions\" (click)=\"onMenuClick()\" tabindex=\"0\"></div>\n          <div class=\"kabab-menu-dropdown-content\" [hidden]=\"dropdownContent\">\n              <div id=\"edit-topic\" class=\"list\" tabindex=\"0\"\n                (click)=\"editTopic($event, data); editableTopicDetails = data\">Edit\n              </div>\n              <div id=\"delete-topic\" class=\"list\" (click)=\"deleteTopic($event, data)\" tabindex=\"0\">Delete</div>\n          </div>\n        </div>\n      </div>\n      <!-- /header -->\n\n      <ng-container *ngFor=\"let post of data?.posts\">\n        <div class=\"post-reply-card\" *ngIf=\"post?.index === 0\">\n          <h3 class=\"discussion-heading df-text-color\" [innerHTML]=\"post?.content\"></h3>\n          <div class=\"discussion-content\">\n            <div class=\"circle-text\">\n              <div class=\"circle-label\">{{ post?.user?.username | splitInitials }}</div>\n            </div>\n            <div class=\"discussion-labels\">{{'Asked by '}}</div>\n            <div class=\"discussion-labels\" *ngIf=\"post.user.fullname\" [innerHTML]=\"post.user.fullname\"></div>\n            <div class=\"discussion-labels\" *ngIf=\"!post.user.fullname\" [innerHTML]=\"post.user.username\"></div>\n          </div>\n\n          <div class=\"tags\" aria-label=\"tags\">\n            <ng-container *ngIf=\"data && data?.tags && data?.tags?.length > 0\">\n              <span *ngFor=\"let tag of data?.tags\" class=\"tag\" role=\"link\" tabindex=\"0\"\n                [ngStyle]=\"getBgColor(tag.value)\">\n                {{tag.value}}\n              </span>\n            </ng-container>\n          </div>\n\n          <div class=\"comments-area\">\n            <div>\n              <span class=\"post-icons mobile\">\n                <span role=\"link\" tabindex=\"0\" *ngIf=\"!post.upvoted\" (click)=\"upvote(post);logTelemetry($event, post)\"\n                  aria-label=\"upvote the post\" id=\"up-vote\">\n                  <!-- upward arrow -->\n                  <img src=\"./assets/discussion-ui/images/up-arrow.png\" alt=\"up-arrow\" class=\"icons\"\n                    alt=\"up arrow icon for like the post\">\n                </span>\n                <span *ngIf=\"post.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"remove upvote\" id=\"delete-vote\">\n                  <!-- upward arrow -->\n                  <img src=\"./assets/discussion-ui/images/up.svg\" alt=\"select-up-arrow\" class=\"icons\" alt=\"up image\">\n                </span>\n                <span class=\"vote-value\" role=\"text\"\n                  [attr.aria-label]=\"'total upvoat is' + data?.upvotes\">{{data?.upvotes}}</span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span *ngIf=\"!post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"downvote(post);logTelemetry($event, post)\" aria-label=\"downvote post\" id=\"down-vote\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down-arrow.png\" class=\"icons\"\n                    alt=\"down arrow icon for unlike post\">\n                </span>\n                <span *ngIf=\"post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"remove down vote\" id=\"delete-vote\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down.svg\" class=\"icons\" alt=\"down image\">\n                </span>\n                <span class=\"vote-value\" role=\"text\"\n                  [attr.aria-label]=\"'total upvoat is' + data?.upvotes\">{{data?.downvotes}}</span>\n              </span>\n              <span class=\"post-icons mobile\" role=\"link\" tabindex=\"0\">\n                <!-- trending -->\n                <img src=\"./assets/discussion-ui/images/views.svg\" alt=\"views icon for seeing the posts\" class=\"icons\">\n                <span class=\"vote-value\" aria-label=\"views count\">{{data.viewcount}} Views</span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span *ngIf=\"!data?.posts[0]?.bookmarked\" role=\"link\" tabindex=\"0\"\n                  (click)=\"bookmark(post);logTelemetry($event, post)\" aria-label=\"Bookmark post\" id=\"bookmark\">\n                  <!-- bookmark -->\n                  <img src=\"./assets/discussion-ui/images/bookmarks.png\" class=\"icons\" alt=\"bookmark icon\">\n                </span>\n                <span *ngIf=\"data?.posts[0]?.bookmarked\" role=\"link\" tabindex=\"0\"\n                  (click)=\"unBookMark(post);logTelemetry($event, post)\" aria-label=\"unBookmark post\"\n                  id=\"un-bookmark-vote\">\n                  <!-- bookmark -->\n                  <img src=\"./assets/discussion-ui/images/select-bookmarks.png\" class=\"icons bookmark-icon\"\n                    alt=\"select bookmark icon\">\n                </span>\n              </span>\n            </div>\n            <div class=\"comments-count\">\n              <span *ngIf=\"data?.postcount-1 > 0\" aria-label=\"comments count\">\n                {{data?.postcount-1}}\n                comments\n              </span>\n              <span *ngIf=\"data?.postcount-1 <=0\" aria-label=\"comments count\">\n                0 comments</span>\n            </div>\n          </div>\n        <!-- /card content -->\n        <!-- post reply -->\n        <lib-post-reply (actionEvent)=\"postReplyHandler($event, post); logTelemetry($event, post)\" [mode]=\"'reply'\"\n          [showCancel]=\"false\"></lib-post-reply>\n          \n        </div>\n      </ng-container>\n    <!-- /card end -->\n\n    <ng-container *ngIf=\"data?.posts && data?.postcount > 1\">\n      <div class=\"recent-tabs\">\n        <div class=\"tabs-content\">\n          <div class=\"tabs-filter\">\n            <a href=\"javascript:void(0)\" class=\"filter-option\" role=\"link\" tabindex=\"0\" [ngClass]=\"{'tabs-active' : currentFilter === 'timestamp',\n                            'ws-mat-accent-border':currentFilter !== 'timestamp'}\"\n              (click)=\"filter('timestamp');logTelemetry($event)\" id=\"recent-post\">\n              Recent </a>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let post of data?.posts | sortBy: 'timestampISO':'desc'; index as i\">\n      <!-- card content -->\n      <div *ngIf=\"post?.index != 0\" class=\"post-card\">\n        <!-- header -->\n        <div class=\"comment-section\">\n          <div class=\"post-header-content\">\n            <span class=\"circle-text\"><span class=\"circle-label\">{{ post?.user?.username | splitInitials\n                }}</span></span>\n            <span class=\"post-name\" *ngIf=\"post?.user?.fullname\" [innerHTML]=\"post?.user?.fullname\"></span>\n            <span class=\"post-name df-label-color\" *ngIf=\"!post?.user?.fullname\"\n              [innerHTML]=\"post?.user?.username\"></span>\n          </div>\n          <div class=\"custom-actions\">\n            <span class=\"post-time\">{{ post?.timestamp | date: 'dd MMM yyyy hh:mm a'}}</span>\n            <ng-container *ngIf=\"mainUid === post?.uid\">\n              <img src=\"./assets/discussion-ui/images/edit.svg\" class=\"edit-icon\" id=\"edit-post\" alt=\"edit icon\"\n                (click)=\"getRealtimePost(post, i)\" tabindex=\"0\">\n              <img src=\"./assets/discussion-ui/images/delete.svg\" class=\"delete-icon\" id=\"delete-post\" alt=\"delete icon\"\n                (click)=\"confirmDelete(post?.pid)\" tabindex=\"0\">\n            </ng-container>\n          </div>\n        </div>\n        <!-- / header -->\n        <div>\n          <div class=\"edit-text\" *ngIf=\"!editMode || editContentIndex !== i\">\n            <p [innerHTML]=\"post?.content\" class=\"post-labels df-text-color\"></p>\n            <div class=\"edited-text\" *ngIf=\"post?.edited\">(edited)</div>\n          </div>\n          <div *ngIf=\"editMode && editContentIndex === i\">\n            <lib-post-reply (actionEvent)=\"editReplyHandler($event, post)\" [mode]=\"'edit'\" [showCancel]=\"true\"\n              [content]=\"contentPost\"></lib-post-reply>\n          </div>\n          <div class=\"reply-area\">\n            <div>\n              <span class=\"flex mobile\">\n                <!-- upward arrow -->\n                <span class=\"up-vote-text\" *ngIf=\"!post?.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"upvote(post);logTelemetry($event, post)\" aria-label=\"upvote comment\" id=\"up-vote\">\n                  <img src=\"./assets/discussion-ui/images/up.svg\" class=\"icons\" alt=\"up icon\">\n                </span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <!-- upward arrow -->\n                <span class=\"down-vote-text\" *ngIf=\"post.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"delete upvote on comment\"\n                  id=\"delete-vote\">\n                  <img src=\"./assets/discussion-ui/images/up.svg\" class=\"icons\" alt=\"up icon\">\n                </span>\n                <span class=\"vote-value\">{{post?.upvotes}}</span>\n              </span>\n\n              <span class=\"flex mobile\">\n                <span id=\"down-vote\" *ngIf=\"!post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"downvote(post);logTelemetry($event, post)\" aria-label=\"downvote comment\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down-arrow.png\" class=\"icons\" alt=\"down arrow icon\">\n                </span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span id=\"delete-vote\" *ngIf=\"post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"delete downvote on comment\">\n                  <!-- down arrow -->\n                  <img src=\"./assets/discussion-ui/images/down.svg\" class=\"icons\" alt=\"down icon\">\n                </span>\n                <span class=\"vote-value\">{{post?.downvotes}}</span>\n              </span>\n            </div>\n\n            <button (click)=\"togglePost(post); logTelemetry($event, post)\"\n              class=\"df-btn df-btn-normal df-btn-primary df-reply-btn\" id=\"reply-comment\">\n              Reply </button>\n\n          </div>\n          <div class=\"replies\" *ngIf=\"post?.toggle\">\n            <ng-container [ngTemplateOutlet]=\"reply\" [ngTemplateOutletContext]=\"{post:post}\">\n            </ng-container>\n          </div>\n          <ng-container *ngIf=\"post?.replies?.count > 0\">\n            <div>\n              <div>\n                <div class=\"reply-content\" (click)=\"post.replyCountToggle = !post.replyCountToggle\" tabindex=\"0\">\n                  <span class=\"replies-count\"> {{post?.replies?.count}} reply(s) </span>\n                  <div *ngIf=\"post?.replyCountToggle\" role=\"link\" tabindex=\"0\" aria-label=\"reply toggle\">\n                    <span class=\"toggle-icon\" *ngIf=\"post?.replyCountToggle\" aria-label=\"reply toggle upwards\">\n                      <!-- up arrow -->\n                      <img src=\"./assets/discussion-ui/images/up-chevron.png\" class=\"icons\" alt=\"up chevron icon\">\n                    </span>\n                  </div>\n                  <div *ngIf=\"!post.replyCountToggle\" role=\"link\" tabindex=\"0\" aria-label=\"reply toggle\">\n                    <span class=\"toggle-icon\" *ngIf=\"!post.replyCountToggle\" aria-label=\"reply toggle downwards\">\n                      <!-- down arrow -->\n                      <img src=\"./assets/discussion-ui/images/down-chevron.png\" class=\"icons\" alt=\"down chevron icon\">\n                    </span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"last-reply-data\">\n                <span *ngIf=\"!post.replyCountToggle\">Last reply\n                  {{ post?.replies?.timestampISO | date: 'dd MMM yyyy hh:mm a' }} </span>\n              </div>\n            </div>\n            <div class=\"replies\" *ngIf=\"post?.replyCountToggle\">\n              <ng-container [ngTemplateOutlet]=\"replies\"\n                [ngTemplateOutletContext]=\"{posts:data.posts, postId:post.pid}\">\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <!-- /card content -->\n      </div>\n      <!--  / card -->\n      <!-- Divider -->\n      <div *ngIf=\"post.index != 0\"></div>\n    </ng-container>\n  </div>\n\n  <div class=\"related-discuss-part\">\n    <div *ngIf=\"fetchSingleCategoryLoader\" class=\"related-discuss-part-content\"></div>\n    <lib-related-discussion *ngIf=\"!fetchSingleCategoryLoader\" [catId]=\"categoryId\" [topicId]=\"topicId\">\n    </lib-related-discussion>\n  </div>\n</div>\n\n<ng-template #reply let-post=\"post\">\n  <lib-post-reply (actionEvent)=\"commentReplyHandler($event, post)\" [mode]=\"'reply'\" [showCancel]=\"true\">\n  </lib-post-reply>\n</ng-template>\n\n<ng-template #replies let-posts=\"posts\" let-postId=\"postId\">\n  <ng-container *ngFor=\"let post of posts | pipeFilter:'toPid': postId; index as index; last as last\">\n    <!-- card -->\n    <div class=\"post-sub-card\">\n      <!-- card-header -->\n      <div class=\"comment-section\">\n        <div class=\"post-header-content\">\n          <div class=\"circle-text\"><div class=\"circle-label\">{{ post?.user?.username | splitInitials }}</div></div>\n          <div class=\"post-name\" *ngIf=\"post?.user?.fullname\" [innerHTML]=\"post?.user?.fullname\"></div>\n          <div class=\"df-label-color post-name\" *ngIf=\"!post?.user?.fullname\"\n            [innerHTML]=\"post?.user?.username\"></div>\n        </div>\n        <div class=\"post-time\">{{ post?.timestamp | date}}</div>\n      </div>\n      <!-- /card-header -->\n\n      <!-- card-content -->\n      <div>\n        <p role=\"link\" tabindex=\"0\" tabindex=\"0\" [innerHTML]=\"post?.content\"></p>\n        <div class=\"reply-area\">\n          <div class=\"reply-area-content\">\n            <span class=\"post-icons mobile\">\n              <!-- up arrow -->\n              <img *ngIf=\"!post?.upvoted\" class=\"cursor-pointer\" (click)=\"upvote(post);logTelemetry($event, post)\"\n                src=\"./assets/discussion-ui/images/up-arrow.png\" alt=\"up arrow icon\" class=\"icons\" tabindex=\"0\">\n              <img *ngIf=\"post?.upvoted\" class=\"cursor-pointer\" (click)=\"deleteVote(post);logTelemetry($event, post)\"\n                src=\"./assets/discussion-ui/images/up.svg\" alt=\"select up arrow icon\" class=\"icons\" tabindex=\"0\">\n              <span class=\"vote-value\">{{post.upvotes}}</span>\n            </span>\n            <span class=\"post-icons mobile\">\n              <img *ngIf=\"!post?.downvoted\" class=\"cursor-pointer\" (click)=\"downvote(post); logTelemetry($event, post)\"\n                id=\"up-vote\" tabindex=\"0\" src=\"./assets/discussion-ui/images/down-arrow.png\" alt=\"down arrow icon\"\n                class=\"icons\">\n              <img *ngIf=\"post?.downvoted\" class=\"cursor-pointer\" (click)=\"deleteVote(post);logTelemetry($event, post)\"\n                id=\"delete-vote\" tabindex=\"0\" src=\"./assets/discussion-ui/images/down.svg\" alt=\"select down arrow icon\"\n                class=\"icons\">\n              <span class=\"vote-value\">{{post?.downvotes}}</span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>  \n    <!-- /card -->\n  </ng-container>\n</ng-template>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Thank you for voting!\" value=\"Thank you for voting!!\"\n  #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Something went wrong, please try again later!\"\n  value=\"Something went wrong, please try again later!\" #toastError />\n\n<lib-discuss-start [mode]=\"'edit'\" [topicData]=\"editableTopicDetails\" (close)=\"closeModal($event)\"\n  *ngIf=\"showEditTopicModal\"></lib-discuss-start>", styles: ["@charset \"UTF-8\";.discuss-details-content{display:flex;flex-direction:row}.discussion-details{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:3;height:auto;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:.875rem 1rem;justify-content:space-between;z-index:unset;margin-bottom:1rem}.related-discuss-part{padding:0 0 1rem 1.5rem;position:relative;z-index:2}.related-discuss-part .related-discuss-part-content{padding:0 .25rem}.discussion-card-title{font-size:1.25rem;font-weight:700}.discussion-heading{font-size:.875rem;font-weight:400;pointer-events:none;margin-bottom:0;margin-top:.5rem}.discussion-content{display:flex;align-items:center;margin-bottom:1rem;font-size:.875rem;flex-wrap:wrap;margin-bottom:0;margin-top:1rem}.comment-section{display:flex;align-items:center;justify-content:space-between;margin:.5rem 0;flex-direction:row;flex-wrap:wrap}.post-header-content{display:flex;align-items:center}.circle-text{border-radius:50%;width:1.75rem;height:1.75rem;display:flex;justify-content:center;align-items:center;background-color:#306933}.circle-label{color:var(--white);font-size:1rem;line-height:.75rem;letter-spacing:.2625px;text-transform:uppercase}.discussion-labels{color:var(--gray-400);margin-left:.5rem;font-size:.875rem}.comments-area{display:flex;align-items:center;justify-content:space-between;font-weight:700;flex-direction:row;font-size:.875rem;margin:1rem 0}.text-form-field{display:flex;flex-direction:column}.text-content{min-height:6.75rem;max-height:33.75rem;margin-bottom:.875rem;background-color:var(--df-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;cursor:pointer;outline:0;padding:.5rem .875rem}.text-content.is-invalid,.text-content.is-invalid:hover,.text-content.is-invalid:focus{border:.0625rem solid var(--red-100)}.text-content.is-valid,.text-content.is-valid:hover,.text-content.is-valid:focus{border:.0625rem solid var(--primary-400)}.up-vote-text,.down-vote-text{font-size:1rem;color:var(--black);margin-right:.5rem}.post-card,.post-reply-card{border-bottom:.0625rem solid var(--gray-100);margin-bottom:1.5rem}.post-sub-card{margin:0 .5rem .5rem;border:0}.comments-section{display:flex;align-items:center;justify-content:space-between}.post-icons{margin-right:1rem}.post-name{font-size:1rem;font-weight:700;margin-left:1rem;word-break:break-all;text-transform:capitalize}.post-time{color:var(var(--gray-400));margin:0 1rem;font-size:.875rem}.post-labels{font-size:.875rem;margin:0}.reply-area{display:flex;justify-content:space-between;align-items:center}.reply-area-content{position:relative;margin-top:1rem}.margin-gap-tb{margin:1rem 0}.custom-actions{display:flex;align-items:center}.edit-post{margin-right:1.25rem}.border-0{border-bottom:0px}.comments-count{color:var(--primary);font-weight:700;cursor:pointer}@media (max-width: 768px){.discuss-details-content{flex-direction:column}.related-discuss-part{padding:0}.post-btn{width:100%;margin-top:.5rem;cursor:pointer}.post-time{margin-top:.5rem;margin-left:0}.comment-section{display:flex;flex-direction:column;align-items:start;margin-bottom:.5rem}}.df-btn-disabled{background-color:var(--gray-100)!important;color:var(--gray-200)!important}.df-reply-btn{margin-bottom:.5rem}.edited-text{padding-left:.5rem;margin-top:.25rem;font-size:.75rem;color:var(--gray-200)}.delete-icon,.edit-icon{cursor:pointer;width:1rem;height:1rem;margin:0 .5rem}.discuss-card-kabab-menu{display:flex;justify-content:space-between;flex-wrap:wrap}.kabab-menu{color:var(--primary-400);width:1.875rem;height:1.875rem;line-height:1.75rem;text-align:center;border-radius:50%;padding-left:.5rem;position:absolute;right:.5rem}.kabab-menu:hover{background:var(--gray-0);cursor:pointer}.kabab-menu:after{content:\"\\2807\";font-size:1.5rem}.kabab-menu-dropdown-content{position:absolute;border-radius:.125rem;background-color:var(--white);box-shadow:0 3px 5px 4px rgba(var(--rc-rgba-black),.05);padding:.5rem;z-index:1;text-align:left;right:0;top:0;min-width:13.125rem}.kabab-menu-dropdown-content .list{display:flex;align-items:center;width:100%;cursor:pointer;font-size:.875rem;padding:.5rem}.kabab-menu-dropdown-content .list:hover,.kabab-menu-dropdown-content .list:active{background-color:var(--primary-100)}.kabab-menu-dropdown-content .list:last-child .df-btn-normal{color:var(--red-400)}.kabab-menu-dropdown-content .list .df-btn-normal{font-size:.875rem}::ng-deep html[dir=rtl] .kabab-menu-dropdown-content{right:auto;left:0}.vote-value{margin-left:.5rem}.icons{width:.875rem;height:.875rem;position:relative;cursor:pointer}.edit-text{display:flex}.last-reply-data{margin:1rem 0;font-size:.875rem}.reply-content{display:flex;align-items:center}.replies{width:100%}.replies-count{font-size:.875rem;font-weight:700;cursor:pointer}.toggle-icon{padding:0 1rem;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }, { kind: "component", type: RelatedDiscussionComponent, selector: "lib-related-discussion", inputs: ["catId", "topicId"], outputs: ["stateChange"] }, { kind: "component", type: PostReplyComponent, selector: "lib-post-reply", inputs: ["showCancel", "mode", "content"], outputs: ["actionEvent"] }, { kind: "component", type: DiscussStartComponent, selector: "lib-discuss-start", inputs: ["categoryId", "topicData", "mode"], outputs: ["close"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "pipe", type: PipeFilterPipe, name: "pipeFilter" }, { kind: "pipe", type: SortByPipe, name: "sortBy" }, { kind: "pipe", type: SplitInitialsPipe, name: "splitInitials" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discussion-details', template: "<lib-app-loader *ngIf=\"!showLoader\"></lib-app-loader>\n<div class=\"discuss-details-content\" *ngIf=\"showLoader\">\n  <div class=\"discussion-details\" tabindex=\"0\" role=\"link\">\n\n      <!-- header -->\n      <div class=\"discuss-card-kabab-menu\">\n        <h3 class=\"discussion-card-title df-label-color\" [innerHTML]=\"data?.title\"></h3>\n        <div *ngIf=\"data?.uid === mainUid\">\n          <div class=\"kabab-menu\" id=\"group-actions\" (click)=\"onMenuClick()\" tabindex=\"0\"></div>\n          <div class=\"kabab-menu-dropdown-content\" [hidden]=\"dropdownContent\">\n              <div id=\"edit-topic\" class=\"list\" tabindex=\"0\"\n                (click)=\"editTopic($event, data); editableTopicDetails = data\">Edit\n              </div>\n              <div id=\"delete-topic\" class=\"list\" (click)=\"deleteTopic($event, data)\" tabindex=\"0\">Delete</div>\n          </div>\n        </div>\n      </div>\n      <!-- /header -->\n\n      <ng-container *ngFor=\"let post of data?.posts\">\n        <div class=\"post-reply-card\" *ngIf=\"post?.index === 0\">\n          <h3 class=\"discussion-heading df-text-color\" [innerHTML]=\"post?.content\"></h3>\n          <div class=\"discussion-content\">\n            <div class=\"circle-text\">\n              <div class=\"circle-label\">{{ post?.user?.username | splitInitials }}</div>\n            </div>\n            <div class=\"discussion-labels\">{{'Asked by '}}</div>\n            <div class=\"discussion-labels\" *ngIf=\"post.user.fullname\" [innerHTML]=\"post.user.fullname\"></div>\n            <div class=\"discussion-labels\" *ngIf=\"!post.user.fullname\" [innerHTML]=\"post.user.username\"></div>\n          </div>\n\n          <div class=\"tags\" aria-label=\"tags\">\n            <ng-container *ngIf=\"data && data?.tags && data?.tags?.length > 0\">\n              <span *ngFor=\"let tag of data?.tags\" class=\"tag\" role=\"link\" tabindex=\"0\"\n                [ngStyle]=\"getBgColor(tag.value)\">\n                {{tag.value}}\n              </span>\n            </ng-container>\n          </div>\n\n          <div class=\"comments-area\">\n            <div>\n              <span class=\"post-icons mobile\">\n                <span role=\"link\" tabindex=\"0\" *ngIf=\"!post.upvoted\" (click)=\"upvote(post);logTelemetry($event, post)\"\n                  aria-label=\"upvote the post\" id=\"up-vote\">\n                  <!-- upward arrow -->\n                  <img src=\"./assets/discussion-ui/images/up-arrow.png\" alt=\"up-arrow\" class=\"icons\"\n                    alt=\"up arrow icon for like the post\">\n                </span>\n                <span *ngIf=\"post.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"remove upvote\" id=\"delete-vote\">\n                  <!-- upward arrow -->\n                  <img src=\"./assets/discussion-ui/images/up.svg\" alt=\"select-up-arrow\" class=\"icons\" alt=\"up image\">\n                </span>\n                <span class=\"vote-value\" role=\"text\"\n                  [attr.aria-label]=\"'total upvoat is' + data?.upvotes\">{{data?.upvotes}}</span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span *ngIf=\"!post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"downvote(post);logTelemetry($event, post)\" aria-label=\"downvote post\" id=\"down-vote\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down-arrow.png\" class=\"icons\"\n                    alt=\"down arrow icon for unlike post\">\n                </span>\n                <span *ngIf=\"post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"remove down vote\" id=\"delete-vote\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down.svg\" class=\"icons\" alt=\"down image\">\n                </span>\n                <span class=\"vote-value\" role=\"text\"\n                  [attr.aria-label]=\"'total upvoat is' + data?.upvotes\">{{data?.downvotes}}</span>\n              </span>\n              <span class=\"post-icons mobile\" role=\"link\" tabindex=\"0\">\n                <!-- trending -->\n                <img src=\"./assets/discussion-ui/images/views.svg\" alt=\"views icon for seeing the posts\" class=\"icons\">\n                <span class=\"vote-value\" aria-label=\"views count\">{{data.viewcount}} Views</span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span *ngIf=\"!data?.posts[0]?.bookmarked\" role=\"link\" tabindex=\"0\"\n                  (click)=\"bookmark(post);logTelemetry($event, post)\" aria-label=\"Bookmark post\" id=\"bookmark\">\n                  <!-- bookmark -->\n                  <img src=\"./assets/discussion-ui/images/bookmarks.png\" class=\"icons\" alt=\"bookmark icon\">\n                </span>\n                <span *ngIf=\"data?.posts[0]?.bookmarked\" role=\"link\" tabindex=\"0\"\n                  (click)=\"unBookMark(post);logTelemetry($event, post)\" aria-label=\"unBookmark post\"\n                  id=\"un-bookmark-vote\">\n                  <!-- bookmark -->\n                  <img src=\"./assets/discussion-ui/images/select-bookmarks.png\" class=\"icons bookmark-icon\"\n                    alt=\"select bookmark icon\">\n                </span>\n              </span>\n            </div>\n            <div class=\"comments-count\">\n              <span *ngIf=\"data?.postcount-1 > 0\" aria-label=\"comments count\">\n                {{data?.postcount-1}}\n                comments\n              </span>\n              <span *ngIf=\"data?.postcount-1 <=0\" aria-label=\"comments count\">\n                0 comments</span>\n            </div>\n          </div>\n        <!-- /card content -->\n        <!-- post reply -->\n        <lib-post-reply (actionEvent)=\"postReplyHandler($event, post); logTelemetry($event, post)\" [mode]=\"'reply'\"\n          [showCancel]=\"false\"></lib-post-reply>\n          \n        </div>\n      </ng-container>\n    <!-- /card end -->\n\n    <ng-container *ngIf=\"data?.posts && data?.postcount > 1\">\n      <div class=\"recent-tabs\">\n        <div class=\"tabs-content\">\n          <div class=\"tabs-filter\">\n            <a href=\"javascript:void(0)\" class=\"filter-option\" role=\"link\" tabindex=\"0\" [ngClass]=\"{'tabs-active' : currentFilter === 'timestamp',\n                            'ws-mat-accent-border':currentFilter !== 'timestamp'}\"\n              (click)=\"filter('timestamp');logTelemetry($event)\" id=\"recent-post\">\n              Recent </a>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let post of data?.posts | sortBy: 'timestampISO':'desc'; index as i\">\n      <!-- card content -->\n      <div *ngIf=\"post?.index != 0\" class=\"post-card\">\n        <!-- header -->\n        <div class=\"comment-section\">\n          <div class=\"post-header-content\">\n            <span class=\"circle-text\"><span class=\"circle-label\">{{ post?.user?.username | splitInitials\n                }}</span></span>\n            <span class=\"post-name\" *ngIf=\"post?.user?.fullname\" [innerHTML]=\"post?.user?.fullname\"></span>\n            <span class=\"post-name df-label-color\" *ngIf=\"!post?.user?.fullname\"\n              [innerHTML]=\"post?.user?.username\"></span>\n          </div>\n          <div class=\"custom-actions\">\n            <span class=\"post-time\">{{ post?.timestamp | date: 'dd MMM yyyy hh:mm a'}}</span>\n            <ng-container *ngIf=\"mainUid === post?.uid\">\n              <img src=\"./assets/discussion-ui/images/edit.svg\" class=\"edit-icon\" id=\"edit-post\" alt=\"edit icon\"\n                (click)=\"getRealtimePost(post, i)\" tabindex=\"0\">\n              <img src=\"./assets/discussion-ui/images/delete.svg\" class=\"delete-icon\" id=\"delete-post\" alt=\"delete icon\"\n                (click)=\"confirmDelete(post?.pid)\" tabindex=\"0\">\n            </ng-container>\n          </div>\n        </div>\n        <!-- / header -->\n        <div>\n          <div class=\"edit-text\" *ngIf=\"!editMode || editContentIndex !== i\">\n            <p [innerHTML]=\"post?.content\" class=\"post-labels df-text-color\"></p>\n            <div class=\"edited-text\" *ngIf=\"post?.edited\">(edited)</div>\n          </div>\n          <div *ngIf=\"editMode && editContentIndex === i\">\n            <lib-post-reply (actionEvent)=\"editReplyHandler($event, post)\" [mode]=\"'edit'\" [showCancel]=\"true\"\n              [content]=\"contentPost\"></lib-post-reply>\n          </div>\n          <div class=\"reply-area\">\n            <div>\n              <span class=\"flex mobile\">\n                <!-- upward arrow -->\n                <span class=\"up-vote-text\" *ngIf=\"!post?.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"upvote(post);logTelemetry($event, post)\" aria-label=\"upvote comment\" id=\"up-vote\">\n                  <img src=\"./assets/discussion-ui/images/up.svg\" class=\"icons\" alt=\"up icon\">\n                </span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <!-- upward arrow -->\n                <span class=\"down-vote-text\" *ngIf=\"post.upvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"delete upvote on comment\"\n                  id=\"delete-vote\">\n                  <img src=\"./assets/discussion-ui/images/up.svg\" class=\"icons\" alt=\"up icon\">\n                </span>\n                <span class=\"vote-value\">{{post?.upvotes}}</span>\n              </span>\n\n              <span class=\"flex mobile\">\n                <span id=\"down-vote\" *ngIf=\"!post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"downvote(post);logTelemetry($event, post)\" aria-label=\"downvote comment\">\n                  <!-- downward arrow -->\n                  <img src=\"./assets/discussion-ui/images/down-arrow.png\" class=\"icons\" alt=\"down arrow icon\">\n                </span>\n              </span>\n              <span class=\"post-icons mobile\">\n                <span id=\"delete-vote\" *ngIf=\"post?.downvoted\" role=\"link\" tabindex=\"0\"\n                  (click)=\"deleteVote(post);logTelemetry($event, post)\" aria-label=\"delete downvote on comment\">\n                  <!-- down arrow -->\n                  <img src=\"./assets/discussion-ui/images/down.svg\" class=\"icons\" alt=\"down icon\">\n                </span>\n                <span class=\"vote-value\">{{post?.downvotes}}</span>\n              </span>\n            </div>\n\n            <button (click)=\"togglePost(post); logTelemetry($event, post)\"\n              class=\"df-btn df-btn-normal df-btn-primary df-reply-btn\" id=\"reply-comment\">\n              Reply </button>\n\n          </div>\n          <div class=\"replies\" *ngIf=\"post?.toggle\">\n            <ng-container [ngTemplateOutlet]=\"reply\" [ngTemplateOutletContext]=\"{post:post}\">\n            </ng-container>\n          </div>\n          <ng-container *ngIf=\"post?.replies?.count > 0\">\n            <div>\n              <div>\n                <div class=\"reply-content\" (click)=\"post.replyCountToggle = !post.replyCountToggle\" tabindex=\"0\">\n                  <span class=\"replies-count\"> {{post?.replies?.count}} reply(s) </span>\n                  <div *ngIf=\"post?.replyCountToggle\" role=\"link\" tabindex=\"0\" aria-label=\"reply toggle\">\n                    <span class=\"toggle-icon\" *ngIf=\"post?.replyCountToggle\" aria-label=\"reply toggle upwards\">\n                      <!-- up arrow -->\n                      <img src=\"./assets/discussion-ui/images/up-chevron.png\" class=\"icons\" alt=\"up chevron icon\">\n                    </span>\n                  </div>\n                  <div *ngIf=\"!post.replyCountToggle\" role=\"link\" tabindex=\"0\" aria-label=\"reply toggle\">\n                    <span class=\"toggle-icon\" *ngIf=\"!post.replyCountToggle\" aria-label=\"reply toggle downwards\">\n                      <!-- down arrow -->\n                      <img src=\"./assets/discussion-ui/images/down-chevron.png\" class=\"icons\" alt=\"down chevron icon\">\n                    </span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"last-reply-data\">\n                <span *ngIf=\"!post.replyCountToggle\">Last reply\n                  {{ post?.replies?.timestampISO | date: 'dd MMM yyyy hh:mm a' }} </span>\n              </div>\n            </div>\n            <div class=\"replies\" *ngIf=\"post?.replyCountToggle\">\n              <ng-container [ngTemplateOutlet]=\"replies\"\n                [ngTemplateOutletContext]=\"{posts:data.posts, postId:post.pid}\">\n              </ng-container>\n            </div>\n          </ng-container>\n        </div>\n        <!-- /card content -->\n      </div>\n      <!--  / card -->\n      <!-- Divider -->\n      <div *ngIf=\"post.index != 0\"></div>\n    </ng-container>\n  </div>\n\n  <div class=\"related-discuss-part\">\n    <div *ngIf=\"fetchSingleCategoryLoader\" class=\"related-discuss-part-content\"></div>\n    <lib-related-discussion *ngIf=\"!fetchSingleCategoryLoader\" [catId]=\"categoryId\" [topicId]=\"topicId\">\n    </lib-related-discussion>\n  </div>\n</div>\n\n<ng-template #reply let-post=\"post\">\n  <lib-post-reply (actionEvent)=\"commentReplyHandler($event, post)\" [mode]=\"'reply'\" [showCancel]=\"true\">\n  </lib-post-reply>\n</ng-template>\n\n<ng-template #replies let-posts=\"posts\" let-postId=\"postId\">\n  <ng-container *ngFor=\"let post of posts | pipeFilter:'toPid': postId; index as index; last as last\">\n    <!-- card -->\n    <div class=\"post-sub-card\">\n      <!-- card-header -->\n      <div class=\"comment-section\">\n        <div class=\"post-header-content\">\n          <div class=\"circle-text\"><div class=\"circle-label\">{{ post?.user?.username | splitInitials }}</div></div>\n          <div class=\"post-name\" *ngIf=\"post?.user?.fullname\" [innerHTML]=\"post?.user?.fullname\"></div>\n          <div class=\"df-label-color post-name\" *ngIf=\"!post?.user?.fullname\"\n            [innerHTML]=\"post?.user?.username\"></div>\n        </div>\n        <div class=\"post-time\">{{ post?.timestamp | date}}</div>\n      </div>\n      <!-- /card-header -->\n\n      <!-- card-content -->\n      <div>\n        <p role=\"link\" tabindex=\"0\" tabindex=\"0\" [innerHTML]=\"post?.content\"></p>\n        <div class=\"reply-area\">\n          <div class=\"reply-area-content\">\n            <span class=\"post-icons mobile\">\n              <!-- up arrow -->\n              <img *ngIf=\"!post?.upvoted\" class=\"cursor-pointer\" (click)=\"upvote(post);logTelemetry($event, post)\"\n                src=\"./assets/discussion-ui/images/up-arrow.png\" alt=\"up arrow icon\" class=\"icons\" tabindex=\"0\">\n              <img *ngIf=\"post?.upvoted\" class=\"cursor-pointer\" (click)=\"deleteVote(post);logTelemetry($event, post)\"\n                src=\"./assets/discussion-ui/images/up.svg\" alt=\"select up arrow icon\" class=\"icons\" tabindex=\"0\">\n              <span class=\"vote-value\">{{post.upvotes}}</span>\n            </span>\n            <span class=\"post-icons mobile\">\n              <img *ngIf=\"!post?.downvoted\" class=\"cursor-pointer\" (click)=\"downvote(post); logTelemetry($event, post)\"\n                id=\"up-vote\" tabindex=\"0\" src=\"./assets/discussion-ui/images/down-arrow.png\" alt=\"down arrow icon\"\n                class=\"icons\">\n              <img *ngIf=\"post?.downvoted\" class=\"cursor-pointer\" (click)=\"deleteVote(post);logTelemetry($event, post)\"\n                id=\"delete-vote\" tabindex=\"0\" src=\"./assets/discussion-ui/images/down.svg\" alt=\"select down arrow icon\"\n                class=\"icons\">\n              <span class=\"vote-value\">{{post?.downvotes}}</span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>  \n    <!-- /card -->\n  </ng-container>\n</ng-template>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Thank you for voting!\" value=\"Thank you for voting!!\"\n  #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Something went wrong, please try again later!\"\n  value=\"Something went wrong, please try again later!\" #toastError />\n\n<lib-discuss-start [mode]=\"'edit'\" [topicData]=\"editableTopicDetails\" (close)=\"closeModal($event)\"\n  *ngIf=\"showEditTopicModal\"></lib-discuss-start>", styles: ["@charset \"UTF-8\";.discuss-details-content{display:flex;flex-direction:row}.discussion-details{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:3;height:auto;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:.875rem 1rem;justify-content:space-between;z-index:unset;margin-bottom:1rem}.related-discuss-part{padding:0 0 1rem 1.5rem;position:relative;z-index:2}.related-discuss-part .related-discuss-part-content{padding:0 .25rem}.discussion-card-title{font-size:1.25rem;font-weight:700}.discussion-heading{font-size:.875rem;font-weight:400;pointer-events:none;margin-bottom:0;margin-top:.5rem}.discussion-content{display:flex;align-items:center;margin-bottom:1rem;font-size:.875rem;flex-wrap:wrap;margin-bottom:0;margin-top:1rem}.comment-section{display:flex;align-items:center;justify-content:space-between;margin:.5rem 0;flex-direction:row;flex-wrap:wrap}.post-header-content{display:flex;align-items:center}.circle-text{border-radius:50%;width:1.75rem;height:1.75rem;display:flex;justify-content:center;align-items:center;background-color:#306933}.circle-label{color:var(--white);font-size:1rem;line-height:.75rem;letter-spacing:.2625px;text-transform:uppercase}.discussion-labels{color:var(--gray-400);margin-left:.5rem;font-size:.875rem}.comments-area{display:flex;align-items:center;justify-content:space-between;font-weight:700;flex-direction:row;font-size:.875rem;margin:1rem 0}.text-form-field{display:flex;flex-direction:column}.text-content{min-height:6.75rem;max-height:33.75rem;margin-bottom:.875rem;background-color:var(--df-field-control-bg);border:.0625rem solid var(--gray-200);border-radius:.1875rem;color:var(--df-text);display:block;font-size:.8125rem;font-family:sans-serif;position:relative;cursor:pointer;outline:0;padding:.5rem .875rem}.text-content.is-invalid,.text-content.is-invalid:hover,.text-content.is-invalid:focus{border:.0625rem solid var(--red-100)}.text-content.is-valid,.text-content.is-valid:hover,.text-content.is-valid:focus{border:.0625rem solid var(--primary-400)}.up-vote-text,.down-vote-text{font-size:1rem;color:var(--black);margin-right:.5rem}.post-card,.post-reply-card{border-bottom:.0625rem solid var(--gray-100);margin-bottom:1.5rem}.post-sub-card{margin:0 .5rem .5rem;border:0}.comments-section{display:flex;align-items:center;justify-content:space-between}.post-icons{margin-right:1rem}.post-name{font-size:1rem;font-weight:700;margin-left:1rem;word-break:break-all;text-transform:capitalize}.post-time{color:var(var(--gray-400));margin:0 1rem;font-size:.875rem}.post-labels{font-size:.875rem;margin:0}.reply-area{display:flex;justify-content:space-between;align-items:center}.reply-area-content{position:relative;margin-top:1rem}.margin-gap-tb{margin:1rem 0}.custom-actions{display:flex;align-items:center}.edit-post{margin-right:1.25rem}.border-0{border-bottom:0px}.comments-count{color:var(--primary);font-weight:700;cursor:pointer}@media (max-width: 768px){.discuss-details-content{flex-direction:column}.related-discuss-part{padding:0}.post-btn{width:100%;margin-top:.5rem;cursor:pointer}.post-time{margin-top:.5rem;margin-left:0}.comment-section{display:flex;flex-direction:column;align-items:start;margin-bottom:.5rem}}.df-btn-disabled{background-color:var(--gray-100)!important;color:var(--gray-200)!important}.df-reply-btn{margin-bottom:.5rem}.edited-text{padding-left:.5rem;margin-top:.25rem;font-size:.75rem;color:var(--gray-200)}.delete-icon,.edit-icon{cursor:pointer;width:1rem;height:1rem;margin:0 .5rem}.discuss-card-kabab-menu{display:flex;justify-content:space-between;flex-wrap:wrap}.kabab-menu{color:var(--primary-400);width:1.875rem;height:1.875rem;line-height:1.75rem;text-align:center;border-radius:50%;padding-left:.5rem;position:absolute;right:.5rem}.kabab-menu:hover{background:var(--gray-0);cursor:pointer}.kabab-menu:after{content:\"\\2807\";font-size:1.5rem}.kabab-menu-dropdown-content{position:absolute;border-radius:.125rem;background-color:var(--white);box-shadow:0 3px 5px 4px rgba(var(--rc-rgba-black),.05);padding:.5rem;z-index:1;text-align:left;right:0;top:0;min-width:13.125rem}.kabab-menu-dropdown-content .list{display:flex;align-items:center;width:100%;cursor:pointer;font-size:.875rem;padding:.5rem}.kabab-menu-dropdown-content .list:hover,.kabab-menu-dropdown-content .list:active{background-color:var(--primary-100)}.kabab-menu-dropdown-content .list:last-child .df-btn-normal{color:var(--red-400)}.kabab-menu-dropdown-content .list .df-btn-normal{font-size:.875rem}::ng-deep html[dir=rtl] .kabab-menu-dropdown-content{right:auto;left:0}.vote-value{margin-left:.5rem}.icons{width:.875rem;height:.875rem;position:relative;cursor:pointer}.edit-text{display:flex}.last-reply-data{margin:1rem 0;font-size:.875rem}.reply-content{display:flex;align-items:center}.replies{width:100%}.replies-count{font-size:.875rem;font-weight:700;cursor:pointer}.toggle-icon{padding:0 1rem;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: DiscussionService }, { type: ConfigService }, { type: i2$1.UntypedFormBuilder }, { type: i1.Router }, { type: TelemetryUtilsService }, { type: i0.Renderer2 }, { type: i6.Location }, { type: NavigationServiceService }]; }, propDecorators: { topicId: [{
+                type: Input
+            }], slug: [{
+                type: Input
+            }], widget: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+/* tslint:enable */
+class TrendingTagsComponent {
+    constructor(router, configService, navigationService) {
+        this.router = router;
+        this.configService = configService;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.max = 0;
+    }
+    ngOnInit() {
+        // debugger
+        this.max = ___default.get(___default.maxBy(this.tags, 'score'), 'score') || 0;
+        this.trandingTags = ___default.chain(this.tags).orderBy('score', 'desc').take(5).value();
+    }
+    ngOnChanges(data) {
+        // debugger
+        // this.tableData!.columns = data.tableData.currentValue.columns
+        this.tags = ___default.get(data, 'tags.currentValue');
+        this.max = ___default.get(___default.maxBy(this.tags, 'score'), 'score') || 0;
+        this.trandingTags = ___default.chain(this.tags).orderBy('score', 'desc').take(5).value();
+    }
+    // TODO: To enable trending tags click and navigate to tags detals page
+    getAllDiscussions(tag) {
+        // debugger
+        this.queryParam = tag.value;
+        const tagdata = {
+            tagname: ''
+        };
+        tagdata.tagname = tag.value;
+        this.queryParam = tagdata;
+        const routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : '';
+        const input = { data: { url: `${routerSlug}${ROUTES.TAG}tag-discussions`,
+                queryParams: this.queryParam, tagName: this.queryParam.tagName }, action: 'tagsAll' };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ action: TAG_ALL_DISCUSS, title: tag.value, tid: 'sd' });
+        // tslint:disable-next-line: max-line-length
+        // this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TAG}tag-discussions`], { queryParams: this.queryParam });
+    }
+    css() {
+        // return 'linear - gradient(to left, #00ff00 " + 80 + " %, #ff0000 20 %)"
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TrendingTagsComponent, deps: [{ token: i1.Router }, { token: ConfigService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TrendingTagsComponent, selector: "lib-discuss-trending-tags", inputs: { tags: "tags" }, outputs: { stateChange: "stateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"margin-left-l right_tag_inner_box\">\n    <span class=\"mat-subheading-2\" role=\"link\" tabindex=\"0\" aria-label=\"Trending tags\">Trending tags</span>\n    <ng-container *ngIf=\"trandingTags && trandingTags.length > 0\">\n      <div *ngFor=\"let tag of trandingTags\" class=\"tag ws-mat-primary-lite-background-important cursor-pointer\" role=\"link\" tabindex=\"0\"\n        [attr.aria-label]=\"tag.value\"\n        [ngStyle]=\"{'background-image':'linear-gradient(to right, #ECECEC, #ECECEC ' + ((tag.score / max) *100 ) + '%, #FFF 24px)'}\" (click)=\"getAllDiscussions(tag)\">\n        <span class=\"margin-left-m mat-caption\">{{tag.value}}</span>\n        <span class=\"custom-margin margin-right-m mat-subheading-2\">{{tag.score}}</span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"update_box margin-left-l\"> \n    <span class=\"mat-subheading-2\" role=\"link\" tabindex=\"0\" aria-label=\"Updates\">Updates</span>\n    <div class=\"update_inner_box flex flex-col items-center justify-center\">\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">1 Upvote on your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">What is the most reliable and useful source for COVID related ..</p>\n        </div>\n      </div>\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">@sundaramraj answered your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">I think the solution to such a problem would be to extensively..</p>\n        </div>\n      </div>\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">1 Upvote on your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">What is the most reliable and useful source for COVID related ..</p>\n        </div>\n      </div>\n\n      <div class=\"flex flex-col items-center update_btn_box\">\n        <a class=\"all_update_link flex mat-subheading-2 justify-center\">ALL UPDATES</a>\n      </div>\n\n    </div>\n  </div>", styles: [":root{font-size:16px;--blue: #024f9d;--green: #008840;--black: #000000;--white: #ffffff;--red:#ff4558;--primary: var(--blue);--secondary: #008840;--tertiary: #e55a28;--gray-hs: 0, 0%;--gray: hsl(var(--gray-hs), 20%);--gray-0: hsl(var(--gray-hs), 95%);--gray-100: hsl(var(--gray-hs), 80%);--gray-200: hsl(var(--gray-hs), 60%);--gray-300: hsl(var(--gray-hs), 59%);--gray-400: hsl(var(--gray-hs), 40%);--gray-800: var(--gray);--primary-hs: 210, 97%;--primary: hsl(var(--primary-hs), 31%);--primary-0: hsl(var(--primary-hs), 98%);--primary-100: hsl(var(--primary-hs), 88%);--primary-200: hsl(var(--primary-hs), 78%);--primary-250: hsl(var(--primary-hs), 73%);--primary-300: hsl(var(--primary-hs), 68%);--primary-400: var(--primary);--primary-600: hsl(var(--primary), 48%);--primary-800: hsl(var(--primary-hs), 38%);--secondary-hs: 148, 100%;--secondary: hsl(var(--secondary-hs), 27%);--secondary-0: hsl(var(--secondary-hs), 94%);--secondary-100: hsl(var(--secondary-hs), 39%);--secondary-200: hsl(var(--secondary-hs), 38%);--secondary-400: var(--secondary);--tertiary-hs:16,78%;--tertiary:hsl(var(--tertiary-hs), 53%);--tertiary-0:hsl(var(--tertiary-hs), 92%);--tertiary-100: hsl(var(--tertiary-hs), 56%);--tertiary-400: var(--tertiary);--red-0: #fbccd1;--red-100: #ff6979;--red-400: var(--red);--df-e9e8d9:#e9e8d9;--df-333:#333;--text-color:var(--df-333);--df-background:var(--white);--df-common-bg:var(--white);--df-body-bg: var(--primary-0);--df-theme-bg: var(--df-background);--df-text: var(--text-color);--df-card-bg: var(--df-background);--df-btn-default-color: var(--white);--df-field-control-bg: var(--df-background);--df-cancel-btn-bg:var(--df-background);--df-tab-bg: var(--df-background);--df-tab-text: var(--primary);--df-tab-bg-active: var(--primary);--df-tab-text-active: var(--white)}.recent-tabs{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;box-shadow:none!important;border-radius:unset;background:inherit!important;z-index:unset;padding-bottom:.5rem}.recent-tabs .tabs-content{display:flex;flex:1 1 0%;flex-direction:column}.recent-tabs .tabs-content .tabs-filter{display:flex;flex:1 1 0%;flex-wrap:wrap}.recent-tabs .tabs-content .tabs-filter .filter-option{background:var(--df-tab-bg);padding:.5rem 1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;font-size:.875rem;font-weight:700;margin-right:.75rem;margin-top:.5rem;transition:all ease .3s;display:flex;align-items:center;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--df-tab-text)}.recent-tabs .tabs-content .tabs-filter .filter-option:first-child{margin-left:0}.recent-tabs .tabs-content .tabs-filter .filter-option:hover,.recent-tabs .tabs-content .tabs-filter .filter-option.tabs-active{color:var(--df-btn-default-color);text-decoration:none;background-color:var(--df-tab-bg-active)}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:2}@media (max-width: 768px){.tags{z-index:unset}}.tags .tag{font-size:.75rem;display:flex;width:auto;min-width:max-content;max-height:2rem;justify-content:space-between;align-items:center;text-transform:lowercase;margin:.5rem 1rem .5rem 0;padding:.5rem 1rem;border-radius:1.5rem;cursor:pointer}.df-cancel-btn{background-color:var(--white);color:var(--primary-400);border-color:var(--primary-400);margin:0 .5rem}.df-cancel-btn:hover,.df-cancel-btn:active{color:var(--primary-800);background-color:var(--primary-100)}.topic-list-container{overflow-y:auto;overflow-x:hidden;height:calc(100vh - 150px)!important}#topic-scroll::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #0000004d;background-color:#ccc}#topic-scroll::-webkit-scrollbar{width:8px}#topic-scroll::-webkit-scrollbar-thumb{background:gray}.no-card-content{cursor:pointer;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:0;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;width:auto}.no-card-content .no-data-label{font-size:1.25rem;font-weight:700}.df-btn{white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:0;display:inline-block;border:0;cursor:pointer;min-width:4rem;border-radius:.125rem;position:relative;line-height:1;text-transform:inherit;text-decoration:none}.df-btn-normal{height:2rem;padding:.5rem 1rem;font-size:.75rem}.df-btn-primary{background-color:var(--primary-400)}.df-btn-secondary{background-color:var(--secondary-200)}.df-btn-tertiary{background-color:var(--tertiary-100)}.df-btn-danger{background-color:var(--red-100)}.df-btn-danger:hover{background-color:var(--red-400)}.df-btn-primary,.df-btn-secondary,.df-btn-tertiary,.df-btn-danger{color:var(--df-btn-default-color)}.df-btn-primary.active,.df-btn-primary:active,.df-btn-primary:hover{background-color:var(--primary-800)}.df-btn-secondary.active,.df-btn-secondary:active,.df-btn-secondary:hover{background-color:var(--secondary-400)}.df-btn-tertiary.active,.df-btn-tertiary:active,.df-btn-tertiary:hover{background-color:var(--tertiary-400)}.tag{display:flex;width:17.25rem;height:2rem;border-radius:.25rem;justify-content:space-between;margin:.5rem 0;align-items:center;box-sizing:border-box}.custom-margin{margin-top:auto!important;margin-bottom:auto!important}@media (max-width: 768px){.right_tag_inner_box{width:100%;margin-left:0!important}}.update_box{box-sizing:border-box;margin-top:2rem;display:none}.update_box .update_inner_box{box-sizing:border-box;margin-top:1rem}.update_box .update_inner_box .update_card{box-sizing:border-box}.update_box .update_inner_box .update_card .card_head p.blue_heading{color:var(--primary);margin-bottom:.5rem}.update_box .update_inner_box .update_btn_box{width:100%;margin-top:.5rem}.update_box .update_inner_box .update_btn_box a.all_update_link{width:100%;padding:.5rem 0;text-align:center;color:var(--primary);border-radius:.25rem;border:.0625rem solid var(--black)}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TrendingTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-trending-tags', template: "<div class=\"margin-left-l right_tag_inner_box\">\n    <span class=\"mat-subheading-2\" role=\"link\" tabindex=\"0\" aria-label=\"Trending tags\">Trending tags</span>\n    <ng-container *ngIf=\"trandingTags && trandingTags.length > 0\">\n      <div *ngFor=\"let tag of trandingTags\" class=\"tag ws-mat-primary-lite-background-important cursor-pointer\" role=\"link\" tabindex=\"0\"\n        [attr.aria-label]=\"tag.value\"\n        [ngStyle]=\"{'background-image':'linear-gradient(to right, #ECECEC, #ECECEC ' + ((tag.score / max) *100 ) + '%, #FFF 24px)'}\" (click)=\"getAllDiscussions(tag)\">\n        <span class=\"margin-left-m mat-caption\">{{tag.value}}</span>\n        <span class=\"custom-margin margin-right-m mat-subheading-2\">{{tag.score}}</span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"update_box margin-left-l\"> \n    <span class=\"mat-subheading-2\" role=\"link\" tabindex=\"0\" aria-label=\"Updates\">Updates</span>\n    <div class=\"update_inner_box flex flex-col items-center justify-center\">\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">1 Upvote on your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">What is the most reliable and useful source for COVID related ..</p>\n        </div>\n      </div>\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">@sundaramraj answered your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">I think the solution to such a problem would be to extensively..</p>\n        </div>\n      </div>\n\n      <div class=\"mat-card flex flex-col update_card margin-bottom-s\">\n        <div class=\"flex fex-1 items-center justify-start card_head\">\n          <p class=\"mat-subheading-1 blue_heading\">1 Upvote on your question</p>\n        </div>\n        <div class=\"flex fex-1 items-center justify-start card_body\">\n          <p class=\"mat-body-2\">What is the most reliable and useful source for COVID related ..</p>\n        </div>\n      </div>\n\n      <div class=\"flex flex-col items-center update_btn_box\">\n        <a class=\"all_update_link flex mat-subheading-2 justify-center\">ALL UPDATES</a>\n      </div>\n\n    </div>\n  </div>", styles: [":root{font-size:16px;--blue: #024f9d;--green: #008840;--black: #000000;--white: #ffffff;--red:#ff4558;--primary: var(--blue);--secondary: #008840;--tertiary: #e55a28;--gray-hs: 0, 0%;--gray: hsl(var(--gray-hs), 20%);--gray-0: hsl(var(--gray-hs), 95%);--gray-100: hsl(var(--gray-hs), 80%);--gray-200: hsl(var(--gray-hs), 60%);--gray-300: hsl(var(--gray-hs), 59%);--gray-400: hsl(var(--gray-hs), 40%);--gray-800: var(--gray);--primary-hs: 210, 97%;--primary: hsl(var(--primary-hs), 31%);--primary-0: hsl(var(--primary-hs), 98%);--primary-100: hsl(var(--primary-hs), 88%);--primary-200: hsl(var(--primary-hs), 78%);--primary-250: hsl(var(--primary-hs), 73%);--primary-300: hsl(var(--primary-hs), 68%);--primary-400: var(--primary);--primary-600: hsl(var(--primary), 48%);--primary-800: hsl(var(--primary-hs), 38%);--secondary-hs: 148, 100%;--secondary: hsl(var(--secondary-hs), 27%);--secondary-0: hsl(var(--secondary-hs), 94%);--secondary-100: hsl(var(--secondary-hs), 39%);--secondary-200: hsl(var(--secondary-hs), 38%);--secondary-400: var(--secondary);--tertiary-hs:16,78%;--tertiary:hsl(var(--tertiary-hs), 53%);--tertiary-0:hsl(var(--tertiary-hs), 92%);--tertiary-100: hsl(var(--tertiary-hs), 56%);--tertiary-400: var(--tertiary);--red-0: #fbccd1;--red-100: #ff6979;--red-400: var(--red);--df-e9e8d9:#e9e8d9;--df-333:#333;--text-color:var(--df-333);--df-background:var(--white);--df-common-bg:var(--white);--df-body-bg: var(--primary-0);--df-theme-bg: var(--df-background);--df-text: var(--text-color);--df-card-bg: var(--df-background);--df-btn-default-color: var(--white);--df-field-control-bg: var(--df-background);--df-cancel-btn-bg:var(--df-background);--df-tab-bg: var(--df-background);--df-tab-text: var(--primary);--df-tab-bg-active: var(--primary);--df-tab-text-active: var(--white)}.recent-tabs{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;box-shadow:none!important;border-radius:unset;background:inherit!important;z-index:unset;padding-bottom:.5rem}.recent-tabs .tabs-content{display:flex;flex:1 1 0%;flex-direction:column}.recent-tabs .tabs-content .tabs-filter{display:flex;flex:1 1 0%;flex-wrap:wrap}.recent-tabs .tabs-content .tabs-filter .filter-option{background:var(--df-tab-bg);padding:.5rem 1rem;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;font-size:.875rem;font-weight:700;margin-right:.75rem;margin-top:.5rem;transition:all ease .3s;display:flex;align-items:center;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--df-tab-text)}.recent-tabs .tabs-content .tabs-filter .filter-option:first-child{margin-left:0}.recent-tabs .tabs-content .tabs-filter .filter-option:hover,.recent-tabs .tabs-content .tabs-filter .filter-option.tabs-active{color:var(--df-btn-default-color);text-decoration:none;background-color:var(--df-tab-bg-active)}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:2}@media (max-width: 768px){.tags{z-index:unset}}.tags .tag{font-size:.75rem;display:flex;width:auto;min-width:max-content;max-height:2rem;justify-content:space-between;align-items:center;text-transform:lowercase;margin:.5rem 1rem .5rem 0;padding:.5rem 1rem;border-radius:1.5rem;cursor:pointer}.df-cancel-btn{background-color:var(--white);color:var(--primary-400);border-color:var(--primary-400);margin:0 .5rem}.df-cancel-btn:hover,.df-cancel-btn:active{color:var(--primary-800);background-color:var(--primary-100)}.topic-list-container{overflow-y:auto;overflow-x:hidden;height:calc(100vh - 150px)!important}#topic-scroll::-webkit-scrollbar-track{box-shadow:inset 0 0 6px #0000004d;background-color:#ccc}#topic-scroll::-webkit-scrollbar{width:8px}#topic-scroll::-webkit-scrollbar-thumb{background:gray}.no-card-content{cursor:pointer;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;background:var(--df-card-bg);color:var(--df-text);flex:1;height:auto;margin-bottom:0;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:1rem;border-radius:.25rem;width:auto}.no-card-content .no-data-label{font-size:1.25rem;font-weight:700}.df-btn{white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:0;display:inline-block;border:0;cursor:pointer;min-width:4rem;border-radius:.125rem;position:relative;line-height:1;text-transform:inherit;text-decoration:none}.df-btn-normal{height:2rem;padding:.5rem 1rem;font-size:.75rem}.df-btn-primary{background-color:var(--primary-400)}.df-btn-secondary{background-color:var(--secondary-200)}.df-btn-tertiary{background-color:var(--tertiary-100)}.df-btn-danger{background-color:var(--red-100)}.df-btn-danger:hover{background-color:var(--red-400)}.df-btn-primary,.df-btn-secondary,.df-btn-tertiary,.df-btn-danger{color:var(--df-btn-default-color)}.df-btn-primary.active,.df-btn-primary:active,.df-btn-primary:hover{background-color:var(--primary-800)}.df-btn-secondary.active,.df-btn-secondary:active,.df-btn-secondary:hover{background-color:var(--secondary-400)}.df-btn-tertiary.active,.df-btn-tertiary:active,.df-btn-tertiary:hover{background-color:var(--tertiary-400)}.tag{display:flex;width:17.25rem;height:2rem;border-radius:.25rem;justify-content:space-between;margin:.5rem 0;align-items:center;box-sizing:border-box}.custom-margin{margin-top:auto!important;margin-bottom:auto!important}@media (max-width: 768px){.right_tag_inner_box{width:100%;margin-left:0!important}}.update_box{box-sizing:border-box;margin-top:2rem;display:none}.update_box .update_inner_box{box-sizing:border-box;margin-top:1rem}.update_box .update_inner_box .update_card{box-sizing:border-box}.update_box .update_inner_box .update_card .card_head p.blue_heading{color:var(--primary);margin-bottom:.5rem}.update_box .update_inner_box .update_btn_box{width:100%;margin-top:.5rem}.update_box .update_inner_box .update_btn_box a.all_update_link{width:100%;padding:.5rem 0;text-align:center;color:var(--primary);border-radius:.25rem;border:.0625rem solid var(--black)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: ConfigService }, { type: NavigationServiceService }]; }, propDecorators: { tags: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+// import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+/* tslint:enable */
+class DiscussAllComponent {
+    constructor(router, route, discussionService, configService, activatedRoute, telemetryUtils, navigationService
+    // private modalService: BsModalService
+    ) {
+        this.router = router;
+        this.route = route;
+        this.discussionService = discussionService;
+        this.configService = configService;
+        this.activatedRoute = activatedRoute;
+        this.telemetryUtils = telemetryUtils;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.showStartDiscussionModal = false;
+        this.isTopicCreator = false;
+        this.showLoader = false;
+        this.currentFilter = 'recent';
+        this.currentActivePage = 1;
+        this.cIds = [];
+        this.sticky = false;
+    }
+    ngOnInit() {
+        this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
+        if (this.context) {
+            this.isWidget = true;
+            this.getForumIds();
+        }
+        else {
+            this.cIds = this.configService.getCategories().result;
+            this.loadDiscussionData();
+        }
+    }
+    async getForumIds() {
+        let body = {
+            "identifier": this.context.contextIdArr,
+            "type": this.context.contextType
+        };
+        let resp = await this.discussionService.getForumIds(body);
+        if (resp.result.length > 0) {
+            resp.result.forEach(forum => {
+                this.cIds.push(forum.cid);
+            });
+        }
+        else {
+            this.discussionService.createForum(this.context.categoryObj).subscribe(((data) => {
+                data.result.forEach(forum => {
+                    this.cIds.push(forum.newCid);
+                });
+            }));
+        }
+        this.loadDiscussionData();
+    }
+    loadDiscussionData() {
+        // debugger
+        // this.cIds = this.context ? this.context.categories : this.configService.getCategories()
+        this.categoryId = this.discussionService.getContext(CONTEXT_PROPS.cid);
+        if (this.configService.hasContext() || this.context) {
+            this.getContextBasedDiscussion(this.cIds);
+            // This is to show context based trending tags
+            this.getContextBasedTags(this.cIds);
+        }
+        else {
+            // this.currentActivePage = 1
+            this.refreshData();
+            // This is to show trending tags
+            this.fetchAllTags();
+        }
+    }
+    navigateToDiscussionDetails(discussionData) {
+        const matchedTopic = _.find(this.telemetryUtils.getContext(), { type: 'Topic' });
+        if (matchedTopic) {
+            this.telemetryUtils.deleteContext(matchedTopic);
+        }
+        this.telemetryUtils.uppendContext({
+            id: _.get(discussionData, 'tid'),
+            type: 'Topic'
+        });
+        const slug = _.trim(_.get(discussionData, 'slug'));
+        // tslint:disable-next-line: max-line-length
+        const input = { data: { url: `${this.configService.getRouterSlug()}${ROUTES.TOPIC}${slug}`, queryParams: {} }, action: CATEGORY_DETAILS, };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ action: CATEGORY_DETAILS, title: discussionData.title, tid: discussionData.tid });
+        // this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TOPIC}${slug}`], { queryParamsHandling: "merge" });
+    }
+    acceptData(singleTagDetails) {
+        // debugger
+        if (this.context) {
+            singleTagDetails.cIds = this.cIds;
+        }
+        this.stateChange.emit(singleTagDetails);
+    }
+    getDiscussionList(slug) {
+        this.showLoader = true;
+        // TODO : this.currentActivePage shoulb be dynamic when pagination will be implemented
+        this.discussionService.getContextBasedTopic(slug, this.currentActivePage).subscribe(data => {
+            this.showLoader = false;
+            this.isTopicCreator = _.get(data, 'privileges.topics:create') === true ? true : false;
+            this.discussionList = _.union(_.get(data, 'topics'), _.get(data, 'children'));
+        }, error => {
+            this.showLoader = false;
+            // TODO: Toaster
+            console.log('error fetching topic list', error);
+        });
+    }
+    filter(key) {
+        if (key) {
+            this.currentFilter = key;
+            switch (key) {
+                case 'recent':
+                    this.cIds.length ? this.getContextData(this.cIds.result) : this.fillrecent();
+                    break;
+                case 'popular':
+                    this.cIds.length ? this.getContextData(this.cIds.result) : this.fillPopular();
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    fillrecent(_page) {
+        this.getRecentData();
+    }
+    fillPopular(page) {
+        this.showLoader = true;
+        return this.discussionService.fetchPopularD(page).subscribe((response) => {
+            this.showLoader = false;
+            this.discussionList = [];
+            _.filter(response.topics, (topic) => {
+                if (topic.user.uid !== 0 && topic.cid !== 1) {
+                    this.discussionList.push(topic);
+                }
+            });
+            // this.discussionList = _.get(response, 'topics')
+        }, error => {
+            this.showLoader = false;
+            // TODO: Toaster
+            console.log('error fetching topic list', error);
+        });
+    }
+    getContextBasedDiscussion(cid) {
+        this.currentFilter === 'recent' ? this.getContextData(cid) : this.getContextData(cid);
+    }
+    refreshData(page) {
+        this.currentFilter === 'recent' ? this.getRecentData() : this.fillPopular(page);
+    }
+    getRecentData() {
+        this.showLoader = true;
+        return this.discussionService.fetchRecentPost().subscribe((data) => {
+            this.showLoader = false;
+            this.discussionList = [];
+            _.filter(data.topics, (topic) => {
+                if (topic.user.uid !== 0 && topic.cid !== 1) {
+                    this.discussionList.push(topic);
+                }
+            });
+            this.discussionList = _.get(data, 'posts');
+        }, error => {
+            this.showLoader = false;
+            // TODO: Toaster
+            console.log('error fetching topic list', error);
+        });
+    }
+    getContextData(cid) {
+        this.showLoader = true;
+        const req = {
+            // request: {
+            cids: cid
+            // }
+        };
+        return this.discussionService.getContextBasedDiscussion(req).subscribe((data) => {
+            this.showLoader = false;
+            let result = data.result;
+            let res = result.filter((elem) => {
+                return (elem.statusCode !== 404);
+            });
+            this.allTopics = _.map(res, (topic) => topic.topics);
+            this.discussionList = _.flatten(this.allTopics);
+        }, error => {
+            this.showLoader = false;
+            // TODO: Toaster
+            console.log('error fetching topic list', error);
+        });
+    }
+    fetchAllTags() {
+        this.showLoader = true;
+        this.discussionService.fetchAllTag().subscribe(data => {
+            this.showLoader = false;
+            this.trendingTags = _.get(data, 'tags');
+        }, error => {
+            this.showLoader = false;
+            // TODO: toaster
+            console.log('error fetching tags');
+        });
+    }
+    getContextBasedTags(cid) {
+        const req = {
+            cids: cid
+        };
+        this.showLoader = true;
+        this.discussionService.contextBasedTags(req).subscribe(data => {
+            this.showLoader = false;
+            this.trendingTags = _.get(data, 'result');
+        }, error => {
+            this.showLoader = false;
+            // TODO: toaster
+            console.log('error fetching tags');
+        });
+    }
+    // startDiscussion(template: TemplateRef<any>) {
+    //   this.modalRef = this.modalService.show(template);
+    // this.showStartDiscussionModal = true;
+    // this.bsModalRef = this.modalService.show(DiscussStartComponent);
+    // this.bsModalRef.content.onClose().subscribe(
+    //   console.log('completed')
+    // );
+    // }
+    startDiscussion() {
+        debugger;
+        this.showStartDiscussionModal = true;
+        if (this.context) {
+            this.startDiscussionCategoryId = this.cIds;
+        }
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
+    }
+    closeModal(event) {
+        if (_.get(event, 'message') === 'success') {
+            if (this.context) {
+                this.getContextBasedDiscussion(this.cIds);
+            }
+            else {
+                this.refreshData();
+            }
+            // this.getDiscussionList(_.get(this.routeParams, 'slug'));
+        }
+        this.showStartDiscussionModal = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussAllComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: DiscussionService }, { token: ConfigService }, { token: i1.ActivatedRoute }, { token: TelemetryUtilsService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiscussAllComponent, selector: "lib-discuss-all", inputs: { context: "context", categoryAction: "categoryAction" }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div class=\"main-div\">\n\n    <!-- <button (click)=\"startDiscussion();logTelemetry($event)\" class=\"df-btn df-btn-normal df-btn-primary\" data-toggle=\"modal\"\n        data-target=\"#myModal\" id=\"start-discussion\">Start Discussion</button> -->\n\n\n    <div class=\"flex flex-1 custom discussion_outer_box\">\n        <div class=\"flex flex-3 flex-column discussion_main_box\">\n            <div (click)=\"startDiscussion();logTelemetry($event)\" data-toggle=\"modal\"\n            data-target=\"#myModal\" id=\"start-discussion\">\n                <a href=\"javascript:void(0)\" class=\"flex flex-1 cursor-pointer margin-fix height-48\" i18n-aria-label role=\"link\">\n                  <div\n                    class=\"flex flex-1 items-center border discuss border-solid discuss-border ws-mat-primary-background-op100 \">\n                    <div class=\"w-full discuss truncate\">\n                      <span class=\"overflow ml-4 start-btn-hint mb-0 mat-body-1\">Ask a question or post an idea</span>\n                    </div>\n                    <div class=\"discuss-home text-white flex items-center justify-center cursor-pointer mat-subheading-2\">\n                      Start discussion\n                    </div>\n                  </div>\n                  <!-- <div class=\"text-box\">Ask a question or post an idea</div> \n              <div class=\"buton\">start discussion</div> -->\n                </a>\n              </div>\n\n            <ng-container>\n                <div class=\"flex flex-1 flex-row margin-fix tab_margin\">\n                    <div class=\"flex flex-1 filter max-height-60\">\n                        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{'tabs-active' : currentFilter === 'recent',\n          ' font-medium':currentFilter !== 'recent'}\" mat-button (click)=\"filter('recent')\" role=\"button\">Recent</a>\n                        <a href=\"javascript:void(0)\"  role=\"link\" class=\"filter-option\" [ngClass]=\"{'tabs-active' : currentFilter === 'popular',\n          ' font-medium':currentFilter !== 'popular'}\" mat-button (click)=\"filter('popular')\" role=\"button\">Popular</a>\n                        <a href=\"javascript:void(0)\"  role=\"link\" class=\"filter-option watching_link\"  mat-button role=\"button\">Watching</a>\n                    </div>\n                    <div class=\"flex items-center\">\n                        <a class=\"all_category_link mat-subheading-2 margin-remove\">All categories </a>\n                    </div>\n                </div>\n            </ng-container>\n            <!-- <lib-app-loader *ngIf=\"showLoader\"></lib-app-loader> -->\n\n\n            <ng-container *ngIf=\"discussionList  && discussionList.length > 0\">\n                <div (click)=\"navigateToDiscussionDetails(data);logTelemetry($event)\"\n                    *ngFor=\"let data of discussionList\" id=\"discuss-card\">\n                    <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\" !(discussionList && discussionList.length > 0)\">\n                <div class=\"no-card-content\" tabindex=\"0\">\n                    <div class=\"no-data-label\">No Data</div>\n                    <div>\n                        <span>&nbsp;</span>\n                    </div>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-1 flex-column margin-fix pagination-container\">\n            <ws-app-pagination [pager]=\"pager\" (changePage)=\"navigateWithPage($event)\"></ws-app-pagination>\n        </div> -->\n        </div>\n        <div *ngIf=\"!isWidget\" class=\"flex flex-1 right_tag_box\" #stickyMenu [class.sticky]=\"sticky\">\n            <lib-discuss-trending-tags [tags]=\"trendingTags\" (stateChange)=\"acceptData($event)\"></lib-discuss-trending-tags>\n        </div>\n    </div>\n\n    <lib-discuss-start (close)=\"closeModal($event)\" *ngIf=\"showStartDiscussionModal\" [categoryId]=\"startDiscussionCategoryId\">\n    </lib-discuss-start>\n</div>", styles: [".fade:not(.show){opacity:1!important}.buton{display:flex;border:.0625rem solid;flex:1;background:var(--red);align-content:center;text-align:center}.sticky{position:fixed;top:0;overflow:hidden;z-index:10;width:100%}.text-box{display:flex;border:.0625rem solid;flex:3;align-content:center;text-align:center}.overflow{overflow:hidden}.font-medium{font-weight:500!important}.discuss-border{border-radius:.25rem;border:.0625rem solid var(--gray-200);flex:1}.discuss .mat-form-field-wrapper{padding-bottom:0}.discuss .mat-form-field-wrapper .mat-form-field-infix{border-top-width:.25rem!important;padding:0;padding-bottom:.25rem}.discuss-home{background:var(--primary) 0% 0% no-repeat padding-box;border-radius:0px .25rem .25rem 0px;padding:.875rem 2rem;min-width:-moz-fit-content;min-width:fit-content;margin:0 1rem 1rem}.flex-3{flex:3}.filter .filter-option{border-radius:0;border-bottom-width:.125rem;border-top-width:0;border-left-width:0;border-right-width:0;border-bottom:.0625rem solid var(--black)}.filter .filter-option.tabs-active{border-bottom:.1875rem solid var(--blue)}.start-btn-hint{display:block;margin-bottom:0;padding:1rem}.tab_margin{margin-bottom:1rem!important}a.all_category_link{color:var(--primary);display:none}.watching_link{display:none}@media (max-width: 768px){.main-div{display:block!important;width:100%!important;padding:0!important}.discussion_outer_box{display:block!important}.discussion_main_box,.right_tag_box{width:100%;display:block!important;float:none}}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiscussCardComponent, selector: "lib-discuss-card", inputs: ["discussionData"] }, { kind: "component", type: DiscussStartComponent, selector: "lib-discuss-start", inputs: ["categoryId", "topicData", "mode"], outputs: ["close"] }, { kind: "component", type: TrendingTagsComponent, selector: "lib-discuss-trending-tags", inputs: ["tags"], outputs: ["stateChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussAllComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-discuss-all', template: "<div class=\"main-div\">\n\n    <!-- <button (click)=\"startDiscussion();logTelemetry($event)\" class=\"df-btn df-btn-normal df-btn-primary\" data-toggle=\"modal\"\n        data-target=\"#myModal\" id=\"start-discussion\">Start Discussion</button> -->\n\n\n    <div class=\"flex flex-1 custom discussion_outer_box\">\n        <div class=\"flex flex-3 flex-column discussion_main_box\">\n            <div (click)=\"startDiscussion();logTelemetry($event)\" data-toggle=\"modal\"\n            data-target=\"#myModal\" id=\"start-discussion\">\n                <a href=\"javascript:void(0)\" class=\"flex flex-1 cursor-pointer margin-fix height-48\" i18n-aria-label role=\"link\">\n                  <div\n                    class=\"flex flex-1 items-center border discuss border-solid discuss-border ws-mat-primary-background-op100 \">\n                    <div class=\"w-full discuss truncate\">\n                      <span class=\"overflow ml-4 start-btn-hint mb-0 mat-body-1\">Ask a question or post an idea</span>\n                    </div>\n                    <div class=\"discuss-home text-white flex items-center justify-center cursor-pointer mat-subheading-2\">\n                      Start discussion\n                    </div>\n                  </div>\n                  <!-- <div class=\"text-box\">Ask a question or post an idea</div> \n              <div class=\"buton\">start discussion</div> -->\n                </a>\n              </div>\n\n            <ng-container>\n                <div class=\"flex flex-1 flex-row margin-fix tab_margin\">\n                    <div class=\"flex flex-1 filter max-height-60\">\n                        <a href=\"javascript:void(0)\" role=\"link\" class=\"filter-option\" [ngClass]=\"{'tabs-active' : currentFilter === 'recent',\n          ' font-medium':currentFilter !== 'recent'}\" mat-button (click)=\"filter('recent')\" role=\"button\">Recent</a>\n                        <a href=\"javascript:void(0)\"  role=\"link\" class=\"filter-option\" [ngClass]=\"{'tabs-active' : currentFilter === 'popular',\n          ' font-medium':currentFilter !== 'popular'}\" mat-button (click)=\"filter('popular')\" role=\"button\">Popular</a>\n                        <a href=\"javascript:void(0)\"  role=\"link\" class=\"filter-option watching_link\"  mat-button role=\"button\">Watching</a>\n                    </div>\n                    <div class=\"flex items-center\">\n                        <a class=\"all_category_link mat-subheading-2 margin-remove\">All categories </a>\n                    </div>\n                </div>\n            </ng-container>\n            <!-- <lib-app-loader *ngIf=\"showLoader\"></lib-app-loader> -->\n\n\n            <ng-container *ngIf=\"discussionList  && discussionList.length > 0\">\n                <div (click)=\"navigateToDiscussionDetails(data);logTelemetry($event)\"\n                    *ngFor=\"let data of discussionList\" id=\"discuss-card\">\n                    <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\" !(discussionList && discussionList.length > 0)\">\n                <div class=\"no-card-content\" tabindex=\"0\">\n                    <div class=\"no-data-label\">No Data</div>\n                    <div>\n                        <span>&nbsp;</span>\n                    </div>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-1 flex-column margin-fix pagination-container\">\n            <ws-app-pagination [pager]=\"pager\" (changePage)=\"navigateWithPage($event)\"></ws-app-pagination>\n        </div> -->\n        </div>\n        <div *ngIf=\"!isWidget\" class=\"flex flex-1 right_tag_box\" #stickyMenu [class.sticky]=\"sticky\">\n            <lib-discuss-trending-tags [tags]=\"trendingTags\" (stateChange)=\"acceptData($event)\"></lib-discuss-trending-tags>\n        </div>\n    </div>\n\n    <lib-discuss-start (close)=\"closeModal($event)\" *ngIf=\"showStartDiscussionModal\" [categoryId]=\"startDiscussionCategoryId\">\n    </lib-discuss-start>\n</div>", styles: [".fade:not(.show){opacity:1!important}.buton{display:flex;border:.0625rem solid;flex:1;background:var(--red);align-content:center;text-align:center}.sticky{position:fixed;top:0;overflow:hidden;z-index:10;width:100%}.text-box{display:flex;border:.0625rem solid;flex:3;align-content:center;text-align:center}.overflow{overflow:hidden}.font-medium{font-weight:500!important}.discuss-border{border-radius:.25rem;border:.0625rem solid var(--gray-200);flex:1}.discuss .mat-form-field-wrapper{padding-bottom:0}.discuss .mat-form-field-wrapper .mat-form-field-infix{border-top-width:.25rem!important;padding:0;padding-bottom:.25rem}.discuss-home{background:var(--primary) 0% 0% no-repeat padding-box;border-radius:0px .25rem .25rem 0px;padding:.875rem 2rem;min-width:-moz-fit-content;min-width:fit-content;margin:0 1rem 1rem}.flex-3{flex:3}.filter .filter-option{border-radius:0;border-bottom-width:.125rem;border-top-width:0;border-left-width:0;border-right-width:0;border-bottom:.0625rem solid var(--black)}.filter .filter-option.tabs-active{border-bottom:.1875rem solid var(--blue)}.start-btn-hint{display:block;margin-bottom:0;padding:1rem}.tab_margin{margin-bottom:1rem!important}a.all_category_link{color:var(--primary);display:none}.watching_link{display:none}@media (max-width: 768px){.main-div{display:block!important;width:100%!important;padding:0!important}.discussion_outer_box{display:block!important}.discussion_main_box,.right_tag_box{width:100%;display:block!important;float:none}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: DiscussionService }, { type: ConfigService }, { type: i1.ActivatedRoute }, { type: TelemetryUtilsService }, { type: NavigationServiceService }]; }, propDecorators: { context: [{
+                type: Input
+            }], categoryAction: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+class TagAllDiscussionComponent {
+    constructor(route, router, discussService, activatedRoute, configService, telemetryUtils, discussUtils, navigationService) {
+        this.route = route;
+        this.router = router;
+        this.discussService = discussService;
+        this.activatedRoute = activatedRoute;
+        this.configService = configService;
+        this.telemetryUtils = telemetryUtils;
+        this.discussUtils = discussUtils;
+        this.navigationService = navigationService;
+        this.stateChange = new EventEmitter();
+        this.fetchSingleCategoryLoader = false;
+        this.defaultError = 'Something went wrong, Please try again after sometime!';
+        this.pager = {};
+        this.fetchNewData = false;
+    }
+    ngOnInit() {
+        // debugger
+        this.cIds = this.widgetcIds ? this.widgetcIds : this.configService.getCategories();
+        if (this.widgetTagName) {
+            this.tagName = this.widgetTagName;
+        }
+        else {
+            this.activatedRoute.queryParams.subscribe((params) => {
+                this.tagName = params.tagname ? params.tagname : this.tagName;
+            });
+        }
+        // To check wheather any contexts are there or not from the config service
+        if (this.configService.hasContext() || this.widgetcIds) {
+            this.fetchContextBasedTagDetails(this.tagName, this.cIds, this.currentActivePage);
+        }
+        else {
+            this.fetchSingleTagDetails(this.tagName, this.currentActivePage);
+        }
+    }
+    /**Method to fetch the tag based discussion */
+    fetchSingleTagDetails(tagname, page) {
+        this.fetchSingleCategoryLoader = true;
+        this.discussService.getTagBasedDiscussion(tagname).subscribe((data) => {
+            this.similarPosts = data.topics;
+            this.paginationData = data.pagination;
+            this.fetchSingleCategoryLoader = false;
+            this.setPagination();
+        }, (err) => {
+            console.error('Error in fetching single tag details', err);
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError)
+            this.fetchSingleCategoryLoader = false;
+        });
+    }
+    /** Method to fetch the context based discussions */
+    fetchContextBasedTagDetails(tagname, cid, page) {
+        this.fetchSingleCategoryLoader = true;
+        const req = {
+            cid: cid.result,
+            tag: tagname
+        };
+        this.discussService.getContextBasedTagDiscussion(req).subscribe((data) => {
+            this.similarPosts = data.result;
+            // this.paginationData = data.pagination
+            this.fetchSingleCategoryLoader = false;
+            this.setPagination();
+        }, (err) => {
+            console.error('Error in fetching context based tag details', err);
+            // this.openSnackbar(err.error.message.split('|')[1] || this.defaultError)
+            this.fetchSingleCategoryLoader = false;
+        });
+    }
+    // TODO : for pagination
+    // getNextData(tagname: string, page: any) {
+    //   return this.discussService.fetchNextTagD(tagname, page).subscribe(
+    //     (data: any) => {
+    //       this.paginationData = data.pagination
+    //       this.setPagination()
+    //       this.similarPosts = _.get(data, 'topics')
+    //     })
+    // }
+    setPagination() {
+        this.pager = {
+            startIndex: this.paginationData.first.page,
+            endIndex: this.paginationData.last.page,
+            pages: this.paginationData.pages,
+            currentPage: this.paginationData.currentPage,
+            totalPage: this.paginationData.pageCount,
+        };
+    }
+    navigateWithPage(page) {
+        if (page !== this.currentActivePage) {
+            this.fetchNewData = true;
+            this.router.navigate([`${this.configService.getRouterSlug()}${ROUTES.TAG}tag-discussions`], { queryParams: { page, tagname: this.queryParam }, queryParamsHandling: "merge" });
+        }
+    }
+    /** Method to navigate to the dicussion detail page on click of tag related discussion */
+    navigateToDiscussionDetails(discussionData) {
+        const matchedTopic = ___default.find(this.telemetryUtils.getContext(), { type: 'Topic' });
+        if (matchedTopic) {
+            this.telemetryUtils.deleteContext(matchedTopic);
+        }
+        this.telemetryUtils.uppendContext({
+            id: ___default.get(discussionData, 'tid'),
+            type: 'Topic'
+        });
+        let slug = ___default.trim(___default.get(discussionData, 'slug'));
+        let input = { data: { url: `${this.configService.getRouterSlug()}${ROUTES.TOPIC}${slug}`, queryParams: {} }, action: CATEGORY_DETAILS, };
+        this.navigationService.navigate(input);
+        this.stateChange.emit({ action: CATEGORY_DETAILS, title: discussionData.title, tid: discussionData.tid });
+        // this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TOPIC}${_.trim(_.get(discussionData, 'slug'))}`], { queryParamsHandling: "merge" });
+    }
+    logTelemetry(event) {
+        this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
+    }
+    // TODO: add refershdata function
+    // refreshData(tagname: string, page: any) {
+    //   if (this.fetchNewData) {
+    //     // this.getNextData(tagname, page)
+    //   }
+    // }
+    // for tag color
+    getBgColor(tagTitle) {
+        const bgColor = this.discussUtils.stringToColor(tagTitle.toLowerCase());
+        const color = this.discussUtils.getContrast();
+        return { color, 'background-color': bgColor };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagAllDiscussionComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: DiscussionService }, { token: i1.ActivatedRoute }, { token: ConfigService }, { token: TelemetryUtilsService }, { token: DiscussUtilsService }, { token: NavigationServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagAllDiscussionComponent, selector: "lib-tag-all-discussion", inputs: { widgetTagName: "widgetTagName", widgetcIds: "widgetcIds" }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div class=\"main-div\">\n    <div class=\"flex flex-1 margin-top-xl\">\n        <h2 class=\"margin-remove-bottom tagtitle\" [ngStyle]=\"getBgColor(tagName)\">{{tagName}}</h2>\n    </div>\n    <div>\n        <span>&nbsp;</span>\n    </div>\n    <div class=\"flex flex-1 custom\">\n        <div class=\"flex flex-1 flex-column margin-fix\">\n            <lib-app-loader *ngIf=\"fetchSingleCategoryLoader\"></lib-app-loader>\n\n            <ng-container *ngIf=\"similarPosts && similarPosts.length > 0\">\n                <div (click)=\"navigateToDiscussionDetails(data);logTelemetry($event)\"\n                    *ngFor=\"let data of similarPosts\" id=\"discuss-card\">\n                    <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(similarPosts && similarPosts.length > 0)\">\n                <div class=\"no-card-content\" tabindex=\"0\"> \n                    <div class=\"no-data-label\">No Data</div>\n                    <div>\n                        <span>&nbsp;</span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <!-- <div class=\"flex flex-1 flex-column margin-top-xl margin-bottom-xl pagination-container\">\n        <ws-app-pagination [pager]=\"pager\" (changePage)=\"navigateWithPage($event)\"></ws-app-pagination>\n    </div> -->\n</div>", styles: [".flex.flex-5{flex-direction:column}.tagtitle{margin:0 .25rem;padding:.25rem 1rem;min-width:3.125rem;justify-content:center;border-radius:1.25rem .25rem .25rem 1.25rem}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DiscussCardComponent, selector: "lib-discuss-card", inputs: ["discussionData"] }, { kind: "component", type: AppLoaderComponent, selector: "lib-app-loader", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagAllDiscussionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tag-all-discussion', template: "<div class=\"main-div\">\n    <div class=\"flex flex-1 margin-top-xl\">\n        <h2 class=\"margin-remove-bottom tagtitle\" [ngStyle]=\"getBgColor(tagName)\">{{tagName}}</h2>\n    </div>\n    <div>\n        <span>&nbsp;</span>\n    </div>\n    <div class=\"flex flex-1 custom\">\n        <div class=\"flex flex-1 flex-column margin-fix\">\n            <lib-app-loader *ngIf=\"fetchSingleCategoryLoader\"></lib-app-loader>\n\n            <ng-container *ngIf=\"similarPosts && similarPosts.length > 0\">\n                <div (click)=\"navigateToDiscussionDetails(data);logTelemetry($event)\"\n                    *ngFor=\"let data of similarPosts\" id=\"discuss-card\">\n                    <lib-discuss-card [discussionData]=\"data\"></lib-discuss-card>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(similarPosts && similarPosts.length > 0)\">\n                <div class=\"no-card-content\" tabindex=\"0\"> \n                    <div class=\"no-data-label\">No Data</div>\n                    <div>\n                        <span>&nbsp;</span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <!-- <div class=\"flex flex-1 flex-column margin-top-xl margin-bottom-xl pagination-container\">\n        <ws-app-pagination [pager]=\"pager\" (changePage)=\"navigateWithPage($event)\"></ws-app-pagination>\n    </div> -->\n</div>", styles: [".flex.flex-5{flex-direction:column}.tagtitle{margin:0 .25rem;padding:.25rem 1rem;min-width:3.125rem;justify-content:center;border-radius:1.25rem .25rem .25rem 1.25rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: DiscussionService }, { type: i1.ActivatedRoute }, { type: ConfigService }, { type: TelemetryUtilsService }, { type: DiscussUtilsService }, { type: NavigationServiceService }]; }, propDecorators: { widgetTagName: [{
+                type: Input
+            }], widgetcIds: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }] } });
+
+class ComponentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, declarations: [SidePannelComponent,
+            DiscussHomeComponent,
+            DiscussCategoryComponent,
+            DiscussTagsComponent,
+            MyDiscussionComponent,
+            DiscussionDetailsComponent,
+            DiscussStartComponent,
+            DiscussAllComponent,
+            TagAllDiscussionComponent,
+            TrendingTagsComponent], imports: [CommonModule,
+            HttpClientModule,
+            ElementsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TagInputModule,
+            PipesModule,
+            InfiniteScrollModule], exports: [SidePannelComponent,
+            DiscussHomeComponent,
+            DiscussCategoryComponent,
+            DiscussTagsComponent,
+            MyDiscussionComponent,
+            DiscussionDetailsComponent,
+            DiscussStartComponent,
+            // TODO: Add this components
+            DiscussAllComponent,
+            TagAllDiscussionComponent,
+            TrendingTagsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, providers: [
+            DiscussionService, ConfigService
+        ], imports: [CommonModule,
+            HttpClientModule,
+            ElementsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TagInputModule,
+            PipesModule,
+            InfiniteScrollModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SidePannelComponent,
+                        DiscussHomeComponent,
+                        DiscussCategoryComponent,
+                        DiscussTagsComponent,
+                        MyDiscussionComponent,
+                        DiscussionDetailsComponent,
+                        DiscussStartComponent,
+                        DiscussAllComponent,
+                        TagAllDiscussionComponent,
+                        TrendingTagsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        ElementsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TagInputModule,
+                        PipesModule,
+                        InfiniteScrollModule
+                    ],
+                    exports: [
+                        SidePannelComponent,
+                        DiscussHomeComponent,
+                        DiscussCategoryComponent,
+                        DiscussTagsComponent,
+                        MyDiscussionComponent,
+                        DiscussionDetailsComponent,
+                        DiscussStartComponent,
+                        // TODO: Add this components
+                        DiscussAllComponent,
+                        TagAllDiscussionComponent,
+                        TrendingTagsComponent,
+                    ],
+                    providers: [
+                        DiscussionService, ConfigService
+                    ]
+                }]
+        }] });
+
+const routes = [
+    {
+        path: '',
+        component: LibEntryComponent,
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                component: DiscussCategoryComponent
+            },
+            {
+                path: 'all-discussions',
+                pathMatch: 'full',
+                component: DiscussAllComponent
+            },
+            {
+                path: 'categories',
+                pathMatch: 'full',
+                component: DiscussCategoryComponent
+            },
+            {
+                path: 'tags',
+                pathMatch: 'full',
+                component: DiscussTagsComponent
+            },
+            // TODO: ADD LATER
+            {
+                path: 'tags/tag-discussions',
+                pathMatch: 'full',
+                component: TagAllDiscussionComponent
+            },
+            {
+                path: 'my-discussion',
+                pathMatch: 'full',
+                component: MyDiscussionComponent
+            },
+            {
+                path: 'category/:slug',
+                pathMatch: 'full',
+                component: DiscussHomeComponent
+            },
+            {
+                path: 'topic/:topicId/:slug',
+                pathMatch: 'full',
+                component: DiscussionDetailsComponent
+            }
+        ]
+    },
+];
+class DiscussionRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DiscussionRoutingModule, imports: [i1.RouterModule, CommonModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionRoutingModule, imports: [RouterModule.forChild(routes),
+            CommonModule, RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        RouterModule.forChild(routes),
+                        CommonModule
+                    ],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class BaseWrapperComponent {
+    constructor(navigationServiceService, eventService, configSvc, discussionService) {
+        this.navigationServiceService = navigationServiceService;
+        this.eventService = eventService;
+        this.configSvc = configSvc;
+        this.discussionService = discussionService;
+    }
+    ngOnInit() {
+        this.navigationServiceService.initService('wrapperService');
+        this.configSvc.setConfigFromWidgetBaseClass(this.config);
+        this.discussionService.userId = _.get(this.config, 'userName');
+        const rawCategories = _.get(this.config, 'categories');
+        this.discussionService.forumIds = _.get(rawCategories, 'result');
+        this.discussionService.initializeUserDetails(this.config.userName);
+        this.eventService.toggleMenuItem.subscribe((data) => {
+            this.wrapperEventListener(data);
+            this.state = data.action;
+        });
+        this.wrapperInit();
+    }
+    wrapperInit() { }
+    wrapperEventListener(data) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseWrapperComponent, deps: [{ token: NavigationServiceService }, { token: EventsService }, { token: ConfigService }, { token: DiscussionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BaseWrapperComponent, selector: "sb-base-wrapper", inputs: { config: "config" }, providers: [NavigationServiceService, EventsService], ngImport: i0, template: "<p>base-wrapper works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BaseWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sb-base-wrapper', providers: [NavigationServiceService, EventsService], template: "<p>base-wrapper works!</p>\n" }]
+        }], ctorParameters: function () { return [{ type: NavigationServiceService }, { type: EventsService }, { type: ConfigService }, { type: DiscussionService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class CategoryWidgetComponent extends BaseWrapperComponent {
+    constructor(configSvc, discussionService, navigationServiceService, eventService) {
+        super(navigationServiceService, eventService, configSvc, discussionService);
+        this.detailsToggle = true;
+        this.category = CATEGORY;
+        this.detailsPage = CATEGORY_DETAILS;
+        this.homePage = CATEGORY_HOME;
+    }
+    wrapperInit() {
+        this.state = this.detailsPage;
+    }
+    stateChange(event) {
+        this.state = event.action;
+        if (event.action === this.detailsPage) {
+            this.tid = event.tid;
+            this.slug = event.title;
+        }
+    }
+    wrapperEventListener(data) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryWidgetComponent, deps: [{ token: ConfigService }, { token: DiscussionService }, { token: NavigationServiceService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryWidgetComponent, selector: "sb-category-widget", usesInheritance: true, ngImport: i0, template: "<div class='widget-container'>\n    <!-- <lib-discuss-category *ngIf='state === category ' [categoryAction]='homePage' (stateChange)='stateChange($event)'></lib-discuss-category>\n    <lib-discuss-home *ngIf='state === homePage' [categoryHomeAction]='detailsPage' (stateChange)='stateChange($event)'></lib-discuss-home> -->\n    <!-- <lib-discussion-details *ngIf='state === detailsPage' [widget]=\"true\" [topicId]='tid' [slug]='slug'></lib-discussion-details> -->\n    <lib-discuss-all [context]='context'></lib-discuss-all>\n</div>", styles: [".widget-container{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: DiscussAllComponent, selector: "lib-discuss-all", inputs: ["context", "categoryAction"], outputs: ["stateChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sb-category-widget', template: "<div class='widget-container'>\n    <!-- <lib-discuss-category *ngIf='state === category ' [categoryAction]='homePage' (stateChange)='stateChange($event)'></lib-discuss-category>\n    <lib-discuss-home *ngIf='state === homePage' [categoryHomeAction]='detailsPage' (stateChange)='stateChange($event)'></lib-discuss-home> -->\n    <!-- <lib-discussion-details *ngIf='state === detailsPage' [widget]=\"true\" [topicId]='tid' [slug]='slug'></lib-discussion-details> -->\n    <lib-discuss-all [context]='context'></lib-discuss-all>\n</div>", styles: [".widget-container{display:flex;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: ConfigService }, { type: DiscussionService }, { type: NavigationServiceService }, { type: EventsService }]; } });
+
+class TagsWidgetComponent extends BaseWrapperComponent {
+    constructor(configSvc, discussionService, navigationServiceService, eventService) {
+        super(navigationServiceService, eventService, configSvc, discussionService);
+        this.tags = TAGS;
+        this.tagsAll = TAGSALL;
+    }
+    wrapperInit() {
+        this.state = this.tags;
+    }
+    wrapperEventListener(data) {
+        // if (data.action === this.tags || data.action === this.tagName) {
+        //   this.state = data.action
+        // }
+        this.tagName = data.tagName;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsWidgetComponent, deps: [{ token: ConfigService }, { token: DiscussionService }, { token: NavigationServiceService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagsWidgetComponent, selector: "sb-tags-widget", usesInheritance: true, ngImport: i0, template: "<div >\n    <lib-discuss-tags *ngIf='state === tags'></lib-discuss-tags>\n    <!-- <lib-tag-all-discussion *ngIf='state === tagsAll' [tagName]='tagName'></lib-tag-all-discussion> -->\n    <!-- <lib-discuss-home *ngIf='state === homePage'></lib-discuss-home>\n    <lib-discussion-details *ngIf='state === detailsPage' [topicId]='tid' [slug]='slug'></lib-discussion-details> -->\n</div>", styles: [""], dependencies: [{ kind: "component", type: DiscussTagsComponent, selector: "lib-discuss-tags", outputs: ["stateChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sb-tags-widget', template: "<div >\n    <lib-discuss-tags *ngIf='state === tags'></lib-discuss-tags>\n    <!-- <lib-tag-all-discussion *ngIf='state === tagsAll' [tagName]='tagName'></lib-tag-all-discussion> -->\n    <!-- <lib-discuss-home *ngIf='state === homePage'></lib-discuss-home>\n    <lib-discussion-details *ngIf='state === detailsPage' [topicId]='tid' [slug]='slug'></lib-discussion-details> -->\n</div>" }]
+        }], ctorParameters: function () { return [{ type: ConfigService }, { type: DiscussionService }, { type: NavigationServiceService }, { type: EventsService }]; } });
+
+function provideCsModule() {
+    return window['CsModule'];
+}
+class DiscussionUiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DiscussionUiModule, declarations: [LibEntryComponent, CategoryWidgetComponent, BaseWrapperComponent, TagsWidgetComponent], imports: [ComponentsModule,
+            DiscussionRoutingModule,
+            ElementsModule,
+            CommonModule], exports: [ComponentsModule, CategoryWidgetComponent, BaseWrapperComponent, TagsWidgetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionUiModule, providers: [DiscussionEventsService, TelemetryUtilsService, { provide: 'CsModule', useFactory: provideCsModule }], imports: [ComponentsModule,
+            DiscussionRoutingModule,
+            ElementsModule,
+            CommonModule, ComponentsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussionUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LibEntryComponent, CategoryWidgetComponent, BaseWrapperComponent, TagsWidgetComponent],
+                    imports: [
+                        ComponentsModule,
+                        DiscussionRoutingModule,
+                        ElementsModule,
+                        CommonModule,
+                    ],
+                    exports: [ComponentsModule, CategoryWidgetComponent, BaseWrapperComponent, TagsWidgetComponent],
+                    providers: [DiscussionEventsService, TelemetryUtilsService, { provide: 'CsModule', useFactory: provideCsModule }]
+                }]
+        }] });
+
+class AbstractConfigService {
+}
+
+/*
+ * Public API Surface of discussion-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractConfigService, BaseWrapperComponent, CONTEXT_PROPS, CategoryWidgetComponent, ComponentsModule, ConfigService, DiscussAllComponent, DiscussCategoryComponent, DiscussHomeComponent, DiscussStartComponent, DiscussTagsComponent, DiscussionDetailsComponent, DiscussionEventsService, DiscussionService, DiscussionUiModule, EventsService, LibEntryComponent, MyDiscussionComponent, NavigationServiceService, SidePannelComponent, TagAllDiscussionComponent, TagsWidgetComponent, TrendingTagsComponent, WrapperNavigateService, provideCsModule };
+//# sourceMappingURL=jeraldj-discussions-ui.mjs.map