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

package/esm2015/lib/modules/assessment-maker/assessment-maker.component.js

@@ -535,7 +535,7 @@ export class AssessmentMakerComponent {
     }
 }
 AssessmentMakerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AssessmentMakerComponent, deps: [{ token: i1.AssessmentMakerService }, { token: i2.AssessmentBuilderService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-AssessmentMakerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentMakerComponent, selector: "lib-assessment-maker", inputs: { labelConfig: "labelConfig", imageConfig: "imageConfig", questionTypes: "questionTypes", showFooter: "showFooter", customRules: "customRules", assessmentId: "assessmentId", assessmentInstanceId: "assessmentInstanceId", defaultAssessmentDTO: "defaultAssessmentDTO", predefinedAssessmentInstance: "predefinedAssessmentInstance", enableSkillsToQuestionMapping: "enableSkillsToQuestionMapping", assessmentContext: "assessmentContext", minimumRequiredSections: "minimumRequiredSections", checkForResponses: "checkForResponses", showProctoringToggle: "showProctoringToggle", showTimeInput: "showTimeInput" }, outputs: { assessmentIdChange: "assessmentIdChange", assessmentInstanceIdChange: "assessmentInstanceIdChange", snackbarMessage: "snackbarMessage" }, ngImport: i0, template: "<div *ngIf=\"configsLoaded && !showLoader; else loader\" class=\"col-12 h-100\">\r\n    <div class=\"col-12 h-100 py-4\" [class.height-without-footer]=\"showFooter\">\r\n        <ng-container *ngIf=\"assessmentQuestionPaperData?.questionPaperSectionList?.length\">\r\n            <div *ngIf=\"showProctoringToggle || showTimeInput\"\r\n                class=\"d-flex align-items-center justify-content-end flex-wrap gap-4 mb-3\">\r\n                <div *ngIf=\"showTimeInput\" class=\"d-flex align-items-center gap-2\">\r\n                    <label for=\"durationInput\" class=\"assessment-text-medium-13 assessment-text-grey-ten mb-0 cursor-pointer\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.DURATION'] }}\r\n                    </label>\r\n                    <input type=\"number\" id=\"durationInput\" min=\"1\" [(ngModel)]=\"durationMinutes\"\r\n                        (keydown)=\"blockNegativeKeys($event)\" (ngModelChange)=\"durationMinutes = $event > 0 ? $event : null\"\r\n                        [placeholder]=\"0\"\r\n                        class=\"form-control form-control-sm assessment-border-radius-two assessment-text-regular-13\" style=\"width: 4rem;\">\r\n                    <span class=\"assessment-text-regular-13 assessment-text-grey-seven\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.MINUTES'] }}\r\n                    </span>\r\n                </div>\r\n                <div *ngIf=\"showProctoringToggle\" class=\"d-flex align-items-center gap-2\">\r\n                    <label for=\"proctoringToggle\" class=\"assessment-text-medium-13 assessment-text-grey-ten mb-0 cursor-pointer\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.ENABLE_PROCTORING'] }}\r\n                    </label>\r\n                    <div class=\"form-check form-switch m-0\">\r\n                        <input type=\"checkbox\" id=\"proctoringToggle\" class=\"form-check-input cursor-pointer\"\r\n                            [(ngModel)]=\"proctoringEnabled\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <mat-accordion multi=\"true\" cdkDropList (cdkDropListDropped)=\"dropSection($event)\">\r\n                <mat-expansion-panel [hideToggle]=\"true\" #panel=\"matExpansionPanel\" [expanded]=\"section.isExpanded\"\r\n                    (opened)=\"section.isExpanded = true\" (closed)=\"section.isExpanded = false\"\r\n                    class=\"mb-4 border-0 overflow-hidden assessment-panel shadow-none bg-transparent\" cdkDrag\r\n                    *ngFor=\"let section of assessmentQuestionPaperData?.questionPaperSectionList; let sectionIndex = index; trackBy: trackBySectionId\">\r\n                    <!-- Section Header -->\r\n                    <mat-expansion-panel-header class=\"col-12 p-0 h-auto bg-transparent\">\r\n                        <div class=\"d-flex col-12 align-items-center gap-md-3 gap-2\">\r\n                            <img cdkDragHandle [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DRAG_DROP']\"\r\n                                class=\"cursor-grab\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/drag-drop.svg')\" />\r\n                            <div class=\"d-flex align-items-center gap-2 flex-grow-1 justify-content-between p-3 assessment-border-radius-two assessment-border-two assessment-bg-white\"\r\n                                [class.no-border]=\"section.isExpanded\">\r\n                                <div>\r\n                                    <div class=\"d-flex align-items-center mb-1\">\r\n                                        <input type=\"text\" [id]=\"'sectionNameInput_' + sectionIndex\"\r\n                                            class=\"col-md-11 col-10 assessment-text-semibold-18 border-0 outline-0 bg-transparent p-0 input-focus\"\r\n                                            [(ngModel)]=\"section.qpsName[0].text\"\r\n                                            [attr.size]=\"(section.qpsName[0].text?.length || 1)\"\r\n                                            (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n                                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.EDIT']\"\r\n                                            class=\"action-icon cursor-pointer\"\r\n                                            (click)=\"focusSectionInput(sectionIndex, $event)\"\r\n                                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/pencil.svg')\" />\r\n                                    </div>\r\n                                    <p class=\"mb-0 assessment-text-medium-12 assessment-text-grey-seven\">\r\n                                        {{section?.sectionQuestionsList?.length || 0}}\r\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS']}}\r\n                                    </p>\r\n                                </div>\r\n                                <div class=\"d-flex align-items-center gap-md-4 gap-2\">\r\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_DOWN_BLACK']\"\r\n                                        [ngClass]=\"panel.expanded ? 'change-direction' : 'change-direction-reverse'\"\r\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/arrow-down-black.svg')\" />\r\n                                    <button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\"\r\n                                        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 #menu=\"matMenu\"\r\n                                        class=\"mat-menu assessment-border-radius-two assessment-border-grey-four-1\">\r\n                                        <button (click)=\"addInstruction(section)\" mat-menu-item\r\n                                            class=\"py-2 assessment-text-semibold-12\">\r\n                                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_INSTRUCTIONS']}}\r\n                                        </button>\r\n                                        <button (click)=\"duplicateSection(section.id)\" 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=\"(assessmentQuestionPaperData?.questionPaperSectionList?.length ?? 0) > minimumRequiredSections\" \r\n                                            (click)=\"deleteSection(section)\" 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>\r\n                        </div>\r\n                    </mat-expansion-panel-header>\r\n\r\n                    <!-- Questions inside section -->\r\n                    <div cdkDropList [cdkDropListData]=\"section.sectionQuestionsList || []\"\r\n                        (cdkDropListDropped)=\"dropQuestion($event)\">\r\n                        <div cdkDrag *ngFor=\"let sectionQuestion of section.sectionQuestionsList; let i = index; trackBy: trackBySectionQuestion\"\r\n                            class=\"d-flex align-items-start gap-md-3 gap-2 my-3 overflow-hidden\">\r\n                            <img cdkDragHandle [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DRAG_DROP']\"\r\n                                class=\"cursor-grab mt-4\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/drag-drop.svg')\" />\r\n                            <div class=\"flex-grow-1 p-3 assessment-border-two assessment-border-radius-two question-container assessment-bg-white\">\r\n                                <lib-question-details [sectionQuestion]=\"sectionQuestion\"\r\n                                    [question]=\"getQuestionFromBank(sectionQuestion.questionId) || {}\"\r\n                                    [questionBank]=\"questionBank\" [imageConfig]=\"imageConfig\"\r\n                                    [labelConfig]=\"labelConfig\" [allowDelete]=\"(section?.sectionQuestionsList?.length ?? 0) > 1\"\r\n                                    (editQuestion)=\"createEditQuestion(section, $event?.questionId, $event?.isChildQuestion)\"\r\n                                    (duplicateQuestion)=\"duplicateQuestion(section, $event)\"\r\n                                    (deleteParentQuestion)=\"deleteParentQuestion($event)\"\r\n                                    (deleteChildQuestion)=\"deleteChildQuestion($event.option, $event.childQuestionId)\">\r\n                                </lib-question-details>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"col-12 ps-4 border-bottom pb-4\">\r\n                        <button (click)=\"createEditQuestion(section)\"\r\n                            class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two mt-3 border-ADC9F6\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_QUESTION']}}\r\n                        </button>\r\n                    </div>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n            <button (click)=\"createEditQuestion()\"\r\n                class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two mt-3 border-ADC9F6 ms-4\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ADD_SECTION']\"\r\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/add-section.svg')\" />\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_SECTION']}}\r\n            </button>\r\n        </ng-container>\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.ADD_CUSTOM_QUESTIONS']}}</p>\r\n                <p class=\"mb-0 assessment-text-medium-12 assessment-text-grey-seven\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_QUESTION_DESC']}}</p>\r\n            </div>\r\n            <button (click)=\"createEditQuestion()\"\r\n                class=\"assessment-button-padding assessment-border-radius-two d-flex align-items-center gap-2 assessment-bg-palette-EDF3FD assessment-text-primary-one assessment-text-semibold-12 border-0 assessment-zoom-animation\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\r\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_QUESTION']}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showFooter\"\r\n        class=\"bg-white p-3 position-sticky bottom-0 d-flex align-items-center justify-content-end border-top gap-3\">\r\n        <button (click)=\"discardChanges()\" [disabled]=\"isSubmitting\"\r\n            class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary-transparent assessment-text-semibold-13\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.DISCARD']}}</button>\r\n        <button (click)=\"finalSubmit()\" [disabled]=\"isSubmitting\"\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                {{labelConfig['COMMONS_ASSESSMENT.LABEL.PUBLISH']}}\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<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>", 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}.input-focus{overflow:hidden;text-overflow:ellipsis}.input-focus:focus-visible{border-bottom:var(--assessment-input-focus-border)!important}.one-line-truncate{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.height-without-footer{height:calc(100% - 4.4rem)!important}.question-container{transition:all .3s ease}.question-container:hover{box-shadow:var(--assessment-box-shadow-one);background-color:var(--assessment-palette-EDF3FD);border-color:var(--assessment-palette-C8DAF9)!important}.border-ADC9F6{border:.064rem solid var(--assessment-palette-ADC9F6)}.no-border{border-color:transparent!important}\n"], components: [{ type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.QuestionDetailsComponent, selector: "lib-question-details", inputs: ["sectionQuestion", "question", "questionBank", "labelConfig", "imageConfig", "allowDelete"], outputs: ["editQuestion", "duplicateQuestion", "deleteParentQuestion", "deleteChildQuestion"] }, { type: i7.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+AssessmentMakerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentMakerComponent, selector: "lib-assessment-maker", inputs: { labelConfig: "labelConfig", imageConfig: "imageConfig", questionTypes: "questionTypes", showFooter: "showFooter", customRules: "customRules", assessmentId: "assessmentId", assessmentInstanceId: "assessmentInstanceId", defaultAssessmentDTO: "defaultAssessmentDTO", predefinedAssessmentInstance: "predefinedAssessmentInstance", enableSkillsToQuestionMapping: "enableSkillsToQuestionMapping", assessmentContext: "assessmentContext", minimumRequiredSections: "minimumRequiredSections", checkForResponses: "checkForResponses", showProctoringToggle: "showProctoringToggle", showTimeInput: "showTimeInput" }, outputs: { assessmentIdChange: "assessmentIdChange", assessmentInstanceIdChange: "assessmentInstanceIdChange", snackbarMessage: "snackbarMessage" }, ngImport: i0, template: "<div *ngIf=\"configsLoaded && !showLoader; else loader\" class=\"col-12 h-100\">\r\n    <div class=\"col-12 h-100 py-4\" [class.height-without-footer]=\"showFooter\">\r\n        <ng-container *ngIf=\"assessmentQuestionPaperData?.questionPaperSectionList?.length\">\r\n            <div *ngIf=\"showProctoringToggle || showTimeInput\"\r\n                class=\"d-flex align-items-center justify-content-end flex-wrap gap-4 mb-3\">\r\n                <div *ngIf=\"showTimeInput\" class=\"d-flex align-items-center gap-2\">\r\n                    <label for=\"durationInput\" class=\"assessment-text-medium-13 assessment-text-grey-ten mb-0 cursor-pointer\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.DURATION'] }}\r\n                    </label>\r\n                    <input type=\"number\" id=\"durationInput\" min=\"1\" [(ngModel)]=\"durationMinutes\"\r\n                        (keydown)=\"blockNegativeKeys($event)\" (ngModelChange)=\"durationMinutes = $event > 0 ? $event : null\"\r\n                        [placeholder]=\"0\"\r\n                        class=\"form-control form-control-sm assessment-border-radius-two assessment-text-regular-13\" style=\"width: 4rem;\">\r\n                    <span class=\"assessment-text-regular-13 assessment-text-grey-seven\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.MINUTES'] }}\r\n                    </span>\r\n                </div>\r\n                <div *ngIf=\"showProctoringToggle\" class=\"d-flex align-items-center gap-2\">\r\n                    <label for=\"proctoringToggle\" class=\"assessment-text-medium-13 assessment-text-grey-ten mb-0 cursor-pointer\">\r\n                        {{ labelConfig['COMMONS_ASSESSMENT.LABEL.ENABLE_PROCTORING'] }}\r\n                    </label>\r\n                    <div class=\"form-check form-switch m-0\">\r\n                        <input type=\"checkbox\" id=\"proctoringToggle\" class=\"form-check-input cursor-pointer\"\r\n                            [(ngModel)]=\"proctoringEnabled\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <mat-accordion multi=\"true\" cdkDropList (cdkDropListDropped)=\"dropSection($event)\">\r\n                <mat-expansion-panel [hideToggle]=\"true\" #panel=\"matExpansionPanel\" [expanded]=\"section.isExpanded\"\r\n                    (opened)=\"section.isExpanded = true\" (closed)=\"section.isExpanded = false\"\r\n                    class=\"mb-4 border-0 overflow-hidden assessment-panel shadow-none bg-transparent\" cdkDrag\r\n                    *ngFor=\"let section of assessmentQuestionPaperData?.questionPaperSectionList; let sectionIndex = index; trackBy: trackBySectionId\">\r\n                    <!-- Section Header -->\r\n                    <mat-expansion-panel-header class=\"col-12 p-0 h-auto bg-transparent\">\r\n                        <div class=\"d-flex col-12 align-items-center gap-md-3 gap-2\">\r\n                            <img cdkDragHandle [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DRAG_DROP']\"\r\n                                class=\"cursor-grab\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/drag-drop.svg')\" />\r\n                            <div class=\"d-flex align-items-center gap-2 flex-grow-1 justify-content-between p-3 assessment-border-radius-two assessment-border-two assessment-bg-white\"\r\n                                [class.no-border]=\"section.isExpanded\">\r\n                                <div>\r\n                                    <div class=\"d-flex align-items-center mb-1\">\r\n                                        <input type=\"text\" [id]=\"'sectionNameInput_' + sectionIndex\"\r\n                                            class=\"col-md-11 col-10 assessment-text-semibold-18 border-0 outline-0 bg-transparent p-0 input-focus\"\r\n                                            [(ngModel)]=\"section.qpsName[0].text\"\r\n                                            [attr.size]=\"(section.qpsName[0].text?.length || 1)\"\r\n                                            (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n                                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.EDIT']\"\r\n                                            class=\"action-icon cursor-pointer\"\r\n                                            (click)=\"focusSectionInput(sectionIndex, $event)\"\r\n                                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/pencil.svg')\" />\r\n                                    </div>\r\n                                    <p class=\"mb-0 assessment-text-medium-12 assessment-text-grey-seven\">\r\n                                        {{section?.sectionQuestionsList?.length || 0}}\r\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS']}}\r\n                                    </p>\r\n                                </div>\r\n                                <div class=\"d-flex align-items-center gap-md-4 gap-2\">\r\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_DOWN_BLACK']\"\r\n                                        [ngClass]=\"panel.expanded ? 'change-direction' : 'change-direction-reverse'\"\r\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/arrow-down-black.svg')\" />\r\n                                    <button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\"\r\n                                        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 #menu=\"matMenu\"\r\n                                        class=\"mat-menu assessment-border-radius-two assessment-border-grey-four-1\">\r\n                                        <button (click)=\"addInstruction(section)\" mat-menu-item\r\n                                            class=\"py-2 assessment-text-semibold-12\">\r\n                                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_INSTRUCTIONS']}}\r\n                                        </button>\r\n                                        <button (click)=\"duplicateSection(section.id)\" 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=\"(assessmentQuestionPaperData?.questionPaperSectionList?.length ?? 0) > minimumRequiredSections\" \r\n                                            (click)=\"deleteSection(section)\" 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>\r\n                        </div>\r\n                    </mat-expansion-panel-header>\r\n\r\n                    <!-- Questions inside section -->\r\n                    <div cdkDropList [cdkDropListData]=\"section.sectionQuestionsList || []\"\r\n                        (cdkDropListDropped)=\"dropQuestion($event)\">\r\n                        <div cdkDrag *ngFor=\"let sectionQuestion of section.sectionQuestionsList; let i = index; trackBy: trackBySectionQuestion\"\r\n                            class=\"d-flex align-items-start gap-md-3 gap-2 my-3 overflow-hidden\">\r\n                            <img cdkDragHandle [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DRAG_DROP']\"\r\n                                class=\"cursor-grab mt-4\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/drag-drop.svg')\" />\r\n                            <div class=\"flex-grow-1 p-3 assessment-border-two assessment-border-radius-two question-container assessment-bg-white\">\r\n                                <lib-question-details [sectionQuestion]=\"sectionQuestion\"\r\n                                    [question]=\"getQuestionFromBank(sectionQuestion.questionId) || {}\"\r\n                                    [questionBank]=\"questionBank\" [imageConfig]=\"imageConfig\"\r\n                                    [labelConfig]=\"labelConfig\" [allowDelete]=\"(section?.sectionQuestionsList?.length ?? 0) > 1\"\r\n                                    (editQuestion)=\"createEditQuestion(section, $event?.questionId, $event?.isChildQuestion)\"\r\n                                    (duplicateQuestion)=\"duplicateQuestion(section, $event)\"\r\n                                    (deleteParentQuestion)=\"deleteParentQuestion($event)\"\r\n                                    (deleteChildQuestion)=\"deleteChildQuestion($event.option, $event.childQuestionId)\">\r\n                                </lib-question-details>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"col-12 ps-4 border-bottom pb-4\">\r\n                        <button (click)=\"createEditQuestion(section)\"\r\n                            class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two mt-3 border-ADC9F6\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_QUESTION']}}\r\n                        </button>\r\n                    </div>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n            <button (click)=\"createEditQuestion()\"\r\n                class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two mt-3 border-ADC9F6 ms-4\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ADD_SECTION']\"\r\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/add-section.svg')\" />\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_SECTION']}}\r\n            </button>\r\n        </ng-container>\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.ADD_CUSTOM_QUESTIONS']}}</p>\r\n                <p class=\"mb-0 assessment-text-medium-12 assessment-text-grey-seven\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_QUESTION_DESC']}}</p>\r\n            </div>\r\n            <button (click)=\"createEditQuestion()\"\r\n                class=\"assessment-button-padding assessment-border-radius-two d-flex align-items-center gap-2 assessment-bg-palette-EDF3FD assessment-text-primary-one assessment-text-semibold-12 border-0 assessment-zoom-animation\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\r\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_A_QUESTION']}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showFooter\"\r\n        class=\"bg-white p-3 position-sticky bottom-0 d-flex align-items-center justify-content-end border-top gap-3\">\r\n        <button (click)=\"discardChanges()\" [disabled]=\"isSubmitting\"\r\n            class=\"assessment-zoom-animation assessment-border-radius-two assessment-button-padding-large assessment-btn-primary-transparent assessment-text-semibold-13\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.DISCARD']}}</button>\r\n        <button (click)=\"finalSubmit()\" [disabled]=\"isSubmitting\"\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                {{labelConfig['COMMONS_ASSESSMENT.LABEL.PUBLISH']}}\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<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>", 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}.input-focus{overflow:hidden;text-overflow:ellipsis}.input-focus:focus-visible{border-bottom:var(--assessment-input-focus-border)!important}.one-line-truncate{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.height-without-footer{height:calc(100% - 4.4rem)!important}.question-container{transition:all .3s ease}.question-container:hover{box-shadow:var(--assessment-box-shadow-one);background-color:var(--assessment-palette-EDF3FD);border-color:var(--assessment-palette-C8DAF9)!important}.border-ADC9F6{border:.064rem solid var(--assessment-palette-ADC9F6)}.no-border{border-color:transparent!important}\n"], components: [{ type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.QuestionDetailsComponent, selector: "lib-question-details", inputs: ["sectionQuestion", "question", "questionBank", "labelConfig", "imageConfig", "allowDelete"], outputs: ["editQuestion", "duplicateQuestion", "deleteParentQuestion", "deleteChildQuestion"] }, { type: i7.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AssessmentMakerComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/modules/assessment-maker/components/add-edit-section-introduction/add-edit-section-introduction.component.js

@@ -40,7 +40,7 @@ export class AddEditSectionIntroductionComponent {
     }
 }
 AddEditSectionIntroductionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddEditSectionIntroductionComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-AddEditSectionIntroductionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddEditSectionIntroductionComponent, selector: "lib-add-edit-section-introduction", ngImport: i0, template: "<div class=\"col-12\">\r\n    <header class=\"p-3 d-flex align-items-center justify-content-between col-12 assessment-bg-grey-one pb-4\">\r\n        <p class=\"mb-0 assessment-text-semibold-18\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_INSTRUCTIONS_HEADER']}}\r\n        </p>\r\n        <img mat-dialog-close [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\" class=\"cursor-pointer\"\r\n            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\r\n    </header>\r\n\r\n    <div class=\"col-12 px-md-4 px-3\">\r\n        <div class=\"col-12 my-4\">\r\n            <app-text-editor [preText]=\"sectionDescription\" (inputChange)=\"sectionDescription = $event\"\r\n                [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_INSTRUCTIONS']\"\r\n                class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\r\n                [height]=\"'15rem'\">\r\n            </app-text-editor>\r\n        </div>\r\n        <div class=\"col-12 my-4\">\r\n            <input [(ngModel)]=\"videoUrl\"\r\n                [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_INSTRUCTIONS_MEDIA']\"\r\n                class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\r\n                [ngClass]=\"{'assessment-input-border-invalid': !isVideoUrlValid}\">\r\n            <div *ngIf=\"!isVideoUrlValid\" class=\"text-danger assessment-text-regular-12 mt-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_URL']}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <footer class=\"mt-auto p-3 pb-4 d-flex align-items-center justify-content-end gap-3 col-12\">\r\n        <button mat-dialog-close\r\n            class=\"assessment-btn-primary-transparent assessment-zoom-animation p-2 px-3 assessment-text-medium-13\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DISCARD']}}\r\n        </button>\r\n        <button (click)=\"onSubmit()\" [disabled]=\"!isVideoUrlValid\"\r\n            class=\"assessment-btn-primary assessment-zoom-animation p-2 px-3 assessment-text-medium-13\"\r\n            [ngClass]=\"{'opacity-50': !isVideoUrlValid, 'cursor-not-allowed': !isVideoUrlValid}\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.SAVE_DETAILS']}}\r\n        </button>\r\n    </footer>\r\n</div>", 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"], components: [{ type: i2.TextEditorComponent, selector: "app-text-editor", inputs: ["height", "placeholder", "subject", "preText", "maxLength", "disabled", "showToolbar", "editorConfig"], outputs: ["inputChange"] }], directives: [{ type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AddEditSectionIntroductionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddEditSectionIntroductionComponent, selector: "lib-add-edit-section-introduction", ngImport: i0, template: "<div class=\"col-12\">\r\n    <header class=\"p-3 d-flex align-items-center justify-content-between col-12 assessment-bg-grey-one pb-4\">\r\n        <p class=\"mb-0 assessment-text-semibold-18\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_INSTRUCTIONS_HEADER']}}\r\n        </p>\r\n        <img mat-dialog-close [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\" class=\"cursor-pointer\"\r\n            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\r\n    </header>\r\n\r\n    <div class=\"col-12 px-md-4 px-3\">\r\n        <div class=\"col-12 my-4\">\r\n            <app-text-editor [preText]=\"sectionDescription\" (inputChange)=\"sectionDescription = $event\"\r\n                [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_INSTRUCTIONS']\"\r\n                class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\r\n                [height]=\"'15rem'\">\r\n            </app-text-editor>\r\n        </div>\r\n        <div class=\"col-12 my-4\">\r\n            <input [(ngModel)]=\"videoUrl\"\r\n                [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_INSTRUCTIONS_MEDIA']\"\r\n                class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\r\n                [ngClass]=\"{'assessment-input-border-invalid': !isVideoUrlValid}\">\r\n            <div *ngIf=\"!isVideoUrlValid\" class=\"text-danger assessment-text-regular-12 mt-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_URL']}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <footer class=\"mt-auto p-3 pb-4 d-flex align-items-center justify-content-end gap-3 col-12\">\r\n        <button mat-dialog-close\r\n            class=\"assessment-btn-primary-transparent assessment-zoom-animation p-2 px-3 assessment-text-medium-13\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.DISCARD']}}\r\n        </button>\r\n        <button (click)=\"onSubmit()\" [disabled]=\"!isVideoUrlValid\"\r\n            class=\"assessment-btn-primary assessment-zoom-animation p-2 px-3 assessment-text-medium-13\"\r\n            [ngClass]=\"{'opacity-50': !isVideoUrlValid, 'cursor-not-allowed': !isVideoUrlValid}\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.SAVE_DETAILS']}}\r\n        </button>\r\n    </footer>\r\n</div>", 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}\n"], components: [{ type: i2.TextEditorComponent, selector: "app-text-editor", inputs: ["height", "placeholder", "subject", "preText", "maxLength", "disabled", "showToolbar", "editorConfig"], outputs: ["inputChange"] }], directives: [{ type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddEditSectionIntroductionComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -686,7 +686,7 @@ export class AssessmentBuilderComponent {
     }
 }
 AssessmentBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AssessmentBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AssessmentBuilderService }, { token: i3.AssessmentMakerService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-AssessmentBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentBuilderComponent, selector: "lib-app-assessment-builder", viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex vh-100 position-relative overflow-hidden\">\n    <div *ngIf=\"questionStack.length > 0 || isChild\"\n        class=\"p-3 px-2 col-auto assessment-bg-palette-C8DAF9 flex-column align-items-center justify-content-end d-md-flex d-none\">\n        <p class=\"m-0 assessment-text-semibold-18 vertical-text\">\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTION']}}\n        </p>\n    </div>\n    <div class=\"flex-grow-1 h-100 d-flex flex-column position-relative\">\n        <header\n            class=\"p-3 d-flex align-items-center justify-content-between position-sticky top-0 col-12 border-bottom\">\n            <p *ngIf=\"questionStack.length == 0\" class=\"mb-0 assessment-text-semibold-18 d-md-inline d-none\">\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.INPUT_FIELD_SETTINGS']}}\n            </p>\n            <button *ngIf=\"questionStack.length > 0\" (click)=\"goBack()\"\n                class=\"d-flex align-items-center gap-2 assessment-text-grey-ten border-0 outline-0 assessment-text-medium-14 bg-transparent\">\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.GO_BACK']\"\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/go-back.svg')\" />\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK']}}\n            </button>\n            <div class=\"d-flex align-items-center justify-content-md-end justify-content-between gap-3 flex-grow-1\">\n                <button (click)=\"onSubmit()\" [disabled]=\"isSubmitting\"\n                    class=\"assessment-btn-primary assessment-button-padding assessment-text-medium-13 assessment-zoom-animation assessment-button-padding position-relative\">\n                    <span [ngClass]=\"{'opacity-0': isSubmitting}\">\n                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.SAVE_QUESTION']}}\n                    </span>\n                    <mat-spinner *ngIf=\"isSubmitting\" [diameter]=\"20\"\n                        class=\"position-absolute top-50 start-50 translate-middle assessment-spinner-white\"></mat-spinner>\n                </button>\n                <img class=\"d-md-none\" *ngIf=\"questionStack.length == 0\" mat-dialog-close\n                    [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\"\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n            </div>\n        </header>\n        <div #scrollContainer class=\"col-12 py-4 px-md-4 px-3 flex-grow-1 overflow-y-auto form-container\"\n            [formGroup]=\"questionsFormGroup\">\n            <div class=\"pb-4 col-12\">\n                <label\n                    class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten col-12\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.TYPE']}}</label>\n                <mat-select formControlName=\"questionType\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_QUESTION_TYPE']\"\n                    class=\"assessment-mat-select col-12 assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                    <mat-option class=\"assessment-text-medium-13\" *ngFor=\"let type of questionTypes; trackBy: trackByCode\"\n                        [value]=\"type?.code\">\n                        {{type?.label}}\n                    </mat-option>\n                </mat-select>\n                <div\n                    *ngIf=\"questionsFormGroup.get('questionType')?.errors  && questionsFormGroup.get('questionType')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"pb-4 col-12\">\n                <label class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten\">Question</label>\n                <app-text-editor [preText]=\"questionsFormGroup?.get('questionText')?.value\"\n                    (inputChange)=\"questionsFormGroup?.get('questionText')?.patchValue($event)\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_QUESTION']\"\n                    class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\n                    [height]=\"'8rem'\">\n                </app-text-editor>\n                <div\n                    *ngIf=\"questionsFormGroup.get('questionText')?.errors  && questionsFormGroup.get('questionText')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                <div class=\"col-12 position-relative mt-3\" *ngIf=\"showField('questionMedia')\">\n                    <input formControlName=\"questionMedia\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_QUESTION_MEDIA']\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                        [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('questionMedia')?.invalid && questionsFormGroup.get('questionMedia')?.touched}\">\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionMedia')?.hasError('pattern') && questionsFormGroup.get('questionMedia')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">\n                        {{labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_URL']}}\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionMedia')?.hasError('required') && questionsFormGroup.get('questionMedia')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                </div>\n            </div>\n            <div class=\"row mx-0 col-12 pb-4\" *ngIf=\"showField('minCharacterCount') || showField('maxCharacterCount')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('minCharacterCount')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MIN_CHARACTER_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"minCharacterCount\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('minCharacterCount')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('minCharacterCount')?.invalid && questionsFormGroup.get('minCharacterCount')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTERS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minCharacterCount')?.hasError('required') && questionsFormGroup.get('minCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minCharacterCount')?.hasError('min') && questionsFormGroup.get('minCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maxCharacterCount')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_CHARACTER_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxCharacterCount\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxCharacterCount')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxCharacterCount')?.invalid && questionsFormGroup.get('maxCharacterCount')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTERS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('required') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('min') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('lessThanOrEqualMin') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_LIMIT_GREATER']}}</div>\n                </div>\n            </div>\n            <div class=\"row mx-0 col-12 pb-4\" *ngIf=\"showField('maxFileSize') || showField('maxNoOfFiles')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('maxFileSize')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_FILE_SIZE']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxFileSize\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxFileSize')?.markAsTouched()\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxFileSize')?.invalid && questionsFormGroup.get('maxFileSize')?.touched}\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MB']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxFileSize')?.hasError('required') && questionsFormGroup.get('maxFileSize')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxFileSize')?.hasError('min') && questionsFormGroup.get('maxFileSize')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maxNoOfFiles')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_NO_OF_FILES']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxNoOfFiles\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxNoOfFiles')?.markAsTouched()\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxNoOfFiles')?.invalid && questionsFormGroup.get('maxNoOfFiles')?.touched}\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.FILES']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxNoOfFiles')?.hasError('required') && questionsFormGroup.get('maxNoOfFiles')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxNoOfFiles')?.hasError('min') && questionsFormGroup.get('maxNoOfFiles')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n            </div>\n            <div class=\"pb-4 col-12\" *ngIf=\"showField('customRegex')\">\n                <label\n                    class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CUSTOM_REGEX']}}</label>\n                <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                    <input formControlName=\"customRegex\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_CUSTOM_REGEX']\"\n                        (blur)=\"questionsFormGroup.get('customRegex')?.markAsTouched()\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                </div>\n                <div\n                    *ngIf=\"questionsFormGroup.get('customRegex')?.errors  && questionsFormGroup.get('customRegex')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"pb-4 col-12\" *ngIf=\"showField('totalMarks') && !isChild && questionStack.length == 0\">\n                <label\n                    class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.TOTAL_MARKS']}}</label>\n                <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                    <input formControlName=\"totalMarks\" placeholder=\"0\" (input)=\"allowOnlyNumbers($event)\"\n                        (blur)=\"questionsFormGroup.get('totalMarks')?.markAsTouched()\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                    <span\n                        class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}</span>\n                </div>\n                <div\n                    *ngIf=\"questionsFormGroup.get('totalMarks')?.errors  && questionsFormGroup.get('totalMarks')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n\n            <div class=\"row mx-0 col-12 pb-4\"\n                *ngIf=\"showField('minimumNumberOfOption') || showField('maximumNumberOfOption')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('minimumNumberOfOption')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MIN_OPTION_SELECT_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"minimumNumberOfOption\" placeholder=\"0\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('minimumNumberOfOption')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('minimumNumberOfOption')?.invalid && questionsFormGroup.get('minimumNumberOfOption')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minimumNumberOfOption')?.hasError('required') && questionsFormGroup.get('minimumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minimumNumberOfOption')?.hasError('min') && questionsFormGroup.get('minimumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO'] || 'Limit cannot be 0'}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maximumNumberOfOption')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_OPTION_SELECT_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maximumNumberOfOption\" [placeholder]=\"options.length || 0\"\n                            (input)=\"allowOnlyNumbers($event); checkMaxOptionsVal($event, questionsFormGroup.get('maximumNumberOfOption'))\"\n                            (blur)=\"questionsFormGroup.get('maximumNumberOfOption')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maximumNumberOfOption')?.invalid && questionsFormGroup.get('maximumNumberOfOption')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('required') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('min') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO'] || 'Limit cannot be 0'}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('lessThanOrEqualMin') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_LIMIT_GREATER'] || 'Max limit should be greater than min limit'}}</div>\n                </div>\n            </div>\n\n            <div class=\"pb-4 col-12 mt-md-3\" *ngIf=\"showField('options')\">\n                <div formArrayName=\"options\">\n                    <ng-container *ngFor=\"let option of options.controls; let i = index; trackBy: trackByControl\">\n                        <div [formGroupName]=\"i\" *ngIf=\"option.get('isActive')?.value !== false\"\n                            class=\"py-md-0 py-3 border-bottom border-md-0 col-12 d-flex flex-wrap flex-md-nowrap align-items-md-start align-items-center justify-content-between gap-md-4 gap-3\">\n\n                            <div class=\"col-12 col-md flex-md-grow-1 d-flex flex-column justify-content-center mt-md-3\"\n                                [class.pt-md-3]=\"i == 0\">\n                                <div class=\"col-12 d-flex align-items-center justify-content-between gap-3\">\n                                    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n                                        <div class=\"rounded-circle p-2 border-grey-ten-2 mt-1\"></div>\n                                        <input formControlName=\"optionLabel\"\n                                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_OPTION']\"\n                                            class=\"flex-grow-1 assessment-text-medium-13 border-0 outline-0 bg-transparent input-focus py-1\">\n                                    </div>\n                                    <img class=\"cursor-pointer d-md-none\"\n                                        [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\" (click)=\"removeOption(i)\"\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n                                </div>\n                                <div\n                                    *ngIf=\"option.get('optionLabel')?.invalid && option.get('optionLabel')?.touched\"\n                                    class=\"assessment-text-regular-12 mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                            </div>\n\n                            <div *ngIf=\"showField('options', 'showWeightage') && !isChild && questionStack.length == 0\"\n                                class=\"col-auto\">\n                                <p class=\"assessment-text-medium-12 assessment-text-grey-six mb-2 mb-md-3\"\n                                    [ngClass]=\"{'hidden-label': i > 0}\">\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.WEIGHTAGE']}}\n                                </p>\n                                <input type=\"number\" (input)=\"checkMaxVal($event, option.get('weight'))\"\n                                    formControlName=\"weight\" (wheel)=\"$event.preventDefault()\"\n                                    class=\"p-2 py-md-1 assessment-border-radius-two assessment-input-border-one outline-0 assessment-text-regular-12 assessment-marks-input assessment-bg-grey-one\"\n                                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.WEIGHTAGE']\">\n                            </div>\n\n                            <div *ngIf=\"showField('options', 'showRemarks') && !isChild && questionStack.length == 0\" class=\"col-auto\">\n                                <p class=\"assessment-text-medium-12 assessment-text-grey-six mb-2 mb-md-3 pb-md-1\"\n                                    [ngClass]=\"{'hidden-label': i > 0}\">\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMARKS']}}\n                                </p>\n                                <div class=\"form-check form-switch\">\n                                    <input type=\"checkbox\" class=\"form-check-input cursor-pointer\"\n                                        name=\"remarksRequired\" formControlName=\"remarksRequired\">\n                                </div>\n                            </div>\n\n                            <div class=\"d-none d-md-block pt-3\" [class.custom-margin]=\"i == 0\">\n                                <img class=\"cursor-pointer\" [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\"\n                                    (click)=\"removeOption(i)\"\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n\n                <button type=\"button\" (click)=\"addOption()\"\n                    class=\"assessment-border-radius-two d-flex align-items-center gap-2 bg-transparent assessment-text-primary-one assessment-text-medium-12 border-0 assessment-zoom-animation mt-4\">\n                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_OPTION']}}\n                </button>\n                <div\n                    *ngIf=\"questionsFormGroup.get('options')?.errors  && questionsFormGroup.get('options')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"py-4 col-12 border-top\"\n                *ngIf=\"showField('childQuestions') && questionStack.length == 0 && !isChild\">\n                <div class=\"d-flex align-items-center justify-content-between mb-2\">\n                    <label\n                        class=\"assessment-text-medium-16 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS']}}</label>\n                    <img matTooltip=\"{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS_INFO']}}\"\n                        matTooltipPosition=\"above\" matTooltipClass=\"assessment-tooltip\"\n                        [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.INFO']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/info.svg')\" />\n                </div>\n\n                <div *ngFor=\"let group of childQuestionGroups; let groupIndex = index; trackBy: trackByGroupId\"\n                    class=\"col-12 p-3 my-3 assessment-bg-grey-one assessment-border-radius-three assessment-input-border-one\">\n                    <div class=\"col-12 mb-3\" *ngIf=\"options.length > 0\">\n                        <label\n                            class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ASSIGNED_OPTION']}}</label>\n                        <mat-select [value]=\"group.optionId\"\n                            (selectionChange)=\"onGroupOptionChange(group.id, $event.value)\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_OPTION_TO_LINK']\"\n                            class=\"col-12 assessment-mat-select assessment-border-radius-two assessment-bg-white outline-0 assessment-input-border-one assessment-text-medium-13\">\n                            <mat-option class=\"assessment-text-medium-13\" [value]=\"null\">\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NONE']}}\n                            </mat-option>\n                            <ng-container *ngFor=\"let opt of options.controls; let opIndex = index; trackBy: trackByControl\">\n                                <mat-option *ngIf=\"opt.get('isActive')?.value !== false\"\n                                    class=\"assessment-text-medium-13\" [value]=\"getOptionId(opt)\">\n                                    {{ opt.get('optionLabel')?.value || ('Option ' + (opIndex + 1)) }}\n                                </mat-option>\n                            </ng-container>\n                        </mat-select>\n                    </div>\n\n                    <ng-container *ngFor=\"let questionId of group.questionIds; let i = index; trackBy: trackByQuestionId\">\n                        <ng-container *ngIf=\"getChildQuestionById(questionId) as child\">\n                            <div class=\"d-flex align-items-center justify-content-between mb-1 mt-3\">\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <p class=\"mb-0 assessment-text-medium-14\">\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTION']}} {{i + 1}}</p>\n                                </div>\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DELETE']\"\n                                        class=\"action-icon cursor-pointer\"\n                                        (click)=\"deleteChildQuestionById(child.id, $event)\"\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/delete.svg')\" />\n                                </div>\n                            </div>\n                            <div [innerHTML]=\"child?.questionText?.[0]?.text\"\n                                (click)=\"addEditChildQuestion(child, getChildQuestionIndex(child.id))\"\n                                class=\"col-12 assessment-button-padding assessment-border-radius-two assessment-bg-white assessment-input-border-one assessment-text-medium-12 cursor-pointer\">\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <button (click)=\"addEditChildQuestion(undefined, undefined, group.id)\"\n                        class=\"assessment-zoom-animation border-0 d-flex align-items-center justify-content-center gap-2 assessment-text-primary-one bg-transparent assessment-text-semibold-12 outline-0 mt-3\">\n                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_MORE']}}\n                    </button>\n                </div>\n\n                <button (click)=\"addEditChildQuestion()\"\n                    class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 col-12 assessment-border-radius-two mt-3 border-ADC9F6\">\n                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_CHILD_QUESTION']}}\n                </button>\n            </div>\n            <div class=\"py-4 col-12 border-top\" *ngIf=\"showField('hintText')\">\n                <label\n                    class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_HINT']}}</label>\n                <app-text-editor [preText]=\"questionsFormGroup?.get('hintText')?.value\"\n                    (inputChange)=\"questionsFormGroup?.get('hintText')?.patchValue($event)\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_HINT']\"\n                    class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\n                    [height]=\"'8rem'\">\n                </app-text-editor>\n                <div\n                    *ngIf=\"questionsFormGroup.get('hintText')?.errors  && questionsFormGroup.get('hintText')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"py-4 col-12 border-top\">\n                <label class=\"mb-2 assessment-text-semibold-18 assessment-text-grey-ten col-12\">\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.FIELDS_SETTINGS']}}</label>\n                <div class=\"my-3 d-flex align-items-center justify-content-between gap-2\">\n                    <div>\n                        <p class=\"mb-0 assessment-text-medium-13 assessment-text-grey-ten\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}}</p>\n                        <p class=\"mb-0 assessment-text-regular-11 assessment-text-grey-eight\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY_DESC']}}</p>\n                    </div>\n                    <div class=\"form-check form-switch\">\n                        <input type=\"checkbox\" class=\"form-check-input cursor-pointer\" name=\"isMandatory\"\n                            formControlName=\"isMandatory\">\n                    </div>\n                </div>\n\n                <div class=\"my-3 d-flex align-items-center justify-content-between gap-2\"\n                    *ngIf=\"showField('isFilterEnabled')\">\n                    <div>\n                        <p class=\"mb-0 assessment-text-medium-13 assessment-text-grey-ten\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.FILTER_ENABLED']}}</p>\n                        <p class=\"mb-0 assessment-text-regular-11 assessment-text-grey-eight\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.FILTER_ENABLED_DESC']}}</p>\n                    </div>\n                    <div class=\"form-check form-switch\">\n                        <input type=\"checkbox\" class=\"form-check-input cursor-pointer\" name=\"isFilterEnabled\"\n                            formControlName=\"isFilterEnabled\">\n                    </div>\n                </div>\n\n                <div class=\"my-3 col-12\"\n                    *ngIf=\"showField('isFilterEnabled') && questionsFormGroup.get('isFilterEnabled')?.value\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTION_NAME']}}</label>\n                    <input formControlName=\"questionSubText\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.QUESTION_NAME']\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                        [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('questionSubText')?.invalid && questionsFormGroup.get('questionSubText')?.touched}\">\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionSubText')?.invalid && questionsFormGroup.get('questionSubText')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                </div>\n\n                <div class=\"my-3 col-12\" *ngIf=\"!isChild && questionStack.length == 0 && (skillsList?.length ?? 0) > 0\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAP_SKILLS']}}</label>\n                    <mat-select formControlName=\"skillCodes\" multiple\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_SKILLS']\"\n                        panelClass=\"assessment-checkboxes\"\n                        class=\"col-12 assessment-mat-select assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <mat-option class=\"assessment-text-medium-13\" *ngFor=\"let skill of skillsList; trackBy: trackByCode\"\n                            [value]=\"skill?.code\">{{skill?.labels?.[0]?.text}}</mat-option>\n                    </mat-select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", 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}.form-container{max-height:calc(100dvh - 4rem)}.border-grey-ten-2{border:.12rem solid var(--assessment-grey-ten)}.input-focus{overflow:hidden;text-overflow:ellipsis}.input-focus:focus-visible{border-bottom:var(--assessment-input-focus-border)!important}.assessment-marks-input{width:4rem}header{z-index:1}.vertical-text{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);white-space:nowrap}@media (min-width: 768px){.hidden-label{visibility:hidden;line-height:0!important}}@media screen and (min-width: 768px){.border-md-0{border:0!important}}.primary-border{border:.064rem solid var(--assessment-primary-one)}.form-check-input:checked{background-color:var(--assessment-primary-one)!important;border-color:var(--assessment-primary-one)!important}.custom-margin{margin-top:1.3rem}.border-ADC9F6{border:.064rem solid var(--assessment-palette-ADC9F6)}\n"], components: [{ type: i5.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i8.TextEditorComponent, selector: "app-text-editor", inputs: ["height", "placeholder", "subject", "preText", "maxLength", "disabled", "showToolbar", "editorConfig"], outputs: ["inputChange"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.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.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+AssessmentBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AssessmentBuilderComponent, selector: "lib-app-assessment-builder", viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex vh-100 position-relative overflow-hidden\">\n    <div *ngIf=\"questionStack.length > 0 || isChild\"\n        class=\"p-3 px-2 col-auto assessment-bg-palette-C8DAF9 flex-column align-items-center justify-content-end d-md-flex d-none\">\n        <p class=\"m-0 assessment-text-semibold-18 vertical-text\">\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTION']}}\n        </p>\n    </div>\n    <div class=\"flex-grow-1 h-100 d-flex flex-column position-relative\">\n        <header\n            class=\"p-3 d-flex align-items-center justify-content-between position-sticky top-0 col-12 border-bottom\">\n            <p *ngIf=\"questionStack.length == 0\" class=\"mb-0 assessment-text-semibold-18 d-md-inline d-none\">\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.INPUT_FIELD_SETTINGS']}}\n            </p>\n            <button *ngIf=\"questionStack.length > 0\" (click)=\"goBack()\"\n                class=\"d-flex align-items-center gap-2 assessment-text-grey-ten border-0 outline-0 assessment-text-medium-14 bg-transparent\">\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.GO_BACK']\"\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/go-back.svg')\" />\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK']}}\n            </button>\n            <div class=\"d-flex align-items-center justify-content-md-end justify-content-between gap-3 flex-grow-1\">\n                <button (click)=\"onSubmit()\" [disabled]=\"isSubmitting\"\n                    class=\"assessment-btn-primary assessment-button-padding assessment-text-medium-13 assessment-zoom-animation assessment-button-padding position-relative\">\n                    <span [ngClass]=\"{'opacity-0': isSubmitting}\">\n                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.SAVE_QUESTION']}}\n                    </span>\n                    <mat-spinner *ngIf=\"isSubmitting\" [diameter]=\"20\"\n                        class=\"position-absolute top-50 start-50 translate-middle assessment-spinner-white\"></mat-spinner>\n                </button>\n                <img class=\"d-md-none\" *ngIf=\"questionStack.length == 0\" mat-dialog-close\n                    [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\"\n                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n            </div>\n        </header>\n        <div #scrollContainer class=\"col-12 py-4 px-md-4 px-3 flex-grow-1 overflow-y-auto form-container\"\n            [formGroup]=\"questionsFormGroup\">\n            <div class=\"pb-4 col-12\">\n                <label\n                    class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten col-12\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.TYPE']}}</label>\n                <mat-select formControlName=\"questionType\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_QUESTION_TYPE']\"\n                    class=\"assessment-mat-select col-12 assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                    <mat-option class=\"assessment-text-medium-13\" *ngFor=\"let type of questionTypes; trackBy: trackByCode\"\n                        [value]=\"type?.code\">\n                        {{type?.label}}\n                    </mat-option>\n                </mat-select>\n                <div\n                    *ngIf=\"questionsFormGroup.get('questionType')?.errors  && questionsFormGroup.get('questionType')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"pb-4 col-12\">\n                <label class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten\">Question</label>\n                <app-text-editor [preText]=\"questionsFormGroup?.get('questionText')?.value\"\n                    (inputChange)=\"questionsFormGroup?.get('questionText')?.patchValue($event)\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_QUESTION']\"\n                    class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\n                    [height]=\"'8rem'\">\n                </app-text-editor>\n                <div\n                    *ngIf=\"questionsFormGroup.get('questionText')?.errors  && questionsFormGroup.get('questionText')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                <div class=\"col-12 position-relative mt-3\" *ngIf=\"showField('questionMedia')\">\n                    <input formControlName=\"questionMedia\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_QUESTION_MEDIA']\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                        [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('questionMedia')?.invalid && questionsFormGroup.get('questionMedia')?.touched}\">\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionMedia')?.hasError('pattern') && questionsFormGroup.get('questionMedia')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">\n                        {{labelConfig['COMMONS_ASSESSMENT.ERROR.INVALID_URL']}}\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionMedia')?.hasError('required') && questionsFormGroup.get('questionMedia')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                </div>\n            </div>\n            <div class=\"row mx-0 col-12 pb-4\" *ngIf=\"showField('minCharacterCount') || showField('maxCharacterCount')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('minCharacterCount')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MIN_CHARACTER_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"minCharacterCount\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('minCharacterCount')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('minCharacterCount')?.invalid && questionsFormGroup.get('minCharacterCount')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTERS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minCharacterCount')?.hasError('required') && questionsFormGroup.get('minCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minCharacterCount')?.hasError('min') && questionsFormGroup.get('minCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maxCharacterCount')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_CHARACTER_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxCharacterCount\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxCharacterCount')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxCharacterCount')?.invalid && questionsFormGroup.get('maxCharacterCount')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHARACTERS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('required') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('min') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxCharacterCount')?.hasError('lessThanOrEqualMin') && questionsFormGroup.get('maxCharacterCount')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_LIMIT_GREATER']}}</div>\n                </div>\n            </div>\n            <div class=\"row mx-0 col-12 pb-4\" *ngIf=\"showField('maxFileSize') || showField('maxNoOfFiles')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('maxFileSize')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_FILE_SIZE']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxFileSize\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxFileSize')?.markAsTouched()\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxFileSize')?.invalid && questionsFormGroup.get('maxFileSize')?.touched}\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MB']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxFileSize')?.hasError('required') && questionsFormGroup.get('maxFileSize')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxFileSize')?.hasError('min') && questionsFormGroup.get('maxFileSize')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maxNoOfFiles')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_NO_OF_FILES']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maxNoOfFiles\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.NOT_SET']\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('maxNoOfFiles')?.markAsTouched()\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maxNoOfFiles')?.invalid && questionsFormGroup.get('maxNoOfFiles')?.touched}\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.FILES']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxNoOfFiles')?.hasError('required') && questionsFormGroup.get('maxNoOfFiles')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maxNoOfFiles')?.hasError('min') && questionsFormGroup.get('maxNoOfFiles')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO']}}</div>\n                </div>\n            </div>\n            <div class=\"pb-4 col-12\" *ngIf=\"showField('customRegex')\">\n                <label\n                    class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CUSTOM_REGEX']}}</label>\n                <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                    <input formControlName=\"customRegex\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_CUSTOM_REGEX']\"\n                        (blur)=\"questionsFormGroup.get('customRegex')?.markAsTouched()\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                </div>\n                <div\n                    *ngIf=\"questionsFormGroup.get('customRegex')?.errors  && questionsFormGroup.get('customRegex')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"pb-4 col-12\" *ngIf=\"showField('totalMarks') && !isChild && questionStack.length == 0\">\n                <label\n                    class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.TOTAL_MARKS']}}</label>\n                <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                    <input formControlName=\"totalMarks\" placeholder=\"0\" (input)=\"allowOnlyNumbers($event)\"\n                        (blur)=\"questionsFormGroup.get('totalMarks')?.markAsTouched()\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                    <span\n                        class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS']}}</span>\n                </div>\n                <div\n                    *ngIf=\"questionsFormGroup.get('totalMarks')?.errors  && questionsFormGroup.get('totalMarks')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n\n            <div class=\"row mx-0 col-12 pb-4\"\n                *ngIf=\"showField('minimumNumberOfOption') || showField('maximumNumberOfOption')\">\n                <div class=\"col-6 ps-0\" *ngIf=\"showField('minimumNumberOfOption')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MIN_OPTION_SELECT_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"minimumNumberOfOption\" placeholder=\"0\"\n                            (input)=\"allowOnlyNumbers($event)\"\n                            (blur)=\"questionsFormGroup.get('minimumNumberOfOption')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('minimumNumberOfOption')?.invalid && questionsFormGroup.get('minimumNumberOfOption')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minimumNumberOfOption')?.hasError('required') && questionsFormGroup.get('minimumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('minimumNumberOfOption')?.hasError('min') && questionsFormGroup.get('minimumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO'] || 'Limit cannot be 0'}}</div>\n                </div>\n                <div class=\"col-6 pe-0\" *ngIf=\"showField('maximumNumberOfOption')\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAX_OPTION_SELECT_LIMIT']}}</label>\n                    <div class=\"col-12 d-flex align-items-center gap-2 position-relative\">\n                        <input formControlName=\"maximumNumberOfOption\" [placeholder]=\"options.length || 0\"\n                            (input)=\"allowOnlyNumbers($event); checkMaxOptionsVal($event, questionsFormGroup.get('maximumNumberOfOption'))\"\n                            (blur)=\"questionsFormGroup.get('maximumNumberOfOption')?.markAsTouched()\"\n                            class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                            [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('maximumNumberOfOption')?.invalid && questionsFormGroup.get('maximumNumberOfOption')?.touched}\">\n                        <span\n                            class=\"assessment-text-regular-12 assessment-text-grey-seven position-absolute end-0 me-3\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS']}}</span>\n                    </div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('required') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('min') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.CANNOT_BE_ZERO'] || 'Limit cannot be 0'}}</div>\n                    <div\n                        *ngIf=\"questionsFormGroup.get('maximumNumberOfOption')?.hasError('lessThanOrEqualMin') && questionsFormGroup.get('maximumNumberOfOption')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.MAX_LIMIT_GREATER'] || 'Max limit should be greater than min limit'}}</div>\n                </div>\n            </div>\n\n            <div class=\"pb-4 col-12 mt-md-3\" *ngIf=\"showField('options')\">\n                <div formArrayName=\"options\">\n                    <ng-container *ngFor=\"let option of options.controls; let i = index; trackBy: trackByControl\">\n                        <div [formGroupName]=\"i\" *ngIf=\"option.get('isActive')?.value !== false\"\n                            class=\"py-md-0 py-3 border-bottom border-md-0 col-12 d-flex flex-wrap flex-md-nowrap align-items-md-start align-items-center justify-content-between gap-md-4 gap-3\">\n\n                            <div class=\"col-12 col-md flex-md-grow-1 d-flex flex-column justify-content-center mt-md-3\"\n                                [class.pt-md-3]=\"i == 0\">\n                                <div class=\"col-12 d-flex align-items-center justify-content-between gap-3\">\n                                    <div class=\"flex-grow-1 d-flex align-items-center gap-2\">\n                                        <div class=\"rounded-circle p-2 border-grey-ten-2 mt-1\"></div>\n                                        <input formControlName=\"optionLabel\"\n                                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_OPTION']\"\n                                            class=\"flex-grow-1 assessment-text-medium-13 border-0 outline-0 bg-transparent input-focus py-1\">\n                                    </div>\n                                    <img class=\"cursor-pointer d-md-none\"\n                                        [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\" (click)=\"removeOption(i)\"\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n                                </div>\n                                <div\n                                    *ngIf=\"option.get('optionLabel')?.invalid && option.get('optionLabel')?.touched\"\n                                    class=\"assessment-text-regular-12 mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                            </div>\n\n                            <div *ngIf=\"showField('options', 'showWeightage') && !isChild && questionStack.length == 0\"\n                                class=\"col-auto\">\n                                <p class=\"assessment-text-medium-12 assessment-text-grey-six mb-2 mb-md-3\"\n                                    [ngClass]=\"{'hidden-label': i > 0}\">\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.WEIGHTAGE']}}\n                                </p>\n                                <input type=\"number\" (input)=\"checkMaxVal($event, option.get('weight'))\"\n                                    formControlName=\"weight\" (wheel)=\"$event.preventDefault()\"\n                                    class=\"p-2 py-md-1 assessment-border-radius-two assessment-input-border-one outline-0 assessment-text-regular-12 assessment-marks-input assessment-bg-grey-one\"\n                                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.WEIGHTAGE']\">\n                            </div>\n\n                            <div *ngIf=\"showField('options', 'showRemarks') && !isChild && questionStack.length == 0\" class=\"col-auto\">\n                                <p class=\"assessment-text-medium-12 assessment-text-grey-six mb-2 mb-md-3 pb-md-1\"\n                                    [ngClass]=\"{'hidden-label': i > 0}\">\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.REMARKS']}}\n                                </p>\n                                <div class=\"form-check form-switch\">\n                                    <input type=\"checkbox\" class=\"form-check-input cursor-pointer\"\n                                        name=\"remarksRequired\" formControlName=\"remarksRequired\">\n                                </div>\n                            </div>\n\n                            <div class=\"d-none d-md-block pt-3\" [class.custom-margin]=\"i == 0\">\n                                <img class=\"cursor-pointer\" [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\"\n                                    (click)=\"removeOption(i)\"\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\" />\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n\n                <button type=\"button\" (click)=\"addOption()\"\n                    class=\"assessment-border-radius-two d-flex align-items-center gap-2 bg-transparent assessment-text-primary-one assessment-text-medium-12 border-0 assessment-zoom-animation mt-4\">\n                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_OPTION']}}\n                </button>\n                <div\n                    *ngIf=\"questionsFormGroup.get('options')?.errors  && questionsFormGroup.get('options')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"py-4 col-12 border-top\"\n                *ngIf=\"showField('childQuestions') && questionStack.length == 0 && !isChild\">\n                <div class=\"d-flex align-items-center justify-content-between mb-2\">\n                    <label\n                        class=\"assessment-text-medium-16 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS']}}</label>\n                    <img matTooltip=\"{{labelConfig['COMMONS_ASSESSMENT.LABEL.CHILD_QUESTIONS_INFO']}}\"\n                        matTooltipPosition=\"above\" matTooltipClass=\"assessment-tooltip\"\n                        [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.INFO']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/info.svg')\" />\n                </div>\n\n                <div *ngFor=\"let group of childQuestionGroups; let groupIndex = index; trackBy: trackByGroupId\"\n                    class=\"col-12 p-3 my-3 assessment-bg-grey-one assessment-border-radius-three assessment-input-border-one\">\n                    <div class=\"col-12 mb-3\" *ngIf=\"options.length > 0\">\n                        <label\n                            class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ASSIGNED_OPTION']}}</label>\n                        <mat-select [value]=\"group.optionId\"\n                            (selectionChange)=\"onGroupOptionChange(group.id, $event.value)\"\n                            [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_OPTION_TO_LINK']\"\n                            class=\"col-12 assessment-mat-select assessment-border-radius-two assessment-bg-white outline-0 assessment-input-border-one assessment-text-medium-13\">\n                            <mat-option class=\"assessment-text-medium-13\" [value]=\"null\">\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NONE']}}\n                            </mat-option>\n                            <ng-container *ngFor=\"let opt of options.controls; let opIndex = index; trackBy: trackByControl\">\n                                <mat-option *ngIf=\"opt.get('isActive')?.value !== false\"\n                                    class=\"assessment-text-medium-13\" [value]=\"getOptionId(opt)\">\n                                    {{ opt.get('optionLabel')?.value || ('Option ' + (opIndex + 1)) }}\n                                </mat-option>\n                            </ng-container>\n                        </mat-select>\n                    </div>\n\n                    <ng-container *ngFor=\"let questionId of group.questionIds; let i = index; trackBy: trackByQuestionId\">\n                        <ng-container *ngIf=\"getChildQuestionById(questionId) as child\">\n                            <div class=\"d-flex align-items-center justify-content-between mb-1 mt-3\">\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <p class=\"mb-0 assessment-text-medium-14\">\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTION']}} {{i + 1}}</p>\n                                </div>\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.DELETE']\"\n                                        class=\"action-icon cursor-pointer\"\n                                        (click)=\"deleteChildQuestionById(child.id, $event)\"\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/delete.svg')\" />\n                                </div>\n                            </div>\n                            <div [innerHTML]=\"child?.questionText?.[0]?.text\"\n                                (click)=\"addEditChildQuestion(child, getChildQuestionIndex(child.id))\"\n                                class=\"col-12 assessment-button-padding assessment-border-radius-two assessment-bg-white assessment-input-border-one assessment-text-medium-12 cursor-pointer\">\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <button (click)=\"addEditChildQuestion(undefined, undefined, group.id)\"\n                        class=\"assessment-zoom-animation border-0 d-flex align-items-center justify-content-center gap-2 assessment-text-primary-one bg-transparent assessment-text-semibold-12 outline-0 mt-3\">\n                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_MORE']}}\n                    </button>\n                </div>\n\n                <button (click)=\"addEditChildQuestion()\"\n                    class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-3 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 col-12 assessment-border-radius-two mt-3 border-ADC9F6\">\n                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\"\n                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_CHILD_QUESTION']}}\n                </button>\n            </div>\n            <div class=\"py-4 col-12 border-top\" *ngIf=\"showField('hintText')\">\n                <label\n                    class=\"mb-2 assessment-text-medium-16 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ADD_HINT']}}</label>\n                <app-text-editor [preText]=\"questionsFormGroup?.get('hintText')?.value\"\n                    (inputChange)=\"questionsFormGroup?.get('hintText')?.patchValue($event)\"\n                    [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.ENTER_HINT']\"\n                    class=\"assessment-custom-angular-editor-white assessment-text-regular-13 assessment-text-grey-ten\"\n                    [height]=\"'8rem'\">\n                </app-text-editor>\n                <div\n                    *ngIf=\"questionsFormGroup.get('hintText')?.errors  && questionsFormGroup.get('hintText')?.touched\"\n                    class=\"assessment-text-regular-12 assessment-text-danger\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n            </div>\n            <div class=\"py-4 col-12 border-top\">\n                <label class=\"mb-2 assessment-text-semibold-18 assessment-text-grey-ten col-12\">\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.FIELDS_SETTINGS']}}</label>\n                <div class=\"my-3 d-flex align-items-center justify-content-between gap-2\">\n                    <div>\n                        <p class=\"mb-0 assessment-text-medium-13 assessment-text-grey-ten\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY']}}</p>\n                        <p class=\"mb-0 assessment-text-regular-11 assessment-text-grey-eight\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY_DESC']}}</p>\n                    </div>\n                    <div class=\"form-check form-switch\">\n                        <input type=\"checkbox\" class=\"form-check-input cursor-pointer\" name=\"isMandatory\"\n                            formControlName=\"isMandatory\">\n                    </div>\n                </div>\n\n                <div class=\"my-3 d-flex align-items-center justify-content-between gap-2\"\n                    *ngIf=\"showField('isFilterEnabled')\">\n                    <div>\n                        <p class=\"mb-0 assessment-text-medium-13 assessment-text-grey-ten\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.FILTER_ENABLED']}}</p>\n                        <p class=\"mb-0 assessment-text-regular-11 assessment-text-grey-eight\">\n                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.FILTER_ENABLED_DESC']}}</p>\n                    </div>\n                    <div class=\"form-check form-switch\">\n                        <input type=\"checkbox\" class=\"form-check-input cursor-pointer\" name=\"isFilterEnabled\"\n                            formControlName=\"isFilterEnabled\">\n                    </div>\n                </div>\n\n                <div class=\"my-3 col-12\"\n                    *ngIf=\"showField('isFilterEnabled') && questionsFormGroup.get('isFilterEnabled')?.value\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTION_NAME']}}</label>\n                    <input formControlName=\"questionSubText\"\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.QUESTION_NAME']\"\n                        class=\"col-12 assessment-input-padding assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\"\n                        [ngClass]=\"{'assessment-input-border-invalid': questionsFormGroup.get('questionSubText')?.invalid && questionsFormGroup.get('questionSubText')?.touched}\">\n                    <div\n                        *ngIf=\"questionsFormGroup.get('questionSubText')?.invalid && questionsFormGroup.get('questionSubText')?.touched\"\n                        class=\"assessment-text-regular-12 assessment-text-danger mt-1\">{{labelConfig['COMMONS_ASSESSMENT.ERROR.REQUIRED']}}</div>\n                </div>\n\n                <div class=\"my-3 col-12\" *ngIf=\"!isChild && questionStack.length == 0 && (skillsList?.length ?? 0) > 0\">\n                    <label\n                        class=\"mb-1 assessment-text-medium-13 assessment-text-grey-ten\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.MAP_SKILLS']}}</label>\n                    <mat-select formControlName=\"skillCodes\" multiple\n                        [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.PLACEHOLDER.SELECT_SKILLS']\"\n                        panelClass=\"assessment-checkboxes\"\n                        class=\"col-12 assessment-mat-select assessment-border-radius-two outline-0 assessment-input-border-one assessment-text-medium-13 assessment-bg-grey-one\">\n                        <mat-option class=\"assessment-text-medium-13\" *ngFor=\"let skill of skillsList; trackBy: trackByCode\"\n                            [value]=\"skill?.code\">{{skill?.labels?.[0]?.text}}</mat-option>\n                    </mat-select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", 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}.form-container{max-height:calc(100dvh - 4rem)}.border-grey-ten-2{border:.12rem solid var(--assessment-grey-ten)}.input-focus{overflow:hidden;text-overflow:ellipsis}.input-focus:focus-visible{border-bottom:var(--assessment-input-focus-border)!important}.assessment-marks-input{width:4rem}header{z-index:1}.vertical-text{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);white-space:nowrap}@media (min-width: 768px){.hidden-label{visibility:hidden;line-height:0!important}}@media screen and (min-width: 768px){.border-md-0{border:0!important}}.primary-border{border:.064rem solid var(--assessment-primary-one)}.form-check-input:checked{background-color:var(--assessment-primary-one)!important;border-color:var(--assessment-primary-one)!important}.custom-margin{margin-top:1.3rem}.border-ADC9F6{border:.064rem solid var(--assessment-palette-ADC9F6)}\n"], components: [{ type: i5.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i8.TextEditorComponent, selector: "app-text-editor", inputs: ["height", "placeholder", "subject", "preText", "maxLength", "disabled", "showToolbar", "editorConfig"], outputs: ["inputChange"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.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.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AssessmentBuilderComponent, decorators: [{
             type: Component,
             args: [{