@cqa-lib/cqa-ui 1.1.448 → 1.1.449

package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs

@@ -1,31 +1,7 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../custom-input/custom-input.component";
-import * as i2 from "../button/button.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-const QUESTIONNAIRE_LIST_STYLES = `
-  :host { display: block; width: 100%; }
-  .ql-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
-  .ql-header { margin-bottom: 20px; }
-  .ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
-  .ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
-  .ql-body { display: flex; flex-direction: column; }
-  .ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
-  .ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
-  .ql-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0ff; color: #4f46e5; font-size: 12px; font-weight: 600; flex-shrink: 0; }
-  .ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
-  .ql-input { width: 100%; }
-  .ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
-  .ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
-  .ql-footer-left { display: flex; align-items: center; }
-  .ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
-  .ql-page-size-select { width: 72px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 6px; font-size: 13px; color: #374151; background: #ffffff; cursor: pointer; outline: none; }
-  .ql-page-size-select:focus { border-color: #6366f1; }
-  .ql-footer-right { display: flex; align-items: center; gap: 4px; }
-  .ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
-  .ql-nav-btn { width: 28px; height: 28px; }
-`;
+import * as i2 from "@angular/common";
 export class QuestionnaireListComponent {
     constructor() {
         this.items = [];
@@ -35,6 +11,7 @@ export class QuestionnaireListComponent {
         this.answerChange = new EventEmitter();
         this.currentPage = 1;
         this.pageSize = 6;
+        this.pageSizeOpen = false;
     }
     ngOnChanges(changes) {
         if (changes['defaultPageSize'] && changes['defaultPageSize'].currentValue) {
@@ -67,6 +44,27 @@ export class QuestionnaireListComponent {
         this.pageSize = size;
         this.currentPage = 1;
     }
+    togglePageSizeMenu() {
+        this.pageSizeOpen = !this.pageSizeOpen;
+    }
+    selectPageSize(size) {
+        this.onPageSizeChange(size);
+        this.pageSizeOpen = false;
+    }
+    onDocumentClick(event) {
+        if (!this.pageSizeOpen) {
+            return;
+        }
+        if (this.pageSizeDropdownContainer?.nativeElement) {
+            const clickedInside = this.pageSizeDropdownContainer.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.pageSizeOpen = false;
+            }
+        }
+        else {
+            this.pageSizeOpen = false;
+        }
+    }
     prevPage() {
         if (!this.isPrevDisabled) {
             this.currentPage--;
@@ -88,10 +86,10 @@ export class QuestionnaireListComponent {
     }
 }
 QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"ql-header\">\n    <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n    <p class=\"ql-subtitle\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <!-- Question rows -->\n  <div class=\"ql-body\">\n    <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n      <div\n        class=\"ql-item\"\n        *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n        [class.ql-item--last]=\"isLast\"\n      >\n        <span class=\"ql-badge\">{{ item.index }}</span>\n        <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n        <cqa-custom-input\n          [inputId]=\"getInputId(item.id)\"\n          [value]=\"item.answer\"\n          [placeholder]=\"inputPlaceholder\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"onAnswerInput(item.id, $event)\"\n          class=\"ql-input\"\n        ></cqa-custom-input>\n      </div>\n    </ng-container>\n    <ng-template #emptyState>\n      <div class=\"ql-empty\">No questions available.</div>\n    </ng-template>\n  </div>\n\n  <!-- Footer: per-page selector + range + nav -->\n  <div class=\"ql-footer\" aria-live=\"polite\">\n\n    <div class=\"ql-footer-left\">\n      <span class=\"ql-footer-label\">Questions per page</span>\n      <select\n        class=\"ql-page-size-select\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n      >\n        <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n      </select>\n    </div>\n\n    <div class=\"ql-footer-right\">\n      <span class=\"ql-range-label\">\n        {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n      </span>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_left\"\n        [disabled]=\"isPrevDisabled\"\n        (clicked)=\"prevPage()\"\n        aria-label=\"Previous page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_right\"\n        [disabled]=\"isNextDisabled\"\n        (clicked)=\"nextPage()\"\n        aria-label=\"Next page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n    </div>\n\n  </div>\n\n</div>\n", styles: [":host{display:block;width:100%}.ql-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ql-header{margin-bottom:20px}.ql-title{font-size:16px;font-weight:600;color:#1a1d23;margin:0 0 4px;line-height:1.4}.ql-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0;line-height:1.5}.ql-body{display:flex;flex-direction:column}.ql-item{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.ql-item.ql-item--last{border-bottom:none;margin-bottom:0}.ql-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-size:12px;font-weight:600;flex-shrink:0}.ql-label{display:block;font-size:13px;font-weight:500;color:#374151}.ql-input{width:100%}.ql-empty{padding:24px 0;font-size:13px;color:#6b7280;text-align:center}.ql-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid #f3f4f6}.ql-footer-left{display:flex;align-items:center}.ql-footer-label{font-size:13px;color:#6b7280;margin-right:8px}.ql-page-size-select{width:72px;height:28px;border:1px solid #e5e7eb;border-radius:4px;padding:0 6px;font-size:13px;color:#374151;background:#ffffff;cursor:pointer;outline:none}.ql-page-size-select:focus{border-color:#6366f1}.ql-footer-right{display:flex;align-items:center;gap:4px}.ql-range-label{font-size:13px;color:#374151;margin-right:8px}.ql-nav-btn{width:28px;height:28px}\n"], components: [{ type: i1.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i2.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: i1.CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-questionnaire-list', styles: [QUESTIONNAIRE_LIST_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"ql-header\">\n    <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n    <p class=\"ql-subtitle\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <!-- Question rows -->\n  <div class=\"ql-body\">\n    <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n      <div\n        class=\"ql-item\"\n        *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n        [class.ql-item--last]=\"isLast\"\n      >\n        <span class=\"ql-badge\">{{ item.index }}</span>\n        <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n        <cqa-custom-input\n          [inputId]=\"getInputId(item.id)\"\n          [value]=\"item.answer\"\n          [placeholder]=\"inputPlaceholder\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"onAnswerInput(item.id, $event)\"\n          class=\"ql-input\"\n        ></cqa-custom-input>\n      </div>\n    </ng-container>\n    <ng-template #emptyState>\n      <div class=\"ql-empty\">No questions available.</div>\n    </ng-template>\n  </div>\n\n  <!-- Footer: per-page selector + range + nav -->\n  <div class=\"ql-footer\" aria-live=\"polite\">\n\n    <div class=\"ql-footer-left\">\n      <span class=\"ql-footer-label\">Questions per page</span>\n      <select\n        class=\"ql-page-size-select\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n      >\n        <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n      </select>\n    </div>\n\n    <div class=\"ql-footer-right\">\n      <span class=\"ql-range-label\">\n        {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n      </span>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_left\"\n        [disabled]=\"isPrevDisabled\"\n        (clicked)=\"prevPage()\"\n        aria-label=\"Previous page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_right\"\n        [disabled]=\"isNextDisabled\"\n        (clicked)=\"nextPage()\"\n        aria-label=\"Next page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n    </div>\n\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""] }]
         }], propDecorators: { items: [{
                 type: Input
             }], defaultPageSize: [{
@@ -102,5 +100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], answerChange: [{
                 type: Output
+            }], pageSizeDropdownContainer: [{
+                type: ViewChild,
+                args: ['pageSizeDropdownContainer', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlc3Rpb25uYWlyZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvcXVlc3Rpb25uYWlyZS1saXN0L3F1ZXN0aW9ubmFpcmUtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3F1ZXN0aW9ubmFpcmUtbGlzdC9xdWVzdGlvbm5haXJlLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUdqRyxNQUFNLHlCQUF5QixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0FxQmpDLENBQUM7QUFRRixNQUFNLE9BQU8sMEJBQTBCO0lBTnZDO1FBT1csVUFBSyxHQUF3QixFQUFFLENBQUM7UUFDaEMsb0JBQWUsR0FBVyxDQUFDLENBQUM7UUFDNUIsb0JBQWUsR0FBYSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVDLHFCQUFnQixHQUFXLDBCQUEwQixDQUFDO1FBRXJELGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQTBDLENBQUM7UUFFcEYsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFDaEIsYUFBUSxHQUFHLENBQUMsQ0FBQztLQWlFZDtJQS9EQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsaUJBQWlCLENBQUMsSUFBSSxPQUFPLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxZQUFZLEVBQUU7WUFDekUsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCxJQUFJLFVBQVU7UUFDWixPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ2hELENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUMxRCxDQUFDO0lBRUQsSUFBSSxjQUFjO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFdBQVcsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELElBQUksY0FBYztRQUNoQixPQUFPLElBQUksQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUM5QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsSUFBWTtRQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztJQUN2QixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDeEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3BCO0lBQ0gsQ0FBQztJQUVELGFBQWEsQ0FBQyxFQUFtQixFQUFFLEtBQWE7UUFDOUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsVUFBVSxDQUFDLEVBQW1CO1FBQzVCLE9BQU8sa0JBQWtCLEVBQUUsRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxTQUFTLENBQUMsTUFBYyxFQUFFLElBQXVCO1FBQy9DLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQztJQUNqQixDQUFDOzt1SEF6RVUsMEJBQTBCOzJHQUExQiwwQkFBMEIsaVRDaEN2Qyx3K0VBNkVBOzJGRDdDYSwwQkFBMEI7a0JBTnRDLFNBQVM7K0JBQ0Usd0JBQXdCLFVBRTFCLENBQUMseUJBQXlCLENBQUMsUUFDN0IsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFFSSxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUXVlc3Rpb25uYWlyZUl0ZW0gfSBmcm9tICcuL3F1ZXN0aW9ubmFpcmUtbGlzdC50eXBlcyc7XG5cbmNvbnN0IFFVRVNUSU9OTkFJUkVfTElTVF9TVFlMRVMgPSBgXG4gIDpob3N0IHsgZGlzcGxheTogYmxvY2s7IHdpZHRoOiAxMDAlOyB9XG4gIC5xbC13cmFwcGVyIHsgYmFja2dyb3VuZDogI2ZmZmZmZjsgYm9yZGVyOiAxcHggc29saWQgI2U4ZWFmMDsgYm9yZGVyLXJhZGl1czogOHB4OyBwYWRkaW5nOiAyNHB4OyBib3gtc2hhZG93OiAwIDFweCA0cHggcmdiYSgwLDAsMCwuMDYpOyB3aWR0aDogMTAwJTsgYm94LXNpemluZzogYm9yZGVyLWJveDsgfVxuICAucWwtaGVhZGVyIHsgbWFyZ2luLWJvdHRvbTogMjBweDsgfVxuICAucWwtdGl0bGUgeyBmb250LXNpemU6IDE2cHg7IGZvbnQtd2VpZ2h0OiA2MDA7IGNvbG9yOiAjMWExZDIzOyBtYXJnaW46IDAgMCA0cHggMDsgbGluZS1oZWlnaHQ6IDEuNDsgfVxuICAucWwtc3VidGl0bGUgeyBmb250LXNpemU6IDEzcHg7IGZvbnQtd2VpZ2h0OiA0MDA7IGNvbG9yOiAjNmI3MjgwOyBtYXJnaW46IDA7IGxpbmUtaGVpZ2h0OiAxLjU7IH1cbiAgLnFsLWJvZHkgeyBkaXNwbGF5OiBmbGV4OyBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyB9XG4gIC5xbC1pdGVtIHsgZGlzcGxheTogZmxleDsgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgZ2FwOiA2cHg7IHBhZGRpbmctYm90dG9tOiAxNnB4OyBtYXJnaW4tYm90dG9tOiAxNnB4OyBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2YzZjRmNjsgfVxuICAucWwtaXRlbS5xbC1pdGVtLS1sYXN0IHsgYm9yZGVyLWJvdHRvbTogbm9uZTsgbWFyZ2luLWJvdHRvbTogMDsgfVxuICAucWwtYmFkZ2UgeyBkaXNwbGF5OiBpbmxpbmUtZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IHdpZHRoOiAyMnB4OyBoZWlnaHQ6IDIycHg7IGJvcmRlci1yYWRpdXM6IDUwJTsgYmFja2dyb3VuZDogI2VlZjBmZjsgY29sb3I6ICM0ZjQ2ZTU7IGZvbnQtc2l6ZTogMTJweDsgZm9udC13ZWlnaHQ6IDYwMDsgZmxleC1zaHJpbms6IDA7IH1cbiAgLnFsLWxhYmVsIHsgZGlzcGxheTogYmxvY2s7IGZvbnQtc2l6ZTogMTNweDsgZm9udC13ZWlnaHQ6IDUwMDsgY29sb3I6ICMzNzQxNTE7IH1cbiAgLnFsLWlucHV0IHsgd2lkdGg6IDEwMCU7IH1cbiAgLnFsLWVtcHR5IHsgcGFkZGluZzogMjRweCAwOyBmb250LXNpemU6IDEzcHg7IGNvbG9yOiAjNmI3MjgwOyB0ZXh0LWFsaWduOiBjZW50ZXI7IH1cbiAgLnFsLWZvb3RlciB7IGRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsgcGFkZGluZy10b3A6IDE2cHg7IG1hcmdpbi10b3A6IDhweDsgYm9yZGVyLXRvcDogMXB4IHNvbGlkICNmM2Y0ZjY7IH1cbiAgLnFsLWZvb3Rlci1sZWZ0IHsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsgfVxuICAucWwtZm9vdGVyLWxhYmVsIHsgZm9udC1zaXplOiAxM3B4OyBjb2xvcjogIzZiNzI4MDsgbWFyZ2luLXJpZ2h0OiA4cHg7IH1cbiAgLnFsLXBhZ2Utc2l6ZS1zZWxlY3QgeyB3aWR0aDogNzJweDsgaGVpZ2h0OiAyOHB4OyBib3JkZXI6IDFweCBzb2xpZCAjZTVlN2ViOyBib3JkZXItcmFkaXVzOiA0cHg7IHBhZGRpbmc6IDAgNnB4OyBmb250LXNpemU6IDEzcHg7IGNvbG9yOiAjMzc0MTUxOyBiYWNrZ3JvdW5kOiAjZmZmZmZmOyBjdXJzb3I6IHBvaW50ZXI7IG91dGxpbmU6IG5vbmU7IH1cbiAgLnFsLXBhZ2Utc2l6ZS1zZWxlY3Q6Zm9jdXMgeyBib3JkZXItY29sb3I6ICM2MzY2ZjE7IH1cbiAgLnFsLWZvb3Rlci1yaWdodCB7IGRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiBjZW50ZXI7IGdhcDogNHB4OyB9XG4gIC5xbC1yYW5nZS1sYWJlbCB7IGZvbnQtc2l6ZTogMTNweDsgY29sb3I6ICMzNzQxNTE7IG1hcmdpbi1yaWdodDogOHB4OyB9XG4gIC5xbC1uYXYtYnRuIHsgd2lkdGg6IDI4cHg7IGhlaWdodDogMjhweDsgfVxuYDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLXF1ZXN0aW9ubmFpcmUtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9xdWVzdGlvbm5haXJlLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtRVUVTVElPTk5BSVJFX0xJU1RfU1RZTEVTXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIFF1ZXN0aW9ubmFpcmVMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaXRlbXM6IFF1ZXN0aW9ubmFpcmVJdGVtW10gPSBbXTtcbiAgQElucHV0KCkgZGVmYXVsdFBhZ2VTaXplOiBudW1iZXIgPSA2O1xuICBASW5wdXQoKSBwYWdlU2l6ZU9wdGlvbnM6IG51bWJlcltdID0gWzYsIDEwLCAyMCwgNTBdO1xuICBASW5wdXQoKSBpbnB1dFBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnVHlwZSB5b3VyIGFuc3dlciBoZXJlLi4uJztcblxuICBAT3V0cHV0KCkgYW5zd2VyQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGlkOiBzdHJpbmcgfCBudW1iZXI7IHZhbHVlOiBzdHJpbmcgfT4oKTtcblxuICBjdXJyZW50UGFnZSA9IDE7XG4gIHBhZ2VTaXplID0gNjtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXNbJ2RlZmF1bHRQYWdlU2l6ZSddICYmIGNoYW5nZXNbJ2RlZmF1bHRQYWdlU2l6ZSddLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgdGhpcy5wYWdlU2l6ZSA9IHRoaXMuZGVmYXVsdFBhZ2VTaXplO1xuICAgICAgdGhpcy5jdXJyZW50UGFnZSA9IDE7XG4gICAgfVxuICB9XG5cbiAgZ2V0IHRvdGFsSXRlbXMoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5pdGVtcy5sZW5ndGg7XG4gIH1cblxuICBnZXQgdG90YWxQYWdlcygpOiBudW1iZXIge1xuICAgIHJldHVybiBNYXRoLm1heCgxLCBNYXRoLmNlaWwodGhpcy50b3RhbEl0ZW1zIC8gdGhpcy5wYWdlU2l6ZSkpO1xuICB9XG5cbiAgZ2V0IHN0YXJ0SW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gKHRoaXMuY3VycmVudFBhZ2UgLSAxKSAqIHRoaXMucGFnZVNpemU7XG4gIH1cblxuICBnZXQgZW5kSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gTWF0aC5taW4odGhpcy5zdGFydEluZGV4ICsgdGhpcy5wYWdlU2l6ZSwgdGhpcy50b3RhbEl0ZW1zKTtcbiAgfVxuXG4gIGdldCB2aXNpYmxlSXRlbXMoKTogUXVlc3Rpb25uYWlyZUl0ZW1bXSB7XG4gICAgcmV0dXJuIHRoaXMuaXRlbXMuc2xpY2UodGhpcy5zdGFydEluZGV4LCB0aGlzLmVuZEluZGV4KTtcbiAgfVxuXG4gIGdldCBpc1ByZXZEaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50UGFnZSA9PT0gMTtcbiAgfVxuXG4gIGdldCBpc05leHREaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50UGFnZSA9PT0gdGhpcy50b3RhbFBhZ2VzO1xuICB9XG5cbiAgb25QYWdlU2l6ZUNoYW5nZShzaXplOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLnBhZ2VTaXplID0gc2l6ZTtcbiAgICB0aGlzLmN1cnJlbnRQYWdlID0gMTtcbiAgfVxuXG4gIHByZXZQYWdlKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5pc1ByZXZEaXNhYmxlZCkge1xuICAgICAgdGhpcy5jdXJyZW50UGFnZS0tO1xuICAgIH1cbiAgfVxuXG4gIG5leHRQYWdlKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5pc05leHREaXNhYmxlZCkge1xuICAgICAgdGhpcy5jdXJyZW50UGFnZSsrO1xuICAgIH1cbiAgfVxuXG4gIG9uQW5zd2VySW5wdXQoaWQ6IHN0cmluZyB8IG51bWJlciwgdmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuYW5zd2VyQ2hhbmdlLmVtaXQoeyBpZCwgdmFsdWUgfSk7XG4gIH1cblxuICBnZXRJbnB1dElkKGlkOiBzdHJpbmcgfCBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiBgcXVlc3Rpb24taW5wdXQtJHtpZH1gO1xuICB9XG5cbiAgdHJhY2tCeUlkKF9pbmRleDogbnVtYmVyLCBpdGVtOiBRdWVzdGlvbm5haXJlSXRlbSk6IHN0cmluZyB8IG51bWJlciB7XG4gICAgcmV0dXJuIGl0ZW0uaWQ7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJxbC13cmFwcGVyXCIgcm9sZT1cInJlZ2lvblwiIGFyaWEtbGFiZWw9XCJDbGFyaWZpY2F0aW9uIFF1ZXN0aW9ubmFpcmVcIj5cblxuICA8IS0tIEhlYWRlciAtLT5cbiAgPGRpdiBjbGFzcz1cInFsLWhlYWRlclwiPlxuICAgIDxoMiBjbGFzcz1cInFsLXRpdGxlXCI+Q2xhcmlmaWNhdGlvbiBRdWVzdGlvbm5haXJlPC9oMj5cbiAgICA8cCBjbGFzcz1cInFsLXN1YnRpdGxlXCI+XG4gICAgICBUaGUgQUkgaGFzIGdlbmVyYXRlZCB0aGVzZSBxdWVzdGlvbnMgdG8gcmVzb2x2ZSBhbWJpZ3VpdGllcyBpbiB0aGUgcmVxdWlyZW1lbnQuXG4gICAgICBBbnN3ZXJpbmcgdGhlc2Ugd2lsbCByZWdlbmVyYXRlIHNwZWNpZmljIHRlc3QgY2FzZXMuXG4gICAgPC9wPlxuICA8L2Rpdj5cblxuICA8IS0tIFF1ZXN0aW9uIHJvd3MgLS0+XG4gIDxkaXYgY2xhc3M9XCJxbC1ib2R5XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInZpc2libGVJdGVtcy5sZW5ndGg7IGVsc2UgZW1wdHlTdGF0ZVwiPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cInFsLWl0ZW1cIlxuICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiB2aXNpYmxlSXRlbXM7IGxhc3QgYXMgaXNMYXN0OyB0cmFja0J5OiB0cmFja0J5SWRcIlxuICAgICAgICBbY2xhc3MucWwtaXRlbS0tbGFzdF09XCJpc0xhc3RcIlxuICAgICAgPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInFsLWJhZGdlXCI+e3sgaXRlbS5pbmRleCB9fTwvc3Bhbj5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwicWwtbGFiZWxcIiBbZm9yXT1cImdldElucHV0SWQoaXRlbS5pZClcIj57eyBpdGVtLnF1ZXN0aW9uIH19PC9sYWJlbD5cbiAgICAgICAgPGNxYS1jdXN0b20taW5wdXRcbiAgICAgICAgICBbaW5wdXRJZF09XCJnZXRJbnB1dElkKGl0ZW0uaWQpXCJcbiAgICAgICAgICBbdmFsdWVdPVwiaXRlbS5hbnN3ZXJcIlxuICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJpbnB1dFBsYWNlaG9sZGVyXCJcbiAgICAgICAgICBbZnVsbFdpZHRoXT1cInRydWVcIlxuICAgICAgICAgICh2YWx1ZUNoYW5nZSk9XCJvbkFuc3dlcklucHV0KGl0ZW0uaWQsICRldmVudClcIlxuICAgICAgICAgIGNsYXNzPVwicWwtaW5wdXRcIlxuICAgICAgICA+PC9jcWEtY3VzdG9tLWlucHV0PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPG5nLXRlbXBsYXRlICNlbXB0eVN0YXRlPlxuICAgICAgPGRpdiBjbGFzcz1cInFsLWVtcHR5XCI+Tm8gcXVlc3Rpb25zIGF2YWlsYWJsZS48L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L2Rpdj5cblxuICA8IS0tIEZvb3RlcjogcGVyLXBhZ2Ugc2VsZWN0b3IgKyByYW5nZSArIG5hdiAtLT5cbiAgPGRpdiBjbGFzcz1cInFsLWZvb3RlclwiIGFyaWEtbGl2ZT1cInBvbGl0ZVwiPlxuXG4gICAgPGRpdiBjbGFzcz1cInFsLWZvb3Rlci1sZWZ0XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInFsLWZvb3Rlci1sYWJlbFwiPlF1ZXN0aW9ucyBwZXIgcGFnZTwvc3Bhbj5cbiAgICAgIDxzZWxlY3RcbiAgICAgICAgY2xhc3M9XCJxbC1wYWdlLXNpemUtc2VsZWN0XCJcbiAgICAgICAgW3ZhbHVlXT1cInBhZ2VTaXplXCJcbiAgICAgICAgKGNoYW5nZSk9XCJvblBhZ2VTaXplQ2hhbmdlKCskYW55KCRldmVudC50YXJnZXQpLnZhbHVlKVwiXG4gICAgICA+XG4gICAgICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IG9wdCBvZiBwYWdlU2l6ZU9wdGlvbnNcIiBbdmFsdWVdPVwib3B0XCI+e3sgb3B0IH19PC9vcHRpb24+XG4gICAgICA8L3NlbGVjdD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJxbC1mb290ZXItcmlnaHRcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwicWwtcmFuZ2UtbGFiZWxcIj5cbiAgICAgICAge3sgdG90YWxJdGVtcyA/IHN0YXJ0SW5kZXggKyAxIDogMCB9fSZuZGFzaDt7eyBlbmRJbmRleCB9fSBvZiB7eyB0b3RhbEl0ZW1zIH19XG4gICAgICA8L3NwYW4+XG4gICAgICA8Y3FhLWJ1dHRvblxuICAgICAgICB2YXJpYW50PVwib3V0bGluZWRcIlxuICAgICAgICBidG5TaXplPVwic21cIlxuICAgICAgICBpY29uPVwiY2hldnJvbl9sZWZ0XCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImlzUHJldkRpc2FibGVkXCJcbiAgICAgICAgKGNsaWNrZWQpPVwicHJldlBhZ2UoKVwiXG4gICAgICAgIGFyaWEtbGFiZWw9XCJQcmV2aW91cyBwYWdlXCJcbiAgICAgICAgY2xhc3M9XCJxbC1uYXYtYnRuXCJcbiAgICAgID48L2NxYS1idXR0b24+XG4gICAgICA8Y3FhLWJ1dHRvblxuICAgICAgICB2YXJpYW50PVwib3V0bGluZWRcIlxuICAgICAgICBidG5TaXplPVwic21cIlxuICAgICAgICBpY29uPVwiY2hldnJvbl9yaWdodFwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJpc05leHREaXNhYmxlZFwiXG4gICAgICAgIChjbGlja2VkKT1cIm5leHRQYWdlKClcIlxuICAgICAgICBhcmlhLWxhYmVsPVwiTmV4dCBwYWdlXCJcbiAgICAgICAgY2xhc3M9XCJxbC1uYXYtYnRuXCJcbiAgICAgID48L2NxYS1idXR0b24+XG4gICAgPC9kaXY+XG5cbiAgPC9kaXY+XG5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlc3Rpb25uYWlyZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvcXVlc3Rpb25uYWlyZS1saXN0L3F1ZXN0aW9ubmFpcmUtbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3F1ZXN0aW9ubmFpcmUtbGlzdC9xdWVzdGlvbm5haXJlLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVN0SSxNQUFNLE9BQU8sMEJBQTBCO0lBTnZDO1FBT1csVUFBSyxHQUF3QixFQUFFLENBQUM7UUFDaEMsb0JBQWUsR0FBVyxDQUFDLENBQUM7UUFDNUIsb0JBQWUsR0FBYSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVDLHFCQUFnQixHQUFXLDBCQUEwQixDQUFDO1FBRXJELGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQTBDLENBQUM7UUFFcEYsZ0JBQVcsR0FBRyxDQUFDLENBQUM7UUFDaEIsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUNiLGlCQUFZLEdBQUcsS0FBSyxDQUFDO0tBMkZ0QjtJQXZGQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsaUJBQWlCLENBQUMsSUFBSSxPQUFPLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxZQUFZLEVBQUU7WUFDekUsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCxJQUFJLFVBQVU7UUFDWixPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ2hELENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUMxRCxDQUFDO0lBRUQsSUFBSSxjQUFjO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFdBQVcsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELElBQUksY0FBYztRQUNoQixPQUFPLElBQUksQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUM5QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsSUFBWTtRQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztJQUN2QixDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQ3pDLENBQUM7SUFFRCxjQUFjLENBQUMsSUFBWTtRQUN6QixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDNUIsQ0FBQztJQUdELGVBQWUsQ0FBQyxLQUFpQjtRQUMvQixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QixPQUFPO1NBQ1I7UUFDRCxJQUFJLElBQUksQ0FBQyx5QkFBeUIsRUFBRSxhQUFhLEVBQUU7WUFDakQsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLHlCQUF5QixDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQWMsQ0FBQyxDQUFDO1lBQ2xHLElBQUksQ0FBQyxhQUFhLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO2FBQzNCO1NBQ0Y7YUFBTTtZQUNMLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN4QixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDcEI7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsRUFBbUIsRUFBRSxLQUFhO1FBQzlDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELFVBQVUsQ0FBQyxFQUFtQjtRQUM1QixPQUFPLGtCQUFrQixFQUFFLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsU0FBUyxDQUFDLE1BQWMsRUFBRSxJQUF1QjtRQUMvQyxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDakIsQ0FBQzs7dUhBcEdVLDBCQUEwQjsyR0FBMUIsMEJBQTBCLHFmQ1R2Qyx3c0xBeUZBOzJGRGhGYSwwQkFBMEI7a0JBTnRDLFNBQVM7K0JBQ0Usd0JBQXdCLFFBRzVCLEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRTs4QkFHckIsS0FBSztzQkFBYixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFNb0QseUJBQXlCO3NCQUFuRixTQUFTO3VCQUFDLDJCQUEyQixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFvRHpELGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBRdWVzdGlvbm5haXJlSXRlbSB9IGZyb20gJy4vcXVlc3Rpb25uYWlyZS1saXN0LnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLXF1ZXN0aW9ubmFpcmUtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9xdWVzdGlvbm5haXJlLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9xdWVzdGlvbm5haXJlLWxpc3QuY29tcG9uZW50LnNjc3MnXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIFF1ZXN0aW9ubmFpcmVMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaXRlbXM6IFF1ZXN0aW9ubmFpcmVJdGVtW10gPSBbXTtcbiAgQElucHV0KCkgZGVmYXVsdFBhZ2VTaXplOiBudW1iZXIgPSA2O1xuICBASW5wdXQoKSBwYWdlU2l6ZU9wdGlvbnM6IG51bWJlcltdID0gWzYsIDEwLCAyMCwgNTBdO1xuICBASW5wdXQoKSBpbnB1dFBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnVHlwZSB5b3VyIGFuc3dlciBoZXJlLi4uJztcblxuICBAT3V0cHV0KCkgYW5zd2VyQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGlkOiBzdHJpbmcgfCBudW1iZXI7IHZhbHVlOiBzdHJpbmcgfT4oKTtcblxuICBjdXJyZW50UGFnZSA9IDE7XG4gIHBhZ2VTaXplID0gNjtcbiAgcGFnZVNpemVPcGVuID0gZmFsc2U7XG5cbiAgQFZpZXdDaGlsZCgncGFnZVNpemVEcm9wZG93bkNvbnRhaW5lcicsIHsgc3RhdGljOiBmYWxzZSB9KSBwYWdlU2l6ZURyb3Bkb3duQ29udGFpbmVyITogRWxlbWVudFJlZjtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXNbJ2RlZmF1bHRQYWdlU2l6ZSddICYmIGNoYW5nZXNbJ2RlZmF1bHRQYWdlU2l6ZSddLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgdGhpcy5wYWdlU2l6ZSA9IHRoaXMuZGVmYXVsdFBhZ2VTaXplO1xuICAgICAgdGhpcy5jdXJyZW50UGFnZSA9IDE7XG4gICAgfVxuICB9XG5cbiAgZ2V0IHRvdGFsSXRlbXMoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5pdGVtcy5sZW5ndGg7XG4gIH1cblxuICBnZXQgdG90YWxQYWdlcygpOiBudW1iZXIge1xuICAgIHJldHVybiBNYXRoLm1heCgxLCBNYXRoLmNlaWwodGhpcy50b3RhbEl0ZW1zIC8gdGhpcy5wYWdlU2l6ZSkpO1xuICB9XG5cbiAgZ2V0IHN0YXJ0SW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gKHRoaXMuY3VycmVudFBhZ2UgLSAxKSAqIHRoaXMucGFnZVNpemU7XG4gIH1cblxuICBnZXQgZW5kSW5kZXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gTWF0aC5taW4odGhpcy5zdGFydEluZGV4ICsgdGhpcy5wYWdlU2l6ZSwgdGhpcy50b3RhbEl0ZW1zKTtcbiAgfVxuXG4gIGdldCB2aXNpYmxlSXRlbXMoKTogUXVlc3Rpb25uYWlyZUl0ZW1bXSB7XG4gICAgcmV0dXJuIHRoaXMuaXRlbXMuc2xpY2UodGhpcy5zdGFydEluZGV4LCB0aGlzLmVuZEluZGV4KTtcbiAgfVxuXG4gIGdldCBpc1ByZXZEaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50UGFnZSA9PT0gMTtcbiAgfVxuXG4gIGdldCBpc05leHREaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50UGFnZSA9PT0gdGhpcy50b3RhbFBhZ2VzO1xuICB9XG5cbiAgb25QYWdlU2l6ZUNoYW5nZShzaXplOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLnBhZ2VTaXplID0gc2l6ZTtcbiAgICB0aGlzLmN1cnJlbnRQYWdlID0gMTtcbiAgfVxuXG4gIHRvZ2dsZVBhZ2VTaXplTWVudSgpOiB2b2lkIHtcbiAgICB0aGlzLnBhZ2VTaXplT3BlbiA9ICF0aGlzLnBhZ2VTaXplT3BlbjtcbiAgfVxuXG4gIHNlbGVjdFBhZ2VTaXplKHNpemU6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMub25QYWdlU2l6ZUNoYW5nZShzaXplKTtcbiAgICB0aGlzLnBhZ2VTaXplT3BlbiA9IGZhbHNlO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6Y2xpY2snLCBbJyRldmVudCddKVxuICBvbkRvY3VtZW50Q2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMucGFnZVNpemVPcGVuKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLnBhZ2VTaXplRHJvcGRvd25Db250YWluZXI/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIGNvbnN0IGNsaWNrZWRJbnNpZGUgPSB0aGlzLnBhZ2VTaXplRHJvcGRvd25Db250YWluZXIubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQgYXMgTm9kZSk7XG4gICAgICBpZiAoIWNsaWNrZWRJbnNpZGUpIHtcbiAgICAgICAgdGhpcy5wYWdlU2l6ZU9wZW4gPSBmYWxzZTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5wYWdlU2l6ZU9wZW4gPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBwcmV2UGFnZSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuaXNQcmV2RGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuY3VycmVudFBhZ2UtLTtcbiAgICB9XG4gIH1cblxuICBuZXh0UGFnZSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuaXNOZXh0RGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuY3VycmVudFBhZ2UrKztcbiAgICB9XG4gIH1cblxuICBvbkFuc3dlcklucHV0KGlkOiBzdHJpbmcgfCBudW1iZXIsIHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmFuc3dlckNoYW5nZS5lbWl0KHsgaWQsIHZhbHVlIH0pO1xuICB9XG5cbiAgZ2V0SW5wdXRJZChpZDogc3RyaW5nIHwgbnVtYmVyKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYHF1ZXN0aW9uLWlucHV0LSR7aWR9YDtcbiAgfVxuXG4gIHRyYWNrQnlJZChfaW5kZXg6IG51bWJlciwgaXRlbTogUXVlc3Rpb25uYWlyZUl0ZW0pOiBzdHJpbmcgfCBudW1iZXIge1xuICAgIHJldHVybiBpdGVtLmlkO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFMkU4RjBdIGNxYS1yb3VuZGVkLXhsIGNxYS1zaGFkb3ctWzBfMXB4XzJweF9yZ2JhKDAsMCwwLDAuMDUpXSBjcWEtZm9udC1pbnRlclwiIHJvbGU9XCJyZWdpb25cIiBhcmlhLWxhYmVsPVwiQ2xhcmlmaWNhdGlvbiBRdWVzdGlvbm5haXJlXCI+XG5cbiAgPCEtLSBIZWFkZXIgLS0+XG4gIDxkaXYgY2xhc3M9XCJjcWEtcHktMyBjcWEtcHgtNiBjcWEtYmctWyNFRUYyRkY4MF1cIj5cbiAgICA8aDIgY2xhc3M9XCJjcWEtdGV4dC1bMThweF0gY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjMEYxNzJBXSBjcWEtbGVhZGluZy1bMjJweF0gY3FhLW0tMCBjcWEtbWItMVwiPkNsYXJpZmljYXRpb24gUXVlc3Rpb25uYWlyZTwvaDI+XG4gICAgPHAgY2xhc3M9XCJjcWEtdGV4dC1bMTRweF0gY3FhLXRleHQtWyM0NzU1NjldIGNxYS1sZWFkaW5nLVsxOHB4XSBjcWEtbS0wXCI+XG4gICAgICBUaGUgQUkgaGFzIGdlbmVyYXRlZCB0aGVzZSBxdWVzdGlvbnMgdG8gcmVzb2x2ZSBhbWJpZ3VpdGllcyBpbiB0aGUgcmVxdWlyZW1lbnQuXG4gICAgICBBbnN3ZXJpbmcgdGhlc2Ugd2lsbCByZWdlbmVyYXRlIHNwZWNpZmljIHRlc3QgY2FzZXMuXG4gICAgPC9wPlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwiY3FhLXB4LTYgY3FhLXB5LTNcIj5cbiAgICA8IS0tIFF1ZXN0aW9uIHJvd3MgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtZ2FwLTNcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ2aXNpYmxlSXRlbXMubGVuZ3RoOyBlbHNlIGVtcHR5U3RhdGVcIj5cbiAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiB2aXNpYmxlSXRlbXM7IGxhc3QgYXMgaXNMYXN0OyB0cmFja0J5OiB0cmFja0J5SWRcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTIuNSBjcWEtbWItMlwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtaW5saW5lLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLXctWzI0cHhdIGNxYS1oLVsyNHB4XSBjcWEtbWluLXctWzI0cHhdIGNxYS1yb3VuZGVkLWZ1bGwgY3FhLWJnLVsjRUVGMkZGXSBjcWEtdGV4dC1bIzRGNDZFNV0gY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxOHB4XSBjcWEtZm9udC1ib2xkIGNxYS1zaHJpbmstMFwiPnt7IGl0ZW0uaW5kZXggfX08L3NwYW4+XG4gICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJjcWEtdGV4dC1bMTJweF0gY3FhLWxlYWRpbmctWzE1cHhdIGNxYS10ZXh0LVsjMEYxNzJBXVwiIFtmb3JdPVwiZ2V0SW5wdXRJZChpdGVtLmlkKVwiPnt7IGl0ZW0ucXVlc3Rpb24gfX08L2xhYmVsPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxjcWEtY3VzdG9tLWlucHV0XG4gICAgICAgICAgICBbaW5wdXRJZF09XCJnZXRJbnB1dElkKGl0ZW0uaWQpXCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJpdGVtLmFuc3dlclwiXG4gICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwiaW5wdXRQbGFjZWhvbGRlclwiXG4gICAgICAgICAgICBbZnVsbFdpZHRoXT1cInRydWVcIlxuICAgICAgICAgICAgKHZhbHVlQ2hhbmdlKT1cIm9uQW5zd2VySW5wdXQoaXRlbS5pZCwgJGV2ZW50KVwiXG4gICAgICAgICAgICBjbGFzcz1cImNxYS13LWZ1bGxcIlxuICAgICAgICAgID48L2NxYS1jdXN0b20taW5wdXQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8bmctdGVtcGxhdGUgI2VtcHR5U3RhdGU+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtcHktNiBjcWEtdGV4dC1bMTNweF0gY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LWNlbnRlclwiPk5vIHF1ZXN0aW9ucyBhdmFpbGFibGUuPC9kaXY+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBGb290ZXI6IGFsaWduZWQgd2l0aCB0YWJsZSBwYWdpbmF0aW9uIGRlc2lnbiAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiY3FhLW10LTMgdGFibGUtZm9vdGVyLXBhZ2luYXRpb24gY3FhLXRleHQtWyM3MTcxODJdIGNxYS10ZXh0LVsxMnB4XSBjcWEtbGVhZGluZy1bMTVweF0gY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS1nYXAtMiBjcWEtZmxleC13cmFwIGNxYS1weC1bMjFweF0gY3FhLXB5LTEuNVwiIGFyaWEtbGl2ZT1cInBvbGl0ZVwiIHN0eWxlPVwiYm9yZGVyLXRvcDogMXB4IHNvbGlkICNFNUU3RUI7XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicGFnaW5hdGlvbi1pbmZvIGNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWdhcC1bN3B4XSBjcWEtcmVsYXRpdmVcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJyb3dzLWxhYmVsXCI+UXVlc3Rpb25zIHBlciBwYWdlPC9zcGFuPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLXJlbGF0aXZlXCIgI3BhZ2VTaXplRHJvcGRvd25Db250YWluZXI+XG4gICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICBjbGFzcz1cImNxYS1pbmxpbmUtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtWzI0cHhdIGNxYS10ZXh0LVsjMEEwQTBBXSBjcWEtcHgtWzExLjVweF0gY3FhLXB5LVs2Ljc1cHhdXCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVQYWdlU2l6ZU1lbnUoKVwiXG4gICAgICAgICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cInBhZ2VTaXplT3BlblwiXG4gICAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgICBhcmlhLWxhYmVsPVwiUXVlc3Rpb25zIHBlciBwYWdlXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7eyBwYWdlU2l6ZSB9fVxuICAgICAgICAgICAgPHN2ZyB3aWR0aD1cIjE0XCIgaGVpZ2h0PVwiMTRcIiB2aWV3Qm94PVwiMCAwIDE0IDE0XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+PGcgb3BhY2l0eT1cIjAuNVwiPjxwYXRoIGQ9XCJNMy41IDUuMjVMNyA4Ljc1TDEwLjUgNS4yNVwiIHN0cm9rZT1cIiM3MTcxODJcIiBzdHJva2Utd2lkdGg9XCIxLjE2NjY3XCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIvPjwvZz48L3N2Zz5cbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAqbmdJZj1cInBhZ2VTaXplT3BlblwiXG4gICAgICAgICAgICBjbGFzcz1cImNxYS1hYnNvbHV0ZSBjcWEtei1bMTAwXSBjcWEtYm90dG9tLVtjYWxjKDEwMCUrOHB4KV0gY3FhLWxlZnQtMCBjcWEtdy1bNzVweF0gY3FhLW1heC1oLVsxNzBweF0gY3FhLW92ZXJmbG93LWF1dG8gY3FhLXJvdW5kZWQtbGcgY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtYmctd2hpdGUgY3FhLXNoYWRvdy1bMHB4XzRweF82cHhfLTFweF9yZ2JhKDAsMCwwLDAuMSldIGNxYS1wLVs1cHhdXCJcbiAgICAgICAgICAgIHJvbGU9XCJsaXN0Ym94XCJcbiAgICAgICAgICAgIFthdHRyLmFyaWEtYWN0aXZlZGVzY2VuZGFudF09XCIncXVlc3Rpb24tcGFnZXNpemUtJyArIHBhZ2VTaXplXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBvcHQgb2YgcGFnZVNpemVPcHRpb25zXCJcbiAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtcHgtMiBjcWEtcHktWzZweF0gaG92ZXI6Y3FhLWJnLVsjRjdGOEZBXSBjcWEtdGV4dC1sZWZ0IGNxYS1yb3VuZGVkLW1kIGNxYS10ZXh0LWJsYWNrLTEwMFwiXG4gICAgICAgICAgICAgIFthdHRyLmlkXT1cIidxdWVzdGlvbi1wYWdlc2l6ZS0nICsgb3B0XCJcbiAgICAgICAgICAgICAgcm9sZT1cIm9wdGlvblwiXG4gICAgICAgICAgICAgIFthdHRyLmFyaWEtc2VsZWN0ZWRdPVwicGFnZVNpemUgPT09IG9wdFwiXG4gICAgICAgICAgICAgIChjbGljayk9XCJzZWxlY3RQYWdlU2l6ZShvcHQpXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3sgb3B0IH19XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tcmlnaHQgY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLVsyMXB4XVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicGFnaW5hdGlvbi1yYW5nZVwiPlxuICAgICAgICAgIHt7IHRvdGFsSXRlbXMgPyBzdGFydEluZGV4ICsgMSA6IDAgfX0mbmRhc2g7e3sgZW5kSW5kZXggfX0gb2Yge3sgdG90YWxJdGVtcyB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tY29udHJvbHMgY3FhLWZsZXggY3FhLWl0ZW1zLXN0cmV0Y2ggY3FhLWdhcC1bMy41cHhdXCI+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInBhZ2luYXRpb24tYnRuIGNxYS13LVsyOHB4XSBjcWEtaC1bMjhweF0gY3FhLW1pbi13LVsyOHB4XSBjcWEtcm91bmRlZC1bNXB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLWJnLVsjRjdGOEZBXSBjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBkaXNhYmxlZDpjcWEtb3BhY2l0eS01MCBkaXNhYmxlZDpjcWEtY3Vyc29yLW5vdC1hbGxvd2VkXCIgW2Rpc2FibGVkXT1cImlzUHJldkRpc2FibGVkXCIgKGNsaWNrKT1cInByZXZQYWdlKClcIiBhcmlhLWxhYmVsPVwiUHJldmlvdXMgcGFnZVwiPlxuICAgICAgICAgICAgPHN2ZyB3aWR0aD1cIjE0XCIgaGVpZ2h0PVwiMTRcIiB2aWV3Qm94PVwiMCAwIDE0IDE0XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+PHBhdGggZD1cIk04Ljc1IDEwLjVMNS4yNSA3TDguNzUgMy41XCIgc3Ryb2tlPVwiIzBBMEEwQVwiIHN0cm9rZS13aWR0aD1cIjEuMTY2NjdcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIi8+PC9zdmc+XG4gICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInBhZ2luYXRpb24tYnRuIGNxYS13LVsyOHB4XSBjcWEtaC1bMjhweF0gY3FhLW1pbi13LVsyOHB4XSBjcWEtcm91bmRlZC1bNXB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLWJnLVsjRjdGOEZBXSBjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBkaXNhYmxlZDpjcWEtb3BhY2l0eS01MCBkaXNhYmxlZDpjcWEtY3Vyc29yLW5vdC1hbGxvd2VkXCIgW2Rpc2FibGVkXT1cImlzTmV4dERpc2FibGVkXCIgKGNsaWNrKT1cIm5leHRQYWdlKClcIiBhcmlhLWxhYmVsPVwiTmV4dCBwYWdlXCI+XG4gICAgICAgICAgICA8c3ZnIHdpZHRoPVwiMTRcIiBoZWlnaHQ9XCIxNFwiIHZpZXdCb3g9XCIwIDAgMTQgMTRcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj48cGF0aCBkPVwiTTUuMjUgMTAuNUw4Ljc1IDdMNS4yNSAzLjVcIiBzdHJva2U9XCIjMEEwQTBBXCIgc3Ryb2tlLXdpZHRoPVwiMS4xNjY2N1wiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiLz48L3N2Zz5cbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbjwvZGl2PlxuIl19

package/fesm2015/cqa-lib-cqa-ui.mjs

@@ -42662,28 +42662,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
-const QUESTIONNAIRE_LIST_STYLES = `
-  :host { display: block; width: 100%; }
-  .ql-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
-  .ql-header { margin-bottom: 20px; }
-  .ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
-  .ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
-  .ql-body { display: flex; flex-direction: column; }
-  .ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
-  .ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
-  .ql-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0ff; color: #4f46e5; font-size: 12px; font-weight: 600; flex-shrink: 0; }
-  .ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
-  .ql-input { width: 100%; }
-  .ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
-  .ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
-  .ql-footer-left { display: flex; align-items: center; }
-  .ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
-  .ql-page-size-select { width: 72px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 6px; font-size: 13px; color: #374151; background: #ffffff; cursor: pointer; outline: none; }
-  .ql-page-size-select:focus { border-color: #6366f1; }
-  .ql-footer-right { display: flex; align-items: center; gap: 4px; }
-  .ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
-  .ql-nav-btn { width: 28px; height: 28px; }
-`;
 class QuestionnaireListComponent {
     constructor() {
         this.items = [];
@@ -42693,6 +42671,7 @@ class QuestionnaireListComponent {
         this.answerChange = new EventEmitter();
         this.currentPage = 1;
         this.pageSize = 6;
+        this.pageSizeOpen = false;
     }
     ngOnChanges(changes) {
         if (changes['defaultPageSize'] && changes['defaultPageSize'].currentValue) {
@@ -42725,6 +42704,28 @@ class QuestionnaireListComponent {
         this.pageSize = size;
         this.currentPage = 1;
     }
+    togglePageSizeMenu() {
+        this.pageSizeOpen = !this.pageSizeOpen;
+    }
+    selectPageSize(size) {
+        this.onPageSizeChange(size);
+        this.pageSizeOpen = false;
+    }
+    onDocumentClick(event) {
+        var _a;
+        if (!this.pageSizeOpen) {
+            return;
+        }
+        if ((_a = this.pageSizeDropdownContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+            const clickedInside = this.pageSizeDropdownContainer.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.pageSizeOpen = false;
+            }
+        }
+        else {
+            this.pageSizeOpen = false;
+        }
+    }
     prevPage() {
         if (!this.isPrevDisabled) {
             this.currentPage--;
@@ -42746,10 +42747,10 @@ class QuestionnaireListComponent {
     }
 }
 QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"ql-header\">\n    <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n    <p class=\"ql-subtitle\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <!-- Question rows -->\n  <div class=\"ql-body\">\n    <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n      <div\n        class=\"ql-item\"\n        *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n        [class.ql-item--last]=\"isLast\"\n      >\n        <span class=\"ql-badge\">{{ item.index }}</span>\n        <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n        <cqa-custom-input\n          [inputId]=\"getInputId(item.id)\"\n          [value]=\"item.answer\"\n          [placeholder]=\"inputPlaceholder\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"onAnswerInput(item.id, $event)\"\n          class=\"ql-input\"\n        ></cqa-custom-input>\n      </div>\n    </ng-container>\n    <ng-template #emptyState>\n      <div class=\"ql-empty\">No questions available.</div>\n    </ng-template>\n  </div>\n\n  <!-- Footer: per-page selector + range + nav -->\n  <div class=\"ql-footer\" aria-live=\"polite\">\n\n    <div class=\"ql-footer-left\">\n      <span class=\"ql-footer-label\">Questions per page</span>\n      <select\n        class=\"ql-page-size-select\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n      >\n        <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n      </select>\n    </div>\n\n    <div class=\"ql-footer-right\">\n      <span class=\"ql-range-label\">\n        {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n      </span>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_left\"\n        [disabled]=\"isPrevDisabled\"\n        (clicked)=\"prevPage()\"\n        aria-label=\"Previous page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_right\"\n        [disabled]=\"isNextDisabled\"\n        (clicked)=\"nextPage()\"\n        aria-label=\"Next page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n    </div>\n\n  </div>\n\n</div>\n", styles: [":host{display:block;width:100%}.ql-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ql-header{margin-bottom:20px}.ql-title{font-size:16px;font-weight:600;color:#1a1d23;margin:0 0 4px;line-height:1.4}.ql-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0;line-height:1.5}.ql-body{display:flex;flex-direction:column}.ql-item{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.ql-item.ql-item--last{border-bottom:none;margin-bottom:0}.ql-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-size:12px;font-weight:600;flex-shrink:0}.ql-label{display:block;font-size:13px;font-weight:500;color:#374151}.ql-input{width:100%}.ql-empty{padding:24px 0;font-size:13px;color:#6b7280;text-align:center}.ql-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid #f3f4f6}.ql-footer-left{display:flex;align-items:center}.ql-footer-label{font-size:13px;color:#6b7280;margin-right:8px}.ql-page-size-select{width:72px;height:28px;border:1px solid #e5e7eb;border-radius:4px;padding:0 6px;font-size:13px;color:#374151;background:#ffffff;cursor:pointer;outline:none}.ql-page-size-select:focus{border-color:#6366f1}.ql-footer-right{display:flex;align-items:center;gap:4px}.ql-range-label{font-size:13px;color:#374151;margin-right:8px}.ql-nav-btn{width:28px;height:28px}\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-questionnaire-list', styles: [QUESTIONNAIRE_LIST_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"ql-header\">\n    <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n    <p class=\"ql-subtitle\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <!-- Question rows -->\n  <div class=\"ql-body\">\n    <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n      <div\n        class=\"ql-item\"\n        *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n        [class.ql-item--last]=\"isLast\"\n      >\n        <span class=\"ql-badge\">{{ item.index }}</span>\n        <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n        <cqa-custom-input\n          [inputId]=\"getInputId(item.id)\"\n          [value]=\"item.answer\"\n          [placeholder]=\"inputPlaceholder\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"onAnswerInput(item.id, $event)\"\n          class=\"ql-input\"\n        ></cqa-custom-input>\n      </div>\n    </ng-container>\n    <ng-template #emptyState>\n      <div class=\"ql-empty\">No questions available.</div>\n    </ng-template>\n  </div>\n\n  <!-- Footer: per-page selector + range + nav -->\n  <div class=\"ql-footer\" aria-live=\"polite\">\n\n    <div class=\"ql-footer-left\">\n      <span class=\"ql-footer-label\">Questions per page</span>\n      <select\n        class=\"ql-page-size-select\"\n        [value]=\"pageSize\"\n        (change)=\"onPageSizeChange(+$any($event.target).value)\"\n      >\n        <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n      </select>\n    </div>\n\n    <div class=\"ql-footer-right\">\n      <span class=\"ql-range-label\">\n        {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n      </span>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_left\"\n        [disabled]=\"isPrevDisabled\"\n        (clicked)=\"prevPage()\"\n        aria-label=\"Previous page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"sm\"\n        icon=\"chevron_right\"\n        [disabled]=\"isNextDisabled\"\n        (clicked)=\"nextPage()\"\n        aria-label=\"Next page\"\n        class=\"ql-nav-btn\"\n      ></cqa-button>\n    </div>\n\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""] }]
         }], propDecorators: { items: [{
                 type: Input
             }], defaultPageSize: [{
@@ -42760,6 +42761,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], answerChange: [{
                 type: Output
+            }], pageSizeDropdownContainer: [{
+                type: ViewChild,
+                args: ['pageSizeDropdownContainer', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 /** Maps known eventType strings to Material icon names. */