import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "@angular/material/legacy-tooltip";
import * as i4 from "../../_collection/_common/attendance-card/attendance-card.component";
import * as i5 from "ng-circle-progress";
import * as i6 from "@ngx-translate/core";
export class AppTocSessionCardComponent {
    constructor() {
        this.session = null;
        this.expandAll = false;
        this.forPreview = false;
        this.isEnabled = true;
        this.isAllowed = true;
        this.viewChildren = true;
    }
    ngOnInit() {
    }
    raiseTelemetry() { }
    progressColor() {
        return '#1D8923';
    }
    progressColor2() {
        return '#f27d00';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardComponent, selector: "ws-app-toc-session-card", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config" }, ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n    <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n        [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [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-truncate mat-subheading-1 flex-auto\">\n                    <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                    {{ session?.title }}\n                </p>\n\n                <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n                <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n            </div>\n            <div class=\"mat-body-2 ws-mat-black60-text\">\n                <div class=\"flex flex-1 flex-row\">\n                    <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n                    <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n                    <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n                      {{session?.endTime || '_'}}\n                    </div>\n                </div>\n                <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n                <!-- </span> -->\n            </div>\n        </div>\n    </a>\n    <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n            <ng-container *ngIf=\"session?.completionStatus == 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                    [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                    [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n                    [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                    [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                    matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                    [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n            <ng-container *ngIf=\"session?.completionStatus < 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n                    [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                    [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                    [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                    [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                    [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                    [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n                    [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #elseBlock>\n            <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n                [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n                [showBackground]=\"false\"></circle-progress>\n            <!-- <p>no data</p> -->\n        </ng-template>\n    </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n    <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n        <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">{{'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 session?.sessionHandouts\">\n                <div class=\"\">\n                    <span class=\"mr-4\">{{handout.title}}</span>\n                    <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n<ng-container>\n    <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}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:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: i5.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-app-toc-session-card', template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n    <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n        [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [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-truncate mat-subheading-1 flex-auto\">\n                    <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                    {{ session?.title }}\n                </p>\n\n                <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n                <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n            </div>\n            <div class=\"mat-body-2 ws-mat-black60-text\">\n                <div class=\"flex flex-1 flex-row\">\n                    <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n                    <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n                    <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n                      {{session?.endTime || '_'}}\n                    </div>\n                </div>\n                <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n                <!-- </span> -->\n            </div>\n        </div>\n    </a>\n    <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n            <ng-container *ngIf=\"session?.completionStatus == 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                    [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                    [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n                    [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                    [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                    matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                    [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n            <ng-container *ngIf=\"session?.completionStatus < 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n                    [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                    [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                    [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                    [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                    [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                    [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n                    [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #elseBlock>\n            <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n                [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n                [showBackground]=\"false\"></circle-progress>\n            <!-- <p>no data</p> -->\n        </ng-template>\n    </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n    <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n        <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">{{'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 session?.sessionHandouts\">\n                <div class=\"\">\n                    <span class=\"mr-4\">{{handout.title}}</span>\n                    <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n<ng-container>\n    <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}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:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { session: [{
                type: Input
            }], expandAll: [{
                type: Input
            }], rootId: [{
                type: Input
            }], rootContentType: [{
                type: Input
            }], forPreview: [{
                type: Input
            }], batchData: [{
                type: Input
            }], config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 