@cqa-lib/cqa-ui 1.1.312 → 1.1.314
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/dynamic-select/dynamic-select-field.component.mjs +16 -3
- package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +14 -4
- package/esm2020/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.mjs +15 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs +42 -5
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +41 -5
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dynamic-select/dynamic-select-field.component.d.ts +1 -0
- package/lib/test-case-details/loop-step/loop-step.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1943,6 +1943,19 @@ class DynamicSelectFieldComponent {
|
|
|
1943
1943
|
get isMultiple() {
|
|
1944
1944
|
return this.toBoolean(this.config?.multiple);
|
|
1945
1945
|
}
|
|
1946
|
+
get singleSelectedDisplayLabel() {
|
|
1947
|
+
const key = this.config?.key;
|
|
1948
|
+
if (!key || !this.form || this.isMultiple)
|
|
1949
|
+
return '';
|
|
1950
|
+
const controlValue = this.form.get(key)?.value;
|
|
1951
|
+
if (controlValue === null || controlValue === undefined || controlValue === '')
|
|
1952
|
+
return '';
|
|
1953
|
+
const matchedOption = (this.config?.options || []).find((opt) => this.getOptionValue(opt) === controlValue || String(this.getOptionValue(opt)) === String(controlValue));
|
|
1954
|
+
if (matchedOption) {
|
|
1955
|
+
return String(matchedOption.name ?? matchedOption.label ?? matchedOption.value ?? matchedOption.id ?? '');
|
|
1956
|
+
}
|
|
1957
|
+
return String(controlValue);
|
|
1958
|
+
}
|
|
1946
1959
|
get isDisabled() {
|
|
1947
1960
|
return this.toBoolean(this.config?.disabled);
|
|
1948
1961
|
}
|
|
@@ -2508,10 +2521,10 @@ class DynamicSelectFieldComponent {
|
|
|
2508
2521
|
}
|
|
2509
2522
|
}
|
|
2510
2523
|
DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2511
|
-
DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n New\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n <ng-container *ngIf=\"config.isCompareRuns\"> \n <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #checkboxDefaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </span>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-container>\n <ng-template #compareRunsDefaultOptionTpl>\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #defaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!config.isCompareRuns\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2524
|
+
DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n {{ singleSelectedDisplayLabel }}\n </mat-select-trigger>\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n New\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n <ng-container *ngIf=\"config.isCompareRuns\"> \n <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #checkboxDefaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </span>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-container>\n <ng-template #compareRunsDefaultOptionTpl>\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #defaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!config.isCompareRuns\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2512
2525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
|
|
2513
2526
|
type: Component,
|
|
2514
|
-
args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n New\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n <ng-container *ngIf=\"config.isCompareRuns\"> \n <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #checkboxDefaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </span>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-container>\n <ng-template #compareRunsDefaultOptionTpl>\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #defaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!config.isCompareRuns\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>" }]
|
|
2527
|
+
args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <ng-container [formGroup]=\"form\">\n <label *ngIf=\"config.label\"\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n config.label }}</label>\n <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n {{ singleSelectedDisplayLabel }}\n </mat-select-trigger>\n\n <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n placeholder=\"Search...\" />\n </mat-option>\n \n <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n </span>\n </ng-container>\n <ng-template #selectAllDefaultTpl>\n {{ config.selectAllLabel || 'All' }}\n </ng-template>\n </mat-option>\n\n <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n New\n </mat-option>\n\n <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n <ng-container *ngIf=\"config.isCompareRuns\"> \n <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #checkboxDefaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </span>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-container>\n <ng-template #compareRunsDefaultOptionTpl>\n <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"hasHighlighting\"\n [style.color]=\"opt.statusColor || null\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n <ng-container *ngIf=\"!hasHighlighting\">\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }} </span>\n </span>\n <ng-template #defaultLabel>\n <span\n class=\"cqa-min-w-0 cqa-compare-runs\"\n [style.color]=\"opt.statusColor || null\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n <span\n *ngIf=\"opt.durationFormatted\"\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n [ngClass]=\"{\n 'cqa-min-w-[82px]': opt?.hasHourRun,\n 'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n 'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n }\">\n <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ opt.durationFormatted }}</span>\n </span>\n </span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!config.isCompareRuns\">\n <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n <span class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span class=\"cqa-min-w-0\"\n *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n </span>\n <!-- Otherwise use normal/highlighted text rendering -->\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n </span>\n <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n {{ opt.name ?? opt.label ?? opt.value }}\n </span>\n </ng-template>\n </ng-container>\n </mat-option>\n \n <!-- No results state (only when not loading and no options) -->\n <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n No results\n </mat-option>\n <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n </mat-option>\n </mat-select>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n </ng-container>\n</div>" }]
|
|
2515
2528
|
}], propDecorators: { form: [{
|
|
2516
2529
|
type: Input
|
|
2517
2530
|
}], config: [{
|
|
@@ -21765,6 +21778,9 @@ class TestCaseDetailsRendererComponent {
|
|
|
21765
21778
|
/** Update only data profile / options inputs on existing instance (avoids full recreate and losing isEditing). */
|
|
21766
21779
|
updateOptionsInputs(instance) {
|
|
21767
21780
|
if (isLoopStepConfig(this.step) || isConditionStepConfig(this.step) || isStepGroupConfig(this.step)) {
|
|
21781
|
+
const prevOptions = instance.dataProfileOptions;
|
|
21782
|
+
const prevHasMore = instance.hasMoreDataProfiles;
|
|
21783
|
+
const prevLoading = instance.isLoadingDataProfiles;
|
|
21768
21784
|
instance.dataProfileOptions = this.dataProfileOptions;
|
|
21769
21785
|
instance.hasMoreDataProfiles = this.hasMoreDataProfiles;
|
|
21770
21786
|
instance.isLoadingDataProfiles = this.isLoadingDataProfiles;
|
|
@@ -21772,6 +21788,16 @@ class TestCaseDetailsRendererComponent {
|
|
|
21772
21788
|
instance.addStepBetweenAbove = this.addStepBetweenAbove;
|
|
21773
21789
|
instance.addStepBetweenBelow = this.addStepBetweenBelow;
|
|
21774
21790
|
instance.addStepBetween = this.addStepBetween;
|
|
21791
|
+
// Trigger ngOnChanges so the step updates its Test Data profile select config (search/load more options).
|
|
21792
|
+
// Dynamically created components do not get @Input() change detection from the template.
|
|
21793
|
+
if (typeof instance.ngOnChanges === 'function') {
|
|
21794
|
+
const changes = {
|
|
21795
|
+
dataProfileOptions: new SimpleChange(prevOptions, this.dataProfileOptions, false),
|
|
21796
|
+
hasMoreDataProfiles: new SimpleChange(prevHasMore, this.hasMoreDataProfiles, false),
|
|
21797
|
+
isLoadingDataProfiles: new SimpleChange(prevLoading, this.isLoadingDataProfiles, false),
|
|
21798
|
+
};
|
|
21799
|
+
instance.ngOnChanges(changes);
|
|
21800
|
+
}
|
|
21775
21801
|
}
|
|
21776
21802
|
if (isLoopStepConfig(this.step)) {
|
|
21777
21803
|
instance.naturalTextActionsOptions = this.naturalTextActionsOptions;
|
|
@@ -22611,7 +22637,7 @@ class TestCaseLoopStepComponent {
|
|
|
22611
22637
|
const idStr = String(forLoopTestDataId);
|
|
22612
22638
|
const alreadyInList = options.some((o) => String(o.id ?? o.value) === idStr);
|
|
22613
22639
|
if (!alreadyInList) {
|
|
22614
|
-
const displayName = this.testDataProfile || 'Selected profile';
|
|
22640
|
+
const displayName = this.resolveTestDataProfileName(forLoopTestDataId) || this.resolveTestDataProfileName(this.testDataProfile) || 'Selected profile';
|
|
22615
22641
|
options = [{ id: forLoopTestDataId, value: forLoopTestDataId, name: displayName, label: displayName }, ...options];
|
|
22616
22642
|
}
|
|
22617
22643
|
}
|
|
@@ -22669,6 +22695,15 @@ class TestCaseLoopStepComponent {
|
|
|
22669
22695
|
label: option.name
|
|
22670
22696
|
}));
|
|
22671
22697
|
}
|
|
22698
|
+
/** Resolve a data profile id/value back to the display name used by the dropdown trigger. */
|
|
22699
|
+
resolveTestDataProfileName(value) {
|
|
22700
|
+
if (value == null || value === '')
|
|
22701
|
+
return '';
|
|
22702
|
+
const match = this.dataProfileOptions.find(option => option.id === value || String(option.id) === String(value) || option.name === value);
|
|
22703
|
+
if (match?.name)
|
|
22704
|
+
return match.name;
|
|
22705
|
+
return typeof value === 'string' ? value : String(value);
|
|
22706
|
+
}
|
|
22672
22707
|
/** Data length (N) of the currently selected test data profile; 0 if none selected or not found. */
|
|
22673
22708
|
getSelectedProfileDataLength() {
|
|
22674
22709
|
const profileId = this.editForm?.get('testDataProfile')?.value ?? this.config?.forLoopTestDataId ?? this.config?.dataMapJson?.forLoopTestDataId ?? this.config?.dataMapBean?.for_loop?.testDataId;
|
|
@@ -22971,8 +23006,9 @@ class TestCaseLoopStepComponent {
|
|
|
22971
23006
|
this.toggleExpanded.emit({ config: this.config, expanded: this.expanded });
|
|
22972
23007
|
}
|
|
22973
23008
|
onTestDataProfileChange(value) {
|
|
22974
|
-
|
|
22975
|
-
this.
|
|
23009
|
+
const displayName = this.resolveTestDataProfileName(value);
|
|
23010
|
+
this.testDataProfile = displayName;
|
|
23011
|
+
this.testDataProfileChange.emit(displayName);
|
|
22976
23012
|
}
|
|
22977
23013
|
onStartStepChange(value) {
|
|
22978
23014
|
this.startStep = value;
|