import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { NsContent } from '@sunbird-cb/utils-v2';
import { viewerRouteGenerator } from '../../../../_services/viewer-route-util';
import moment from 'moment';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/icon";
import * as i4 from "../../attendance-card/attendance-card.component";
import * as i5 from "@ngx-translate/core";
export class AppTocSessionCardNewComponent {
    constructor(router) {
        this.router = router;
        this.session = null;
        this.expandAll = false;
        this.forPreview = false;
        this.content = null;
        this.isEnabled = true;
        this.isAllowed = true;
        this.viewChildren = true;
    }
    ngOnInit() {
    }
    redirectToPage() {
        if (this.isAllowed && !this.forPreview && this.isEnabled && this.batchData && this.batchData.enrolled) {
            this.router.navigate([this.resourceLink.url], { queryParams: this.resourceLink.queryParams });
        }
        // [routerLink]="(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null"
        //       [queryParams]="(isAllowed && !forPreview && isEnabled)  ? resourceLink.queryParams : null"
    }
    raiseTelemetry() { }
    progressColor() {
        return '#1D8923';
    }
    progressColor2() {
        return '#f27d00';
    }
    get isCollection() {
        if (this.content) {
            return this.content.mimeType === NsContent.EMimeTypes.COLLECTION;
        }
        return false;
    }
    get isResource() {
        if (this.content) {
            return (this.content.primaryCategory === NsContent.EPrimaryCategory.OFFLINE_SESSION);
        }
        return false;
    }
    get isModule() {
        if (this.content) {
            return this.content.primaryCategory === NsContent.EPrimaryCategory.MODULE;
        }
        return false;
    }
    get resourceLink() {
        if (this.content) {
            const url = viewerRouteGenerator(this.content.identifier, this.content.mimeType, this.rootId, this.rootContentType, this.forPreview, this.content.primaryCategory, this.batchId);
            /* tslint:disable-next-line */
            // console.log(this.content.identifier, '------', url,'=====> content card url link <========')
            return url;
        }
        return { url: '', queryParams: {} };
    }
    get isBatchInProgess() {
        if (this.batchData && (this.batchData.content && this.batchData.content.length) && this.batchData.enrolled) {
            const batchData = this.batchData.content[0];
            if (batchData && batchData.endDate) {
                const now = moment().format('YYYY-MM-DD');
                const startDate = moment(batchData.startDate).format('YYYY-MM-DD');
                const endDate = batchData.endDate ? moment(batchData.endDate).format('YYYY-MM-DD') : now;
                return (
                // batch.status &&
                moment(startDate).isSameOrBefore(now)
                    && moment(endDate).isSameOrAfter(now));
            }
            return true;
        }
        return false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardNewComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardNewComponent, selector: "ws-widget-app-toc-session-card-new", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config", index: "index", batchId: "batchId", content: "content", pathSet: "pathSet", sessionType: "sessionType" }, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n   <ng-container *ngIf=\"isCollection && !isModule\">\n      <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n      </ng-container>\n   </ng-container>\n   <ng-container *ngIf=\"isCollection && isModule\">\n      <ng-container *ngIf=\"content?.offlineResourseCount\">\n         <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n         </ng-container>\n      </ng-container>\n   </ng-container>\n   <div *ngIf=\"isResource\" class=\"resource-container mt-4\">\n      <div class=\"resource flex flex-wrap sm:flex-col flex-start width-expand w-100  sm:w-auto\">\n         <a class=\"w-full\" [class.disabled]=\"(forPreview || !isEnabled || !isBatchInProgess) ? true : null\"\n            (click)=\"redirectToPage()\">\n            <div class=\"text-truncate1 \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n               (click)=\"viewChildren = !viewChildren; raiseTelemetry();\">\n               <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                  <p class=\"margin-remove text-truncate1 mat-body-2 flex-auto font-bold\"\n                     [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                     {{ content?.name }} <span class=\"margin-left-s\"\n                        [ngClass]=\"{'offline': session[content?.identifier]?.sessionType.toLowerCase() === 'offline','online':session[content?.identifier]?.sessionType.toLowerCase() !== 'offline'}\">\n                        {{session[content?.identifier]?.sessionType || ''}}</span>\n                  </p>\n                  <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">optional </span>\n\n               </div>\n               <div class=\"mat-body-2 ws-mat-black60-text mt-2\">\n                  <div class=\"flex flex-1 flex-row\">\n                     <!-- <div class=\"flex margin-right-s capitalize\">{{session[content?.identifier]?.sessionType || ''}}</div> -->\n                     <div class=\"flex margin-right-s\">{{session[content?.identifier]?.startDate | date: 'MMM d, y' }}\n                     </div>\n                     <div class=\"flex bullet-span\">{{session[content?.identifier]?.sessionDuration || '_'}}\n                        <span class=\"margin-left-s bullet-span\">{{session[content?.identifier]?.startTime || '_' }} -\n                           {{session[content?.identifier]?.endTime || '_'}}</span>\n                     </div>\n                  </div>\n               </div>\n               <!-- {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }} -->\n            </div>\n         </a>\n         <ng-container *ngIf=\"batchData?.enrolled\">\n            <div *ngIf=\"session[content?.identifier]?.sessionHandouts?.length > 0\">\n               <div class=\"flex flex-row font-normal py-2\">\n                  {{'apptocsessionscards.sessionHandouts' | translate }}\n               </div>\n               <div class=\"flex gap-4 card justify-between flex-middle py-2 \"\n                  *ngFor=\"let handout of session[content?.identifier]?.sessionHandouts\">\n                  <div class=\"mr-2\">{{handout.title}}</div>\n                  <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">\n                     {{'apptocsessionscards.download' | translate }}\n                  </a>\n               </div>\n            </div>\n         </ng-container>\n         <ng-container *ngIf=\"batchData?.enrolled && session[content?.identifier]?.resources?.length > 0\">\n            <div class=\"flex flex-row font-normal py-2\">{{'apptocsessionscards.resources' | translate }}</div>\n            <div class=\"flex gap-4 card justify-between flex-middle py-2 \"\n               *ngFor=\"let resource of session[content?.identifier]?.resources\">\n               <div class=\"mr-2\">{{resource.resourceTitle}}</div>\n               <a class=\"download-resource-link\" target=\u201D_blank\u201D download href=\"{{resource.resourceLink}}\"\n                  *ngIf=\"resource?.resourceType === 'URL'\">\n                  {{'apptocsessionscards.view' | translate }}\n               </a>\n               <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{resource.resourceLink}}\"\n                  *ngIf=\"resource?.resourceType !== 'URL'\">\n                  {{'apptocsessionscards.download' | translate }}\n               </a>\n            </div>\n         </ng-container>\n         <ng-container>\n            <ws-widget-attendance-card [session]=\"session[content?.identifier]\"\n               [config]=\"config\"></ws-widget-attendance-card>\n         </ng-container>\n\n      </div>\n   </div>\n</ng-container>\n\n<ng-template #collectionTemplate>\n   <ng-container *ngIf=\"isCollection\">\n      <ng-container *ngIf=\"isModule\">\n         <div class=\"collection-wrapper  flex flex-col position-relative\"\n            [ngClass]=\"{'open': viewChildren, 'close': !viewChildren, 'course':!isModule, ' module': isModule}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n               <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n                  <div class=\"text-truncate1\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                     (click)=\"viewChildren = !viewChildren\">\n                     <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <ng-container *ngFor=\"let sType of sessionType\">\n                           <span class=\"flex\" class=\"margin-right-s\"\n                              [ngClass]=\"sType ==='offline' ? 'offline':'online'\">\n                              {{sType | titlecase}}\n                           </span>\n\n                        </ng-container>\n\n\n                     </div>\n                     <div class=\"flex flex-col sm:flex-row flex-wrap mt-2\">\n                        <p class=\"margin-remove text-truncate1 mat-body-1 flex-auto font-bold\">\n                           {{ content?.name }}\n                        </p>\n                     </div>\n                  </div>\n                  <div class=\"see-all-container\">\n                     <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n                        class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!viewChildren && isModule\">arrow_drop_down</mat-icon>\n                        <mat-icon *ngIf=\"viewChildren && isModule\">arrow_drop_up</mat-icon>\n                     </a>\n                  </div>\n               </div>\n            </div>\n         </div>\n      </ng-container>\n      <ng-container *ngIf=\"batchData?.enrolled\">\n         <div *ngIf=\"content?.sessionHandouts?.length > 0\">\n            <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">\n               {{'apptocsessionscards.sessionHandouts' | translate }}</p>\n            <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n               <ng-container *ngFor=\"let handout of content?.sessionHandouts\">\n                  <div class=\"\">\n                     <span class=\"mr-4\">{{handout.title}}</span>\n                     <a class=\"download-link\" target=\u201D_blank\u201D download\n                        href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                  </div>\n               </ng-container>\n            </div>\n         </div>\n      </ng-container>\n      <div class=\"child-wrapper  \" [ngClass]=\"{'open': viewChildren, 'close': !viewChildren}\" *ngIf=\"viewChildren\"\n         [@panelInOut]>\n         <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n            <ws-widget-app-toc-session-card-new [forPreview]=\"forPreview\" [pathSet]=\"pathSet\" [content]=\"child\"\n               [index]=\"j+1\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n               [rootContentType]=\"rootContentType\" [batchData]=\"batchData\" [config]=\"config\" [sessionType]=\"sessionType\"\n               [session]=\"session\"\n               *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n               [ngClass]=\"{'moduleCard': true, 'first': isFirst}\"></ws-widget-app-toc-session-card-new>\n         </div>\n      </div>\n   </ng-container>\n</ng-template>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}.card{background:#e5e9ef;border-radius:5px;padding:10px;margin:10px 0}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}.offline{border-radius:2px;background-color:#0009;padding:2px;opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;width:fit-content}.online{border-radius:2px;background-color:#1d8923;padding:2px;opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;width:fit-content}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: AppTocSessionCardNewComponent, selector: "ws-widget-app-toc-session-card-new", inputs: ["session", "expandAll", "rootId", "rootContentType", "forPreview", "batchData", "config", "index", "batchId", "content", "pathSet", "sessionType"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [
            trigger('panelInOut', [
                transition('void => *', [
                    style({ transform: 'translateY(-10%)', opacity: '0' }),
                    animate(250),
                ]),
                transition('* => void', [
                    animate(200, style({ transform: 'translateY(-10%)', opacity: '0' })),
                ]),
            ])
        ] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardNewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-app-toc-session-card-new', animations: [
                        trigger('panelInOut', [
                            transition('void => *', [
                                style({ transform: 'translateY(-10%)', opacity: '0' }),
                                animate(250),
                            ]),
                            transition('* => void', [
                                animate(200, style({ transform: 'translateY(-10%)', opacity: '0' })),
                            ]),
                        ])
                    ], template: "<ng-container *ngIf=\"content\">\n   <ng-container *ngIf=\"isCollection && !isModule\">\n      <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n      </ng-container>\n   </ng-container>\n   <ng-container *ngIf=\"isCollection && isModule\">\n      <ng-container *ngIf=\"content?.offlineResourseCount\">\n         <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n         </ng-container>\n      </ng-container>\n   </ng-container>\n   <div *ngIf=\"isResource\" class=\"resource-container mt-4\">\n      <div class=\"resource flex flex-wrap sm:flex-col flex-start width-expand w-100  sm:w-auto\">\n         <a class=\"w-full\" [class.disabled]=\"(forPreview || !isEnabled || !isBatchInProgess) ? true : null\"\n            (click)=\"redirectToPage()\">\n            <div class=\"text-truncate1 \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n               (click)=\"viewChildren = !viewChildren; raiseTelemetry();\">\n               <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                  <p class=\"margin-remove text-truncate1 mat-body-2 flex-auto font-bold\"\n                     [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                     {{ content?.name }} <span class=\"margin-left-s\"\n                        [ngClass]=\"{'offline': session[content?.identifier]?.sessionType.toLowerCase() === 'offline','online':session[content?.identifier]?.sessionType.toLowerCase() !== 'offline'}\">\n                        {{session[content?.identifier]?.sessionType || ''}}</span>\n                  </p>\n                  <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">optional </span>\n\n               </div>\n               <div class=\"mat-body-2 ws-mat-black60-text mt-2\">\n                  <div class=\"flex flex-1 flex-row\">\n                     <!-- <div class=\"flex margin-right-s capitalize\">{{session[content?.identifier]?.sessionType || ''}}</div> -->\n                     <div class=\"flex margin-right-s\">{{session[content?.identifier]?.startDate | date: 'MMM d, y' }}\n                     </div>\n                     <div class=\"flex bullet-span\">{{session[content?.identifier]?.sessionDuration || '_'}}\n                        <span class=\"margin-left-s bullet-span\">{{session[content?.identifier]?.startTime || '_' }} -\n                           {{session[content?.identifier]?.endTime || '_'}}</span>\n                     </div>\n                  </div>\n               </div>\n               <!-- {{ content?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }} -->\n            </div>\n         </a>\n         <ng-container *ngIf=\"batchData?.enrolled\">\n            <div *ngIf=\"session[content?.identifier]?.sessionHandouts?.length > 0\">\n               <div class=\"flex flex-row font-normal py-2\">\n                  {{'apptocsessionscards.sessionHandouts' | translate }}\n               </div>\n               <div class=\"flex gap-4 card justify-between flex-middle py-2 \"\n                  *ngFor=\"let handout of session[content?.identifier]?.sessionHandouts\">\n                  <div class=\"mr-2\">{{handout.title}}</div>\n                  <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">\n                     {{'apptocsessionscards.download' | translate }}\n                  </a>\n               </div>\n            </div>\n         </ng-container>\n         <ng-container *ngIf=\"batchData?.enrolled && session[content?.identifier]?.resources?.length > 0\">\n            <div class=\"flex flex-row font-normal py-2\">{{'apptocsessionscards.resources' | translate }}</div>\n            <div class=\"flex gap-4 card justify-between flex-middle py-2 \"\n               *ngFor=\"let resource of session[content?.identifier]?.resources\">\n               <div class=\"mr-2\">{{resource.resourceTitle}}</div>\n               <a class=\"download-resource-link\" target=\u201D_blank\u201D download href=\"{{resource.resourceLink}}\"\n                  *ngIf=\"resource?.resourceType === 'URL'\">\n                  {{'apptocsessionscards.view' | translate }}\n               </a>\n               <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{resource.resourceLink}}\"\n                  *ngIf=\"resource?.resourceType !== 'URL'\">\n                  {{'apptocsessionscards.download' | translate }}\n               </a>\n            </div>\n         </ng-container>\n         <ng-container>\n            <ws-widget-attendance-card [session]=\"session[content?.identifier]\"\n               [config]=\"config\"></ws-widget-attendance-card>\n         </ng-container>\n\n      </div>\n   </div>\n</ng-container>\n\n<ng-template #collectionTemplate>\n   <ng-container *ngIf=\"isCollection\">\n      <ng-container *ngIf=\"isModule\">\n         <div class=\"collection-wrapper  flex flex-col position-relative\"\n            [ngClass]=\"{'open': viewChildren, 'close': !viewChildren, 'course':!isModule, ' module': isModule}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n               <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n                  <div class=\"text-truncate1\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                     (click)=\"viewChildren = !viewChildren\">\n                     <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <ng-container *ngFor=\"let sType of sessionType\">\n                           <span class=\"flex\" class=\"margin-right-s\"\n                              [ngClass]=\"sType ==='offline' ? 'offline':'online'\">\n                              {{sType | titlecase}}\n                           </span>\n\n                        </ng-container>\n\n\n                     </div>\n                     <div class=\"flex flex-col sm:flex-row flex-wrap mt-2\">\n                        <p class=\"margin-remove text-truncate1 mat-body-1 flex-auto font-bold\">\n                           {{ content?.name }}\n                        </p>\n                     </div>\n                  </div>\n                  <div class=\"see-all-container\">\n                     <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n                        class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!viewChildren && isModule\">arrow_drop_down</mat-icon>\n                        <mat-icon *ngIf=\"viewChildren && isModule\">arrow_drop_up</mat-icon>\n                     </a>\n                  </div>\n               </div>\n            </div>\n         </div>\n      </ng-container>\n      <ng-container *ngIf=\"batchData?.enrolled\">\n         <div *ngIf=\"content?.sessionHandouts?.length > 0\">\n            <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">\n               {{'apptocsessionscards.sessionHandouts' | translate }}</p>\n            <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n               <ng-container *ngFor=\"let handout of content?.sessionHandouts\">\n                  <div class=\"\">\n                     <span class=\"mr-4\">{{handout.title}}</span>\n                     <a class=\"download-link\" target=\u201D_blank\u201D download\n                        href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                  </div>\n               </ng-container>\n            </div>\n         </div>\n      </ng-container>\n      <div class=\"child-wrapper  \" [ngClass]=\"{'open': viewChildren, 'close': !viewChildren}\" *ngIf=\"viewChildren\"\n         [@panelInOut]>\n         <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n            <ws-widget-app-toc-session-card-new [forPreview]=\"forPreview\" [pathSet]=\"pathSet\" [content]=\"child\"\n               [index]=\"j+1\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n               [rootContentType]=\"rootContentType\" [batchData]=\"batchData\" [config]=\"config\" [sessionType]=\"sessionType\"\n               [session]=\"session\"\n               *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n               [ngClass]=\"{'moduleCard': true, 'first': isFirst}\"></ws-widget-app-toc-session-card-new>\n         </div>\n      </div>\n   </ng-container>\n</ng-template>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}.card{background:#e5e9ef;border-radius:5px;padding:10px;margin:10px 0}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}.offline{border-radius:2px;background-color:#0009;padding:2px;opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;width:fit-content}.online{border-radius:2px;background-color:#1d8923;padding:2px;opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;width:fit-content}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { session: [{
                type: Input
            }], expandAll: [{
                type: Input
            }], rootId: [{
                type: Input
            }], rootContentType: [{
                type: Input
            }], forPreview: [{
                type: Input
            }], batchData: [{
                type: Input
            }], config: [{
                type: Input
            }], index: [{
                type: Input
            }], batchId: [{
                type: Input
            }], content: [{
                type: Input
            }], pathSet: [{
                type: Input
            }], sessionType: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 