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

package/esm2015/lib/modules/assessment-maker/components/question-details/question-details.component.js

@@ -53,7 +53,7 @@ export class QuestionDetailsComponent {
     }
 }
 QuestionDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QuestionDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDetailsComponent, selector: "lib-question-details", inputs: { sectionQuestion: "sectionQuestion", question: "question", questionBank: "questionBank", labelConfig: "labelConfig", imageConfig: "imageConfig", allowDelete: "allowDelete" }, outputs: { editQuestion: "editQuestion", duplicateQuestion: "duplicateQuestion", deleteParentQuestion: "deleteParentQuestion", deleteChildQuestion: "deleteChildQuestion" }, viewQueries: [{ propertyName: "questionText", first: true, predicate: ["questionText"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n    <div class=\"d-flex flex-wrap gap-2\">\r\n        <span\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-FEF9F1 assessment-text-medium-12 border-palette-F9DAA6\">\r\n            {{capitalizeFirst(question?.questionType?.labels?.[0]?.text)}}\r\n        </span>\r\n        <span *ngIf=\"question?.weight\"\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-EDF3FD assessment-text-medium-12 border-palette-C8DAF9\">\r\n            {{question?.weight}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}\r\n        </span>\r\n        <span *ngIf=\"question?.isMandatory\"\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-E8F7F0 assessment-text-medium-12 border-palette-B7E7CF\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}}\r\n        </span>\r\n    </div>\r\n    <button [matMenuTriggerFor]=\"questionsMenu\" (click)=\"$event.stopPropagation()\" class=\"border-0 bg-transparent py-2\">\r\n        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ACTION_DOTS']\"\r\n            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/action-dots.svg')\" />\r\n    </button>\r\n    <mat-menu #questionsMenu=\"matMenu\" class=\"mat-menu assessment-border-radius-two assessment-border-grey-four-1\">\r\n        <button (click)=\"duplicateQuestion.emit(sectionQuestion)\" mat-menu-item\r\n            class=\"py-2 assessment-text-semibold-12\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DUPLICATE']}}\r\n        </button>\r\n        <button *ngIf=\"allowDelete\" (click)=\"deleteParentQuestion.emit(sectionQuestion)\" mat-menu-item\r\n            class=\"py-2 assessment-text-semibold-12 assessment-text-danger\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DELETE']}}\r\n        </button>\r\n    </mat-menu>\r\n</div>\r\n<div class=\"col-12\">\r\n    <div #questionText class=\"assessment-text-medium-15 question-text cursor-pointer\" [class.collapsed]=\"!expanded\"\r\n        (click)=\"$event.stopPropagation(); editQuestion.emit({questionId: sectionQuestion?.questionId, isChildQuestion: false})\"\r\n        [innerHTML]=\"question?.questionText?.[0]?.text\">\r\n    </div>\r\n\r\n    <span *ngIf=\"showToggle\" class=\"assessment-text-semibold-15 assessment-text-primary-one cursor-pointer\"\r\n        (click)=\"$event.stopPropagation(); expanded = !expanded\">\r\n        {{ labelConfig[expanded ? 'COMMONS_ASSESSMENT.LABEL.READ_LESS' : 'COMMONS_ASSESSMENT.LABEL.READ_MORE'] }}\r\n    </span>\r\n</div>\r\n\r\n<div *ngIf=\"(question?.skillCodes?.length ?? 0) > 0\" class=\"mt-3\">\r\n    <p class=\"assessment-text-medium-13 assessment-text-grey-eight mb-1\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.SKILLS']}}</p>\r\n    <div class=\"d-flex flex-wrap gap-2\">\r\n        <span *ngFor=\"let skill of question?.skillCodes; trackBy: trackBySkillCode\"\r\n            class=\"assessment-text-medium-12 assessment-text-grey-ten rounded-2 skill-chip px-3 py-1\">{{skill?.labels?.[0]?.text || skill?.name}}</span>\r\n    </div>\r\n</div>\r\n\r\n<!-- Child Questions -->\r\n<ng-container *ngIf=\"question?.defaultOptionsList?.length\">\r\n    <div class=\"mt-4 col-12\">\r\n        <div *ngFor=\"let option of question?.defaultOptionsList | orderBy; trackBy: trackByOptionId\" class=\"my-3 d-flex align-items-start gap-2\">\r\n            <div class=\"rounded-circle custom-padding border-grey-ten-2\"></div>\r\n            <span class=\"assessment-text-medium-13\">{{option.options?.optionName?.[0]?.text}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <mat-accordion *ngIf=\"childQuestionPresent(question)\">\r\n        <mat-expansion-panel (click)=\"$event.stopPropagation()\"\r\n            class=\"mt-4 col-12 border-0 overflow-hidden assessment-panel shadow-none bg-transparent\">\r\n            <mat-expansion-panel-header class=\"p-0 bg-transparent pe-1 h-auto\">\r\n                <div class=\"d-flex align-items-center gap-2 flex-grow-1 pe-2\">\r\n                    <span\r\n                        class=\"assessment-text-semibold-12 assessment-text-grey-eight\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS']}}</span>\r\n                    <div class=\"flex-grow-1 border-bottom\"></div>\r\n                </div>\r\n            </mat-expansion-panel-header>\r\n            <ng-container *ngFor=\"let option of question?.defaultOptionsList | orderBy; trackBy: trackByOptionId\">\r\n                <div *ngIf=\"option.childQuestionList?.length\" class=\"mt-3\">\r\n                    <p class=\"assessment-text-primary-one assessment-text-semibold-14 mb-0\">\r\n                        {{option.options?.optionName?.[0]?.text}}</p>\r\n                    <div class=\"position-relative overflow-hidden\">\r\n                        <div *ngFor=\"let childQuestionId of option.childQuestionList; trackBy: trackByChildId\"\r\n                            class=\"assessment-child-node position-relative mt-3 ms-md-4 ms-3\">\r\n                            <div *ngIf=\"questionBank[childQuestionId] as childQuestion\"\r\n                                class=\"d-flex align-items-start justify-content-between gap-3 ps-1\">\r\n                                <div (click)=\"$event.stopPropagation(); editQuestion.emit({questionId: childQuestionId, isChildQuestion: true})\"\r\n                                    [innerHTML]=\"childQuestion?.questionText?.[0]?.text\"\r\n                                    class=\"flex-grow-1 assessment-text-regular-13 question-text collapsed cursor-pointer\">\r\n                                </div>\r\n                                <span\r\n                                    class=\"assessment-text-medium-12 assessment-text-grey-eight d-md-inline d-none text-nowrap\">\r\n                                    {{capitalizeFirst(childQuestion?.questionType?.labels?.[0]?.text)}}\r\n                                </span>\r\n                                <!-- <img (click)=\"$event.stopPropagation(); deleteChildQuestion.emit({option: option, childQuestionId: childQuestionId})\"\r\n                                    [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DELETE']\"\r\n                                    class=\"action-icon d-md-inline d-none cursor-pointer\" /> -->\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </mat-expansion-panel>\r\n    </mat-accordion>\r\n</ng-container>", 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}.border-palette-F9DAA6{border:.064em solid var(--assessment-palette-F9DAA6)}.border-palette-C8DAF9{border:.064em solid var(--assessment-palette-C8DAF9)}.border-palette-B7E7CF{border:.064em solid var(--assessment-palette-B7E7CF)}.border-grey-ten-2{border:.12rem solid var(--assessment-grey-ten)}.custom-padding{padding:.4rem}.assessment-child-node:before{content:\"\";position:absolute;bottom:calc(100% - .7rem);top:-100vh;border-left:.064em solid var(--assessment-grey-five);border-bottom:.064em solid var(--assessment-grey-five);border-bottom-left-radius:.75rem;z-index:0;left:-1.5rem;width:1.5rem}@media screen and (max-width: 767px){.assessment-child-node:before{left:-1rem;width:1rem}}.question-text{word-break:break-word}.question-text.collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n"], components: [{ type: i1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }], pipes: { "orderBy": i4.OrderByPipe } });
+QuestionDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionDetailsComponent, selector: "lib-question-details", inputs: { sectionQuestion: "sectionQuestion", question: "question", questionBank: "questionBank", labelConfig: "labelConfig", imageConfig: "imageConfig", allowDelete: "allowDelete" }, outputs: { editQuestion: "editQuestion", duplicateQuestion: "duplicateQuestion", deleteParentQuestion: "deleteParentQuestion", deleteChildQuestion: "deleteChildQuestion" }, viewQueries: [{ propertyName: "questionText", first: true, predicate: ["questionText"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n    <div class=\"d-flex flex-wrap gap-2\">\r\n        <span\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-FEF9F1 assessment-text-medium-12 border-palette-F9DAA6\">\r\n            {{capitalizeFirst(question?.questionType?.labels?.[0]?.text)}}\r\n        </span>\r\n        <span *ngIf=\"question?.weight\"\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-EDF3FD assessment-text-medium-12 border-palette-C8DAF9\">\r\n            {{question?.weight}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}\r\n        </span>\r\n        <span *ngIf=\"question?.isMandatory\"\r\n            class=\"assessment-border-radius-two p-2 assessment-bg-palette-E8F7F0 assessment-text-medium-12 border-palette-B7E7CF\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}}\r\n        </span>\r\n    </div>\r\n    <button [matMenuTriggerFor]=\"questionsMenu\" (click)=\"$event.stopPropagation()\" class=\"border-0 bg-transparent py-2\">\r\n        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ACTION_DOTS']\"\r\n            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/action-dots.svg')\" />\r\n    </button>\r\n    <mat-menu #questionsMenu=\"matMenu\" class=\"mat-menu assessment-border-radius-two assessment-border-grey-four-1\">\r\n        <button (click)=\"duplicateQuestion.emit(sectionQuestion)\" mat-menu-item\r\n            class=\"py-2 assessment-text-semibold-12\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DUPLICATE']}}\r\n        </button>\r\n        <button *ngIf=\"allowDelete\" (click)=\"deleteParentQuestion.emit(sectionQuestion)\" mat-menu-item\r\n            class=\"py-2 assessment-text-semibold-12 assessment-text-danger\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DELETE']}}\r\n        </button>\r\n    </mat-menu>\r\n</div>\r\n<div class=\"col-12\">\r\n    <div #questionText class=\"assessment-text-medium-15 question-text cursor-pointer\" [class.collapsed]=\"!expanded\"\r\n        (click)=\"$event.stopPropagation(); editQuestion.emit({questionId: sectionQuestion?.questionId, isChildQuestion: false})\"\r\n        [innerHTML]=\"question?.questionText?.[0]?.text\">\r\n    </div>\r\n\r\n    <span *ngIf=\"showToggle\" class=\"assessment-text-semibold-15 assessment-text-primary-one cursor-pointer\"\r\n        (click)=\"$event.stopPropagation(); expanded = !expanded\">\r\n        {{ labelConfig[expanded ? 'COMMONS_ASSESSMENT.LABEL.READ_LESS' : 'COMMONS_ASSESSMENT.LABEL.READ_MORE'] }}\r\n    </span>\r\n</div>\r\n\r\n<div *ngIf=\"(question?.skillCodes?.length ?? 0) > 0\" class=\"mt-3\">\r\n    <p class=\"assessment-text-medium-13 assessment-text-grey-eight mb-1\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.SKILLS']}}</p>\r\n    <div class=\"d-flex flex-wrap gap-2\">\r\n        <span *ngFor=\"let skill of question?.skillCodes; trackBy: trackBySkillCode\"\r\n            class=\"assessment-text-medium-12 assessment-text-grey-ten rounded-2 skill-chip px-3 py-1\">{{skill?.labels?.[0]?.text || skill?.name}}</span>\r\n    </div>\r\n</div>\r\n\r\n<!-- Child Questions -->\r\n<ng-container *ngIf=\"question?.defaultOptionsList?.length\">\r\n    <div class=\"mt-4 col-12\">\r\n        <div *ngFor=\"let option of question?.defaultOptionsList | orderBy; trackBy: trackByOptionId\" class=\"my-3 d-flex align-items-start gap-2\">\r\n            <div class=\"rounded-circle custom-padding border-grey-ten-2\"></div>\r\n            <span class=\"assessment-text-medium-13\">{{option.options?.optionName?.[0]?.text}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <mat-accordion *ngIf=\"childQuestionPresent(question)\">\r\n        <mat-expansion-panel (click)=\"$event.stopPropagation()\"\r\n            class=\"mt-4 col-12 border-0 overflow-hidden assessment-panel shadow-none bg-transparent\">\r\n            <mat-expansion-panel-header class=\"p-0 bg-transparent pe-1 h-auto\">\r\n                <div class=\"d-flex align-items-center gap-2 flex-grow-1 pe-2\">\r\n                    <span\r\n                        class=\"assessment-text-semibold-12 assessment-text-grey-eight\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS']}}</span>\r\n                    <div class=\"flex-grow-1 border-bottom\"></div>\r\n                </div>\r\n            </mat-expansion-panel-header>\r\n            <ng-container *ngFor=\"let option of question?.defaultOptionsList | orderBy; trackBy: trackByOptionId\">\r\n                <div *ngIf=\"option.childQuestionList?.length\" class=\"mt-3\">\r\n                    <p class=\"assessment-text-primary-one assessment-text-semibold-14 mb-0\">\r\n                        {{option.options?.optionName?.[0]?.text}}</p>\r\n                    <div class=\"position-relative overflow-hidden\">\r\n                        <div *ngFor=\"let childQuestionId of option.childQuestionList; trackBy: trackByChildId\"\r\n                            class=\"assessment-child-node position-relative mt-3 ms-md-4 ms-3\">\r\n                            <div *ngIf=\"questionBank[childQuestionId] as childQuestion\"\r\n                                class=\"d-flex align-items-start justify-content-between gap-3 ps-1\">\r\n                                <div (click)=\"$event.stopPropagation(); editQuestion.emit({questionId: childQuestionId, isChildQuestion: true})\"\r\n                                    [innerHTML]=\"childQuestion?.questionText?.[0]?.text\"\r\n                                    class=\"flex-grow-1 assessment-text-regular-13 question-text collapsed cursor-pointer\">\r\n                                </div>\r\n                                <span\r\n                                    class=\"assessment-text-medium-12 assessment-text-grey-eight d-md-inline d-none text-nowrap\">\r\n                                    {{capitalizeFirst(childQuestion?.questionType?.labels?.[0]?.text)}}\r\n                                </span>\r\n                                <!-- <img (click)=\"$event.stopPropagation(); deleteChildQuestion.emit({option: option, childQuestionId: childQuestionId})\"\r\n                                    [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DELETE']\"\r\n                                    class=\"action-icon d-md-inline d-none cursor-pointer\" /> -->\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </mat-expansion-panel>\r\n    </mat-accordion>\r\n</ng-container>", 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-input-focus-box-shadow{box-shadow:var(--assessment-input-focus-box-shadow)!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}.border-palette-F9DAA6{border:.064em solid var(--assessment-palette-F9DAA6)}.border-palette-C8DAF9{border:.064em solid var(--assessment-palette-C8DAF9)}.border-palette-B7E7CF{border:.064em solid var(--assessment-palette-B7E7CF)}.border-grey-ten-2{border:.12rem solid var(--assessment-grey-ten)}.custom-padding{padding:.4rem}.assessment-child-node:before{content:\"\";position:absolute;bottom:calc(100% - .7rem);top:-100vh;border-left:.064em solid var(--assessment-grey-five);border-bottom:.064em solid var(--assessment-grey-five);border-bottom-left-radius:.75rem;z-index:0;left:-1.5rem;width:1.5rem}@media screen and (max-width: 767px){.assessment-child-node:before{left:-1rem;width:1rem}}.question-text{word-break:break-word}.question-text.collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n"], components: [{ type: i1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }], pipes: { "orderBy": i4.OrderByPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionDetailsComponent, decorators: [{
             type: Component,
             args: [{