import { Component, Input } from '@angular/core';
import { NsCohorts } from '../../models/app-toc.model';
import * as i0 from "@angular/core";
import * as i1 from "../../services/app-toc.service";
import * as i2 from "@sunbird-cb/utils-v2";
import * as i3 from "@angular/router";
import * as i4 from "@angular/common";
import * as i5 from "@angular/material/legacy-progress-spinner";
import * as i6 from "@angular/material/expansion";
import * as i7 from "../../_collection/_common/user-image/user-image.component";
export class AppTocCohortsComponent {
    constructor(tocSvc, configSvc, router) {
        this.tocSvc = tocSvc;
        this.configSvc = configSvc;
        this.router = router;
        this.cohortResults = {};
        this.cohortTypesEnum = NsCohorts.ECohortTypes;
        this.forPreview = false;
    }
    ngOnInit() { }
    get enableFeature() {
        if (this.configSvc.restrictedFeatures) {
            return !this.configSvc.restrictedFeatures.has('cohorts');
        }
        return false;
    }
    get enablePeopleSearch() {
        if (this.configSvc.restrictedFeatures) {
            return !this.configSvc.restrictedFeatures.has('peopleSearch');
        }
        return false;
    }
    goToUserProfile(user) {
        if (this.enablePeopleSearch) {
            this.router.navigate(['/app/person-profile', user.wid]);
            // this.router.navigate(['/app/person-profile'], { queryParams: { emailId: user.email } })
        }
    }
    getUserFullName(user) {
        if (user && user.first_name && user.last_name) {
            return `${user.first_name.trim()} ${user.last_name.trim()}`;
        }
        return '';
    }
    fetchCohorts(cohortType) {
        if (!this.cohortResults[cohortType] && !this.forPreview) {
            this.tocSvc.fetchContentCohorts(cohortType, this.content.identifier).subscribe(data => {
                this.cohortResults[cohortType] = {
                    contents: data || [],
                    hasError: false,
                };
            }, () => {
                this.cohortResults[cohortType] = {
                    contents: [],
                    hasError: true,
                };
            });
        }
        else if (this.cohortResults[cohortType] && !this.forPreview) {
            return;
        }
        else {
            this.cohortResults[cohortType] = {
                contents: [],
                hasError: false,
            };
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCohortsComponent, deps: [{ token: i1.AppTocService }, { token: i2.ConfigurationsService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCohortsComponent, selector: "ws-app-toc-cohorts", inputs: { content: "content", forPreview: "forPreview" }, ngImport: i0, template: "<section *ngIf=\"enableFeature\">\n  <h2 class=\"mat-toolbar cohorts-head shadow\">Cohorts</h2>\n  <mat-accordion [multi]=\"false\">\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.ACTIVE_USERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Learner</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch active users\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError &&\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <!-- <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div> -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.ACTIVE_USERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.TOP_PERFORMERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Top performers</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch top performers\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError &&\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.TOP_PERFORMERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.COMMON_GOALS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Shares same goal</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS]\">\n          <h3\n            *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS].hasError\"\n            class=\"mat-error text-center\"\n            i18n\n          >\n            Failed to fetch users with same goals\n          </h3>\n          <h3\n            *ngIf=\"\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].hasError &&\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].contents.length\n            \"\n            class=\"text-center\"\n            i18n\n          >\n            None\n          </h3>\n          <div\n            *ngFor=\"let cohort of cohortResults[cohortTypesEnum.COMMON_GOALS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\"\n            [ngTemplateOutletContext]=\"{ user: cohort }\"\n          ></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.COMMON_GOALS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.AUTHORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Curators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch curators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n              !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.AUTHORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.EDUCATORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title>Educators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch educators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.EDUCATORS].hasError &&\n              !cohortResults[cohortTypesEnum.EDUCATORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.EDUCATORS].contents\" [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.EDUCATORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n  </mat-accordion>\n\n  <ng-template #unitCohort let-user=\"user\">\n    <div class=\"unit-cohort\">\n      <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n            { firstName: user.first_name, lastName: user.last_name, email: user.email }\n              | pipeNameTransform\n          }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email] }\"></ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n            userName:\n              {\n                firstName: user.first_name,\n                lastName: user.last_name,\n                email: user.email\n              } | pipeNameTransform,\n            userPhone: user.phone_No\n          }\"></ws-widget-btn-call>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n      <!-- <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image> -->\n\n      <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n              { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                | pipeNameTransform\n            }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto user-action-container\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n        </ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n              userName:\n                {\n                  firstName: user.first_name,\n                  lastName: user.last_name,\n                  email: user.email\n                } | pipeNameTransform,\n              userPhone: user.phone_No\n            }\"></ws-widget-btn-call>\n      </div>\n    </div>\n    <!-- </div> -->\n\n  </ng-template>\n</section>\n", styles: [".cohorts-head{padding:8px 24px;margin:0;background:#fff!important;border-radius:8px 8px 0 0;color:#222!important}.unit-cohort{display:inline-flex;margin-bottom:24px}.unit-cohort .cohort-image{width:32px;height:32px;font-size:32px}.cohorts-name{letter-spacing:0px;color:#5f5f5f;font-size:.9rem;font-weight:400}.cohortSection{margin:50px auto;width:70%}.flex{display:flex}.chorotsBlock{background:#fff}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.user-action-container{color:#adadae}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: i7.UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "pipe", type: i2.PipeNameTransformPipe, name: "pipeNameTransform" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCohortsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-app-toc-cohorts', template: "<section *ngIf=\"enableFeature\">\n  <h2 class=\"mat-toolbar cohorts-head shadow\">Cohorts</h2>\n  <mat-accordion [multi]=\"false\">\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.ACTIVE_USERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Learner</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch active users\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError &&\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <!-- <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div> -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.ACTIVE_USERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.TOP_PERFORMERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Top performers</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch top performers\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError &&\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.TOP_PERFORMERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.COMMON_GOALS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Shares same goal</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS]\">\n          <h3\n            *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS].hasError\"\n            class=\"mat-error text-center\"\n            i18n\n          >\n            Failed to fetch users with same goals\n          </h3>\n          <h3\n            *ngIf=\"\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].hasError &&\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].contents.length\n            \"\n            class=\"text-center\"\n            i18n\n          >\n            None\n          </h3>\n          <div\n            *ngFor=\"let cohort of cohortResults[cohortTypesEnum.COMMON_GOALS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\"\n            [ngTemplateOutletContext]=\"{ user: cohort }\"\n          ></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.COMMON_GOALS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.AUTHORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Curators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch curators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n              !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.AUTHORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.EDUCATORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title>Educators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch educators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.EDUCATORS].hasError &&\n              !cohortResults[cohortTypesEnum.EDUCATORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.EDUCATORS].contents\" [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.EDUCATORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n  </mat-accordion>\n\n  <ng-template #unitCohort let-user=\"user\">\n    <div class=\"unit-cohort\">\n      <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n            { firstName: user.first_name, lastName: user.last_name, email: user.email }\n              | pipeNameTransform\n          }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email] }\"></ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n            userName:\n              {\n                firstName: user.first_name,\n                lastName: user.last_name,\n                email: user.email\n              } | pipeNameTransform,\n            userPhone: user.phone_No\n          }\"></ws-widget-btn-call>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n      <!-- <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image> -->\n\n      <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n              { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                | pipeNameTransform\n            }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto user-action-container\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n        </ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n              userName:\n                {\n                  firstName: user.first_name,\n                  lastName: user.last_name,\n                  email: user.email\n                } | pipeNameTransform,\n              userPhone: user.phone_No\n            }\"></ws-widget-btn-call>\n      </div>\n    </div>\n    <!-- </div> -->\n\n  </ng-template>\n</section>\n", styles: [".cohorts-head{padding:8px 24px;margin:0;background:#fff!important;border-radius:8px 8px 0 0;color:#222!important}.unit-cohort{display:inline-flex;margin-bottom:24px}.unit-cohort .cohort-image{width:32px;height:32px;font-size:32px}.cohorts-name{letter-spacing:0px;color:#5f5f5f;font-size:.9rem;font-weight:400}.cohortSection{margin:50px auto;width:70%}.flex{display:flex}.chorotsBlock{background:#fff}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.user-action-container{color:#adadae}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.AppTocService }, { type: i2.ConfigurationsService }, { type: i3.Router }]; }, propDecorators: { content: [{
                type: Input
            }], forPreview: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 