commons-assessment 12.1.2-dev.0 → 12.1.2-dev.2

package/README.md

@@ -24,6 +24,7 @@ Import the following modules in your application:
 - `CommonsAssessmentModule`
 - `AssessmentMakerModule` (If creating assessments)
 - `AssessmentTakerModule` (If rendering assessments)
+- `QuestionBankModule` (If managing standalone questions or using Question Bank)
 
 **Proctoring (optional):** the library does **not** import `@proctorlink/sdk` directly, so apps that don't use proctoring need not install it and build cleanly. If you use proctoring, install it (`npm install @proctorlink/sdk`) and pass a loader to the taker via `[proctorLinkLoader]="() => import('@proctorlink/sdk')"` — the SDK is then fetched on demand only when a proctored session starts, and the module reference stays in your app's bundle. Also allow the proctoring enclave in your app's `Content-Security-Policy`: `frame-src https://app-dev.proctorlink.com;`.
 
@@ -34,13 +35,14 @@ Import the following modules in your application:
 Import the `CommonsAssessmentModule.forRoot()` in your root `app.module.ts` once to register the singleton service providers. Other modules can then import the specific feature modules as needed:
 
 ```typescript
-import { CommonsAssessmentModule, AssessmentMakerModule, AssessmentTakerModule } from 'commons-assessment';
+import { CommonsAssessmentModule, AssessmentMakerModule, AssessmentTakerModule, QuestionBankModule } from 'commons-assessment';
 
 @NgModule({
   imports: [
     CommonsAssessmentModule.forRoot(), // Import once in root app.module
     AssessmentMakerModule,
-    AssessmentTakerModule
+    AssessmentTakerModule,
+    QuestionBankModule
   ]
 })
 ```
@@ -174,6 +176,9 @@ export class Component {
 | `[checkForResponses]` | `@Input` | `boolean` | If true, show a warning on deletion of sections and questions if any responses are linked to them. Default is false. |
 | `[showProctoringToggle]` | `@Input` | `boolean` | (Optional) If true, shows a toggle to enable/disable proctoring. Default is false. Works only when partial response submission is allowed. |
 | `[showTimeInput]` | `@Input` | `boolean` | (Optional) If true, shows an optional duration (minutes) input. The value is saved (in seconds) to the assessment instance's `duration` — bundled into the patch API when the instance exists, or set on the created instance otherwise. Leave it empty for an untimed assessment. Default is false. |
+| `[enableSkillsToQuestionMapping]` | `@Input` | `boolean` | (Optional) Enables ability to map skills to questions. Default is false. |
+| `[enableImportFromQuestionBank]` | `@Input` | `boolean` | (Optional) Enables the Question Bank import feature via the unified + Add button menu. Default is false. |
+| `[questionBankConfig]` | `@Input` | `QuestionBankConfig` | (Optional) Contextual configuration object `{ domain: string, tenant: number }` for the Question Bank picker. |
 | `(assessmentIdChange)` | `@Output` | `EventEmitter<number>` | Emits the new `assessmentId` when an assessment is successfully created. |
 | `(assessmentInstanceIdChange)` | `@Output` | `EventEmitter<number>` | Emits the new instance ID integer when an assessment is published. |
 | `(snackbarMessage)` | `@Output` | `EventEmitter<{ message: string, type: 'success' \| 'error' \| 'info' }>` | Emits message status updates representing errors and workflow successes from the service. |
@@ -241,6 +246,8 @@ For a more comprehensive guide on features, detailed input/output variables, int
 
 - **Assessment Maker Component**: [assessment-maker.md](../../documentation/assessment-maker.md)
 - **Assessment Taker Component**: [assessment-taker.md](../../documentation/assessment-taker.md)
+- **Question Bank & Picker Component**: [question-bank.md](../../documentation/question-bank.md)
+- **MFE Integration Guide**: [mfe-integration-guide.md](../../documentation/mfe-integration-guide.md)
 - **Theming & Styles Guide**: [theme.md](../../documentation/theme.md)
 
 ## Development Commands

package/bundles/commons-assessment.umd.js

@@ -5182,7 +5182,7 @@
           this.allQuestions = [];
           this.filteredQuestions = [];
           this.currentPage = 0;
-          this.pageSize = 20;
+          this.pageSize = 100;
           this.totalElements = 0;
           this.hasNext = false;
           this.isLoading = false;
@@ -5450,7 +5450,7 @@
       return QuestionBankPickerComponent;
   }());
   QuestionBankPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionBankPickerComponent, deps: [{ token: AssessmentMakerService }, { token: i1__namespace.MatDialogRef }, { token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  QuestionBankPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBankPickerComponent, selector: "lib-question-bank-picker", ngImport: i0__namespace, template: "<div class=\"d-flex flex-column h-100 question-bank-picker\">\r\n    <!-- Header: Back Arrow + Title + Subtitle -->\r\n    <div class=\"d-flex align-items-center justify-content-between px-4 py-3 border-bottom picker-header\">\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n            <button (click)=\"close()\" class=\"btn-icon-back\" [attr.aria-label]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK'] || 'Go Back'\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.GO_BACK']\"\r\n                     (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/go-back.svg')\"\r\n                     class=\"action-icon\" />\r\n            </button>\r\n            <div>\r\n                <h4 class=\"mb-0 fw-bold picker-title\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                </h4>\r\n                <p class=\"mb-0 picker-subtitle\">\r\n                    <span class=\"text-secondary\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.SELECTED_SECTION'] || 'Selected Section'}}:</span>\r\n                    <span class=\"text-primary fw-semibold ms-1\" *ngIf=\"targetSectionName\">{{targetSectionName}}</span>\r\n                    <span class=\"text-secondary ms-1\" *ngIf=\"!targetSectionName\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_QUESTIONS_INTO_NEW_SECTION'] || 'Import questions into a new section'}}</span>\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Search & Filter Controls Deck -->\r\n    <div class=\"picker-search-deck px-4 pt-3 pb-2 border-bottom\">\r\n        <div class=\"d-flex gap-3 align-items-center mb-2\">\r\n            <!-- Search Box -->\r\n            <div class=\"search-input-wrapper flex-grow-1 position-relative\">\r\n                <input type=\"text\"\r\n                       class=\"form-control search-input\"\r\n                       [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.SEARCH_QUESTION'] || 'Search Question'\"\r\n                       [ngModel]=\"searchTerm\"\r\n                       (ngModelChange)=\"onSearchChange($event)\">\r\n                <button *ngIf=\"searchTerm\" (click)=\"clearSearch()\" class=\"search-clear-btn\" aria-label=\"Clear Search\">\r\n                    \u2715\r\n                </button>\r\n            </div>\r\n\r\n            <!-- Type Filter Dropdown using arrow-down-black.svg -->\r\n            <div class=\"type-filter-wrapper position-relative\">\r\n                <select class=\"form-select filter-select cursor-pointer\"\r\n                        [ngModel]=\"selectedTypeCode\"\r\n                        (ngModelChange)=\"onTypeFilterChange($event)\">\r\n                    <option value=\"\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ALL_TYPES'] || 'All Types'}}</option>\r\n                    <option *ngFor=\"let type of questionTypes\" [value]=\"type.code\">\r\n                        {{type.label || type.code}}\r\n                    </option>\r\n                </select>\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_DOWN_BLACK']\"\r\n                     (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/arrow-down-black.svg')\"\r\n                     class=\"select-arrow-icon pointer-events-none\" />\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Section Header: Question Count & Select All -->\r\n        <div class=\"d-flex align-items-center justify-content-between pt-2 pb-1\">\r\n            <h5 class=\"mb-0 fw-bold questions-heading\">\r\n                {{totalElements || filteredQuestions.length}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS'] || 'Questions'}}\r\n            </h5>\r\n            <div class=\"form-check d-flex align-items-center gap-2 mb-0\">\r\n                <input class=\"form-check-input select-all-checkbox cursor-pointer\"\r\n                       type=\"checkbox\"\r\n                       id=\"selectAllQuestions\"\r\n                       [checked]=\"isAllVisibleSelected\"\r\n                       [indeterminate]=\"isSomeVisibleSelected\"\r\n                       [disabled]=\"eligibleVisibleQuestions.length === 0\"\r\n                       (change)=\"toggleSelectAllVisible()\">\r\n                <label class=\"form-check-label select-all-label cursor-pointer\" for=\"selectAllQuestions\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.SELECT_ALL_QUESTIONS'] || 'Select All Questions'}}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Questions Viewport Box -->\r\n    <div class=\"flex-grow-1 overflow-auto p-3\" (scroll)=\"onScroll($event)\">\r\n        <!-- Skeleton Loading State -->\r\n        <div *ngIf=\"isInitialLoading\" class=\"d-flex flex-column gap-3 py-1\">\r\n            <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"skeleton-card\">\r\n                <div class=\"skeleton-line line-full\"></div>\r\n                <div class=\"skeleton-meta\"></div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Question Cards -->\r\n        <div *ngIf=\"!isInitialLoading && filteredQuestions.length > 0\" class=\"d-flex flex-column gap-3\">\r\n            <div *ngFor=\"let question of filteredQuestions; trackBy: trackByQuestionId\"\r\n                 class=\"question-card\"\r\n                 [class.disabled-card]=\"isAlreadyInAssessment(question.id)\"\r\n                 [class.selected-card]=\"isSelected(question)\"\r\n                 (click)=\"toggleSelection(question)\">\r\n\r\n                <!-- Main Card Header: Checkbox + Question Text + #ID -->\r\n                <div class=\"d-flex align-items-start gap-3\">\r\n                    <div class=\"pt-1 flex-shrink-0\">\r\n                        <input class=\"form-check-input card-checkbox cursor-pointer\"\r\n                               type=\"checkbox\"\r\n                               [checked]=\"isSelected(question)\"\r\n                               [disabled]=\"isAlreadyInAssessment(question.id)\"\r\n                               (click)=\"$event.stopPropagation()\"\r\n                               (change)=\"toggleSelection(question)\">\r\n                    </div>\r\n\r\n                    <div class=\"flex-grow-1 min-w-0\">\r\n                        <div class=\"d-flex align-items-start justify-content-between gap-3 mb-2\">\r\n                            <div class=\"question-body-text fw-medium text-break\"\r\n                                 [innerHTML]=\"question?.questionText?.[0]?.text\"></div>\r\n                            <span class=\"question-id-badge flex-shrink-0\" *ngIf=\"question?.id\">#{{question.id}}</span>\r\n                        </div>\r\n\r\n                        <!-- Badges Row: Type Pill, Marks Pill, Mandatory Pill, and Added Pill -->\r\n                        <div class=\"d-flex align-items-center justify-content-between flex-wrap gap-2 mt-1\">\r\n                            <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                                <!-- Question Type Pill (Orange/Amber) -->\r\n                                <span class=\"badge-pill badge-type-pill p-2 rounded\" *ngIf=\"question?.questionType\">\r\n                                    {{getQuestionTypeLabel(question)}}\r\n                                </span>\r\n\r\n                                <!-- Marks Pill (Blue/Indigo) -->\r\n                                <span class=\"badge-pill badge-marks-pill p-2 rounded\" *ngIf=\"question?.weight !== undefined && question?.weight !== null\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS'] || 'Marks'}} {{question.weight}}\r\n                                </span>\r\n\r\n                                <!-- Mandatory Pill (Green) -->\r\n                                <span class=\"badge-pill badge-mandatory-pill p-2 rounded\" *ngIf=\"question?.isMandatory\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY'] || 'Mandatory'}}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <!-- Right-aligned Already Added Pill -->\r\n                            <span *ngIf=\"isAlreadyInAssessment(question.id)\" class=\"badge-pill badge-added-pill p-2\">\r\n                                <span class=\"dot-indicator\"></span>\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADDED'] || 'Added'}}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <!-- Options Accordion (if question has defaultOptionsList) -->\r\n                        <div *ngIf=\"hasOptions(question)\" class=\"options-accordion-section mt-3 pt-2\">\r\n                            <!-- Toggle Button Row with Arrow & Divider Line -->\r\n                            <div class=\"d-flex align-items-center gap-2 cursor-pointer options-toggle-row\"\r\n                                 (click)=\"toggleExpandOptions(question.id, $event)\">\r\n                                <span class=\"options-count-text text-primary fw-semibold\">\r\n                                    {{question.defaultOptionsList?.length || 0}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS'] || 'Options'}}\r\n                                </span>\r\n                                <img [src]=\"isOptionsExpanded(question.id) ? (imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_UP_BLUE'] || 'assets/commons-assessment/images/arrow-up-blue.svg') : (imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_DOWN_BLUE'] || 'assets/commons-assessment/images/arrow-down-blue.svg')\"\r\n                                     (error)=\"imageErrorHandler($event, isOptionsExpanded(question.id) ? 'assets/commons-assessment/images/arrow-up-blue.svg' : 'assets/commons-assessment/images/arrow-down-blue.svg')\"\r\n                                     class=\"options-arrow-icon\" />\r\n                                <div class=\"options-divider-line flex-grow-1\"></div>\r\n                                <span class=\"text-secondary text-12 options-hint-text\">\r\n                                    \u2022 {{labelConfig['COMMONS_ASSESSMENT.LABEL.CLICK_TO_VIEW'] || 'Click to view'}}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <!-- Expanded Options List (Radio options) -->\r\n                            <div *ngIf=\"isOptionsExpanded(question.id)\"\r\n                                 class=\"options-list-container d-flex flex-column gap-2 mt-3 ps-1\"\r\n                                 (click)=\"$event.stopPropagation()\">\r\n                                <div *ngFor=\"let opt of question.defaultOptionsList\"\r\n                                     class=\"d-flex align-items-center gap-2 option-item-row\">\r\n                                    <span class=\"option-radio-circle\"></span>\r\n                                    <span class=\"option-text text-break\">\r\n                                        {{opt.options?.optionName?.[0]?.text || opt.options?.optionCode || 'Option'}}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Empty State: No matching filter results -->\r\n        <div *ngIf=\"!isInitialLoading && filteredQuestions.length === 0 && allQuestions.length > 0\"\r\n             class=\"empty-state-box py-5 text-center\">\r\n            <p class=\"empty-state-title fw-semibold text-15 mb-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_MATCHING_QUESTIONS'] || 'No matching questions found'}}\r\n            </p>\r\n            <p class=\"empty-state-desc text-secondary text-13 mb-3\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_MATCHING_QUESTIONS_DESC'] || 'Try adjusting your search terms or clearing selected question type filters.'}}\r\n            </p>\r\n            <button (click)=\"clearSearch(); selectedTypeCode = ''; applyFilters();\"\r\n                    class=\"btn btn-outline-primary btn-sm px-3\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CLEAR_FILTERS'] || 'Clear Filters'}}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Empty State: Question bank is empty -->\r\n        <div *ngIf=\"!isInitialLoading && allQuestions.length === 0\"\r\n             class=\"empty-state-box py-5 text-center\">\r\n            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.NO_QUESTIONS']\" class=\"empty-state-img mb-3\"\r\n                 (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/no-questions.svg')\" />\r\n            <p class=\"empty-state-title fw-semibold text-15 mb-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_IN_BANK'] || 'No Questions in Bank!'}}\r\n            </p>\r\n            <p class=\"empty-state-desc text-secondary text-13 mb-0\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_IN_BANK_DESC'] || 'Create standalone questions in the Question Bank to reuse them here.'}}\r\n            </p>\r\n        </div>\r\n\r\n        <!-- Infinite Scroll Bottom Loader -->\r\n        <div *ngIf=\"isLoading && !isInitialLoading\" class=\"py-3 d-flex align-items-center justify-content-center gap-2\">\r\n            <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n            <span class=\"text-secondary text-13\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.LOADING_MORE_QUESTIONS'] || 'Loading more questions...'}}\r\n            </span>\r\n        </div>\r\n\r\n        <!-- End of list reached -->\r\n        <div *ngIf=\"!hasNext && allQuestions.length > 0 && !isLoading\" class=\"text-center py-3 text-secondary text-12\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ALL_QUESTIONS_LOADED'] || 'All questions loaded'}} ({{totalElements}})\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Sticky Footer -->\r\n    <div class=\"px-4 py-3 border-top picker-footer d-flex align-items-center justify-content-between bg-white\">\r\n        <div class=\"footer-summary\">\r\n            <span class=\"text-secondary text-13\" *ngIf=\"selectedCount === 0\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_SELECTED'] || 'No questions selected'}}\r\n            </span>\r\n            <span class=\"text-secondary text-13\" *ngIf=\"selectedCount > 0\">\r\n                <strong class=\"text-primary\">{{selectedCount}}</strong> {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS_SELECTED'] || 'questions selected'}}\r\n                &middot; <strong class=\"text-dark\">{{totalSelectedMarks}}</strong> {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS'] || 'Marks'}}\r\n            </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"close()\" class=\"btn btn-outline-secondary px-4 py-2 footer-btn\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CANCEL'] || 'Cancel'}}\r\n            </button>\r\n            <button (click)=\"importSelected()\"\r\n                    [disabled]=\"selectedCount === 0\"\r\n                    class=\"btn btn-primary px-4 py-2 footer-btn footer-btn-import\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_COUNT'] || 'Import'}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".question-bank-picker{background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #202124);font-family:var(--assessment-font-family, inherit)}.question-bank-picker .picker-header{background-color:var(--assessment-bg-white, #ffffff);border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-header .btn-icon-back{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:none;background-color:transparent;cursor:pointer;transition:background-color .15s ease}.question-bank-picker .picker-header .btn-icon-back:hover{background-color:var(--assessment-palette-EDF3FD, #EDF3FD)}.question-bank-picker .picker-header .btn-icon-back .action-icon{width:1.125rem;height:1.125rem}.question-bank-picker .picker-header .picker-title{font-size:1.25rem;font-weight:700;color:var(--assessment-text-grey-ten, #1e293b);line-height:1.25}.question-bank-picker .picker-header .picker-subtitle{font-size:.8125rem;margin-top:2px}.question-bank-picker .picker-search-deck{background-color:var(--assessment-bg-white, #ffffff);border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-search-deck .search-input-wrapper{position:relative}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input{height:2.6rem;padding-right:2rem;padding-left:.875rem;font-size:.875rem;border-radius:var(--assessment-border-radius-two, .375rem);border:1px solid var(--assessment-grey-four, #e2e8f0);background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #202124)}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input::placeholder{color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input:focus{border-color:var(--assessment-primary-one, #467DD6);box-shadow:0 0 0 2px #467dd626}.question-bank-picker .picker-search-deck .search-input-wrapper .search-clear-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--assessment-text-grey-seven, #94a3b8);font-size:.75rem;cursor:pointer;padding:2px 4px;border-radius:4px}.question-bank-picker .picker-search-deck .search-input-wrapper .search-clear-btn:hover{color:var(--assessment-text-grey-ten, #202124);background-color:var(--assessment-palette-EDF3FD, #EDF3FD)}.question-bank-picker .picker-search-deck .type-filter-wrapper{min-width:11rem;max-width:14rem}.question-bank-picker .picker-search-deck .type-filter-wrapper .filter-select{height:2.6rem;padding-right:2rem;font-size:.875rem;font-weight:500;border-radius:var(--assessment-border-radius-two, .375rem);border:1px solid var(--assessment-grey-four, #e2e8f0);background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #334155);appearance:none;-webkit-appearance:none;-moz-appearance:none}.question-bank-picker .picker-search-deck .type-filter-wrapper .filter-select:focus{border-color:var(--assessment-primary-one, #467DD6);box-shadow:0 0 0 2px #467dd626}.question-bank-picker .picker-search-deck .type-filter-wrapper .select-arrow-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:.875rem;height:.875rem}.question-bank-picker .picker-search-deck .questions-heading{font-size:1.125rem;color:var(--assessment-text-grey-ten, #1e293b)}.question-bank-picker .picker-search-deck .select-all-label{font-size:.875rem;font-weight:600;color:var(--assessment-text-grey-nine, #334155);-webkit-user-select:none;user-select:none}.question-bank-picker .form-check-input{width:1.2rem;height:1.2rem;border-radius:4px;border:1.5px solid var(--assessment-grey-five, #cbd5e1);cursor:pointer}.question-bank-picker .form-check-input:checked{background-color:var(--assessment-primary-one, #467DD6);border-color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .form-check-input:focus{box-shadow:0 0 0 2px #467dd633}.question-bank-picker .form-check-input:disabled{cursor:not-allowed;opacity:.5}.question-bank-picker .question-card{border:1px solid var(--assessment-grey-four, #e2e8f0);border-radius:var(--assessment-border-radius-two, .5rem);background-color:var(--assessment-bg-grey-one, #f8f9fa);padding:1rem 1.125rem;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.question-bank-picker .question-card:hover:not(.disabled-card){border-color:var(--assessment-palette-ADC9F6, #93c5fd);box-shadow:0 2px 6px #467dd60f}.question-bank-picker .question-card.selected-card{border-color:var(--assessment-primary-one, #467DD6);background-color:var(--assessment-bg-white, #ffffff)}.question-bank-picker .question-card.disabled-card{background-color:var(--assessment-bg-grey-one, #f8fafc);opacity:.75;cursor:not-allowed!important}.question-bank-picker .question-card .question-body-text{font-size:.9375rem;color:var(--assessment-text-grey-ten, #1e293b);line-height:1.45;word-break:break-word}.question-bank-picker .question-card .question-body-text ::ng-deep p,.question-bank-picker .question-card .question-body-text ::ng-deep div,.question-bank-picker .question-card .question-body-text p,.question-bank-picker .question-card .question-body-text div{margin:0!important;padding:0!important}.question-bank-picker .question-card .question-id-badge{font-size:.8125rem;font-weight:500;color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .badge-pill{display:inline-flex;align-items:center;grid-gap:4px;gap:4px;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;line-height:1.2}.question-bank-picker .badge-type-pill{background-color:#fffbeb;color:#b45309;border:1px solid #fde68a}.question-bank-picker .badge-marks-pill{background-color:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.question-bank-picker .badge-mandatory-pill{background-color:#ecfdf5;color:#059669;border:1px solid #a7f3d0}.question-bank-picker .badge-added-pill{background-color:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;font-weight:600}.question-bank-picker .badge-added-pill .dot-indicator{width:6px;height:6px;border-radius:50%;background-color:#16a34a;display:inline-block}.question-bank-picker .options-accordion-section .options-toggle-row{-webkit-user-select:none;user-select:none}.question-bank-picker .options-accordion-section .options-toggle-row .options-count-text{font-size:.8125rem;font-weight:600;color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .options-accordion-section .options-toggle-row .options-arrow-icon{width:.875rem;height:.875rem}.question-bank-picker .options-accordion-section .options-toggle-row .options-divider-line{height:1px;background-color:var(--assessment-grey-four, #e2e8f0)}.question-bank-picker .options-accordion-section .options-toggle-row .options-hint-text{font-size:.75rem;color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .options-accordion-section .options-list-container .option-item-row{font-size:.875rem;color:var(--assessment-text-grey-nine, #334155)}.question-bank-picker .options-accordion-section .options-list-container .option-item-row .option-radio-circle{width:.875rem;height:.875rem;border-radius:50%;border:1.5px solid var(--assessment-text-grey-nine, #334155);flex-shrink:0}.question-bank-picker .options-accordion-section .options-list-container .option-item-row .option-text{font-size:.875rem;color:var(--assessment-text-grey-nine, #334155)}.question-bank-picker .skeleton-card{border:1px solid var(--assessment-grey-four, #e2e8f0);border-radius:var(--assessment-border-radius-two, .5rem);background:var(--assessment-bg-white, #ffffff);padding:1rem 1.125rem}.question-bank-picker .skeleton-card .skeleton-line{height:14px;border-radius:4px;margin-bottom:12px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.question-bank-picker .skeleton-card .skeleton-line.line-full{width:75%}.question-bank-picker .skeleton-card .skeleton-meta{height:18px;width:160px;border-radius:9999px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.question-bank-picker .empty-state-box .empty-state-img{max-width:5.5rem}.question-bank-picker .empty-state-box .empty-state-title{color:var(--assessment-text-grey-ten, #1e293b)}.question-bank-picker .empty-state-box .empty-state-desc{max-width:22rem;margin:0 auto}.question-bank-picker .picker-footer{border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-footer .footer-btn{font-size:.875rem;font-weight:600;border-radius:var(--assessment-border-radius-two, .375rem)}.question-bank-picker .picker-footer .footer-btn-import{background-color:var(--assessment-primary-one, #467DD6);border-color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .picker-footer .footer-btn-import:hover:not(:disabled){background-color:var(--assessment-primary-four, #295eb7);border-color:var(--assessment-primary-four, #295eb7)}.question-bank-picker .pointer-events-none{pointer-events:none}.question-bank-picker .min-w-0{min-width:0}.question-bank-picker .text-12{font-size:.75rem}.question-bank-picker .text-13{font-size:.8125rem}.question-bank-picker .text-15{font-size:.9375rem}\n"], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  QuestionBankPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QuestionBankPickerComponent, selector: "lib-question-bank-picker", ngImport: i0__namespace, template: "<div class=\"d-flex flex-column h-100 question-bank-picker\">\r\n    <!-- Header: Back Arrow + Title + Subtitle -->\r\n    <div class=\"d-flex align-items-center justify-content-between px-4 py-3 border-bottom picker-header\">\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n            <button (click)=\"close()\" class=\"btn-icon-back\" [attr.aria-label]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.GO_BACK'] || 'Go Back'\">\r\n                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.GO_BACK']\"\r\n                     (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/go-back.svg')\"\r\n                     class=\"action-icon\" />\r\n            </button>\r\n            <div>\r\n                <h4 class=\"mb-0 fw-bold picker-title\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                </h4>\r\n                <p class=\"mb-0 picker-subtitle\">\r\n                    <span class=\"text-secondary\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.SELECTED_SECTION'] || 'Selected Section'}}:</span>\r\n                    <span class=\"text-primary fw-semibold ms-1\" *ngIf=\"targetSectionName\">{{targetSectionName}}</span>\r\n                    <span class=\"text-secondary ms-1\" *ngIf=\"!targetSectionName\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_QUESTIONS_INTO_NEW_SECTION'] || 'Import questions into a new section'}}</span>\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Search & Filter Controls Deck -->\r\n    <div class=\"picker-search-deck px-4 pt-3 pb-2 border-bottom\">\r\n        <div class=\"d-flex gap-3 align-items-center mb-2\">\r\n            <!-- Search Box -->\r\n            <div class=\"search-input-wrapper flex-grow-1 position-relative\">\r\n                <input type=\"text\"\r\n                       class=\"form-control search-input\"\r\n                       [placeholder]=\"labelConfig['COMMONS_ASSESSMENT.LABEL.SEARCH_QUESTION'] || 'Search Question'\"\r\n                       [ngModel]=\"searchTerm\"\r\n                       (ngModelChange)=\"onSearchChange($event)\">\r\n                <button *ngIf=\"searchTerm\" (click)=\"clearSearch()\" class=\"search-clear-btn\" aria-label=\"Clear Search\">\r\n                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.CLOSE']\"\r\n                     (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/close.svg')\"\r\n                     class=\"action-icon\" />\r\n                </button>\r\n            </div>\r\n\r\n            <!-- Type Filter Dropdown using arrow-down-black.svg -->\r\n            <div class=\"type-filter-wrapper position-relative\">\r\n                <select class=\"form-select filter-select cursor-pointer\"\r\n                        [ngModel]=\"selectedTypeCode\"\r\n                        (ngModelChange)=\"onTypeFilterChange($event)\">\r\n                    <option value=\"\">{{labelConfig['COMMONS_ASSESSMENT.LABEL.ALL_TYPES'] || 'All Types'}}</option>\r\n                    <option *ngFor=\"let type of questionTypes\" [value]=\"type.code\">\r\n                        {{type.label || type.code}}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Section Header: Question Count & Select All -->\r\n        <div class=\"d-flex align-items-center justify-content-between pt-2 pb-1\">\r\n            <h5 class=\"mb-0 fw-bold questions-heading\">\r\n                {{totalElements || filteredQuestions.length}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS'] || 'Questions'}}\r\n            </h5>\r\n            <div class=\"form-check d-flex align-items-center gap-2 mb-0\">\r\n                <input class=\"form-check-input select-all-checkbox cursor-pointer\"\r\n                       type=\"checkbox\"\r\n                       id=\"selectAllQuestions\"\r\n                       [checked]=\"isAllVisibleSelected\"\r\n                       [indeterminate]=\"isSomeVisibleSelected\"\r\n                       [disabled]=\"eligibleVisibleQuestions.length === 0\"\r\n                       (change)=\"toggleSelectAllVisible()\">\r\n                <label class=\"form-check-label select-all-label cursor-pointer\" for=\"selectAllQuestions\">\r\n                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.SELECT_ALL_QUESTIONS'] || 'Select All Questions'}}\r\n                </label>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Questions Viewport Box -->\r\n    <div class=\"flex-grow-1 overflow-auto assessment-custom-scrollbar-thumb p-3\" (scroll)=\"onScroll($event)\">\r\n        <!-- Skeleton Loading State -->\r\n        <div *ngIf=\"isInitialLoading\" class=\"d-flex flex-column gap-3 py-1\">\r\n            <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"skeleton-card\">\r\n                <div class=\"skeleton-line line-full\"></div>\r\n                <div class=\"skeleton-meta\"></div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Question Cards -->\r\n        <div *ngIf=\"!isInitialLoading && filteredQuestions.length > 0\" class=\"d-flex flex-column gap-3\">\r\n            <div *ngFor=\"let question of filteredQuestions; trackBy: trackByQuestionId\"\r\n                 class=\"question-card\"\r\n                 [class.disabled-card]=\"isAlreadyInAssessment(question.id)\"\r\n                 [class.selected-card]=\"isSelected(question)\"\r\n                 (click)=\"toggleSelection(question)\">\r\n\r\n                <!-- Main Card Header: Checkbox + Question Text + #ID -->\r\n                <div class=\"d-flex align-items-start gap-3\">\r\n                    <div class=\"pt-1 flex-shrink-0\">\r\n                        <input class=\"form-check-input card-checkbox cursor-pointer\"\r\n                               type=\"checkbox\"\r\n                               [checked]=\"isSelected(question)\"\r\n                               [disabled]=\"isAlreadyInAssessment(question.id)\"\r\n                               (click)=\"$event.stopPropagation()\"\r\n                               (change)=\"toggleSelection(question)\">\r\n                    </div>\r\n\r\n                    <div class=\"flex-grow-1 min-w-0\">\r\n                        <div class=\"d-flex align-items-start justify-content-between gap-3 mb-2\">\r\n                            <div class=\"question-body-text fw-medium text-break\"\r\n                                 [innerHTML]=\"question?.questionText?.[0]?.text\"></div>\r\n                            <span class=\"question-id-badge flex-shrink-0\" *ngIf=\"question?.id\">#{{question.id}}</span>\r\n                        </div>\r\n\r\n                        <!-- Badges Row: Type Pill, Marks Pill, Mandatory Pill, and Added Pill -->\r\n                        <div class=\"d-flex align-items-center justify-content-between flex-wrap gap-2 mt-1\">\r\n                            <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n                                <!-- Question Type Pill (Orange/Amber) -->\r\n                                <span class=\"badge-pill badge-type-pill p-2 rounded\" *ngIf=\"question?.questionType\">\r\n                                    {{getQuestionTypeLabel(question)}}\r\n                                </span>\r\n\r\n                                <!-- Marks Pill (Blue/Indigo) -->\r\n                                <span class=\"badge-pill badge-marks-pill p-2 rounded\" *ngIf=\"question?.weight !== undefined && question?.weight !== null\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS'] || 'Marks'}} {{question.weight}}\r\n                                </span>\r\n\r\n                                <!-- Mandatory Pill (Green) -->\r\n                                <span class=\"badge-pill badge-mandatory-pill p-2 rounded\" *ngIf=\"question?.isMandatory\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.MANDATORY'] || 'Mandatory'}}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <!-- Right-aligned Already Added Pill -->\r\n                            <span *ngIf=\"isAlreadyInAssessment(question.id)\" class=\"badge-pill badge-added-pill p-2\">\r\n                                <span class=\"dot-indicator\"></span>\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.ADDED'] || 'Added'}}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <!-- Options Accordion (if question has defaultOptionsList) -->\r\n                        <div *ngIf=\"hasOptions(question)\" class=\"options-accordion-section mt-3 pt-2\">\r\n                            <!-- Toggle Button Row with Arrow & Divider Line -->\r\n                            <div class=\"d-flex align-items-center gap-2 cursor-pointer options-toggle-row\"\r\n                                 (click)=\"toggleExpandOptions(question.id, $event)\">\r\n                                <span class=\"options-count-text text-primary fw-semibold\">\r\n                                    {{question.defaultOptionsList?.length || 0}} {{labelConfig['COMMONS_ASSESSMENT.LABEL.OPTIONS'] || 'Options'}}\r\n                                </span>\r\n                                <img [src]=\"isOptionsExpanded(question.id) ? (imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_UP_BLUE'] || 'assets/commons-assessment/images/arrow-up-blue.svg') : (imageConfig['COMMONS_ASSESSMENT.ICON.ARROW_DOWN_BLUE'] || 'assets/commons-assessment/images/arrow-down-blue.svg')\"\r\n                                     (error)=\"imageErrorHandler($event, isOptionsExpanded(question.id) ? 'assets/commons-assessment/images/arrow-up-blue.svg' : 'assets/commons-assessment/images/arrow-down-blue.svg')\"\r\n                                     class=\"options-arrow-icon\" />\r\n                                <div class=\"options-divider-line flex-grow-1\"></div>\r\n                                <span class=\"text-secondary text-12 options-hint-text\">\r\n                                    \u2022 {{labelConfig['COMMONS_ASSESSMENT.LABEL.CLICK_TO_VIEW'] || 'Click to view'}}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <!-- Expanded Options List (Radio options) -->\r\n                            <div *ngIf=\"isOptionsExpanded(question.id)\"\r\n                                 class=\"options-list-container d-flex flex-column gap-2 mt-3 ps-1\"\r\n                                 (click)=\"$event.stopPropagation()\">\r\n                                <div *ngFor=\"let opt of question.defaultOptionsList\"\r\n                                     class=\"d-flex align-items-center gap-2 option-item-row\">\r\n                                    <span class=\"option-radio-circle\"></span>\r\n                                    <span class=\"option-text text-break\">\r\n                                        {{opt.options?.optionName?.[0]?.text || opt.options?.optionCode || 'Option'}}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Empty State: No matching filter results -->\r\n        <div *ngIf=\"!isInitialLoading && filteredQuestions.length === 0 && allQuestions.length > 0\"\r\n             class=\"empty-state-box py-5 text-center\">\r\n            <p class=\"empty-state-title fw-semibold text-15 mb-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_MATCHING_QUESTIONS'] || 'No matching questions found'}}\r\n            </p>\r\n            <p class=\"empty-state-desc text-secondary text-13 mb-3\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_MATCHING_QUESTIONS_DESC'] || 'Try adjusting your search terms or clearing selected question type filters.'}}\r\n            </p>\r\n            <button (click)=\"clearSearch(); selectedTypeCode = ''; applyFilters();\"\r\n                    class=\"btn btn-outline-primary btn-sm px-3\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CLEAR_FILTERS'] || 'Clear Filters'}}\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Empty State: Question bank is empty -->\r\n        <div *ngIf=\"!isInitialLoading && allQuestions.length === 0\"\r\n             class=\"empty-state-box py-5 text-center\">\r\n            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.NO_QUESTIONS']\" class=\"empty-state-img mb-3\"\r\n                 (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/no-questions.svg')\" />\r\n            <p class=\"empty-state-title fw-semibold text-15 mb-1\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_IN_BANK'] || 'No Questions in Bank!'}}\r\n            </p>\r\n            <p class=\"empty-state-desc text-secondary text-13 mb-0\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_IN_BANK_DESC'] || 'Create standalone questions in the Question Bank to reuse them here.'}}\r\n            </p>\r\n        </div>\r\n\r\n        <!-- Infinite Scroll Bottom Loader -->\r\n        <div *ngIf=\"isLoading && !isInitialLoading\" class=\"py-3 d-flex align-items-center justify-content-center gap-2\">\r\n            <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n            </div>\r\n            <span class=\"text-secondary text-13\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.LOADING_MORE_QUESTIONS'] || 'Loading more questions...'}}\r\n            </span>\r\n        </div>\r\n\r\n        <!-- End of list reached -->\r\n        <div *ngIf=\"!hasNext && allQuestions.length > 0 && !isLoading\" class=\"text-center py-3 text-secondary text-12\">\r\n            {{labelConfig['COMMONS_ASSESSMENT.LABEL.ALL_QUESTIONS_LOADED'] || 'All questions loaded'}} ({{totalElements}})\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Sticky Footer -->\r\n    <div class=\"px-4 py-3 border-top picker-footer d-flex align-items-center justify-content-between bg-white\">\r\n        <div class=\"footer-summary\">\r\n            <span class=\"text-secondary text-13\" *ngIf=\"selectedCount === 0\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.NO_QUESTIONS_SELECTED'] || 'No questions selected'}}\r\n            </span>\r\n            <span class=\"text-secondary text-13\" *ngIf=\"selectedCount > 0\">\r\n                <strong class=\"text-primary\">{{selectedCount}}</strong> {{labelConfig['COMMONS_ASSESSMENT.LABEL.QUESTIONS_SELECTED'] || 'questions selected'}}\r\n                &middot; <strong class=\"text-dark\">{{totalSelectedMarks}}</strong> {{labelConfig['COMMONS_ASSESSMENT.LABEL.MARKS'] || 'Marks'}}\r\n            </span>\r\n        </div>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"close()\" class=\"btn btn-outline-secondary px-4 py-2 footer-btn\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CANCEL'] || 'Cancel'}}\r\n            </button>\r\n            <button (click)=\"importSelected()\"\r\n                    [disabled]=\"selectedCount === 0\"\r\n                    class=\"btn btn-primary px-4 py-2 footer-btn footer-btn-import\">\r\n                {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_COUNT'] || 'Import'}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".question-bank-picker{background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #202124);font-family:var(--assessment-font-family, inherit)}.question-bank-picker .picker-header{background-color:var(--assessment-bg-white, #ffffff);border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-header .btn-icon-back{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;border:none;background-color:transparent;cursor:pointer;transition:background-color .15s ease}.question-bank-picker .picker-header .btn-icon-back:hover{background-color:var(--assessment-palette-EDF3FD, #EDF3FD)}.question-bank-picker .picker-header .btn-icon-back .action-icon{width:1.125rem;height:1.125rem}.question-bank-picker .picker-header .picker-title{font-size:1.25rem;font-weight:700;color:var(--assessment-text-grey-ten, #1e293b);line-height:1.25}.question-bank-picker .picker-header .picker-subtitle{font-size:.8125rem;margin-top:2px}.question-bank-picker .picker-search-deck{background-color:var(--assessment-bg-white, #ffffff);border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-search-deck .search-input-wrapper{position:relative}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input{height:2.6rem;padding-right:2rem;padding-left:.875rem;font-size:.875rem;border-radius:var(--assessment-border-radius-two, .375rem);border:1px solid var(--assessment-grey-four, #e2e8f0);background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #202124)}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input::placeholder{color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .picker-search-deck .search-input-wrapper .search-input:focus{border-color:var(--assessment-primary-one, #467DD6);box-shadow:0 0 0 2px #467dd626}.question-bank-picker .picker-search-deck .search-input-wrapper .search-clear-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--assessment-text-grey-seven, #94a3b8);font-size:.75rem;cursor:pointer;padding:2px 4px;border-radius:4px}.question-bank-picker .picker-search-deck .search-input-wrapper .search-clear-btn:hover{color:var(--assessment-text-grey-ten, #202124);background-color:var(--assessment-palette-EDF3FD, #EDF3FD)}.question-bank-picker .picker-search-deck .type-filter-wrapper{min-width:11rem;max-width:14rem}.question-bank-picker .picker-search-deck .type-filter-wrapper .filter-select{height:2.6rem;padding-right:2rem;font-size:.875rem;font-weight:500;border-radius:var(--assessment-border-radius-two, .375rem);border:1px solid var(--assessment-grey-four, #e2e8f0);background-color:var(--assessment-bg-white, #ffffff);color:var(--assessment-text-grey-ten, #334155);appearance:none;-webkit-appearance:none;-moz-appearance:none}.question-bank-picker .picker-search-deck .type-filter-wrapper .filter-select:focus{border-color:var(--assessment-primary-one, #467DD6);box-shadow:0 0 0 2px #467dd626}.question-bank-picker .picker-search-deck .type-filter-wrapper .select-arrow-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:.875rem;height:.875rem}.question-bank-picker .picker-search-deck .questions-heading{font-size:1.125rem;color:var(--assessment-text-grey-ten, #1e293b)}.question-bank-picker .picker-search-deck .select-all-label{font-size:.875rem;font-weight:600;color:var(--assessment-text-grey-nine, #334155);-webkit-user-select:none;user-select:none}.question-bank-picker .form-check-input{width:1.2rem;height:1.2rem;border-radius:4px;border:1.5px solid var(--assessment-grey-five, #cbd5e1);cursor:pointer}.question-bank-picker .form-check-input:checked{background-color:var(--assessment-primary-one, #467DD6);border-color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .form-check-input:focus{box-shadow:0 0 0 2px #467dd633}.question-bank-picker .form-check-input:disabled{cursor:not-allowed;opacity:.5}.question-bank-picker .question-card{border:1px solid var(--assessment-grey-four, #e2e8f0);border-radius:var(--assessment-border-radius-two, .5rem);background-color:var(--assessment-bg-grey-one, #f8f9fa);padding:1rem 1.125rem;transition:border-color .15s ease,box-shadow .15s ease;cursor:pointer}.question-bank-picker .question-card:hover:not(.disabled-card){border-color:var(--assessment-palette-ADC9F6, #93c5fd);box-shadow:0 2px 6px #467dd60f}.question-bank-picker .question-card.selected-card{border-color:var(--assessment-primary-one, #467DD6);background-color:var(--assessment-bg-white, #ffffff)}.question-bank-picker .question-card.disabled-card{background-color:var(--assessment-bg-grey-one, #f8fafc);opacity:.75;cursor:not-allowed!important}.question-bank-picker .question-card .question-body-text{font-size:.9375rem;color:var(--assessment-text-grey-ten, #1e293b);line-height:1.45;word-break:break-word}.question-bank-picker .question-card .question-body-text ::ng-deep p,.question-bank-picker .question-card .question-body-text ::ng-deep div,.question-bank-picker .question-card .question-body-text p,.question-bank-picker .question-card .question-body-text div{margin:0!important;padding:0!important}.question-bank-picker .question-card .question-id-badge{font-size:.8125rem;font-weight:500;color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .badge-pill{display:inline-flex;align-items:center;grid-gap:4px;gap:4px;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;line-height:1.2}.question-bank-picker .badge-type-pill{background-color:#fffbeb;color:#b45309;border:1px solid #fde68a}.question-bank-picker .badge-marks-pill{background-color:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.question-bank-picker .badge-mandatory-pill{background-color:#ecfdf5;color:#059669;border:1px solid #a7f3d0}.question-bank-picker .badge-added-pill{background-color:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;font-weight:600}.question-bank-picker .badge-added-pill .dot-indicator{width:6px;height:6px;border-radius:50%;background-color:#16a34a;display:inline-block}.question-bank-picker .options-accordion-section .options-toggle-row{-webkit-user-select:none;user-select:none}.question-bank-picker .options-accordion-section .options-toggle-row .options-count-text{font-size:.8125rem;font-weight:600;color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .options-accordion-section .options-toggle-row .options-arrow-icon{width:.875rem;height:.875rem}.question-bank-picker .options-accordion-section .options-toggle-row .options-divider-line{height:1px;background-color:var(--assessment-grey-four, #e2e8f0)}.question-bank-picker .options-accordion-section .options-toggle-row .options-hint-text{font-size:.75rem;color:var(--assessment-text-grey-seven, #94a3b8)}.question-bank-picker .options-accordion-section .options-list-container .option-item-row{font-size:.875rem;color:var(--assessment-text-grey-nine, #334155)}.question-bank-picker .options-accordion-section .options-list-container .option-item-row .option-radio-circle{width:.875rem;height:.875rem;border-radius:50%;border:1.5px solid var(--assessment-text-grey-nine, #334155);flex-shrink:0}.question-bank-picker .options-accordion-section .options-list-container .option-item-row .option-text{font-size:.875rem;color:var(--assessment-text-grey-nine, #334155)}.question-bank-picker .skeleton-card{border:1px solid var(--assessment-grey-four, #e2e8f0);border-radius:var(--assessment-border-radius-two, .5rem);background:var(--assessment-bg-white, #ffffff);padding:1rem 1.125rem}.question-bank-picker .skeleton-card .skeleton-line{height:14px;border-radius:4px;margin-bottom:12px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.question-bank-picker .skeleton-card .skeleton-line.line-full{width:75%}.question-bank-picker .skeleton-card .skeleton-meta{height:18px;width:160px;border-radius:9999px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.question-bank-picker .empty-state-box .empty-state-img{max-width:5.5rem}.question-bank-picker .empty-state-box .empty-state-title{color:var(--assessment-text-grey-ten, #1e293b)}.question-bank-picker .empty-state-box .empty-state-desc{max-width:22rem;margin:0 auto}.question-bank-picker .picker-footer{border-color:var(--assessment-grey-four, #e8eaed)!important}.question-bank-picker .picker-footer .footer-btn{font-size:.875rem;font-weight:600;border-radius:var(--assessment-border-radius-two, .375rem)}.question-bank-picker .picker-footer .footer-btn-import{background-color:var(--assessment-primary-one, #467DD6);border-color:var(--assessment-primary-one, #467DD6)}.question-bank-picker .picker-footer .footer-btn-import:hover:not(:disabled){background-color:var(--assessment-primary-four, #295eb7);border-color:var(--assessment-primary-four, #295eb7)}.question-bank-picker .pointer-events-none{pointer-events:none}.question-bank-picker .min-w-0{min-width:0}.question-bank-picker .text-12{font-size:.75rem}.question-bank-picker .text-13{font-size:.8125rem}.question-bank-picker .text-15{font-size:.9375rem}\n"], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionBankPickerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5593,8 +5593,40 @@
           this.responseCount = 0;
           this.proctoringEnabled = false;
           this.durationMinutes = null;
+          this.activeDropdownId = null;
+          this.dropdownPlacementMap = {};
           this.PROCTORING_CONFIG_KEY = 'assessment.config.is-proctoring-enabled';
       }
+      AssessmentMakerComponent.prototype.toggleDropdown = function (id, event) {
+          if (event) {
+              event.stopPropagation();
+              var targetEl = (event.currentTarget || event.target);
+              if (targetEl && typeof targetEl.getBoundingClientRect === 'function') {
+                  var rect = targetEl.getBoundingClientRect();
+                  var spaceBelow = window.innerHeight - rect.bottom;
+                  var ESTIMATED_DROPDOWN_HEIGHT = 135;
+                  if (spaceBelow < ESTIMATED_DROPDOWN_HEIGHT && rect.top > ESTIMATED_DROPDOWN_HEIGHT) {
+                      this.dropdownPlacementMap[id] = 'top';
+                  }
+                  else {
+                      this.dropdownPlacementMap[id] = 'bottom';
+                  }
+              }
+          }
+          this.activeDropdownId = this.activeDropdownId === id ? null : id;
+      };
+      AssessmentMakerComponent.prototype.onDocumentClick = function (event) {
+          if (!this.activeDropdownId) {
+              return;
+          }
+          var target = event.target;
+          if (!target.closest('.assessment-dropdown-menu') && !target.closest('.assessment-dropdown-container')) {
+              this.closeAllDropdowns();
+          }
+      };
+      AssessmentMakerComponent.prototype.closeAllDropdowns = function () {
+          this.activeDropdownId = null;
+      };
       AssessmentMakerComponent.prototype.ngOnInit = function () {
           var _a, _b, _c, _d, _e;
           this.assessmentBuilderService.setDefaultAssessmentDTO(this.defaultAssessmentDTO);
@@ -6244,7 +6276,7 @@
       return AssessmentMakerComponent;
   }());
   AssessmentMakerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AssessmentMakerComponent, deps: [{ token: AssessmentMakerService }, { token: AssessmentBuilderService }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  AssessmentMakerComponent.ɵcmp = i0__namespace.ɵɵ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", enableImportFromQuestionBank: "enableImportFromQuestionBank", questionBankConfig: "questionBankConfig" }, outputs: { assessmentIdChange: "assessmentIdChange", assessmentInstanceIdChange: "assessmentInstanceIdChange", snackbarMessage: "snackbarMessage" }, ngImport: i0__namespace, 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                                    [isLocked]=\"isQuestionLocked(sectionQuestion?.questionId)\"\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 d-flex align-items-center\">\r\n                        <ng-container *ngIf=\"enableImportFromQuestionBank; else singleAddQuestionBtn\">\r\n                            <button [matMenuTriggerFor]=\"addQuestionMenu\"\r\n                                class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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_QUESTION'] || 'Add Question'}}\r\n                            </button>\r\n                            <mat-menu #addQuestionMenu=\"matMenu\" yPosition=\"below\" [overlapTrigger]=\"false\" class=\"assessment-cta-menu assessment-border-radius-two\">\r\n                                <button (click)=\"createEditQuestion(section)\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\" class=\"menu-action-icon\"\r\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                                    <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                                    </span>\r\n                                </button>\r\n                                <button (click)=\"openQuestionBankPicker(section)\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                                    <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" class=\"menu-action-icon\"\r\n                                        (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                                    <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                        {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                                    </span>\r\n                                </button>\r\n                            </mat-menu>\r\n                        </ng-container>\r\n                        <ng-template #singleAddQuestionBtn>\r\n                            <button (click)=\"createEditQuestion(section)\"\r\n                                class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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                        </ng-template>\r\n                    </div>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n            <div class=\"d-flex align-items-center ms-4\">\r\n                <ng-container *ngIf=\"enableImportFromQuestionBank; else singleAddSectionBtn\">\r\n                    <button [matMenuTriggerFor]=\"addSectionMenu\"\r\n                        class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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.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                    <mat-menu #addSectionMenu=\"matMenu\" yPosition=\"below\" [overlapTrigger]=\"false\" class=\"assessment-cta-menu assessment-border-radius-two\">\r\n                        <button (click)=\"createEditQuestion()\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ADD_SECTION']\" class=\"menu-action-icon\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/add-section.svg')\" />\r\n                            <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                            </span>\r\n                        </button>\r\n                        <button (click)=\"openQuestionBankPicker()\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" class=\"menu-action-icon\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                            <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                            </span>\r\n                        </button>\r\n                    </mat-menu>\r\n                </ng-container>\r\n                <ng-template #singleAddSectionBtn>\r\n                    <button (click)=\"createEditQuestion()\"\r\n                        class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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.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-template>\r\n            </div>\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            <div class=\"d-flex align-items-center\">\r\n                <ng-container *ngIf=\"enableImportFromQuestionBank; else singleEmptyAddBtn\">\r\n                    <button [matMenuTriggerFor]=\"emptyAddMenu\"\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                    <mat-menu #emptyAddMenu=\"matMenu\" yPosition=\"below\" [overlapTrigger]=\"false\" class=\"assessment-cta-menu assessment-border-radius-two\">\r\n                        <button (click)=\"createEditQuestion()\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\" class=\"menu-action-icon\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                            <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                            </span>\r\n                        </button>\r\n                        <button (click)=\"openQuestionBankPicker()\" mat-menu-item class=\"d-flex align-items-center gap-2 py-3\">\r\n                            <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" class=\"menu-action-icon\"\r\n                                (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                            <span class=\"assessment-text-semibold-13 menu-item-text\">\r\n                                {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                            </span>\r\n                        </button>\r\n                    </mat-menu>\r\n                </ng-container>\r\n                <ng-template #singleEmptyAddBtn>\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                </ng-template>\r\n            </div>\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}@keyframes ctaMenuBloom{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}::ng-deep .assessment-cta-menu.mat-menu-panel{min-width:15rem;max-width:22rem;margin-top:.5rem!important;border:1px solid var(--assessment-grey-four, #e2e8f0);border-radius:var(--assessment-border-radius-two, .5rem);background-color:var(--assessment-bg-grey-one, #f8fafc)!important;box-shadow:0 4px 6px -1px #0000000a,0 14px 28px -3px #00000014!important;padding:0;overflow:hidden;transform-origin:top left;animation:ctaMenuBloom .2s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-content{padding:0!important}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item{height:auto;line-height:normal;padding:.75rem 1rem;display:flex;align-items:center;grid-gap:.75rem;gap:.75rem;background-color:transparent;transition:background-color .14s ease-out,transform .14s ease-out}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item:not(:last-child){border-bottom:1px solid var(--assessment-grey-four, #e2e8f0)}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item .menu-item-text{color:var(--assessment-text-grey-ten, #1e293b);transition:color .14s ease-out}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item .menu-action-icon{width:1.125rem;height:1.125rem;flex-shrink:0;transition:transform .14s ease-out}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item:hover{background-color:var(--assessment-palette-EDF3FD, #EDF3FD);transform:translate(2px)}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item:hover .menu-item-text{color:var(--assessment-primary-one, #467DD6)}::ng-deep .assessment-cta-menu.mat-menu-panel .mat-menu-item:hover .menu-action-icon{transform:scale(1.08)}\n"], components: [{ type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i1__namespace$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1__namespace$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: QuestionDetailsComponent, selector: "lib-question-details", inputs: ["sectionQuestion", "question", "questionBank", "labelConfig", "imageConfig", "allowDelete", "isLocked"], outputs: ["editQuestion", "duplicateQuestion", "deleteParentQuestion", "deleteChildQuestion"] }, { type: i10__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i10__namespace$2.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: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace$2.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__namespace$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+  AssessmentMakerComponent.ɵcmp = i0__namespace.ɵɵ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", enableImportFromQuestionBank: "enableImportFromQuestionBank", questionBankConfig: "questionBankConfig" }, outputs: { assessmentIdChange: "assessmentIdChange", assessmentInstanceIdChange: "assessmentInstanceIdChange", snackbarMessage: "snackbarMessage" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0__namespace, 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 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.border-transparent]=\"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                                    [isLocked]=\"isQuestionLocked(sectionQuestion?.questionId)\"\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 d-flex align-items-center\">\r\n                        <ng-container *ngIf=\"enableImportFromQuestionBank; else singleAddQuestionBtn\">\r\n                            <div class=\"position-relative d-inline-block mt-3 assessment-dropdown-container\" [style.z-index]=\"activeDropdownId === ('question_' + section.id) ? 1005 : 'auto'\">\r\n                                <button (click)=\"toggleDropdown('question_' + section.id, $event)\"\r\n                                    class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two 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_QUESTION'] || 'Add Question'}}\r\n                                </button>\r\n                                <div *ngIf=\"activeDropdownId === 'question_' + section.id\"\r\n                                    class=\"dropdown-menu assessment-dropdown-menu show shadow border rounded-3 p-0 overflow-hidden position-absolute start-0\"\r\n                                    [ngClass]=\"dropdownPlacementMap['question_' + section.id] === 'top' ? 'bottom-100 mb-2 assessment-bloom-up' : 'top-100 mt-2 assessment-bloom-down'\"\r\n                                    style=\"min-width: 16rem; z-index: 1010;\">\r\n                                    <button (click)=\"createEditQuestion(section); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium border-bottom\">\r\n                                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\" style=\"width: 1rem; height: 1rem;\"\r\n                                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                                        <span class=\"assessment-text-semibold-13\">\r\n                                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                                        </span>\r\n                                    </button>\r\n                                    <button (click)=\"openQuestionBankPicker(section); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium\">\r\n                                        <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" style=\"width: 1rem; height: 1rem;\"\r\n                                            (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                                        <span class=\"assessment-text-semibold-13\">\r\n                                            {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                                        </span>\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #singleAddQuestionBtn>\r\n                            <button (click)=\"createEditQuestion(section)\"\r\n                                class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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                        </ng-template>\r\n                    </div>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n            <div class=\"d-flex align-items-center ms-4\">\r\n                <ng-container *ngIf=\"enableImportFromQuestionBank; else singleAddSectionBtn\">\r\n                    <div class=\"position-relative d-inline-block mt-3 assessment-dropdown-container\" [style.z-index]=\"activeDropdownId === 'add_section' ? 1005 : 'auto'\">\r\n                        <button (click)=\"toggleDropdown('add_section', $event)\"\r\n                            class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 assessment-text-primary-one assessment-bg-palette-EDF3FD assessment-text-semibold-12 outline-0 assessment-border-radius-two border-ADC9F6\">\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                        <div *ngIf=\"activeDropdownId === 'add_section'\"\r\n                            class=\"dropdown-menu assessment-dropdown-menu show shadow border rounded-3 p-0 overflow-hidden position-absolute start-0\"\r\n                            [ngClass]=\"dropdownPlacementMap['add_section'] === 'top' ? 'bottom-100 mb-2 assessment-bloom-up' : 'top-100 mt-2 assessment-bloom-down'\"\r\n                            style=\"min-width: 16rem; z-index: 1010;\">\r\n                            <button (click)=\"createEditQuestion(); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium border-bottom\">\r\n                                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.ADD_SECTION']\" style=\"width: 1rem; height: 1rem;\"\r\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/add-section.svg')\" />\r\n                                <span class=\"assessment-text-semibold-13\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                                </span>\r\n                            </button>\r\n                            <button (click)=\"openQuestionBankPicker(); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium\">\r\n                                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" style=\"width: 1rem; height: 1rem;\"\r\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                                <span class=\"assessment-text-semibold-13\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                                </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #singleAddSectionBtn>\r\n                    <button (click)=\"createEditQuestion()\"\r\n                        class=\"assessment-zoom-animation assessment-button-padding d-flex align-items-center justify-content-center gap-2 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.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-template>\r\n            </div>\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            <div class=\"d-flex align-items-center\">\r\n                <ng-container *ngIf=\"enableImportFromQuestionBank; else singleEmptyAddBtn\">\r\n                    <div class=\"position-relative d-inline-block assessment-dropdown-container\" [style.z-index]=\"activeDropdownId === 'empty_add' ? 1005 : 'auto'\">\r\n                        <button (click)=\"toggleDropdown('empty_add', $event)\"\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 *ngIf=\"activeDropdownId === 'empty_add'\"\r\n                            class=\"dropdown-menu assessment-dropdown-menu show shadow border rounded-3 p-0 overflow-hidden position-absolute start-0\"\r\n                            [ngClass]=\"dropdownPlacementMap['empty_add'] === 'top' ? 'bottom-100 mb-2 assessment-bloom-up' : 'top-100 mt-2 assessment-bloom-down'\"\r\n                            style=\"min-width: 16rem; z-index: 1010;\">\r\n                            <button (click)=\"createEditQuestion(); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium border-bottom\">\r\n                                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.PLUS_PRIMARY']\" style=\"width: 1rem; height: 1rem;\"\r\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/plus-primary.svg')\" />\r\n                                <span class=\"assessment-text-semibold-13\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.CREATE_NEW_QUESTION'] || 'Create New Question'}}\r\n                                </span>\r\n                            </button>\r\n                            <button (click)=\"openQuestionBankPicker(); closeAllDropdowns()\" class=\"dropdown-item d-flex align-items-center gap-2 py-3 px-3 fw-medium\">\r\n                                <img [src]=\"imageConfig['COMMONS_ASSESSMENT.ICON.FILE_IMPORT'] || 'assets/commons-assessment/images/file-import.svg'\" style=\"width: 1rem; height: 1rem;\"\r\n                                    (error)=\"imageErrorHandler($event, 'assets/commons-assessment/images/file-import.svg')\" />\r\n                                <span class=\"assessment-text-semibold-13\">\r\n                                    {{labelConfig['COMMONS_ASSESSMENT.LABEL.IMPORT_FROM_QUESTION_BANK'] || 'Import from Question Bank'}}\r\n                                </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #singleEmptyAddBtn>\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                </ng-template>\r\n            </div>\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}.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)}\n"], components: [{ type: i3__namespace.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i3__namespace.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i1__namespace$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1__namespace$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: QuestionDetailsComponent, selector: "lib-question-details", inputs: ["sectionQuestion", "question", "questionBank", "labelConfig", "imageConfig", "allowDelete", "isLocked"], outputs: ["editQuestion", "duplicateQuestion", "deleteParentQuestion", "deleteChildQuestion"] }, { type: i10__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1__namespace$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i10__namespace$2.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: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace$2.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__namespace$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i2__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AssessmentMakerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -6292,6 +6324,9 @@
                   type: i0.Output
               }], snackbarMessage: [{
                   type: i0.Output
+              }], onDocumentClick: [{
+                  type: i0.HostListener,
+                  args: ['document:click', ['$event']]
               }] } });
 
   var AssessmentMakerModule = /** @class */ (function () {
@@ -6366,7 +6401,7 @@
           this.searchTerm = '';
           this.selectedTypeCode = '';
           this.currentPage = 0;
-          this.pageSize = 20;
+          this.pageSize = 100;
           this.totalElements = 0;
           this.hasNext = false;
           this.isLoadingMore = false;