commons-assessment 12.0.39-dev.1 → 12.0.39-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/bundles/commons-assessment.umd.js +149 -68
  2. package/bundles/commons-assessment.umd.js.map +1 -1
  3. package/esm2015/lib/modules/assessment-taker/assessment-taker.component.js +78 -3
  4. package/esm2015/lib/modules/assessment-taker/components/proctoring-result/proctoring-result.component.js +2 -2
  5. package/esm2015/lib/modules/assessment-taker/services/proctoring.service.js +14 -6
  6. package/esm2015/lib/shared/interfaces/proctoring.interface.js +1 -1
  7. package/fesm2015/commons-assessment.js +141 -59
  8. package/fesm2015/commons-assessment.js.map +1 -1
  9. package/lib/modules/assessment-taker/assessment-taker.component.d.ts +18 -0
  10. package/lib/modules/assessment-taker/services/proctoring.service.d.ts +1 -0
  11. package/lib/shared/interfaces/proctoring.interface.d.ts +7 -0
  12. package/package.json +1 -1
  13. package/src/lib/assets/json/labelConfig.json +2 -0
package/bundles/commons-assessment.umd.js CHANGED
@@ -672,6 +672,61 @@
672
672
  }] }];
673
673
  } });
674
674
 
675
+ var ConfirmationDialogComponent = /** @class */ (function () {
676
+ function ConfirmationDialogComponent(dialogRef, data) {
677
+ this.dialogRef = dialogRef;
678
+ this.data = data;
679
+ this.loading = false;
680
+ this.errorMessage = '';
681
+ this.title = (data === null || data === void 0 ? void 0 : data.title) || '';
682
+ this.message = (data === null || data === void 0 ? void 0 : data.message) || '';
683
+ this.note = (data === null || data === void 0 ? void 0 : data.note) || '';
684
+ this.confirmLabel = (data === null || data === void 0 ? void 0 : data.confirmLabel) || '';
685
+ this.cancelLabel = (data === null || data === void 0 ? void 0 : data.cancelLabel) || '';
686
+ this.hideCancel = !!(data === null || data === void 0 ? void 0 : data.hideCancel);
687
+ }
688
+ ConfirmationDialogComponent.prototype.onConfirm = function () {
689
+ var _this = this;
690
+ var _a;
691
+ if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.confirmAction) {
692
+ if (this.loading) {
693
+ return;
694
+ }
695
+ this.loading = true;
696
+ this.errorMessage = '';
697
+ this.data.confirmAction().subscribe({
698
+ next: function () { return _this.dialogRef.close(true); },
699
+ error: function (err) {
700
+ // keep the dialog open so the user can fix the issue and retry
701
+ _this.loading = false;
702
+ _this.errorMessage = (typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message) || '';
703
+ }
704
+ });
705
+ return;
706
+ }
707
+ this.dialogRef.close(true);
708
+ };
709
+ ConfirmationDialogComponent.prototype.onCancel = function () {
710
+ this.dialogRef.close(false);
711
+ };
712
+ return ConfirmationDialogComponent;
713
+ }());
714
+ ConfirmationDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfirmationDialogComponent, deps: [{ token: i1__namespace.MatDialogRef }, { token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
715
+ ConfirmationDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", ngImport: i0__namespace, template: "<div class=\"p-3 px-md-4\">\r\n <h2 *ngIf=\"title\" class=\"assessment-text-semibold-16 assessment-text-grey-ten mb-3\">{{ title }}</h2>\r\n <p class=\"assessment-text-regular-14 assessment-text-grey-ten\" [class.mb-4]=\"!note\" [class.mb-2]=\"note\">{{ message }}</p>\r\n <p *ngIf=\"note\" class=\"assessment-text-regular-13 assessment-text-grey-seven mb-4\">{{ note }}</p>\r\n <p *ngIf=\"errorMessage\" class=\"assessment-text-regular-12 assessment-text-danger mb-3\">{{ errorMessage }}</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!hideCancel\" type=\"button\" (click)=\"onCancel()\" [disabled]=\"loading\"\r\n class=\"assessment-zoom-animation assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ cancelLabel }}\r\n </button>\r\n <button type=\"button\" (click)=\"onConfirm()\" [disabled]=\"loading\"\r\n class=\"assessment-zoom-animation assessment-btn-primary assessment-border-radius-two assessment-text-semibold-13 px-3 py-2 d-inline-flex align-items-center gap-2\">\r\n <span *ngIf=\"loading\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ confirmLabel }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}\n"], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
716
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfirmationDialogComponent, decorators: [{
717
+ type: i0.Component,
718
+ args: [{
719
+ selector: 'lib-confirmation-dialog',
720
+ templateUrl: './confirmation-dialog.component.html',
721
+ styleUrls: ['./confirmation-dialog.component.scss']
722
+ }]
723
+ }], ctorParameters: function () {
724
+ return [{ type: i1__namespace.MatDialogRef }, { type: undefined, decorators: [{
725
+ type: i0.Inject,
726
+ args: [i1.MAT_DIALOG_DATA]
727
+ }] }];
728
+ } });
729
+
675
730
  var COMMONS_ASSESSMENT_SERVICE = '/gateway/commons-assessment-service';
676
731
  var COMMONS_CHANGEMAKER_ORCHESTRATION_SERVICE = '/gateway/commons-changemaker-orchestration-service';
677
732
  var googleDriveController = {
@@ -951,7 +1006,7 @@
951
1006
  return ProctoringResultComponent;
952
1007
  }());
953
1008
  ProctoringResultComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProctoringResultComponent, deps: [{ token: i1__namespace.MatDialogRef }, { token: AssessmentTakerService }, { token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
954
- ProctoringResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProctoringResultComponent, selector: "lib-proctoring-result", ngImport: i0__namespace, template: "<div class=\"d-flex flex-column h-100 overflow-hidden assessment-bg-white\">\r\n\r\n <!-- Header -->\r\n <div class=\"d-flex align-items-start justify-content-between gap-3 p-3 px-md-4 border-bottom\">\r\n <div class=\"flex-grow-1\">\r\n <p class=\"assessment-text-semibold-16 assessment-text-grey-ten mb-1\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.RESULT_TITLE'] }}\r\n </p>\r\n <p class=\"assessment-text-regular-12 assessment-text-grey-seven mb-0\">\r\n <span *ngIf=\"assesseeName\">{{ assesseeName }} \u00B7 </span>{{ totalElements }} {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_COUNT'] }}\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn-close\" (click)=\"close()\" aria-label=\"Close\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"flex-grow-1 overflow-auto p-3 px-md-4\">\r\n\r\n <!-- Loading (initial) -->\r\n <div *ngIf=\"loading && !sessions.length\" class=\"d-flex align-items-center justify-content-center gap-2 py-5 assessment-text-regular-13 assessment-text-grey-seven\">\r\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_LOADING'] }}\r\n </div>\r\n\r\n <!-- Error -->\r\n <div *ngIf=\"errored && !sessions.length\" class=\"text-center py-5\">\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-3\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_ERROR'] }}</p>\r\n <button type=\"button\" (click)=\"loadSessions()\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORTS_RETRY'] }}\r\n </button>\r\n </div>\r\n\r\n <!-- Empty -->\r\n <div *ngIf=\"!loading && !errored && !sessions.length\" class=\"text-center py-5 assessment-text-regular-13 assessment-text-grey-seven\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_EMPTY'] }}\r\n </div>\r\n\r\n <!-- Sessions accordion -->\r\n <mat-accordion class=\"d-block\" *ngIf=\"sessions.length\">\r\n <mat-expansion-panel *ngFor=\"let session of sessions; trackBy: trackBySessionId\"\r\n class=\"shadow-none assessment-border-radius-two assessment-panel border mb-2\" (opened)=\"loadReport(session)\">\r\n\r\n <mat-expansion-panel-header class=\"proctoring-panel-header p-3\">\r\n <mat-panel-title class=\"d-flex flex-column my-1 align-items-start\">\r\n <span class=\"assessment-text-semibold-13 assessment-text-grey-ten\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_SESSION'] }} {{ session.id }}\r\n </span>\r\n <span class=\"d-flex align-items-center gap-2 mt-1\">\r\n <span *ngIf=\"session.status\" class=\"badge rounded-pill text-capitalize assessment-text-medium-10\" [ngClass]=\"statusBadgeClass(session.status)\">\r\n {{ session.status }}\r\n </span>\r\n <span *ngIf=\"session.integrityFlagged || reportBySession[session.id!]?.integrityFlagged\"\r\n class=\"badge rounded-pill assessment-bg-danger assessment-text-white assessment-text-medium-10\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FLAGGED'] }}\r\n </span>\r\n </span>\r\n </mat-panel-title>\r\n <mat-panel-description class=\"justify-content-end align-items-center me-3\">\r\n <span *ngIf=\"toMillis(session.startedAt) as started\" class=\"assessment-text-regular-11 assessment-text-grey-seven\">\r\n {{ started | date:'dd MMM, HH:mm' }}\r\n </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n <!-- Report is fetched when the panel opens -->\r\n <ng-template matExpansionPanelContent>\r\n <div class=\"p-3 pt-1\" [ngSwitch]=\"reportState[session.id!]\">\r\n\r\n <!-- Loading -->\r\n <div *ngSwitchCase=\"'loading'\" class=\"d-flex align-items-center gap-2 py-3 assessment-text-regular-13 assessment-text-grey-seven\">\r\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_LOADING'] }}\r\n </div>\r\n\r\n <!-- Error -->\r\n <div *ngSwitchCase=\"'error'\" class=\"py-3\">\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ERROR'] }}</p>\r\n <button type=\"button\" (click)=\"loadReport(session)\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORTS_RETRY'] }}\r\n </button>\r\n </div>\r\n\r\n <!-- No report yet -->\r\n <div *ngSwitchCase=\"'empty'\" class=\"py-3 assessment-text-regular-13 assessment-text-grey-seven\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_EMPTY'] }}\r\n </div>\r\n\r\n <!-- Loaded report -->\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <ng-container *ngIf=\"reportBySession[session.id!] as report\">\r\n\r\n <!-- Integrity summary (report top-level) -->\r\n <div class=\"row g-2\">\r\n <div class=\"col-6\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_INTEGRITY_SCORE'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-grey-ten mb-0\" [class.assessment-text-danger]=\"report.integrityFlagged\">\r\n {{ report.integrityScore }}<span *ngIf=\"report.integrityLevel\"> ({{ report.integrityLevel }})</span>\r\n </p>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"report.identityMatch\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_IDENTITY_MATCH'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-grey-ten mb-0\">{{ report.identityMatch }}</p>\r\n </div>\r\n <div class=\"col-12\" *ngIf=\"report.failureReason\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FAILURE_REASON'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-0\">{{ report.failureReason }}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParsedPayload(report) as p; else rawPayload\">\r\n\r\n <!-- Summary meta -->\r\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-3 assessment-text-regular-12 assessment-text-grey-seven\">\r\n <span *ngIf=\"p.duration_seconds != null\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_DURATION'] }}: {{ formatDuration(p.duration_seconds) }}</span>\r\n <span *ngIf=\"p.started_at\">\u00B7 {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_STARTED'] }}: {{ p.started_at | date:'dd MMM, HH:mm:ss' }}</span>\r\n <span *ngIf=\"p.ended_at\">\u00B7 {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ENDED'] }}: {{ p.ended_at | date:'HH:mm:ss' }}</span>\r\n </div>\r\n\r\n <!-- Reasons -->\r\n <div *ngIf=\"p.integrity?.reasons?.length\" class=\"d-flex flex-column gap-2 mt-2\">\r\n <div *ngFor=\"let r of p.integrity?.reasons; trackBy: trackByIndex\" class=\"border rounded p-2\">\r\n <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n <span class=\"assessment-text-semibold-12 assessment-text-grey-ten\">{{ reasonCodeLabel(r.code) }}</span>\r\n <span *ngIf=\"r.weight != null\" class=\"badge rounded-pill assessment-text-white\" [ngClass]=\"(r.weight || 0) < 0 ? 'assessment-bg-danger' : 'assessment-bg-success'\">{{ (r.weight || 0) > 0 ? '+' : '' }}{{ r.weight }}</span>\r\n </div>\r\n <p class=\"assessment-text-regular-12 assessment-text-grey-seven mb-0 mt-1\">{{ r.detail }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Stat tiles: face analysis -->\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ANALYSIS'] }}</p>\r\n <div class=\"row row-cols-2 row-cols-md-4 g-2 text-center\">\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\">{{ p.face_analysis?.frames_checked ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FRAMES'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.no_face_frames || 0) > 0\">{{ p.face_analysis?.no_face_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_NO_FACE'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.multi_face_frames || 0) > 0\">{{ p.face_analysis?.multi_face_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_MULTI_FACE'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.impersonation_frames || 0) > 0\">{{ p.face_analysis?.impersonation_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_IMPERSONATION'] }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Activity breakdown -->\r\n <div *ngIf=\"p.activity?.by_type\" class=\"d-flex flex-wrap gap-2 mt-3\">\r\n <span *ngFor=\"let item of (p.activity?.by_type | keyvalue); trackBy: trackByIndex\"\r\n class=\"badge rounded-pill assessment-bg-palette-EDF3FD assessment-text-grey-ten assessment-text-medium-12\">\r\n {{ eventTypeLabel(item.key) }} <span class=\"assessment-text-semibold-12\">{{ item.value }}</span>\r\n </span>\r\n </div>\r\n\r\n <!-- Evidence images -->\r\n <ng-container *ngIf=\"p.evidence?.length\">\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_EVIDENCE'] }}</p>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <a *ngFor=\"let ev of p.evidence; trackBy: trackByIndex\" class=\"text-center text-decoration-none\"\r\n [href]=\"ev.image_url\" target=\"_blank\" rel=\"noopener\">\r\n <img class=\"proctoring-evi-img rounded border\" [src]=\"ev.image_url\" [attr.alt]=\"'frame ' + ev.seq\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/user.svg')\" />\r\n <span class=\"d-block assessment-text-regular-11 assessment-text-grey-seven mt-1\">\r\n <span *ngIf=\"ev.is_reference\" class=\"badge rounded-pill assessment-bg-primary-one assessment-text-white me-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_REFERENCE'] }}</span>\r\n #{{ ev.seq }} \u00B7 {{ ev.captured_at | date:'HH:mm:ss' }}\r\n </span>\r\n </a>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Timeline -->\r\n <ng-container *ngIf=\"p.timeline?.length\">\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_TIMELINE'] }} ({{ p.timeline?.length }})\r\n </p>\r\n <div class=\"proctoring-log assessment-bg-grey-ten assessment-text-grey-one font-monospace small rounded p-3 overflow-auto\">\r\n <div *ngFor=\"let ev of p.timeline; trackBy: trackByIndex\" class=\"text-nowrap\" [class.fw-semibold]=\"isNoteworthy(ev.type)\">\r\n <span class=\"assessment-text-grey-five me-2\">#{{ ev.seq }}</span>\r\n <span [class.assessment-text-palette-ADC9F6]=\"isNoteworthy(ev.type)\">{{ eventTypeLabel(ev.type) }}</span>\r\n <span class=\"assessment-text-grey-five ms-2\">{{ ev.at | date:'HH:mm:ss' }} ({{ ev.source }})</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n <!-- Fallback: raw payload if it isn't parseable JSON -->\r\n <ng-template #rawPayload>\r\n <pre *ngIf=\"report.reportPayload\" class=\"proctoring-payload assessment-bg-grey-ten assessment-text-grey-one small rounded p-3 overflow-auto mb-0 mt-3\">{{ report.reportPayload }}</pre>\r\n </ng-template>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-template>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n\r\n <!-- Load more -->\r\n <div *ngIf=\"sessions.length && !last\" class=\"text-center mt-3\">\r\n <button type=\"button\" (click)=\"loadMore()\" [disabled]=\"loading\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2 d-inline-flex align-items-center gap-2\">\r\n <span *ngIf=\"loading\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.LOAD_MORE'] }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}.badge{font-weight:500}.proctoring-panel-header{height:auto!important}.proctoring-log{max-height:16rem}.proctoring-payload{max-height:18rem;white-space:pre-wrap;word-break:break-word}.proctoring-evi-img{width:5rem;height:5rem;object-fit:cover}\n"], components: [{ type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i3__namespace.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { type: i2__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "date": i2__namespace$1.DatePipe, "keyvalue": i2__namespace$1.KeyValuePipe } });
1009
+ ProctoringResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ProctoringResultComponent, selector: "lib-proctoring-result", ngImport: i0__namespace, template: "<div class=\"d-flex flex-column h-100 overflow-hidden assessment-bg-white\">\r\n\r\n <!-- Header -->\r\n <div class=\"d-flex align-items-start justify-content-between gap-3 p-3 px-md-4 border-bottom\">\r\n <div class=\"flex-grow-1\">\r\n <p class=\"assessment-text-semibold-16 assessment-text-grey-ten mb-1\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.RESULT_TITLE'] }}\r\n </p>\r\n <p class=\"assessment-text-regular-12 assessment-text-grey-seven mb-0\">\r\n <span *ngIf=\"assesseeName\">{{ assesseeName }} \u00B7 </span>{{ totalElements }} {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_COUNT'] }}\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn-close\" (click)=\"close()\" aria-label=\"Close\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"flex-grow-1 overflow-auto p-3 px-md-4\">\r\n\r\n <!-- Loading (initial) -->\r\n <div *ngIf=\"loading && !sessions.length\" class=\"d-flex align-items-center justify-content-center gap-2 py-5 assessment-text-regular-13 assessment-text-grey-seven\">\r\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_LOADING'] }}\r\n </div>\r\n\r\n <!-- Error -->\r\n <div *ngIf=\"errored && !sessions.length\" class=\"text-center py-5\">\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-3\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_ERROR'] }}</p>\r\n <button type=\"button\" (click)=\"loadSessions()\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORTS_RETRY'] }}\r\n </button>\r\n </div>\r\n\r\n <!-- Empty -->\r\n <div *ngIf=\"!loading && !errored && !sessions.length\" class=\"text-center py-5 assessment-text-regular-13 assessment-text-grey-seven\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.SESSIONS_EMPTY'] }}\r\n </div>\r\n\r\n <!-- Sessions accordion -->\r\n <mat-accordion class=\"d-block\" *ngIf=\"sessions.length\">\r\n <mat-expansion-panel *ngFor=\"let session of sessions; trackBy: trackBySessionId\"\r\n class=\"shadow-none assessment-border-radius-two assessment-panel border mb-2\" (opened)=\"loadReport(session)\">\r\n\r\n <mat-expansion-panel-header class=\"proctoring-panel-header p-3\">\r\n <mat-panel-title class=\"d-flex flex-column my-1 align-items-start\">\r\n <span class=\"assessment-text-semibold-13 assessment-text-grey-ten\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_SESSION'] }} {{ session.id }}\r\n </span>\r\n <span class=\"d-flex align-items-center gap-2 mt-1\">\r\n <span *ngIf=\"session.status\" class=\"badge rounded-pill text-capitalize assessment-text-medium-10\" [ngClass]=\"statusBadgeClass(session.status)\">\r\n {{ session.status }}\r\n </span>\r\n <span *ngIf=\"session?.integritySummary?.integrityFlagged\"\r\n class=\"badge rounded-pill assessment-bg-danger assessment-text-white assessment-text-medium-10\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FLAGGED'] }}\r\n </span>\r\n </span>\r\n </mat-panel-title>\r\n <mat-panel-description class=\"justify-content-end align-items-center me-3\">\r\n <span *ngIf=\"toMillis(session.startedAt) as started\" class=\"assessment-text-regular-11 assessment-text-grey-seven\">\r\n {{ started | date:'dd MMM, HH:mm' }}\r\n </span>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n\r\n <!-- Report is fetched when the panel opens -->\r\n <ng-template matExpansionPanelContent>\r\n <div class=\"p-3 pt-1\" [ngSwitch]=\"reportState[session.id!]\">\r\n\r\n <!-- Loading -->\r\n <div *ngSwitchCase=\"'loading'\" class=\"d-flex align-items-center gap-2 py-3 assessment-text-regular-13 assessment-text-grey-seven\">\r\n <span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_LOADING'] }}\r\n </div>\r\n\r\n <!-- Error -->\r\n <div *ngSwitchCase=\"'error'\" class=\"py-3\">\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ERROR'] }}</p>\r\n <button type=\"button\" (click)=\"loadReport(session)\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORTS_RETRY'] }}\r\n </button>\r\n </div>\r\n\r\n <!-- No report yet -->\r\n <div *ngSwitchCase=\"'empty'\" class=\"py-3 assessment-text-regular-13 assessment-text-grey-seven\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_EMPTY'] }}\r\n </div>\r\n\r\n <!-- Loaded report -->\r\n <ng-container *ngSwitchCase=\"'loaded'\">\r\n <ng-container *ngIf=\"reportBySession[session.id!] as report\">\r\n\r\n <!-- Integrity summary (report top-level) -->\r\n <div class=\"row g-2\">\r\n <div class=\"col-6\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_INTEGRITY_SCORE'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-grey-ten mb-0\" [class.assessment-text-danger]=\"report.integrityFlagged\">\r\n {{ report.integrityScore }}<span *ngIf=\"report.integrityLevel\"> ({{ report.integrityLevel }})</span>\r\n </p>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"report.identityMatch\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_IDENTITY_MATCH'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-grey-ten mb-0\">{{ report.identityMatch }}</p>\r\n </div>\r\n <div class=\"col-12\" *ngIf=\"report.failureReason\">\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven text-uppercase mb-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FAILURE_REASON'] }}</p>\r\n <p class=\"assessment-text-regular-13 assessment-text-danger mb-0\">{{ report.failureReason }}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getParsedPayload(report) as p; else rawPayload\">\r\n\r\n <!-- Summary meta -->\r\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-3 assessment-text-regular-12 assessment-text-grey-seven\">\r\n <span *ngIf=\"p.duration_seconds != null\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_DURATION'] }}: {{ formatDuration(p.duration_seconds) }}</span>\r\n <span *ngIf=\"p.started_at\">\u00B7 {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_STARTED'] }}: {{ p.started_at | date:'dd MMM, HH:mm:ss' }}</span>\r\n <span *ngIf=\"p.ended_at\">\u00B7 {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ENDED'] }}: {{ p.ended_at | date:'HH:mm:ss' }}</span>\r\n </div>\r\n\r\n <!-- Reasons -->\r\n <div *ngIf=\"p.integrity?.reasons?.length\" class=\"d-flex flex-column gap-2 mt-2\">\r\n <div *ngFor=\"let r of p.integrity?.reasons; trackBy: trackByIndex\" class=\"border rounded p-2\">\r\n <div class=\"d-flex align-items-center justify-content-between gap-2\">\r\n <span class=\"assessment-text-semibold-12 assessment-text-grey-ten\">{{ reasonCodeLabel(r.code) }}</span>\r\n <span *ngIf=\"r.weight != null\" class=\"badge rounded-pill assessment-text-white\" [ngClass]=\"(r.weight || 0) < 0 ? 'assessment-bg-danger' : 'assessment-bg-success'\">{{ (r.weight || 0) > 0 ? '+' : '' }}{{ r.weight }}</span>\r\n </div>\r\n <p class=\"assessment-text-regular-12 assessment-text-grey-seven mb-0 mt-1\">{{ r.detail }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Stat tiles: face analysis -->\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_ANALYSIS'] }}</p>\r\n <div class=\"row row-cols-2 row-cols-md-4 g-2 text-center\">\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\">{{ p.face_analysis?.frames_checked ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_FRAMES'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.no_face_frames || 0) > 0\">{{ p.face_analysis?.no_face_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_NO_FACE'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.multi_face_frames || 0) > 0\">{{ p.face_analysis?.multi_face_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_MULTI_FACE'] }}</p>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"border rounded p-2 h-100\">\r\n <p class=\"assessment-text-semibold-18 mb-1\" [class.assessment-text-danger]=\"(p.face_analysis?.impersonation_frames || 0) > 0\">{{ p.face_analysis?.impersonation_frames ?? 0 }}</p>\r\n <p class=\"assessment-text-regular-11 assessment-text-grey-seven mb-0\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_IMPERSONATION'] }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Activity breakdown -->\r\n <div *ngIf=\"p.activity?.by_type\" class=\"d-flex flex-wrap gap-2 mt-3\">\r\n <span *ngFor=\"let item of (p.activity?.by_type | keyvalue); trackBy: trackByIndex\"\r\n class=\"badge rounded-pill assessment-bg-palette-EDF3FD assessment-text-grey-ten assessment-text-medium-12\">\r\n {{ eventTypeLabel(item.key) }} <span class=\"assessment-text-semibold-12\">{{ item.value }}</span>\r\n </span>\r\n </div>\r\n\r\n <!-- Evidence images -->\r\n <ng-container *ngIf=\"p.evidence?.length\">\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_EVIDENCE'] }}</p>\r\n <div class=\"d-flex flex-wrap gap-3\">\r\n <a *ngFor=\"let ev of p.evidence; trackBy: trackByIndex\" class=\"text-center text-decoration-none\"\r\n [href]=\"ev.image_url\" target=\"_blank\" rel=\"noopener\">\r\n <img class=\"proctoring-evi-img rounded border\" [src]=\"ev.image_url\" [attr.alt]=\"'frame ' + ev.seq\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/user.svg')\" />\r\n <span class=\"d-block assessment-text-regular-11 assessment-text-grey-seven mt-1\">\r\n <span *ngIf=\"ev.is_reference\" class=\"badge rounded-pill assessment-bg-primary-one assessment-text-white me-1\">{{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_REFERENCE'] }}</span>\r\n #{{ ev.seq }} \u00B7 {{ ev.captured_at | date:'HH:mm:ss' }}\r\n </span>\r\n </a>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Timeline -->\r\n <ng-container *ngIf=\"p.timeline?.length\">\r\n <p class=\"assessment-text-semibold-13 assessment-text-grey-ten mt-3 mb-2\">\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.REPORT_TIMELINE'] }} ({{ p.timeline?.length }})\r\n </p>\r\n <div class=\"proctoring-log assessment-bg-grey-ten assessment-text-grey-one font-monospace small rounded p-3 overflow-auto\">\r\n <div *ngFor=\"let ev of p.timeline; trackBy: trackByIndex\" class=\"text-nowrap\" [class.fw-semibold]=\"isNoteworthy(ev.type)\">\r\n <span class=\"assessment-text-grey-five me-2\">#{{ ev.seq }}</span>\r\n <span [class.assessment-text-palette-ADC9F6]=\"isNoteworthy(ev.type)\">{{ eventTypeLabel(ev.type) }}</span>\r\n <span class=\"assessment-text-grey-five ms-2\">{{ ev.at | date:'HH:mm:ss' }} ({{ ev.source }})</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n <!-- Fallback: raw payload if it isn't parseable JSON -->\r\n <ng-template #rawPayload>\r\n <pre *ngIf=\"report.reportPayload\" class=\"proctoring-payload assessment-bg-grey-ten assessment-text-grey-one small rounded p-3 overflow-auto mb-0 mt-3\">{{ report.reportPayload }}</pre>\r\n </ng-template>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-template>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n\r\n <!-- Load more -->\r\n <div *ngIf=\"sessions.length && !last\" class=\"text-center mt-3\">\r\n <button type=\"button\" (click)=\"loadMore()\" [disabled]=\"loading\"\r\n class=\"assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2 d-inline-flex align-items-center gap-2\">\r\n <span *ngIf=\"loading\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.LOAD_MORE'] }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}.badge{font-weight:500}.proctoring-panel-header{height:auto!important}.proctoring-log{max-height:16rem}.proctoring-payload{max-height:18rem;white-space:pre-wrap;word-break:break-word}.proctoring-evi-img{width:5rem;height:5rem;object-fit:cover}\n"], components: [{ type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i3__namespace.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { type: i2__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "date": i2__namespace$1.DatePipe, "keyvalue": i2__namespace$1.KeyValuePipe } });
955
1010
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProctoringResultComponent, decorators: [{
956
1011
  type: i0.Component,
957
1012
  args: [{
@@ -1235,6 +1290,8 @@
1235
1290
  */
1236
1291
  var ProctoringService = /** @class */ (function () {
1237
1292
  function ProctoringService() {
1293
+ // SDK event unsubscribers — kept for the life of the session and removed only in destroy()
1294
+ this.offHandlers = [];
1238
1295
  }
1239
1296
  /**
1240
1297
  * Creates a ProctorLink session with the given id + JWT and requests camera access.
@@ -1249,7 +1306,6 @@
1249
1306
  var _this = this;
1250
1307
  return new rxjs.Observable(function (observer) {
1251
1308
  var settled = false;
1252
- var cleanup;
1253
1309
  var succeed = function () {
1254
1310
  if (!settled) {
1255
1311
  settled = true;
@@ -1276,7 +1332,7 @@
1276
1332
  sessionId: options.sessionId,
1277
1333
  draggable: true
1278
1334
  });
1279
- var offPermission_1 = _this.session.on('permission', function (result) {
1335
+ var offPermission = _this.session.on('permission', function (result) {
1280
1336
  if ((result === null || result === void 0 ? void 0 : result.camera) === 'denied') {
1281
1337
  fail({ code: 'camera_denied' });
1282
1338
  }
@@ -1284,9 +1340,9 @@
1284
1340
  succeed();
1285
1341
  }
1286
1342
  });
1287
- var offError_1 = _this.session.on('error', function (err) { return fail(err); });
1343
+ var offError = _this.session.on('error', function (err) { return fail(err); });
1288
1344
  // token outlived the exam — re-mint for the same session and hand the new JWT back
1289
- var offTokenExpired_1 = _this.session.on('token-expired', function () {
1345
+ var offTokenExpired = _this.session.on('token-expired', function () {
1290
1346
  var _a;
1291
1347
  (_a = options.refreshToken) === null || _a === void 0 ? void 0 : _a.call(options).subscribe({
1292
1348
  next: function (jwt) {
@@ -1299,7 +1355,10 @@
1299
1355
  error: function () { }
1300
1356
  });
1301
1357
  });
1302
- cleanup = function () { offPermission_1 === null || offPermission_1 === void 0 ? void 0 : offPermission_1(); offError_1 === null || offError_1 === void 0 ? void 0 : offError_1(); offTokenExpired_1 === null || offTokenExpired_1 === void 0 ? void 0 : offTokenExpired_1(); };
1358
+ // Keep these listeners for the LIFE of the session — they are removed in destroy().
1359
+ // (Do NOT tear them down when this observable completes on camera-granted, otherwise the
1360
+ // long-lived `token-expired`/`error` events would never reach us again.)
1361
+ _this.offHandlers = [offPermission, offError, offTokenExpired].filter(function (fn) { return typeof fn === 'function'; });
1303
1362
  // mounts the enclave, requests the camera and begins capture
1304
1363
  Promise.resolve(_this.session.start()).catch(function (err) { return fail(err); });
1305
1364
  }
@@ -1307,11 +1366,6 @@
1307
1366
  fail(err);
1308
1367
  }
1309
1368
  }).catch(function (err) { return fail(err); });
1310
- return function () {
1311
- if (cleanup) {
1312
- cleanup();
1313
- }
1314
- };
1315
1369
  });
1316
1370
  };
1317
1371
  /** Subscribe to the live proctoring event stream. */
@@ -1331,6 +1385,13 @@
1331
1385
  ProctoringService.prototype.destroy = function (params) {
1332
1386
  if (params === void 0) { params = { endSession: true }; }
1333
1387
  var _a, _b;
1388
+ this.offHandlers.forEach(function (off) {
1389
+ try {
1390
+ off();
1391
+ }
1392
+ catch (e) { /* noop */ }
1393
+ });
1394
+ this.offHandlers = [];
1334
1395
  try {
1335
1396
  (_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a, params);
1336
1397
  }
@@ -2696,6 +2757,8 @@
2696
2757
  this.expandedState = [];
2697
2758
  this.youtubeUrlCache = {};
2698
2759
  this.newAssesseeSession = false;
2760
+ this.backGuardArmed = false;
2761
+ this.allowBackNavigation = false;
2699
2762
  this._selectedTabIndex = 0;
2700
2763
  this.sectionErrors = [];
2701
2764
  this.tenantId = 0;
@@ -2721,6 +2784,69 @@
2721
2784
  AssessmentTakerComponent.prototype.onResize = function () {
2722
2785
  this.isMobile = window.innerWidth < 768;
2723
2786
  };
2787
+ /**
2788
+ * While a proctoring session is running, warn the candidate before they refresh, close the tab, or
2789
+ * navigate away. Browsers show their own generic "Leave site?" confirmation here — the message text
2790
+ * cannot be customized for security reasons — so this only guarantees a prompt, not our wording.
2791
+ */
2792
+ AssessmentTakerComponent.prototype.onBeforeUnload = function (event) {
2793
+ if (this.isProctoringRunning()) {
2794
+ event.preventDefault();
2795
+ event.returnValue = '';
2796
+ }
2797
+ };
2798
+ /**
2799
+ * In-app Back button (SPA popstate — not caught by beforeunload). While proctoring runs we keep a
2800
+ * sentinel history entry; when Back pops it we show a custom warning and either re-arm (stay) or
2801
+ * proceed with the navigation (leave).
2802
+ */
2803
+ AssessmentTakerComponent.prototype.onPopState = function () {
2804
+ var _this = this;
2805
+ if (this.allowBackNavigation) {
2806
+ // this popstate is the navigation we just approved — let it through once
2807
+ this.allowBackNavigation = false;
2808
+ return;
2809
+ }
2810
+ if (!this.backGuardArmed || !this.isProctoringRunning()) {
2811
+ return;
2812
+ }
2813
+ this.confirmLeaveAssessment().subscribe(function (confirmed) {
2814
+ if (confirmed) {
2815
+ _this.allowBackNavigation = true;
2816
+ _this.backGuardArmed = false;
2817
+ history.back(); // proceed to the actual previous page
2818
+ }
2819
+ else {
2820
+ // stay on the assessment — re-arm the sentinel entry
2821
+ history.pushState(null, '', location.href);
2822
+ }
2823
+ });
2824
+ };
2825
+ AssessmentTakerComponent.prototype.isProctoringRunning = function () {
2826
+ return this.proctoringSessionStarted && !this.proctoringSessionEnded;
2827
+ };
2828
+ /** Pushes a sentinel history entry so the next in-app Back press triggers our guard. */
2829
+ AssessmentTakerComponent.prototype.armBackGuard = function () {
2830
+ if (this.backGuardArmed) {
2831
+ return;
2832
+ }
2833
+ this.backGuardArmed = true;
2834
+ history.pushState(null, '', location.href);
2835
+ };
2836
+ AssessmentTakerComponent.prototype.confirmLeaveAssessment = function () {
2837
+ return this.dialog.open(ConfirmationDialogComponent, {
2838
+ autoFocus: false,
2839
+ maxWidth: '95%',
2840
+ width: '32rem',
2841
+ panelClass: ['assessment-dialog'],
2842
+ data: {
2843
+ title: this.labelConfig['COMMONS_ASSESSMENT.PROCTORING.LEAVE_WARNING_TITLE'],
2844
+ message: this.labelConfig['COMMONS_ASSESSMENT.PROCTORING.LEAVE_WARNING_MESSAGE'],
2845
+ confirmLabel: this.labelConfig['COMMONS_ASSESSMENT.LABEL.PROCEED'],
2846
+ cancelLabel: this.labelConfig['COMMONS_ASSESSMENT.LABEL.CANCEL']
2847
+ }
2848
+ }).afterClosed();
2849
+ };
2724
2850
  AssessmentTakerComponent.prototype.ngOnInit = function () {
2725
2851
  var _a, _b, _c, _d, _e, _f, _g, _h;
2726
2852
  this.getConfigsFromJSON();
@@ -2739,7 +2865,7 @@
2739
2865
  if (this.timerInterval) {
2740
2866
  clearInterval(this.timerInterval);
2741
2867
  }
2742
- if (this.proctoringSessionStarted) {
2868
+ if (this.isProctoringRunning()) {
2743
2869
  this.proctoringService.destroy({ endSession: false });
2744
2870
  }
2745
2871
  };
@@ -2968,6 +3094,10 @@
2968
3094
  AssessmentTakerComponent.prototype.onIntroProceeded = function () {
2969
3095
  this.consentToProceed.emit(true);
2970
3096
  this.introActive = false;
3097
+ if (this.isProctoringRunning()) {
3098
+ // guard the in-app Back button while proctoring is active
3099
+ this.armBackGuard();
3100
+ }
2971
3101
  this.beginAssessment();
2972
3102
  };
2973
3103
  /**
@@ -3691,7 +3821,7 @@
3691
3821
  return AssessmentTakerComponent;
3692
3822
  }());
3693
3823
  AssessmentTakerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AssessmentTakerComponent, deps: [{ token: AssessmentTakerService }, { token: i1__namespace$2.FormBuilder }, { token: ResponseBuilderService }, { token: i2__namespace.DomSanitizer }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }, { token: ProctoringService }], target: i0__namespace.ɵɵFactoryTarget.Component });
3694
- AssessmentTakerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentTakerComponent, selector: "lib-assessment-taker", inputs: { labelConfig: "labelConfig", imageConfig: "imageConfig", showFooter: "showFooter", assessmentId: "assessmentId", assessmentInstanceId: "assessmentInstanceId", assesseeData: "assesseeData", assessorData: "assessorData", disabled: "disabled", previewMode: "previewMode", verticalView: "verticalView", enableMarks: "enableMarks", hideSectionTabs: "hideSectionTabs", assessmentContext: "assessmentContext", assesseeResponse: "assesseeResponse", markAsCompleted: "markAsCompleted", sectionWiseScore: "sectionWiseScore", showOverallRemarks: "showOverallRemarks", showCorrectAnswers: "showCorrectAnswers", resumeTimerAcrossVisits: "resumeTimerAcrossVisits", proctorLinkLoader: "proctorLinkLoader" }, outputs: { snackbarMessage: "snackbarMessage", submitAssessment: "submitAssessment", stepChanged: "stepChanged", consentToProceed: "consentToProceed" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0__namespace, template: "<div *ngIf=\"configsLoaded && !showLoader; else loader\" class=\"col-12 h-100\">\r\n <div class=\"col-12 h-100 pt-2 pb-4\" [class.height-without-footer]=\"showFooter\">\r\n <div *ngIf=\"previewMode && isProctoringEnabled && (assesseeResponse?.id || assesseeData?.id)\" class=\"d-flex justify-content-end mb-3\">\r\n <button type=\"button\" (click)=\"openProctoringResult()\"\r\n class=\"assessment-zoom-animation assessment-button-padding assessment-border-radius-two assessment-btn-primary-transparent assessment-text-semibold-13 d-flex align-items-center gap-2\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PROCTORING']\" width=\"16\" height=\"16\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/proctoring.svg')\" />\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.VIEW_REPORT'] }}\r\n </button>\r\n </div>\r\n <!-- Full-screen intro gate \u2014 questions stay hidden until proceed -->\r\n <lib-proctoring-consent *ngIf=\"introActive\" [labelConfig]=\"labelConfig\"\r\n [proctoringEnabled]=\"isProctoringEnabled\" [requireCapture]=\"requireReferenceCapture\"\r\n [sectionCount]=\"totalSectionCount\" [questionCount]=\"totalQuestionCount\"\r\n [durationSeconds]=\"assessmentDurationSeconds\"\r\n [confirmAction]=\"startSessionAction\" (proceeded)=\"onIntroProceeded()\">\r\n </lib-proctoring-consent>\r\n\r\n <div *ngIf=\"assessmentContext?.assessmentInstanceDTO?.duration && !previewMode && !introActive && (!disabled || timeExpired)\"\r\n class=\"d-flex align-items-center gap-md-3 gap-2 px-3 py-2 assessment-border-radius-two mb-4 timer-container assessment-bg-palette-FEF1E8\">\r\n <p class=\"assessment-text-semibold-18 assessment-text-grey-ten mb-0\">{{displayTime}}</p>\r\n <p class=\"assessment-text-grey-ten assessment-text-medium-12 mb-0\">\r\n {{ timeExpired\r\n ? labelConfig['COMMONS_ASSESSMENT.LABEL.TIMER_EXPIRED']\r\n : labelConfig['COMMONS_ASSESSMENT.LABEL.TIMER_AUTO_SUBMIT'] }}</p>\r\n </div>\r\n <ng-container *ngIf=\"assessmentQuestionPaperData?.questionPaperSectionList?.length && !introActive\">\r\n <mat-tab-group *ngIf=\"!verticalView\" animationDuration=\"0ms\" class=\"assessment-mat-custom-tabs\"\r\n [ngClass]=\"{'assessment-hide-tabs': hideSectionTabs}\" [(selectedIndex)]=\"selectedTabIndex\">\r\n <mat-tab\r\n *ngFor=\"let section of assessmentQuestionPaperData.questionPaperSectionList | orderBy; let i = index; trackBy: trackBySectionId\"\r\n [disabled]=\"shouldDisableTab(i)\">\r\n <ng-template mat-tab-label>\r\n <span class=\"assessment-text-semibold-16\"\r\n [ngClass]=\"sectionErrors[i] ? 'assessment-text-danger' : ''\">{{section.qpsName?.[0]?.text}}</span>\r\n </ng-template>\r\n <div class=\"mt-4\">\r\n <ng-container\r\n *ngTemplateOutlet=\"sectionContent; context: { section: section, i: i }\"></ng-container>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n <mat-accordion *ngIf=\"verticalView\" multi=\"true\" class=\"d-flex flex-column gap-4\">\r\n <mat-expansion-panel\r\n *ngFor=\"let section of assessmentQuestionPaperData.questionPaperSectionList | orderBy; let i = index; trackBy: trackBySectionId\"\r\n [expanded]=\"expandedState[i] !== false\" (opened)=\"expandedState[i] = true\"\r\n (closed)=\"expandedState[i] = false\"\r\n class=\"assessment-border-radius-two shadow-none m-0 assessment-panel bg-transparent\">\r\n <mat-expansion-panel-header class=\"assessment-bg-grey-two h-auto assessment-panel-header\">\r\n <div class=\"d-flex align-items-center justify-content-between gap-2 col-12 pe-3\">\r\n <span class=\"assessment-text-semibold-16\"\r\n [ngClass]=\"sectionErrors[i] ? 'assessment-text-danger' : ''\">\r\n {{section.qpsName?.[0]?.text}}</span>\r\n\r\n <ng-container *ngIf=\"sectionWiseScore?.[section?.id] as sectionScore\">\r\n <div *ngIf=\"(sectionScore?.totalMarks ?? 0) > 0\"\r\n class=\"d-flex align-items-center gap-2 assessment-text-primary-four\">\r\n <span *ngIf=\"(sectionScore?.skillScores?.length ?? 0) > 0\"\r\n class=\"assessment-text-medium-11 assessment-text-grey-ten px-2 py-1 assessment-border-radius-two skill-chip cursor-pointer\"\r\n (click)=\"$event.stopPropagation(); openSkillAllocationDialog(sectionScore?.skillScores)\">\r\n {{sectionScore?.skillScores?.length}}\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.SKILLS']}}\r\n </span>\r\n <span class=\"white-space-nowrap assessment-text-semibold-13\">\r\n <span class=\"assessment-text-medium-15 me-1\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.SCORE']}}:</span>\r\n {{sectionScore.obtainedMarks || 0}}/{{sectionScore.totalMarks}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <div class=\"mt-3\">\r\n <ng-container\r\n *ngTemplateOutlet=\"sectionContent; context: { section: section, i: i }\"></ng-container>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n\r\n <div *ngIf=\"!assessmentQuestionPaperData?.questionPaperSectionList?.length\"\r\n class=\"h-100 d-flex flex-column align-items-center justify-content-center gap-3\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.NO_QUESTIONS']\" class=\"col-sm-auto col-6\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/no-questions.svg')\" />\r\n <div class=\"text-center\">\r\n <p class=\"mb-1 assessment-text-medium-18\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS']}}</p>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showOverallRemarks && assessmentQuestionPaperData?.questionPaperSectionList?.length\" class=\"mt-3\">\r\n <p class=\"assessment-text-medium-15 mb-2\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OVERALL_REMARKS']}}</p>\r\n <textarea\r\n class=\"col-12 assessment-text-regular-13 assessment-input-border-one assessment-border-radius-two assessment-input-padding outline-0 assessment-bg-grey-one\"\r\n rows=\"3\" [formControl]=\"overallNotesCtrl\"\r\n [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.REMARKS']\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showFooter && !introActive\"\r\n class=\"bg-white p-3 position-sticky bottom-0 d-flex align-items-center justify-content-end border-top gap-3 z-index-1\">\r\n <button\r\n class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary-transparent assessment-text-semibold-13\"\r\n (click)=\"goBack()\" *ngIf=\"selectedTabIndex > 0 && !verticalView\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK']}}</button>\r\n <button [disabled]=\"isSubmitting || (disabled && !enableMarks && !showOverallRemarks) || isCheckingLink\" (click)=\"verticalView ? goNext(true) : goNext()\"\r\n class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary assessment-text-semibold-13 position-relative\">\r\n <span [ngClass]=\"{'opacity-0': isSubmitting}\">\r\n {{ (verticalView || selectedTabIndex === sectionFormGroups.length - 1) ?\r\n labelConfig['COMMONS_ASSESSMENT.LABEL.SUBMIT'] : labelConfig['COMMONS_ASSESSMENT.LABEL.NEXT'] }}\r\n </span>\r\n <mat-spinner *ngIf=\"isSubmitting\" [diameter]=\"20\"\r\n class=\"position-absolute top-50 start-50 translate-middle assessment-spinner-white\"></mat-spinner>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n <div class=\"h-100 col-12 d-flex align-items-center justify-content-center py-5\">\r\n <mat-spinner diameter=\"60\" class=\"assessment-spinner-primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Recursive Template for Questions & Child Questions -->\r\n<ng-template #questionTemplate let-questionId=\"questionId\" let-isMandatory=\"isMandatory\" let-groupIndex=\"groupIndex\"\r\n let-parentOptionId=\"parentOptionId\" let-parentQuestionId=\"parentQuestionId\" let-sequence=\"sequence\">\r\n <div *ngIf=\"sectionFormGroups[groupIndex].formGroup as formGroup\" [formGroup]=\"formGroup\"\r\n [id]=\"'question-container-' + questionId\">\r\n <div class=\"assessment-border-radius-two assessment-bg-white\"\r\n [ngClass]=\"{'p-3 assessment-card-border': !parentOptionId}\" *ngIf=\"questionBank[questionId] as question\">\r\n <div class=\"d-flex flex-md-row flex-column gap-2 align-items-start\">\r\n <div class=\"flex-grow-1 d-flex align-items-start gap-1\">\r\n <span class=\"assessment-text-medium-15 text-nowrap d-md-block d-none\"\r\n *ngIf=\"sequence\">{{sequence}}.</span>\r\n <div class=\"flex-grow-1\">\r\n <div class=\"d-flex gap-2 align-items-start col-12\">\r\n <div class=\"flex-grow-1\">\r\n <p class=\"assessment-text-medium-15 mb-0 d-flex gap-1\">\r\n <span>\r\n <span [innerHtml]=\"question.questionText?.[0]?.text\"></span>\r\n <span *ngIf=\"isMandatory\"\r\n class=\"assessment-text-regular-11 assessment-text-grey-eight\">\r\n ({{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}})</span>\r\n </span>\r\n </p>\r\n <div class=\"mt-3 col-12\" *ngIf=\"question?.mediaUrl?.length\">\r\n <ng-container\r\n *ngTemplateOutlet=\"VideoTemplate; context:{videoUrl:question?.mediaUrl}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"question.hintText?.length && !previewMode\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.INFO']\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/info.svg')\"\r\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\r\n (mouseenter)=\"tooltipState[question.id!] = true\"\r\n (mouseleave)=\"tooltipState[question.id!] = false\" class=\"cursor-pointer\" />\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"tooltipState[question.id!] || false\"\r\n [cdkConnectedOverlayPositions]=\"[{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8, offsetY: 0 }, { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8, offsetY: 0 }]\">\r\n <div class=\"assessment-bg-grey-two assessment-tooltip-border p-3 assessment-border-radius-two assessment-box-shadow-tooltip question-info assessment-text-regular-13\"\r\n (mouseenter)=\"tooltipState[question.id!] = true\"\r\n (mouseleave)=\"tooltipState[question.id!] = false\"\r\n [innerHTML]=\"question.hintText\">\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"previewMode && !isMobile\" class=\"mt-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"isMobile\" class=\"col-12 mt-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n\r\n <!-- Assessor Marks Logic -->\r\n <div class=\"assessment-marks-field\"\r\n *ngIf=\"enableMarks && shouldShowMarksDropdown(question) && formGroup.get(question.id + '_marks') as marksControl\">\r\n <label class=\"assessment-text-medium-12 assessment-text-grey-ten\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}(Max: {{question.weight}})</label>\r\n <input (keydown)=\"preventNegativeInput($event)\"\r\n (input)=\"checkMaxVal($event, marksControl, question?.weight)\"\r\n class=\"col-12 assessment-input-border-one assessment-border-radius-two px-2 py-1 outline-0 assessment-bg-grey-one assessment-text-medium-12\"\r\n [formControlName]=\"question.id + '_marks'\" type=\"number\" min=\"0\"\r\n (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"!previewMode && !isMobile\" class=\"mt-3\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n\r\n <!-- Child Questions and Remarks Rendering Logic based on checked form state -->\r\n <ng-container *ngIf=\"question.defaultOptionsList?.length\">\r\n <ng-container *ngFor=\"let option of question.defaultOptionsList; trackBy: trackByOptionId\">\r\n\r\n <ng-container *ngIf=\"isOptionSelected(formGroup, question, option.options?.id)\">\r\n\r\n <!-- REMARKS FIELD -->\r\n <div class=\"mt-3\"\r\n *ngIf=\"option.remarksRequired && formGroup.get(question.id + '_remarks_' + option.id) as remarksControl\">\r\n <p class=\"assessment-text-regular-15 mb-2\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMARKS']}}</p>\r\n <textarea *ngIf=\"!previewMode\" formControlName=\"{{question.id}}_remarks_{{option.id}}\"\r\n rows=\"2\" [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.REMARKS']\"\r\n [ngClass]=\"remarksControl.invalid && remarksControl.touched ? 'assessment-input-border-invalid' : ''\"\r\n class=\"col-12 assessment-text-regular-13 assessment-input-border-one assessment-border-radius-two assessment-input-padding outline-0 assessment-bg-grey-one\"></textarea>\r\n <ng-container *ngIf=\"previewMode\">\r\n <span class=\"assessment-text-regular-13 assessment-text-grey-nine\">\r\n {{ remarksControl.value }}</span>\r\n </ng-container>\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"remarksControl.invalid && remarksControl.touched\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.FIELD_REQUIRED']}}\r\n </div>\r\n </div>\r\n\r\n <!-- CHILD QUESTIONS RECURSION -->\r\n <div class=\"col-12 mt-4 d-flex flex-column gap-3\" *ngIf=\"option.childQuestionList?.length\">\r\n <ng-container *ngFor=\"let childId of option.childQuestionList; let childIndex = index; trackBy: trackByChildId\">\r\n <ng-container *ngTemplateOutlet=\"questionTemplate; context: {\r\n questionId: childId,\r\n isMandatory: questionBank[childId]?.isMandatory,\r\n groupIndex: groupIndex,\r\n parentOptionId: option.id,\r\n parentQuestionId: question.id,\r\n sequence: sequence + '.' + (childIndex + 1)\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- answer field template -->\r\n<ng-template #answerField let-question=\"question\" let-previewMode=\"previewMode\" let-isMandatory=\"isMandatory\"\r\n let-groupIndex=\"groupIndex\" let-parentOptionId=\"parentOptionId\" let-parentQuestionId=\"parentQuestionId\">\r\n <div *ngIf=\"sectionFormGroups[groupIndex].formGroup\" [formGroup]=\"sectionFormGroups[groupIndex].formGroup\"\r\n class=\"col-12\">\r\n <ng-container [ngSwitch]=\"question.questionType?.code\">\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_SHORT'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_LONG'\">\r\n <lib-question-type-long [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-long>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_RICH_TEXT'\">\r\n <lib-question-type-editor [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [previewMode]=\"previewMode\"\r\n [labelConfig]=\"labelConfig\"></lib-question-type-editor>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.OBJECTIVE'\">\r\n <lib-question-type-objective [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [showCorrectAnswers]=\"showCorrectAnswers\" [imageConfig]=\"imageConfig\"\r\n [answerObj]=\"getQuestionAnswerObj(question.id!, parentOptionId, parentQuestionId)\"></lib-question-type-objective>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.MULTI_SELECT'\">\r\n <lib-question-type-multiselect [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [showCorrectAnswers]=\"showCorrectAnswers\" [imageConfig]=\"imageConfig\"\r\n [answerObj]=\"getQuestionAnswerObj(question.id!, parentOptionId, parentQuestionId)\"></lib-question-type-multiselect>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.PREFERENCE'\">\r\n <lib-question-type-preference [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\"></lib-question-type-preference>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.NUMBER'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.EMAIL'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.CONTACT_NUMBER'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.URL'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.FILE_UPLOAD'\">\r\n <lib-question-type-file-upload [question]=\"question\" [assessmentInstanceId]=\"assessmentInstanceId\"\r\n [formControlName]=\"question.id!\" [required]=\"isMandatory\" [labelConfig]=\"labelConfig\"\r\n [imageConfig]=\"imageConfig\" (snackbarMessage)=\"snackbarMessage.emit($event)\"></lib-question-type-file-upload>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.DATE_PICKER'\">\r\n <lib-question-type-date-picker [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [previewMode]=\"previewMode\"\r\n [labelConfig]=\"labelConfig\"></lib-question-type-date-picker>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Error Messages and Character Count Container -->\r\n <ng-container\r\n *ngIf=\"!previewMode && sectionFormGroups[groupIndex].formGroup.get(question.id?.toString() || '') as control\">\r\n <div class=\"d-flex justify-content-between align-items-start mt-1\">\r\n <span>\r\n <div class=\"assessment-text-regular-12 assessment-text-danger\"\r\n *ngIf=\"control.touched && control.errors?.['required']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED_RESPONSE']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['pattern']\">\r\n {{question?.validationMessage || labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_FORMAT']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['privateGdriveLink']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.PRIVATE_DRIVE_LINK']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['minlength']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MIN_CHARS']?.replace('{{length}}',\r\n control.errors?.['minlength'].requiredLength + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxlength']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_CHARS']?.replace('{{length}}',\r\n control.errors?.['maxlength'].requiredLength + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['minOptions']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MIN_OPTIONS']?.replace('{{count}}',\r\n control.errors?.['minOptions'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxOptions']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_OPTIONS']?.replace('{{count}}',\r\n control.errors?.['maxOptions'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxFiles']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_FILES']?.replace('{{count}}',\r\n control.errors?.['maxFiles'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxFileSize']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_FILE_SIZE']?.replace('{{size}}',\r\n control.errors?.['maxFileSize'].requiredSize + '')}}\r\n </div>\r\n </span>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-grey-seven white-space-nowrap ms-2\"\r\n *ngIf=\"getMaxCharCount(question) > 0\">\r\n {{ getRemainingChars(question, control) }}\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTER']}}{{getRemainingChars(question, control) !==\r\n 1\r\n ? 's' : ''}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMAINING']}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Reusable Section Form Template -->\r\n<ng-template #sectionContent let-section=\"section\" let-i=\"i\">\r\n <form class=\"w-100\" *ngIf=\"sectionFormGroups[i].formGroup\" [formGroup]=\"sectionFormGroups[i].formGroup\"\r\n [name]=\"'sectionfrm-' + i\" novalidate>\r\n <div class=\"d-flex justify-content-between align-items-center mb-4\"\r\n *ngIf=\"!previewMode && (section?.qpsDesc?.[0]?.text || section?.mediaUrl)\">\r\n <span class=\"assessment-text-semibold-14 assessment-text-grey-ten\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.TOTAL_QUESTIONS']}}: {{ section?.totalQuestions || 0 }}\r\n </span>\r\n <button (click)=\"openInstructionsDialog(section)\"\r\n class=\"assessment-zoom-animation assessment-button-padding assessment-text-medium-13 assessment-btn-primary-transparent\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.VIEW_INSTRUCTIONS']}}\r\n </button>\r\n </div>\r\n\r\n <div class=\"col-12 d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let sq of section.sectionQuestionsList | orderBy; let j = index; trackBy: trackBySectionQuestion\">\r\n <ng-container *ngTemplateOutlet=\"questionTemplate; context: {\r\n questionId: sq.questionId,\r\n isMandatory: questionBank[sq.questionId]?.isMandatory,\r\n groupIndex: i,\r\n parentOptionId: null,\r\n parentQuestionId: null,\r\n sequence: j + 1\r\n }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </form>\r\n</ng-template>\r\n\r\n<!-- video preview -->\r\n<ng-template let-videoUrl=\"videoUrl\" #VideoTemplate>\r\n <div class=\"assessment-border-radius-two overflow-hidden col-md-10 col-12\">\r\n <video *ngIf=\"videoUrl?.includes('.mp4') else youtubeVideo\" width=\"400\" controls class=\"mw-100 d-block mx-auto\">\r\n <source [src]=\"videoUrl\" type=\"video/mp4\">\r\n </video>\r\n <ng-template #youtubeVideo>\r\n <div class=\"youtube-video position-relative h-100\">\r\n <iframe [src]=\"addYoutubeIframeSrc(videoUrl)\" title=\"YouTube video player\" frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen class=\"position-absolute top-0 start-0 w-100 h-100 d-block\">\r\n </iframe>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}.height-without-footer{height:calc(100% - 4.4rem)!important}.z-index-1{z-index:1}.question-info{min-width:15rem;max-width:40vw}@media screen and (max-width: 768px){.question-info{max-width:75vw}}.assessment-marks-field{min-width:6.5rem;width:6.5rem}.youtube-video{aspect-ratio:16/9}.assessment-panel-header{padding-top:.7rem;padding-bottom:.7rem}.timer-container{border:.064rem solid var(--assessment-palette-FAD2B9)}\n"], components: [{ type: ProctoringConsentComponent, selector: "lib-proctoring-consent", inputs: ["labelConfig", "proctoringEnabled", "requireCapture", "sectionCount", "questionCount", "durationSeconds", "confirmAction"], outputs: ["proceeded"] }, { type: i8__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i8__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: QuestionTypeShortComponent, selector: "lib-question-type-short", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeLongComponent, selector: "lib-question-type-long", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeEditorComponent, selector: "lib-question-type-editor", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeObjectiveComponent, selector: "lib-question-type-objective", inputs: ["required", "question", "showCorrectAnswers", "imageConfig", "answerObj"], outputs: ["viewChild"] }, { type: QuestionTypeMultiselectComponent, selector: "lib-question-type-multiselect", inputs: ["required", "question", "showCorrectAnswers", "imageConfig", "answerObj"], outputs: ["viewChild"] }, { type: QuestionTypePreferenceComponent, selector: "lib-question-type-preference", inputs: ["required", "question"], outputs: ["viewChild"] }, { type: QuestionTypeFileUploadComponent, selector: "lib-question-type-file-upload", inputs: ["required", "assessmentInstanceId", "question", "labelConfig", "imageConfig"], outputs: ["snackbarMessage"] }, { type: QuestionTypeDatePickerComponent, selector: "lib-question-type-date-picker", inputs: ["required", "question", "previewMode", "labelConfig"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20__namespace.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i20__namespace.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i1__namespace$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }], pipes: { "orderBy": OrderByPipe } });
3824
+ AssessmentTakerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentTakerComponent, selector: "lib-assessment-taker", inputs: { labelConfig: "labelConfig", imageConfig: "imageConfig", showFooter: "showFooter", assessmentId: "assessmentId", assessmentInstanceId: "assessmentInstanceId", assesseeData: "assesseeData", assessorData: "assessorData", disabled: "disabled", previewMode: "previewMode", verticalView: "verticalView", enableMarks: "enableMarks", hideSectionTabs: "hideSectionTabs", assessmentContext: "assessmentContext", assesseeResponse: "assesseeResponse", markAsCompleted: "markAsCompleted", sectionWiseScore: "sectionWiseScore", showOverallRemarks: "showOverallRemarks", showCorrectAnswers: "showCorrectAnswers", resumeTimerAcrossVisits: "resumeTimerAcrossVisits", proctorLinkLoader: "proctorLinkLoader" }, outputs: { snackbarMessage: "snackbarMessage", submitAssessment: "submitAssessment", stepChanged: "stepChanged", consentToProceed: "consentToProceed" }, host: { listeners: { "window:resize": "onResize()", "window:beforeunload": "onBeforeUnload($event)", "window:popstate": "onPopState()" } }, ngImport: i0__namespace, template: "<div *ngIf=\"configsLoaded && !showLoader; else loader\" class=\"col-12 h-100\">\r\n <div class=\"col-12 h-100 pt-2 pb-4\" [class.height-without-footer]=\"showFooter\">\r\n <div *ngIf=\"previewMode && isProctoringEnabled && (assesseeResponse?.id || assesseeData?.id)\" class=\"d-flex justify-content-end mb-3\">\r\n <button type=\"button\" (click)=\"openProctoringResult()\"\r\n class=\"assessment-zoom-animation assessment-button-padding assessment-border-radius-two assessment-btn-primary-transparent assessment-text-semibold-13 d-flex align-items-center gap-2\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PROCTORING']\" width=\"16\" height=\"16\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/proctoring.svg')\" />\r\n {{ labelConfig['COMMONS_ASSESSMENT.PROCTORING.VIEW_REPORT'] }}\r\n </button>\r\n </div>\r\n <!-- Full-screen intro gate \u2014 questions stay hidden until proceed -->\r\n <lib-proctoring-consent *ngIf=\"introActive\" [labelConfig]=\"labelConfig\"\r\n [proctoringEnabled]=\"isProctoringEnabled\" [requireCapture]=\"requireReferenceCapture\"\r\n [sectionCount]=\"totalSectionCount\" [questionCount]=\"totalQuestionCount\"\r\n [durationSeconds]=\"assessmentDurationSeconds\"\r\n [confirmAction]=\"startSessionAction\" (proceeded)=\"onIntroProceeded()\">\r\n </lib-proctoring-consent>\r\n\r\n <div *ngIf=\"assessmentContext?.assessmentInstanceDTO?.duration && !previewMode && !introActive && (!disabled || timeExpired)\"\r\n class=\"d-flex align-items-center gap-md-3 gap-2 px-3 py-2 assessment-border-radius-two mb-4 timer-container assessment-bg-palette-FEF1E8\">\r\n <p class=\"assessment-text-semibold-18 assessment-text-grey-ten mb-0\">{{displayTime}}</p>\r\n <p class=\"assessment-text-grey-ten assessment-text-medium-12 mb-0\">\r\n {{ timeExpired\r\n ? labelConfig['COMMONS_ASSESSMENT.LABEL.TIMER_EXPIRED']\r\n : labelConfig['COMMONS_ASSESSMENT.LABEL.TIMER_AUTO_SUBMIT'] }}</p>\r\n </div>\r\n <ng-container *ngIf=\"assessmentQuestionPaperData?.questionPaperSectionList?.length && !introActive\">\r\n <mat-tab-group *ngIf=\"!verticalView\" animationDuration=\"0ms\" class=\"assessment-mat-custom-tabs\"\r\n [ngClass]=\"{'assessment-hide-tabs': hideSectionTabs}\" [(selectedIndex)]=\"selectedTabIndex\">\r\n <mat-tab\r\n *ngFor=\"let section of assessmentQuestionPaperData.questionPaperSectionList | orderBy; let i = index; trackBy: trackBySectionId\"\r\n [disabled]=\"shouldDisableTab(i)\">\r\n <ng-template mat-tab-label>\r\n <span class=\"assessment-text-semibold-16\"\r\n [ngClass]=\"sectionErrors[i] ? 'assessment-text-danger' : ''\">{{section.qpsName?.[0]?.text}}</span>\r\n </ng-template>\r\n <div class=\"mt-4\">\r\n <ng-container\r\n *ngTemplateOutlet=\"sectionContent; context: { section: section, i: i }\"></ng-container>\r\n </div>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n <mat-accordion *ngIf=\"verticalView\" multi=\"true\" class=\"d-flex flex-column gap-4\">\r\n <mat-expansion-panel\r\n *ngFor=\"let section of assessmentQuestionPaperData.questionPaperSectionList | orderBy; let i = index; trackBy: trackBySectionId\"\r\n [expanded]=\"expandedState[i] !== false\" (opened)=\"expandedState[i] = true\"\r\n (closed)=\"expandedState[i] = false\"\r\n class=\"assessment-border-radius-two shadow-none m-0 assessment-panel bg-transparent\">\r\n <mat-expansion-panel-header class=\"assessment-bg-grey-two h-auto assessment-panel-header\">\r\n <div class=\"d-flex align-items-center justify-content-between gap-2 col-12 pe-3\">\r\n <span class=\"assessment-text-semibold-16\"\r\n [ngClass]=\"sectionErrors[i] ? 'assessment-text-danger' : ''\">\r\n {{section.qpsName?.[0]?.text}}</span>\r\n\r\n <ng-container *ngIf=\"sectionWiseScore?.[section?.id] as sectionScore\">\r\n <div *ngIf=\"(sectionScore?.totalMarks ?? 0) > 0\"\r\n class=\"d-flex align-items-center gap-2 assessment-text-primary-four\">\r\n <span *ngIf=\"(sectionScore?.skillScores?.length ?? 0) > 0\"\r\n class=\"assessment-text-medium-11 assessment-text-grey-ten px-2 py-1 assessment-border-radius-two skill-chip cursor-pointer\"\r\n (click)=\"$event.stopPropagation(); openSkillAllocationDialog(sectionScore?.skillScores)\">\r\n {{sectionScore?.skillScores?.length}}\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.SKILLS']}}\r\n </span>\r\n <span class=\"white-space-nowrap assessment-text-semibold-13\">\r\n <span class=\"assessment-text-medium-15 me-1\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.SCORE']}}:</span>\r\n {{sectionScore.obtainedMarks || 0}}/{{sectionScore.totalMarks}}\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <div class=\"mt-3\">\r\n <ng-container\r\n *ngTemplateOutlet=\"sectionContent; context: { section: section, i: i }\"></ng-container>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n\r\n <div *ngIf=\"!assessmentQuestionPaperData?.questionPaperSectionList?.length\"\r\n class=\"h-100 d-flex flex-column align-items-center justify-content-center gap-3\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.NO_QUESTIONS']\" class=\"col-sm-auto col-6\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/no-questions.svg')\" />\r\n <div class=\"text-center\">\r\n <p class=\"mb-1 assessment-text-medium-18\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS']}}</p>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showOverallRemarks && assessmentQuestionPaperData?.questionPaperSectionList?.length\" class=\"mt-3\">\r\n <p class=\"assessment-text-medium-15 mb-2\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OVERALL_REMARKS']}}</p>\r\n <textarea\r\n class=\"col-12 assessment-text-regular-13 assessment-input-border-one assessment-border-radius-two assessment-input-padding outline-0 assessment-bg-grey-one\"\r\n rows=\"3\" [formControl]=\"overallNotesCtrl\"\r\n [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.REMARKS']\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showFooter && !introActive\"\r\n class=\"bg-white p-3 position-sticky bottom-0 d-flex align-items-center justify-content-end border-top gap-3 z-index-1\">\r\n <button\r\n class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary-transparent assessment-text-semibold-13\"\r\n (click)=\"goBack()\" *ngIf=\"selectedTabIndex > 0 && !verticalView\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK']}}</button>\r\n <button [disabled]=\"isSubmitting || (disabled && !enableMarks && !showOverallRemarks) || isCheckingLink\" (click)=\"verticalView ? goNext(true) : goNext()\"\r\n class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary assessment-text-semibold-13 position-relative\">\r\n <span [ngClass]=\"{'opacity-0': isSubmitting}\">\r\n {{ (verticalView || selectedTabIndex === sectionFormGroups.length - 1) ?\r\n labelConfig['COMMONS_ASSESSMENT.LABEL.SUBMIT'] : labelConfig['COMMONS_ASSESSMENT.LABEL.NEXT'] }}\r\n </span>\r\n <mat-spinner *ngIf=\"isSubmitting\" [diameter]=\"20\"\r\n class=\"position-absolute top-50 start-50 translate-middle assessment-spinner-white\"></mat-spinner>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n <div class=\"h-100 col-12 d-flex align-items-center justify-content-center py-5\">\r\n <mat-spinner diameter=\"60\" class=\"assessment-spinner-primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Recursive Template for Questions & Child Questions -->\r\n<ng-template #questionTemplate let-questionId=\"questionId\" let-isMandatory=\"isMandatory\" let-groupIndex=\"groupIndex\"\r\n let-parentOptionId=\"parentOptionId\" let-parentQuestionId=\"parentQuestionId\" let-sequence=\"sequence\">\r\n <div *ngIf=\"sectionFormGroups[groupIndex].formGroup as formGroup\" [formGroup]=\"formGroup\"\r\n [id]=\"'question-container-' + questionId\">\r\n <div class=\"assessment-border-radius-two assessment-bg-white\"\r\n [ngClass]=\"{'p-3 assessment-card-border': !parentOptionId}\" *ngIf=\"questionBank[questionId] as question\">\r\n <div class=\"d-flex flex-md-row flex-column gap-2 align-items-start\">\r\n <div class=\"flex-grow-1 d-flex align-items-start gap-1\">\r\n <span class=\"assessment-text-medium-15 text-nowrap d-md-block d-none\"\r\n *ngIf=\"sequence\">{{sequence}}.</span>\r\n <div class=\"flex-grow-1\">\r\n <div class=\"d-flex gap-2 align-items-start col-12\">\r\n <div class=\"flex-grow-1\">\r\n <p class=\"assessment-text-medium-15 mb-0 d-flex gap-1\">\r\n <span>\r\n <span [innerHtml]=\"question.questionText?.[0]?.text\"></span>\r\n <span *ngIf=\"isMandatory\"\r\n class=\"assessment-text-regular-11 assessment-text-grey-eight\">\r\n ({{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}})</span>\r\n </span>\r\n </p>\r\n <div class=\"mt-3 col-12\" *ngIf=\"question?.mediaUrl?.length\">\r\n <ng-container\r\n *ngTemplateOutlet=\"VideoTemplate; context:{videoUrl:question?.mediaUrl}\"></ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"question.hintText?.length && !previewMode\">\r\n <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.INFO']\"\r\n (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/info.svg')\"\r\n cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\"\r\n (mouseenter)=\"tooltipState[question.id!] = true\"\r\n (mouseleave)=\"tooltipState[question.id!] = false\" class=\"cursor-pointer\" />\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"tooltipState[question.id!] || false\"\r\n [cdkConnectedOverlayPositions]=\"[{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8, offsetY: 0 }, { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8, offsetY: 0 }]\">\r\n <div class=\"assessment-bg-grey-two assessment-tooltip-border p-3 assessment-border-radius-two assessment-box-shadow-tooltip question-info assessment-text-regular-13\"\r\n (mouseenter)=\"tooltipState[question.id!] = true\"\r\n (mouseleave)=\"tooltipState[question.id!] = false\"\r\n [innerHTML]=\"question.hintText\">\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"previewMode && !isMobile\" class=\"mt-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"isMobile\" class=\"col-12 mt-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n\r\n <!-- Assessor Marks Logic -->\r\n <div class=\"assessment-marks-field\"\r\n *ngIf=\"enableMarks && shouldShowMarksDropdown(question) && formGroup.get(question.id + '_marks') as marksControl\">\r\n <label class=\"assessment-text-medium-12 assessment-text-grey-ten\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}(Max: {{question.weight}})</label>\r\n <input (keydown)=\"preventNegativeInput($event)\"\r\n (input)=\"checkMaxVal($event, marksControl, question?.weight)\"\r\n class=\"col-12 assessment-input-border-one assessment-border-radius-two px-2 py-1 outline-0 assessment-bg-grey-one assessment-text-medium-12\"\r\n [formControlName]=\"question.id + '_marks'\" type=\"number\" min=\"0\"\r\n (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n </div>\r\n\r\n <!-- answer field -->\r\n <div *ngIf=\"!previewMode && !isMobile\" class=\"mt-3\">\r\n <ng-container\r\n *ngTemplateOutlet=\"answerField; context: {question: question,previewMode: previewMode,isMandatory: isMandatory,groupIndex: groupIndex,parentOptionId: parentOptionId,parentQuestionId: parentQuestionId}\"></ng-container>\r\n </div>\r\n\r\n <!-- Child Questions and Remarks Rendering Logic based on checked form state -->\r\n <ng-container *ngIf=\"question.defaultOptionsList?.length\">\r\n <ng-container *ngFor=\"let option of question.defaultOptionsList; trackBy: trackByOptionId\">\r\n\r\n <ng-container *ngIf=\"isOptionSelected(formGroup, question, option.options?.id)\">\r\n\r\n <!-- REMARKS FIELD -->\r\n <div class=\"mt-3\"\r\n *ngIf=\"option.remarksRequired && formGroup.get(question.id + '_remarks_' + option.id) as remarksControl\">\r\n <p class=\"assessment-text-regular-15 mb-2\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMARKS']}}</p>\r\n <textarea *ngIf=\"!previewMode\" formControlName=\"{{question.id}}_remarks_{{option.id}}\"\r\n rows=\"2\" [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.REMARKS']\"\r\n [ngClass]=\"remarksControl.invalid && remarksControl.touched ? 'assessment-input-border-invalid' : ''\"\r\n class=\"col-12 assessment-text-regular-13 assessment-input-border-one assessment-border-radius-two assessment-input-padding outline-0 assessment-bg-grey-one\"></textarea>\r\n <ng-container *ngIf=\"previewMode\">\r\n <span class=\"assessment-text-regular-13 assessment-text-grey-nine\">\r\n {{ remarksControl.value }}</span>\r\n </ng-container>\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"remarksControl.invalid && remarksControl.touched\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.FIELD_REQUIRED']}}\r\n </div>\r\n </div>\r\n\r\n <!-- CHILD QUESTIONS RECURSION -->\r\n <div class=\"col-12 mt-4 d-flex flex-column gap-3\" *ngIf=\"option.childQuestionList?.length\">\r\n <ng-container *ngFor=\"let childId of option.childQuestionList; let childIndex = index; trackBy: trackByChildId\">\r\n <ng-container *ngTemplateOutlet=\"questionTemplate; context: {\r\n questionId: childId,\r\n isMandatory: questionBank[childId]?.isMandatory,\r\n groupIndex: groupIndex,\r\n parentOptionId: option.id,\r\n parentQuestionId: question.id,\r\n sequence: sequence + '.' + (childIndex + 1)\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- answer field template -->\r\n<ng-template #answerField let-question=\"question\" let-previewMode=\"previewMode\" let-isMandatory=\"isMandatory\"\r\n let-groupIndex=\"groupIndex\" let-parentOptionId=\"parentOptionId\" let-parentQuestionId=\"parentQuestionId\">\r\n <div *ngIf=\"sectionFormGroups[groupIndex].formGroup\" [formGroup]=\"sectionFormGroups[groupIndex].formGroup\"\r\n class=\"col-12\">\r\n <ng-container [ngSwitch]=\"question.questionType?.code\">\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_SHORT'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_LONG'\">\r\n <lib-question-type-long [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-long>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.SUBJECTIVE_RICH_TEXT'\">\r\n <lib-question-type-editor [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [previewMode]=\"previewMode\"\r\n [labelConfig]=\"labelConfig\"></lib-question-type-editor>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.OBJECTIVE'\">\r\n <lib-question-type-objective [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [showCorrectAnswers]=\"showCorrectAnswers\" [imageConfig]=\"imageConfig\"\r\n [answerObj]=\"getQuestionAnswerObj(question.id!, parentOptionId, parentQuestionId)\"></lib-question-type-objective>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.MULTI_SELECT'\">\r\n <lib-question-type-multiselect [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [showCorrectAnswers]=\"showCorrectAnswers\" [imageConfig]=\"imageConfig\"\r\n [answerObj]=\"getQuestionAnswerObj(question.id!, parentOptionId, parentQuestionId)\"></lib-question-type-multiselect>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.PREFERENCE'\">\r\n <lib-question-type-preference [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\"></lib-question-type-preference>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.NUMBER'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.EMAIL'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.CONTACT_NUMBER'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.URL'\">\r\n <lib-question-type-short [question]=\"question\" [formControlName]=\"question.id!\" [required]=\"isMandatory\"\r\n [previewMode]=\"previewMode\" [labelConfig]=\"labelConfig\"></lib-question-type-short>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.FILE_UPLOAD'\">\r\n <lib-question-type-file-upload [question]=\"question\" [assessmentInstanceId]=\"assessmentInstanceId\"\r\n [formControlName]=\"question.id!\" [required]=\"isMandatory\" [labelConfig]=\"labelConfig\"\r\n [imageConfig]=\"imageConfig\" (snackbarMessage)=\"snackbarMessage.emit($event)\"></lib-question-type-file-upload>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'QUESTION_TYPE.DATE_PICKER'\">\r\n <lib-question-type-date-picker [question]=\"question\" [formControlName]=\"question.id!\"\r\n [required]=\"isMandatory\" [previewMode]=\"previewMode\"\r\n [labelConfig]=\"labelConfig\"></lib-question-type-date-picker>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Error Messages and Character Count Container -->\r\n <ng-container\r\n *ngIf=\"!previewMode && sectionFormGroups[groupIndex].formGroup.get(question.id?.toString() || '') as control\">\r\n <div class=\"d-flex justify-content-between align-items-start mt-1\">\r\n <span>\r\n <div class=\"assessment-text-regular-12 assessment-text-danger\"\r\n *ngIf=\"control.touched && control.errors?.['required']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED_RESPONSE']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['pattern']\">\r\n {{question?.validationMessage || labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_FORMAT']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['privateGdriveLink']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.PRIVATE_DRIVE_LINK']}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['minlength']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MIN_CHARS']?.replace('{{length}}',\r\n control.errors?.['minlength'].requiredLength + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxlength']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_CHARS']?.replace('{{length}}',\r\n control.errors?.['maxlength'].requiredLength + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['minOptions']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MIN_OPTIONS']?.replace('{{count}}',\r\n control.errors?.['minOptions'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxOptions']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_OPTIONS']?.replace('{{count}}',\r\n control.errors?.['maxOptions'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxFiles']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_FILES']?.replace('{{count}}',\r\n control.errors?.['maxFiles'].required + '')}}\r\n </div>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-danger mt-1\"\r\n *ngIf=\"control.touched && control.errors?.['maxFileSize']\">\r\n {{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_FILE_SIZE']?.replace('{{size}}',\r\n control.errors?.['maxFileSize'].requiredSize + '')}}\r\n </div>\r\n </span>\r\n\r\n <div class=\"assessment-text-regular-12 assessment-text-grey-seven white-space-nowrap ms-2\"\r\n *ngIf=\"getMaxCharCount(question) > 0\">\r\n {{ getRemainingChars(question, control) }}\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTER']}}{{getRemainingChars(question, control) !==\r\n 1\r\n ? 's' : ''}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMAINING']}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Reusable Section Form Template -->\r\n<ng-template #sectionContent let-section=\"section\" let-i=\"i\">\r\n <form class=\"w-100\" *ngIf=\"sectionFormGroups[i].formGroup\" [formGroup]=\"sectionFormGroups[i].formGroup\"\r\n [name]=\"'sectionfrm-' + i\" novalidate>\r\n <div class=\"d-flex justify-content-between align-items-center mb-4\"\r\n *ngIf=\"!previewMode && (section?.qpsDesc?.[0]?.text || section?.mediaUrl)\">\r\n <span class=\"assessment-text-semibold-14 assessment-text-grey-ten\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.TOTAL_QUESTIONS']}}: {{ section?.totalQuestions || 0 }}\r\n </span>\r\n <button (click)=\"openInstructionsDialog(section)\"\r\n class=\"assessment-zoom-animation assessment-button-padding assessment-text-medium-13 assessment-btn-primary-transparent\">\r\n {{labelConfig['COMMONS_ASSESSMENT.LABEL.VIEW_INSTRUCTIONS']}}\r\n </button>\r\n </div>\r\n\r\n <div class=\"col-12 d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let sq of section.sectionQuestionsList | orderBy; let j = index; trackBy: trackBySectionQuestion\">\r\n <ng-container *ngTemplateOutlet=\"questionTemplate; context: {\r\n questionId: sq.questionId,\r\n isMandatory: questionBank[sq.questionId]?.isMandatory,\r\n groupIndex: i,\r\n parentOptionId: null,\r\n parentQuestionId: null,\r\n sequence: j + 1\r\n }\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </form>\r\n</ng-template>\r\n\r\n<!-- video preview -->\r\n<ng-template let-videoUrl=\"videoUrl\" #VideoTemplate>\r\n <div class=\"assessment-border-radius-two overflow-hidden col-md-10 col-12\">\r\n <video *ngIf=\"videoUrl?.includes('.mp4') else youtubeVideo\" width=\"400\" controls class=\"mw-100 d-block mx-auto\">\r\n <source [src]=\"videoUrl\" type=\"video/mp4\">\r\n </video>\r\n <ng-template #youtubeVideo>\r\n <div class=\"youtube-video position-relative h-100\">\r\n <iframe [src]=\"addYoutubeIframeSrc(videoUrl)\" title=\"YouTube video player\" frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen class=\"position-absolute top-0 start-0 w-100 h-100 d-block\">\r\n </iframe>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}.height-without-footer{height:calc(100% - 4.4rem)!important}.z-index-1{z-index:1}.question-info{min-width:15rem;max-width:40vw}@media screen and (max-width: 768px){.question-info{max-width:75vw}}.assessment-marks-field{min-width:6.5rem;width:6.5rem}.youtube-video{aspect-ratio:16/9}.assessment-panel-header{padding-top:.7rem;padding-bottom:.7rem}.timer-container{border:.064rem solid var(--assessment-palette-FAD2B9)}\n"], components: [{ type: ProctoringConsentComponent, selector: "lib-proctoring-consent", inputs: ["labelConfig", "proctoringEnabled", "requireCapture", "sectionCount", "questionCount", "durationSeconds", "confirmAction"], outputs: ["proceeded"] }, { type: i8__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i8__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: QuestionTypeShortComponent, selector: "lib-question-type-short", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeLongComponent, selector: "lib-question-type-long", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeEditorComponent, selector: "lib-question-type-editor", inputs: ["required", "question", "previewMode", "labelConfig"] }, { type: QuestionTypeObjectiveComponent, selector: "lib-question-type-objective", inputs: ["required", "question", "showCorrectAnswers", "imageConfig", "answerObj"], outputs: ["viewChild"] }, { type: QuestionTypeMultiselectComponent, selector: "lib-question-type-multiselect", inputs: ["required", "question", "showCorrectAnswers", "imageConfig", "answerObj"], outputs: ["viewChild"] }, { type: QuestionTypePreferenceComponent, selector: "lib-question-type-preference", inputs: ["required", "question"], outputs: ["viewChild"] }, { type: QuestionTypeFileUploadComponent, selector: "lib-question-type-file-upload", inputs: ["required", "assessmentInstanceId", "question", "labelConfig", "imageConfig"], outputs: ["snackbarMessage"] }, { type: QuestionTypeDatePickerComponent, selector: "lib-question-type-date-picker", inputs: ["required", "question", "previewMode", "labelConfig"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20__namespace.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i20__namespace.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i1__namespace$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }], pipes: { "orderBy": OrderByPipe } });
3695
3825
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AssessmentTakerComponent, decorators: [{
3696
3826
  type: i0.Component,
3697
3827
  args: [{
@@ -3750,6 +3880,12 @@
3750
3880
  }], onResize: [{
3751
3881
  type: i0.HostListener,
3752
3882
  args: ['window:resize']
3883
+ }], onBeforeUnload: [{
3884
+ type: i0.HostListener,
3885
+ args: ['window:beforeunload', ['$event']]
3886
+ }], onPopState: [{
3887
+ type: i0.HostListener,
3888
+ args: ['window:popstate']
3753
3889
  }] } });
3754
3890
 
3755
3891
  var MATERIAL_MODULES = [
@@ -3811,61 +3947,6 @@
3811
3947
  }]
3812
3948
  }] });
3813
3949
 
3814
- var ConfirmationDialogComponent = /** @class */ (function () {
3815
- function ConfirmationDialogComponent(dialogRef, data) {
3816
- this.dialogRef = dialogRef;
3817
- this.data = data;
3818
- this.loading = false;
3819
- this.errorMessage = '';
3820
- this.title = (data === null || data === void 0 ? void 0 : data.title) || '';
3821
- this.message = (data === null || data === void 0 ? void 0 : data.message) || '';
3822
- this.note = (data === null || data === void 0 ? void 0 : data.note) || '';
3823
- this.confirmLabel = (data === null || data === void 0 ? void 0 : data.confirmLabel) || '';
3824
- this.cancelLabel = (data === null || data === void 0 ? void 0 : data.cancelLabel) || '';
3825
- this.hideCancel = !!(data === null || data === void 0 ? void 0 : data.hideCancel);
3826
- }
3827
- ConfirmationDialogComponent.prototype.onConfirm = function () {
3828
- var _this = this;
3829
- var _a;
3830
- if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.confirmAction) {
3831
- if (this.loading) {
3832
- return;
3833
- }
3834
- this.loading = true;
3835
- this.errorMessage = '';
3836
- this.data.confirmAction().subscribe({
3837
- next: function () { return _this.dialogRef.close(true); },
3838
- error: function (err) {
3839
- // keep the dialog open so the user can fix the issue and retry
3840
- _this.loading = false;
3841
- _this.errorMessage = (typeof err === 'string' ? err : err === null || err === void 0 ? void 0 : err.message) || '';
3842
- }
3843
- });
3844
- return;
3845
- }
3846
- this.dialogRef.close(true);
3847
- };
3848
- ConfirmationDialogComponent.prototype.onCancel = function () {
3849
- this.dialogRef.close(false);
3850
- };
3851
- return ConfirmationDialogComponent;
3852
- }());
3853
- ConfirmationDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfirmationDialogComponent, deps: [{ token: i1__namespace.MatDialogRef }, { token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
3854
- ConfirmationDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfirmationDialogComponent, selector: "lib-confirmation-dialog", ngImport: i0__namespace, template: "<div class=\"p-3 px-md-4\">\r\n <h2 *ngIf=\"title\" class=\"assessment-text-semibold-16 assessment-text-grey-ten mb-3\">{{ title }}</h2>\r\n <p class=\"assessment-text-regular-14 assessment-text-grey-ten\" [class.mb-4]=\"!note\" [class.mb-2]=\"note\">{{ message }}</p>\r\n <p *ngIf=\"note\" class=\"assessment-text-regular-13 assessment-text-grey-seven mb-4\">{{ note }}</p>\r\n <p *ngIf=\"errorMessage\" class=\"assessment-text-regular-12 assessment-text-danger mb-3\">{{ errorMessage }}</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!hideCancel\" type=\"button\" (click)=\"onCancel()\" [disabled]=\"loading\"\r\n class=\"assessment-zoom-animation assessment-btn-primary-transparent assessment-border-radius-two assessment-text-semibold-13 px-3 py-2\">\r\n {{ cancelLabel }}\r\n </button>\r\n <button type=\"button\" (click)=\"onConfirm()\" [disabled]=\"loading\"\r\n class=\"assessment-zoom-animation assessment-btn-primary assessment-border-radius-two assessment-text-semibold-13 px-3 py-2 d-inline-flex align-items-center gap-2\">\r\n <span *ngIf=\"loading\" class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>\r\n {{ confirmLabel }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.assessment-text-grey-ten{color:var(--assessment-grey-ten)!important}.assessment-bg-grey-ten{background-color:var(--assessment-grey-ten)!important}.assessment-text-grey-nine{color:var(--assessment-grey-nine)!important}.assessment-bg-grey-nine{background-color:var(--assessment-grey-nine)!important}.assessment-text-grey-eight{color:var(--assessment-grey-eight)!important}.assessment-bg-grey-eight{background-color:var(--assessment-grey-eight)!important}.assessment-text-grey-seven{color:var(--assessment-grey-seven)!important}.assessment-bg-grey-seven{background-color:var(--assessment-grey-seven)!important}.assessment-text-grey-six{color:var(--assessment-grey-six)!important}.assessment-bg-grey-six{background-color:var(--assessment-grey-six)!important}.assessment-text-grey-five{color:var(--assessment-grey-five)!important}.assessment-bg-grey-five{background-color:var(--assessment-grey-five)!important}.assessment-text-grey-four{color:var(--assessment-grey-four)!important}.assessment-bg-grey-four{background-color:var(--assessment-grey-four)!important}.assessment-text-grey-three{color:var(--assessment-grey-three)!important}.assessment-bg-grey-three{background-color:var(--assessment-grey-three)!important}.assessment-text-grey-two{color:var(--assessment-grey-two)!important}.assessment-bg-grey-two{background-color:var(--assessment-grey-two)!important}.assessment-text-grey-one{color:var(--assessment-grey-one)!important}.assessment-bg-grey-one{background-color:var(--assessment-grey-one)!important}.assessment-text-white{color:var(--assessment-white)!important}.assessment-bg-white{background-color:var(--assessment-white)!important}.assessment-text-black{color:var(--assessment-black)!important}.assessment-bg-black{background-color:var(--assessment-black)!important}.assessment-text-danger{color:var(--assessment-danger)!important}.assessment-bg-danger{background-color:var(--assessment-danger)!important}.assessment-text-danger-bg{color:var(--assessment-danger-bg)!important}.assessment-bg-danger-bg{background-color:var(--assessment-danger-bg)!important}.assessment-text-success{color:var(--assessment-success)!important}.assessment-bg-success{background-color:var(--assessment-success)!important}.assessment-text-success-bg{color:var(--assessment-success-bg)!important}.assessment-bg-success-bg{background-color:var(--assessment-success-bg)!important}.assessment-text-warning{color:var(--assessment-warning)!important}.assessment-bg-warning{background-color:var(--assessment-warning)!important}.assessment-text-warning-bg{color:var(--assessment-warning-bg)!important}.assessment-bg-warning-bg{background-color:var(--assessment-warning-bg)!important}.assessment-text-primary-one{color:var(--assessment-primary-one)!important}.assessment-bg-primary-one{background-color:var(--assessment-primary-one)!important}.assessment-text-primary-four{color:var(--assessment-primary-four)!important}.assessment-bg-primary-four{background-color:var(--assessment-primary-four)!important}.assessment-text-palette-EDF3FD{color:var(--assessment-palette-EDF3FD)!important}.assessment-bg-palette-EDF3FD{background-color:var(--assessment-palette-EDF3FD)!important}.assessment-text-palette-C8DAF9{color:var(--assessment-palette-C8DAF9)!important}.assessment-bg-palette-C8DAF9{background-color:var(--assessment-palette-C8DAF9)!important}.assessment-text-palette-ADC9F6{color:var(--assessment-palette-ADC9F6)!important}.assessment-bg-palette-ADC9F6{background-color:var(--assessment-palette-ADC9F6)!important}.assessment-text-palette-FEF9F1{color:var(--assessment-palette-FEF9F1)!important}.assessment-bg-palette-FEF9F1{background-color:var(--assessment-palette-FEF9F1)!important}.assessment-text-palette-F9DAA6{color:var(--assessment-palette-F9DAA6)!important}.assessment-bg-palette-F9DAA6{background-color:var(--assessment-palette-F9DAA6)!important}.assessment-text-palette-E8F7F0{color:var(--assessment-palette-E8F7F0)!important}.assessment-bg-palette-E8F7F0{background-color:var(--assessment-palette-E8F7F0)!important}.assessment-text-palette-B7E7CF{color:var(--assessment-palette-B7E7CF)!important}.assessment-bg-palette-B7E7CF{background-color:var(--assessment-palette-B7E7CF)!important}.assessment-text-palette-FEF1E8{color:var(--assessment-palette-FEF1E8)!important}.assessment-bg-palette-FEF1E8{background-color:var(--assessment-palette-FEF1E8)!important}.assessment-text-palette-FAD2B9{color:var(--assessment-palette-FAD2B9)!important}.assessment-bg-palette-FAD2B9{background-color:var(--assessment-palette-FAD2B9)!important}.assessment-box-shadow-one{box-shadow:var(--assessment-box-shadow-one)!important}.assessment-border-radius-one{border-radius:var(--assessment-border-radius-one)!important}.assessment-border-radius-two{border-radius:var(--assessment-border-radius-two)!important}.assessment-border-radius-three{border-radius:var(--assessment-border-radius-three)!important}.assessment-border-radius-four{border-radius:var(--assessment-border-radius-four)!important}.assessment-border-radius-five{border-radius:var(--assessment-border-radius-five)!important}.assessment-border-radius-six{border-radius:var(--assessment-border-radius-six)!important}.assessment-input-border-one{border:var(--assessment-input-border-one)!important}.assessment-input-border-invalid{border:var(--assessment-input-border-invalid)!important}.assessment-input-focus-border{border:var(--assessment-input-focus-border)!important}.assessment-border-two{border:var(--assessment-border-two)!important}.assessment-card-border{border:var(--assessment-card-border)!important}.assessment-tooltip-border{border:var(--assessment-tooltip-border)!important}.assessment-box-shadow-tooltip{box-shadow:var(--assessment-box-shadow-tooltip)!important}.assessment-button-padding{padding:var(--assessment-button-padding)!important}.assessment-button-padding-large{padding:var(--assessment-button-padding-large)!important}.assessment-input-padding{padding:var(--assessment-input-padding)!important}.assessment-text-font-family{color:var(--assessment-font-family)!important}.assessment-bg-font-family{background-color:var(--assessment-font-family)!important}.assessment-text-regular-12{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-semibold-12{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-medium-11{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-10{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.42rem + .2vw);line-height:calc(.72rem + .2vw)}.assessment-text-regular-11{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.48rem + .25vw);line-height:calc(.8rem + .25vw)}.assessment-text-medium-12{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.48rem + .3vw);line-height:calc(.9rem + .3vw)}.assessment-text-regular-13{font-weight:400;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-semibold-13{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-13{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.64rem + .2vw)!important;line-height:calc(.9rem + .2vw)!important}.assessment-text-medium-14{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw)!important;line-height:calc(1.2rem + .2vw)!important}.assessment-text-semibold-14{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.7rem + .2vw);line-height:calc(1.2rem + .2vw)}.assessment-text-regular-15{font-weight:400;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.4rem + .1vw)}.assessment-text-medium-15{font-weight:500;font-family:var(--assessment-font-family);font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-15{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.85rem + .1vw);line-height:calc(1.25rem + .1vw)}.assessment-text-semibold-16{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-16{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(.77rem + .25vw);line-height:calc(1.25rem + .2vw)}.assessment-text-medium-18{font-weight:500;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}.assessment-text-semibold-18{font-weight:600;font-family:var(--assessment-font-family)!important;font-size:calc(1rem + .125vw)!important;line-height:calc(1.5rem + .1vw)!important}@media (min-height: 100vw) and (orientation: portrait){.assessment-text-medium-18,.assessment-text-semibold-18{font-size:calc(1rem + .1vh)!important;line-height:calc(1.6rem + .1vh)!important}.assessment-text-medium-16,.assessment-text-semibold-16{font-size:calc(.9rem + .2vh)!important;line-height:calc(1.4rem + .2vh)!important}.assessment-text-regular-15,.assessment-text-semibold-15{font-size:calc(.8rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-15{font-size:calc(.82rem + .2vh);line-height:calc(1.27rem + .2vh)}.assessment-text-medium-12,.assessment-text-regular-12,.assessment-text-semibold-12{font-size:calc(.5rem + .4vh);line-height:calc(.8rem + .4vh)}.assessment-text-medium-14,.assessment-text-semibold-14{font-size:calc(.8rem + .1vh)!important;line-height:calc(1.2rem + .2vh)!important}.assessment-text-regular-13,.assessment-text-medium-13,.assessment-text-semibold-13{font-size:calc(.7rem + .2vh)!important;line-height:calc(1rem + .3vh)!important}.assessment-text-regular-11,.assessment-text-medium-11{font-size:calc(.5rem + .2vh)!important;line-height:calc(.8rem + .2vh)!important}.assessment-text-medium-10{font-size:calc(.45rem + .2vh)!important;line-height:calc(.72rem + .2vh)!important}}.assessment-btn-primary{background-color:var(--assessment-primary-one);color:var(--assessment-white);border:.064rem solid var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two)}.assessment-btn-primary-transparent{background-color:var(--assessment-white);color:var(--assessment-primary-one);border-radius:var(--assessment-border-radius-two);border:.064rem solid var(--assessment-primary-one)}.assessment-zoom-animation{transition:transform .2s ease;transform:translateZ(0);text-rendering:optimizeLegibility}.assessment-zoom-animation:hover{transform:scale(1.03)}.assessment-zoom-animation:active{transform:scale(1)}.assessment-zoom-animation:disabled{transform:none!important}.change-direction{transform:rotate(180deg);transition:.3s ease-out}.change-direction-reverse{transform:rotate(0);transition:.3s ease-out}.outline-0{outline:none}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.action-icon{width:1.2rem}.mat-menu-item,.mat-mdc-menu-item{height:inherit;min-height:unset;--mat-menu-item-label-text-font: var(--assessment-font-family) !important;--mat-menu-item-label-text-size: 14px !important;--mat-menu-item-label-text-weight: 600 !important;--mat-menu-item-label-text-line-height: inherit !important}.skill-chip{width:-moz-fit-content;width:fit-content;background:var(--assessment-palette-EDF3FD);border:.064rem solid var(--assessment-palette-C8DAF9)}.assessment-form-check-input-primary-one{min-height:unset}.assessment-form-check-input-primary-one .form-check-input{width:1rem;height:1rem}.assessment-form-check-input-primary-one .form-check-input:checked{background-color:var(--assessment-primary-one);color:var(--assessment-primary-one)}.assessment-form-check-input-primary-one .form-check-input:disabled{opacity:.8}.form-check-input:checked{background-color:var(--assessment-primary-one);border-color:var(--assessment-primary-one)}.form-check-input:focus{border-color:var(--assessment-primary-one);box-shadow:none}\n"], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3855
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfirmationDialogComponent, decorators: [{
3856
- type: i0.Component,
3857
- args: [{
3858
- selector: 'lib-confirmation-dialog',
3859
- templateUrl: './confirmation-dialog.component.html',
3860
- styleUrls: ['./confirmation-dialog.component.scss']
3861
- }]
3862
- }], ctorParameters: function () {
3863
- return [{ type: i1__namespace.MatDialogRef }, { type: undefined, decorators: [{
3864
- type: i0.Inject,
3865
- args: [i1.MAT_DIALOG_DATA]
3866
- }] }];
3867
- } });
3868
-
3869
3950
  var SharedModule = /** @class */ (function () {
3870
3951
  function SharedModule() {
3871
3952
  }