@cqa-lib/cqa-ui 1.1.448 → 1.1.449
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs +33 -29
- package/fesm2015/cqa-lib-cqa-ui.mjs +31 -24
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +30 -24
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/questionnaire-list/questionnaire-list.component.d.ts +6 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -42533,28 +42533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42533
42533
|
type: Output
|
|
42534
42534
|
}] } });
|
|
42535
42535
|
|
|
42536
|
-
const QUESTIONNAIRE_LIST_STYLES = `
|
|
42537
|
-
:host { display: block; width: 100%; }
|
|
42538
|
-
.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; }
|
|
42539
|
-
.ql-header { margin-bottom: 20px; }
|
|
42540
|
-
.ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
|
|
42541
|
-
.ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
|
|
42542
|
-
.ql-body { display: flex; flex-direction: column; }
|
|
42543
|
-
.ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
|
|
42544
|
-
.ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
|
|
42545
|
-
.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; }
|
|
42546
|
-
.ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
|
|
42547
|
-
.ql-input { width: 100%; }
|
|
42548
|
-
.ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
|
|
42549
|
-
.ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
|
|
42550
|
-
.ql-footer-left { display: flex; align-items: center; }
|
|
42551
|
-
.ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
|
|
42552
|
-
.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; }
|
|
42553
|
-
.ql-page-size-select:focus { border-color: #6366f1; }
|
|
42554
|
-
.ql-footer-right { display: flex; align-items: center; gap: 4px; }
|
|
42555
|
-
.ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
|
|
42556
|
-
.ql-nav-btn { width: 28px; height: 28px; }
|
|
42557
|
-
`;
|
|
42558
42536
|
class QuestionnaireListComponent {
|
|
42559
42537
|
constructor() {
|
|
42560
42538
|
this.items = [];
|
|
@@ -42564,6 +42542,7 @@ class QuestionnaireListComponent {
|
|
|
42564
42542
|
this.answerChange = new EventEmitter();
|
|
42565
42543
|
this.currentPage = 1;
|
|
42566
42544
|
this.pageSize = 6;
|
|
42545
|
+
this.pageSizeOpen = false;
|
|
42567
42546
|
}
|
|
42568
42547
|
ngOnChanges(changes) {
|
|
42569
42548
|
if (changes['defaultPageSize'] && changes['defaultPageSize'].currentValue) {
|
|
@@ -42596,6 +42575,27 @@ class QuestionnaireListComponent {
|
|
|
42596
42575
|
this.pageSize = size;
|
|
42597
42576
|
this.currentPage = 1;
|
|
42598
42577
|
}
|
|
42578
|
+
togglePageSizeMenu() {
|
|
42579
|
+
this.pageSizeOpen = !this.pageSizeOpen;
|
|
42580
|
+
}
|
|
42581
|
+
selectPageSize(size) {
|
|
42582
|
+
this.onPageSizeChange(size);
|
|
42583
|
+
this.pageSizeOpen = false;
|
|
42584
|
+
}
|
|
42585
|
+
onDocumentClick(event) {
|
|
42586
|
+
if (!this.pageSizeOpen) {
|
|
42587
|
+
return;
|
|
42588
|
+
}
|
|
42589
|
+
if (this.pageSizeDropdownContainer?.nativeElement) {
|
|
42590
|
+
const clickedInside = this.pageSizeDropdownContainer.nativeElement.contains(event.target);
|
|
42591
|
+
if (!clickedInside) {
|
|
42592
|
+
this.pageSizeOpen = false;
|
|
42593
|
+
}
|
|
42594
|
+
}
|
|
42595
|
+
else {
|
|
42596
|
+
this.pageSizeOpen = false;
|
|
42597
|
+
}
|
|
42598
|
+
}
|
|
42599
42599
|
prevPage() {
|
|
42600
42600
|
if (!this.isPrevDisabled) {
|
|
42601
42601
|
this.currentPage--;
|
|
@@ -42617,10 +42617,10 @@ class QuestionnaireListComponent {
|
|
|
42617
42617
|
}
|
|
42618
42618
|
}
|
|
42619
42619
|
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42620
|
-
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=\"
|
|
42620
|
+
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 }}–{{ 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"] }] });
|
|
42621
42621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42622
42622
|
type: Component,
|
|
42623
|
-
args: [{ selector: 'cqa-questionnaire-list',
|
|
42623
|
+
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 }}–{{ 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: [""] }]
|
|
42624
42624
|
}], propDecorators: { items: [{
|
|
42625
42625
|
type: Input
|
|
42626
42626
|
}], defaultPageSize: [{
|
|
@@ -42631,6 +42631,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42631
42631
|
type: Input
|
|
42632
42632
|
}], answerChange: [{
|
|
42633
42633
|
type: Output
|
|
42634
|
+
}], pageSizeDropdownContainer: [{
|
|
42635
|
+
type: ViewChild,
|
|
42636
|
+
args: ['pageSizeDropdownContainer', { static: false }]
|
|
42637
|
+
}], onDocumentClick: [{
|
|
42638
|
+
type: HostListener,
|
|
42639
|
+
args: ['document:click', ['$event']]
|
|
42634
42640
|
}] } });
|
|
42635
42641
|
|
|
42636
42642
|
/** Maps known eventType strings to Material icon names. */
|