@cqa-lib/cqa-ui 1.0.47 → 1.0.49
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/action-menu/action-menu.component.mjs +3 -3
- package/esm2020/lib/badge/badge.component.mjs +3 -3
- package/esm2020/lib/button/button.component.mjs +3 -3
- package/esm2020/lib/column-visibility/column-visibility.component.mjs +3 -3
- package/esm2020/lib/dashboards/chart-card/chart-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/coverage-module-card/coverage-module-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/dashboard-header/dashboard-header.component.mjs +3 -3
- package/esm2020/lib/dashboards/failed-test-cases-card/failed-test-cases-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/heat-error-map-cell/heat-error-map-cell.component.mjs +3 -3
- package/esm2020/lib/dashboards/insight-card/insight-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/metrics-card/metrics-block.component.mjs +3 -3
- package/esm2020/lib/dashboards/metrics-card/metrics-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/progress-text-card/progress-text-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/test-distribution-card/test-distribution-card.component.mjs +3 -3
- package/esm2020/lib/dialog/dialog.component.mjs +3 -3
- package/esm2020/lib/dropdown-button/dropdown-button.component.mjs +3 -3
- package/esm2020/lib/dynamic-select/dynamic-select-field.component.mjs +3 -3
- package/esm2020/lib/empty-state/empty-state.component.mjs +3 -3
- package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +3 -3
- package/esm2020/lib/other-button/other-button.component.mjs +3 -3
- package/esm2020/lib/pagination/pagination.component.mjs +3 -3
- package/esm2020/lib/search-bar/search-bar.component.mjs +3 -3
- package/esm2020/lib/segment-control/segment-control.component.mjs +3 -3
- package/esm2020/lib/selected-filters/selected-filters.component.mjs +3 -3
- package/esm2020/lib/table/dynamic-table/dynamic-table.component.mjs +3 -3
- package/esm2020/lib/table-action-toolbar/table-action-toolbar.component.mjs +3 -3
- package/esm2020/lib/templates/table-template.component.mjs +3 -3
- package/esm2020/lib/utils/tw-overlay-container.mjs +15 -15
- package/fesm2015/cqa-lib-cqa-ui.mjs +68 -68
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +68 -68
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/utils/tw-overlay-container.d.ts +5 -5
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -218,10 +218,10 @@ class ButtonComponent {
|
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
221
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", fullWidth: "fullWidth", iconColor: "iconColor", type: "type", text: "text", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div
|
|
221
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", fullWidth: "fullWidth", iconColor: "iconColor", type: "type", text: "text", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"pointer-events: none;\">\n <button\n style=\"pointer-events: auto;\"\n [ngClass]=\"[\n text && icon && iconPosition === 'start' ? 'cqa-pr-[24px] cqa-pl-[16px]' :\n text && icon && iconPosition === 'end' ? 'cqa-pl-[24px] cqa-pr-[16px]' :\n text && !icon ? 'cqa-px-[24px]' : !text && icon ? 'cqa-px-[12px]' : 'cqa-px-[24px]',\n buttonClasses,\n textClass\n ]\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n >\n\n <mat-icon *ngIf=\"icon && iconPosition === 'start'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n {{ icon }}\n </mat-icon>\n\n <!-- Dynamic text support -->\n <span *ngIf=\"text\">{{text}}</span>\n\n <ng-content *ngIf=\"!text\"></ng-content>\n\n <mat-icon *ngIf=\"icon && iconPosition === 'end'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n {{ icon }}\n </mat-icon>\n\n </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
222
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
223
223
|
type: Component,
|
|
224
|
-
args: [{ selector: 'cqa-button', template: "<div
|
|
224
|
+
args: [{ selector: 'cqa-button', template: "<div id=\"cqa-ui-root\" style=\"pointer-events: none;\">\n <button\n style=\"pointer-events: auto;\"\n [ngClass]=\"[\n text && icon && iconPosition === 'start' ? 'cqa-pr-[24px] cqa-pl-[16px]' :\n text && icon && iconPosition === 'end' ? 'cqa-pl-[24px] cqa-pr-[16px]' :\n text && !icon ? 'cqa-px-[24px]' : !text && icon ? 'cqa-px-[12px]' : 'cqa-px-[24px]',\n buttonClasses,\n textClass\n ]\"\n [type]=\"type\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n >\n\n <mat-icon *ngIf=\"icon && iconPosition === 'start'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n {{ icon }}\n </mat-icon>\n\n <!-- Dynamic text support -->\n <span *ngIf=\"text\">{{text}}</span>\n\n <ng-content *ngIf=\"!text\"></ng-content>\n\n <mat-icon *ngIf=\"icon && iconPosition === 'end'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n {{ icon }}\n </mat-icon>\n\n </button>\n</div>", styles: [] }]
|
|
225
225
|
}], propDecorators: { variant: [{
|
|
226
226
|
type: Input
|
|
227
227
|
}], disabled: [{
|
|
@@ -326,10 +326,10 @@ class SearchBarComponent {
|
|
|
326
326
|
}
|
|
327
327
|
}
|
|
328
328
|
SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
329
|
-
SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
329
|
+
SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <form\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\" (submit)=\"onSubmit($event)\">\n <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [style.color]=\"disabled ? 'rgba(156,163,175,0.38)' : '#99999E'\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n search\n </mat-icon>\n </span>\n\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n\n <button *ngIf=\"showClear && inputValue\" type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </form>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
330
330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
331
331
|
type: Component,
|
|
332
|
-
args: [{ selector: 'cqa-search-bar', template: "<div
|
|
332
|
+
args: [{ selector: 'cqa-search-bar', template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <form\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\" (submit)=\"onSubmit($event)\">\n <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [style.color]=\"disabled ? 'rgba(156,163,175,0.38)' : '#99999E'\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n search\n </mat-icon>\n </span>\n\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n\n <button *ngIf=\"showClear && inputValue\" type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </form>\n</div>", styles: [] }]
|
|
333
333
|
}], propDecorators: { placeholder: [{
|
|
334
334
|
type: Input
|
|
335
335
|
}], value: [{
|
|
@@ -564,10 +564,10 @@ class SegmentControlComponent {
|
|
|
564
564
|
}
|
|
565
565
|
}
|
|
566
566
|
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
-
SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div
|
|
567
|
+
SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n [ngClass]=\"{\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n {{ segment.label }}\n </span>\n </button>\n </div>\n</div>", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
568
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
|
|
569
569
|
type: Component,
|
|
570
|
-
args: [{ selector: 'cqa-segment-control', template: "<div
|
|
570
|
+
args: [{ selector: 'cqa-segment-control', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n [ngClass]=\"{\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n {{ segment.label }}\n </span>\n </button>\n </div>\n</div>", styles: [] }]
|
|
571
571
|
}], propDecorators: { segments: [{
|
|
572
572
|
type: Input
|
|
573
573
|
}], value: [{
|
|
@@ -702,10 +702,10 @@ class DialogComponent {
|
|
|
702
702
|
}
|
|
703
703
|
}
|
|
704
704
|
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
705
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div
|
|
705
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n {{ config.title }}\n </h2>\n\n <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n {{ config.description }}\n </p>\n\n <div *ngIf=\"config.warning\"\n class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n {{ config.warning }}\n </div>\n </div>\n\n <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n {{ button.label }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
706
706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
707
707
|
type: Component,
|
|
708
|
-
args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
708
|
+
args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n {{ config.title }}\n </h2>\n\n <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n {{ config.description }}\n </p>\n\n <div *ngIf=\"config.warning\"\n class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n {{ config.warning }}\n </div>\n </div>\n\n <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n {{ button.label }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
709
709
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { portalOutlet: [{
|
|
710
710
|
type: ViewChild,
|
|
711
711
|
args: [CdkPortalOutlet, { static: true }]
|
|
@@ -1257,10 +1257,10 @@ class DynamicTableComponent {
|
|
|
1257
1257
|
}
|
|
1258
1258
|
}
|
|
1259
1259
|
DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1260
|
-
DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], ngImport: i0, template: "<div
|
|
1260
|
+
DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-relative\">\n <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\">\n <colgroup>\n <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n <col [style.width]=\"width\" />\n </ng-container>\n </colgroup>\n\n <thead *ngIf=\"data?.length\">\n <tr class=\"table-header cqa-items-center\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <th\n class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"col.fieldId + '-cell'\">\n <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n <ng-container\n *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n <div class=\"custom-checkbox\">\n <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n </div>\n </ng-container>\n <ng-template #headerTplOrDefault>\n <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <ng-container *ngIf=\"col.sortable; else plainHeader\">\n <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1\"\n (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n col.fieldName }}</span>\n <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n </button>\n </ng-container>\n <ng-template #plainHeader>\n <span class=\"header-text\">{{ col.fieldName }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody class=\"table-body cqa-w-full\">\n <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n [class.selected]=\"row?.isSelected\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" [ngClass]=\"col.fieldId + '-cell'\">\n <!-- Built-in checkbox cell when no custom template is provided -->\n <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n <div class=\"custom-checkbox\">\n <input\n type=\"checkbox\"\n class=\"hidden-checkbox\"\n [attr.id]=\"'row-checkbox-' + rowIndex\"\n aria-label=\"Select row\"\n [checked]=\"row?.isSelected\"\n (change)=\"onRowSelectChange($event, row)\" />\n <label\n class=\"custom-checkbox-label\"\n [attr.for]=\"'row-checkbox-' + rowIndex\">\n </label>\n </div>\n </ng-container>\n <ng-template #regularCell>\n <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n <ng-container \n cqaCellContainer \n #cellContainer=\"cqaCellContainer\"\n [componentConfig]=\"renderedValue\"\n [row]=\"row\"\n [column]=\"col\"\n [rowIndex]=\"rowIndex\"\n [colId]=\"col.fieldId\">\n </ng-container>\n </ng-container>\n <ng-template #nonComponentCell>\n <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\"></div>\n </ng-container>\n <ng-template #textCell>\n <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ renderedValue }}</span>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n</div>", components: [{ type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: ["label", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }] });
|
|
1261
1261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
1262
1262
|
type: Component,
|
|
1263
|
-
args: [{ selector: "app-dynamic-table", template: "<div
|
|
1263
|
+
args: [{ selector: "app-dynamic-table", template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-relative\">\n <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\">\n <colgroup>\n <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n <col [style.width]=\"width\" />\n </ng-container>\n </colgroup>\n\n <thead *ngIf=\"data?.length\">\n <tr class=\"table-header cqa-items-center\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <th\n class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"col.fieldId + '-cell'\">\n <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n <ng-container\n *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n <div class=\"custom-checkbox\">\n <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n </div>\n </ng-container>\n <ng-template #headerTplOrDefault>\n <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <ng-container *ngIf=\"col.sortable; else plainHeader\">\n <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1\"\n (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n col.fieldName }}</span>\n <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n </button>\n </ng-container>\n <ng-template #plainHeader>\n <span class=\"header-text\">{{ col.fieldName }}</span>\n </ng-template>\n </ng-template>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n\n <tbody class=\"table-body cqa-w-full\">\n <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n [class.selected]=\"row?.isSelected\">\n <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" [ngClass]=\"col.fieldId + '-cell'\">\n <!-- Built-in checkbox cell when no custom template is provided -->\n <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n <div class=\"custom-checkbox\">\n <input\n type=\"checkbox\"\n class=\"hidden-checkbox\"\n [attr.id]=\"'row-checkbox-' + rowIndex\"\n aria-label=\"Select row\"\n [checked]=\"row?.isSelected\"\n (change)=\"onRowSelectChange($event, row)\" />\n <label\n class=\"custom-checkbox-label\"\n [attr.for]=\"'row-checkbox-' + rowIndex\">\n </label>\n </div>\n </ng-container>\n <ng-template #regularCell>\n <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n <ng-container \n cqaCellContainer \n #cellContainer=\"cqaCellContainer\"\n [componentConfig]=\"renderedValue\"\n [row]=\"row\"\n [column]=\"col\"\n [rowIndex]=\"rowIndex\"\n [colId]=\"col.fieldId\">\n </ng-container>\n </ng-container>\n <ng-template #nonComponentCell>\n <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\"></div>\n </ng-container>\n <ng-template #textCell>\n <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ renderedValue }}</span>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n</div>", styles: [] }]
|
|
1264
1264
|
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1265
1265
|
type: Input
|
|
1266
1266
|
}], columns: [{
|
|
@@ -1367,10 +1367,10 @@ class PaginationComponent {
|
|
|
1367
1367
|
}
|
|
1368
1368
|
}
|
|
1369
1369
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1370
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PaginationComponent, selector: "cqa-pagination", inputs: { totalElements: "totalElements", totalPages: "totalPages", pageIndex: "pageIndex", pageSize: "pageSize", pageItemCount: "pageItemCount", pageSizeOptions: "pageSizeOptions" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange", paginate: "paginate" }, ngImport: i0, template: "<!-- Bottom Pagination -->\n<div
|
|
1370
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PaginationComponent, selector: "cqa-pagination", inputs: { totalElements: "totalElements", totalPages: "totalPages", pageIndex: "pageIndex", pageSize: "pageSize", pageItemCount: "pageItemCount", pageSizeOptions: "pageSizeOptions" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange", paginate: "paginate" }, ngImport: i0, template: "<!-- Bottom Pagination -->\n<div id=\"cqa-ui-root\" >\n <div class=\"table-footer-pagination cqa-text-grey-300 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-bg-surface-default cqa-px-[21px] cqa-py-[15px]\" *ngIf=\"pageItemCount && totalElements\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Rows per page</span>\n <div class=\"cqa-relative\">\n <!-- Custom Select Trigger -->\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[19px] cqa-bg-white cqa-text-black-100 cqa-rounded-[5px] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\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 <!-- Dropdown Menu -->\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]=\"'pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let size 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]=\"'pagesize-' + size\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === size\"\n (click)=\"selectPageSize(size)\"\n >\n {{ size }}\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 {{ getStartItem() }}–{{ getEndItem() }} of {{ totalElements }}\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-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex === 0\" (click)=\"goToPage(pageIndex - 1)\">\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=\"#838384\" 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-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex >= computedTotalPages - 1\" (click)=\"goToPage(pageIndex + 1)\">\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=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1371
1371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1372
1372
|
type: Component,
|
|
1373
|
-
args: [{ selector: 'cqa-pagination', template: "<!-- Bottom Pagination -->\n<div
|
|
1373
|
+
args: [{ selector: 'cqa-pagination', template: "<!-- Bottom Pagination -->\n<div id=\"cqa-ui-root\" >\n <div class=\"table-footer-pagination cqa-text-grey-300 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-bg-surface-default cqa-px-[21px] cqa-py-[15px]\" *ngIf=\"pageItemCount && totalElements\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Rows per page</span>\n <div class=\"cqa-relative\">\n <!-- Custom Select Trigger -->\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[19px] cqa-bg-white cqa-text-black-100 cqa-rounded-[5px] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\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 <!-- Dropdown Menu -->\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]=\"'pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let size 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]=\"'pagesize-' + size\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === size\"\n (click)=\"selectPageSize(size)\"\n >\n {{ size }}\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 {{ getStartItem() }}–{{ getEndItem() }} of {{ totalElements }}\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-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex === 0\" (click)=\"goToPage(pageIndex - 1)\">\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=\"#838384\" 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-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex >= computedTotalPages - 1\" (click)=\"goToPage(pageIndex + 1)\">\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=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
1374
1374
|
}], propDecorators: { totalElements: [{
|
|
1375
1375
|
type: Input
|
|
1376
1376
|
}], totalPages: [{
|
|
@@ -1414,10 +1414,10 @@ class ActionMenuButtonComponent {
|
|
|
1414
1414
|
}
|
|
1415
1415
|
}
|
|
1416
1416
|
ActionMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1417
|
-
ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row" }, outputs: { view: "view", edit: "edit", delete: "delete" }, ngImport: i0, template: "<div
|
|
1417
|
+
ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row" }, outputs: { view: "view", edit: "edit", delete: "delete" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n type=\"button\" aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n\n <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n <mat-icon>visibility</mat-icon>\n <span>View</span>\n </button>\n <button mat-menu-item (click)=\"editTestCase(row)\">\n <mat-icon>edit_square</mat-icon>\n <span>Edit</span>\n </button>\n <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </mat-menu>\n</div>", components: [{ type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
|
|
1418
1418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, decorators: [{
|
|
1419
1419
|
type: Component,
|
|
1420
|
-
args: [{ selector: 'cqa-action-menu-button', template: "<div
|
|
1420
|
+
args: [{ selector: 'cqa-action-menu-button', template: "<div id=\"cqa-ui-root\">\n <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n type=\"button\" aria-label=\"More actions\">\n <mat-icon>more_horiz</mat-icon>\n </button>\n\n <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n <mat-icon>visibility</mat-icon>\n <span>View</span>\n </button>\n <button mat-menu-item (click)=\"editTestCase(row)\">\n <mat-icon>edit_square</mat-icon>\n <span>Edit</span>\n </button>\n <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </mat-menu>\n</div>", styles: [] }]
|
|
1421
1421
|
}], propDecorators: { row: [{
|
|
1422
1422
|
type: Input
|
|
1423
1423
|
}], view: [{
|
|
@@ -1468,10 +1468,10 @@ class OtherButtonComponent {
|
|
|
1468
1468
|
}
|
|
1469
1469
|
}
|
|
1470
1470
|
OtherButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: OtherButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1471
|
-
OtherButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: OtherButtonComponent, selector: "cqa-other-button", inputs: { icon: "icon", label: "label", classes: "classes", colorClass: "colorClass", buttonClass: "buttonClass", disabled: "disabled", type: "type", buttons: "buttons", groupClass: "groupClass", gapClass: "gapClass", wrap: "wrap" }, outputs: { clicked: "clicked", buttonClick: "buttonClick" }, ngImport: i0, template: "<div
|
|
1471
|
+
OtherButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: OtherButtonComponent, selector: "cqa-other-button", inputs: { icon: "icon", label: "label", classes: "classes", colorClass: "colorClass", buttonClass: "buttonClass", disabled: "disabled", type: "type", buttons: "buttons", groupClass: "groupClass", gapClass: "gapClass", wrap: "wrap" }, outputs: { clicked: "clicked", buttonClick: "buttonClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" >\n <!-- Group rendering if buttons are provided -->\n <ng-container *ngIf=\"buttons?.length; else singleButton\">\n <div class=\"cqa-inline-flex cqa-items-center\" [ngClass]=\"[wrap ? 'cqa-flex-wrap' : '', gapClass, groupClass]\">\n <button *ngFor=\"let b of buttons\"\n [type]=\"b.type || 'button'\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n [ngClass]=\"[b.classes || classes, buttonClass, b.colorClass || colorClass]\"\n [disabled]=\"b.disabled\"\n (click)=\"onItemClick($event, b)\">\n <mat-icon *ngIf=\"b.icon || icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ b.icon || icon }}</mat-icon>\n <span>{{ b.label }}</span>\n </button>\n </div>\n </ng-container>\n\n <!-- Single button (backwards compatible) -->\n <ng-template #singleButton>\n <button [type]=\"type\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n [ngClass]=\"[classes, buttonClass, colorClass]\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\n <mat-icon *ngIf=\"icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ icon }}</mat-icon>\n <span>{{ label }}</span>\n </button>\n </ng-template>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1472
1472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: OtherButtonComponent, decorators: [{
|
|
1473
1473
|
type: Component,
|
|
1474
|
-
args: [{ selector: 'cqa-other-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
1474
|
+
args: [{ selector: 'cqa-other-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" >\n <!-- Group rendering if buttons are provided -->\n <ng-container *ngIf=\"buttons?.length; else singleButton\">\n <div class=\"cqa-inline-flex cqa-items-center\" [ngClass]=\"[wrap ? 'cqa-flex-wrap' : '', gapClass, groupClass]\">\n <button *ngFor=\"let b of buttons\"\n [type]=\"b.type || 'button'\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n [ngClass]=\"[b.classes || classes, buttonClass, b.colorClass || colorClass]\"\n [disabled]=\"b.disabled\"\n (click)=\"onItemClick($event, b)\">\n <mat-icon *ngIf=\"b.icon || icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ b.icon || icon }}</mat-icon>\n <span>{{ b.label }}</span>\n </button>\n </div>\n </ng-container>\n\n <!-- Single button (backwards compatible) -->\n <ng-template #singleButton>\n <button [type]=\"type\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n [ngClass]=\"[classes, buttonClass, colorClass]\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\n <mat-icon *ngIf=\"icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ icon }}</mat-icon>\n <span>{{ label }}</span>\n </button>\n </ng-template>\n</div>", styles: [] }]
|
|
1475
1475
|
}], propDecorators: { icon: [{
|
|
1476
1476
|
type: Input
|
|
1477
1477
|
}], label: [{
|
|
@@ -1801,10 +1801,10 @@ class DynamicSelectFieldComponent {
|
|
|
1801
1801
|
}
|
|
1802
1802
|
}
|
|
1803
1803
|
DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1804
|
-
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" }, 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
|
|
1804
|
+
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" }, 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 id=\"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\" [disabled]=\"isDisabled\" [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\" 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-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>{{ 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 [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\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-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>{{ opt.name ?? opt.label ?? opt.value }}</span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n {{ opt.name ?? opt.label ?? opt.value }}\n </ng-template>\n </mat-option>\n </mat-select>\n\n <div>\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: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.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 });
|
|
1805
1805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
|
|
1806
1806
|
type: Component,
|
|
1807
|
-
args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
1807
|
+
args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"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\" [disabled]=\"isDisabled\" [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\" 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-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>{{ 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 [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\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-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>{{ opt.name ?? opt.label ?? opt.value }}</span>\n </span>\n </ng-container>\n <ng-template #defaultOptionTpl>\n {{ opt.name ?? opt.label ?? opt.value }}\n </ng-template>\n </mat-option>\n </mat-select>\n\n <div>\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>", styles: [] }]
|
|
1808
1808
|
}], propDecorators: { form: [{
|
|
1809
1809
|
type: Input
|
|
1810
1810
|
}], config: [{
|
|
@@ -2108,10 +2108,10 @@ class DynamicFilterComponent {
|
|
|
2108
2108
|
}
|
|
2109
2109
|
}
|
|
2110
2110
|
DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
2111
|
-
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2111
|
+
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2112
2112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
2113
2113
|
type: Component,
|
|
2114
|
-
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
2114
|
+
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
2115
2115
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
|
|
2116
2116
|
type: Input
|
|
2117
2117
|
}], model: [{
|
|
@@ -2175,10 +2175,10 @@ class ColumnVisibilityComponent {
|
|
|
2175
2175
|
}
|
|
2176
2176
|
}
|
|
2177
2177
|
ColumnVisibilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2178
|
-
ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
2178
|
+
ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <cqa-button variant=\"grey-solid\" icon=\"settings\" [matMenuTriggerFor]=\"settingsMenu\" aria-label=\"Settings\">\n </cqa-button>\n\n <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n <div class=\"settings-section cqa-mb-3\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n class=\"select-all-checkbox\">\n {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n </mat-checkbox>\n <!-- Dynamic column list -->\n <ng-container *ngIf=\"columns?.length\">\n <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n (change)=\"saveColumnPreferences()\">\n {{ col.label }}\n </mat-checkbox>\n </ng-container>\n </div>\n </div>\n\n <div class=\"settings-section\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n <div class=\"refresh-options\">\n <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n </mat-radio-group>\n </div>\n </div>\n </div>\n </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2179
2179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, decorators: [{
|
|
2180
2180
|
type: Component,
|
|
2181
|
-
args: [{ selector: 'cqa-column-visibility', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2181
|
+
args: [{ selector: 'cqa-column-visibility', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <cqa-button variant=\"grey-solid\" icon=\"settings\" [matMenuTriggerFor]=\"settingsMenu\" aria-label=\"Settings\">\n </cqa-button>\n\n <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n <div class=\"settings-section cqa-mb-3\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n class=\"select-all-checkbox\">\n {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n </mat-checkbox>\n <!-- Dynamic column list -->\n <ng-container *ngIf=\"columns?.length\">\n <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n (change)=\"saveColumnPreferences()\">\n {{ col.label }}\n </mat-checkbox>\n </ng-container>\n </div>\n </div>\n\n <div class=\"settings-section\">\n <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n <div class=\"refresh-options\">\n <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n </mat-radio-group>\n </div>\n </div>\n </div>\n </mat-menu>", styles: [] }]
|
|
2182
2182
|
}], propDecorators: { isStepGroup: [{
|
|
2183
2183
|
type: Input
|
|
2184
2184
|
}], columns: [{
|
|
@@ -2232,10 +2232,10 @@ class TableActionToolbarComponent {
|
|
|
2232
2232
|
}
|
|
2233
2233
|
}
|
|
2234
2234
|
TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2235
|
-
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div
|
|
2235
|
+
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px]\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n {{ selectionLabel }}\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n </div>\n <!-- Forwards clicks inside toolbar without affecting outer selections -->\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2236
2236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, decorators: [{
|
|
2237
2237
|
type: Component,
|
|
2238
|
-
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2238
|
+
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px]\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n {{ selectionLabel }}\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n </div>\n <!-- Forwards clicks inside toolbar without affecting outer selections -->\n </div>\n</div>", styles: [] }]
|
|
2239
2239
|
}], propDecorators: { selectedItems: [{
|
|
2240
2240
|
type: Input
|
|
2241
2241
|
}], actions: [{
|
|
@@ -2267,10 +2267,10 @@ class MetricsBlockComponent {
|
|
|
2267
2267
|
}
|
|
2268
2268
|
}
|
|
2269
2269
|
MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2270
|
-
MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, ngImport: i0, template: "<div
|
|
2270
|
+
MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div\n [ngClass]=\"[layout === '1'\n ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '']\">\n <ng-container *ngIf=\"layout === '1'; else layout2\">\n <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n <div\n class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n [style.width]=\"progress\"></div>\n </div>\n </div>\n </ng-container>\n <ng-template #layout2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2271
2271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
|
|
2272
2272
|
type: Component,
|
|
2273
|
-
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2273
|
+
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div\n [ngClass]=\"[layout === '1'\n ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '']\">\n <ng-container *ngIf=\"layout === '1'; else layout2\">\n <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n <div\n class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n [style.width]=\"progress\"></div>\n </div>\n </div>\n </ng-container>\n <ng-template #layout2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
2274
2274
|
}], propDecorators: { item: [{
|
|
2275
2275
|
type: Input
|
|
2276
2276
|
}], progress: [{
|
|
@@ -2319,10 +2319,10 @@ class MetricsCardComponent {
|
|
|
2319
2319
|
}
|
|
2320
2320
|
}
|
|
2321
2321
|
MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2322
|
-
MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent" }, ngImport: i0, template: "<div
|
|
2322
|
+
MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\n </cqa-metrics-block>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"layout === '2'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <div\n class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4\">{{ title }}</span>\n <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\">\n </cqa-metrics-block>\n </div>\n </div>\n </div>\n</div>", components: [{ type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2323
2323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
|
|
2324
2324
|
type: Component,
|
|
2325
|
-
args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2325
|
+
args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\n </cqa-metrics-block>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"layout === '2'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <div\n class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4\">{{ title }}</span>\n <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\">\n </cqa-metrics-block>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2326
2326
|
}], propDecorators: { icon: [{
|
|
2327
2327
|
type: Input
|
|
2328
2328
|
}], title: [{
|
|
@@ -2488,10 +2488,10 @@ class EmptyStateComponent {
|
|
|
2488
2488
|
}
|
|
2489
2489
|
}
|
|
2490
2490
|
EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2491
|
-
EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmptyStateComponent, selector: "cqa-empty-state", inputs: { preset: "preset", imageUrl: "imageUrl", title: "title", description: "description", actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
2491
|
+
EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmptyStateComponent, selector: "cqa-empty-state", inputs: { preset: "preset", imageUrl: "imageUrl", title: "title", description: "description", actions: "actions" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" class=\"cqa-w-full cqa-h-full cqa-min-h-[200px] cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n <!-- Icon Container -->\n <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n <!-- Main Icon Container with Gradient Background and Shadow -->\n <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n <!-- Icon/Image centered inside on top layer - fully opaque -->\n <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n </div>\n </div>\n </div>\n <!-- Decorative Dots -->\n <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n </div>\n\n <!-- Content Container -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n <!-- Title and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n <!-- Title -->\n <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n {{ displayTitle }}\n </h3>\n </div>\n <!-- Description -->\n <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n {{ displayDescription }}\n </p>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div\n *ngIf=\"displayActions && displayActions.length > 0\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n >\n <cqa-button\n *ngFor=\"let action of displayActions\"\n [variant]=\"action.variant || 'filled'\"\n [icon]=\"action.icon\"\n [iconPosition]=\"action.iconPosition || 'start'\"\n [disabled]=\"action.disabled\"\n (clicked)=\"onActionClick(action, $event)\"\n class=\"cqa-w-full md:cqa-w-auto\"\n >\n {{ action.label }}\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
2492
2492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
2493
2493
|
type: Component,
|
|
2494
|
-
args: [{ selector: 'cqa-empty-state', template: "<div
|
|
2494
|
+
args: [{ selector: 'cqa-empty-state', template: "<div id=\"cqa-ui-root\" class=\"cqa-w-full cqa-h-full cqa-min-h-[200px] cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n <!-- Icon Container -->\n <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n <!-- Main Icon Container with Gradient Background and Shadow -->\n <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n <!-- Icon/Image centered inside on top layer - fully opaque -->\n <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n </div>\n </div>\n </div>\n <!-- Decorative Dots -->\n <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n </div>\n\n <!-- Content Container -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n <!-- Title and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n <!-- Title -->\n <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n {{ displayTitle }}\n </h3>\n </div>\n <!-- Description -->\n <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n {{ displayDescription }}\n </p>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div\n *ngIf=\"displayActions && displayActions.length > 0\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n >\n <cqa-button\n *ngFor=\"let action of displayActions\"\n [variant]=\"action.variant || 'filled'\"\n [icon]=\"action.icon\"\n [iconPosition]=\"action.iconPosition || 'start'\"\n [disabled]=\"action.disabled\"\n (clicked)=\"onActionClick(action, $event)\"\n class=\"cqa-w-full md:cqa-w-auto\"\n >\n {{ action.label }}\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
2495
2495
|
}], propDecorators: { preset: [{
|
|
2496
2496
|
type: Input
|
|
2497
2497
|
}], imageUrl: [{
|
|
@@ -2522,10 +2522,10 @@ class ChartCardComponent {
|
|
|
2522
2522
|
}
|
|
2523
2523
|
}
|
|
2524
2524
|
ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2525
|
-
ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, ngImport: i0, template: "<div
|
|
2525
|
+
ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full\" [ngStyle]=\"height ? { 'min-height': height, 'height': height } : { 'min-height': '220px' }\">\n <!-- Empty State -->\n <ng-container *ngIf=\"isEmpty\">\n <cqa-empty-state\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"$event.onClick?.()\"\n ></cqa-empty-state>\n </ng-container>\n \n <!-- Default Content -->\n <ng-container *ngIf=\"!isEmpty\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2526
2526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, decorators: [{
|
|
2527
2527
|
type: Component,
|
|
2528
|
-
args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2528
|
+
args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full\" [ngStyle]=\"height ? { 'min-height': height, 'height': height } : { 'min-height': '220px' }\">\n <!-- Empty State -->\n <ng-container *ngIf=\"isEmpty\">\n <cqa-empty-state\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"$event.onClick?.()\"\n ></cqa-empty-state>\n </ng-container>\n \n <!-- Default Content -->\n <ng-container *ngIf=\"!isEmpty\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2529
2529
|
}], propDecorators: { title: [{
|
|
2530
2530
|
type: Input
|
|
2531
2531
|
}], subtitle: [{
|
|
@@ -2569,10 +2569,10 @@ class ProgressTextCardComponent {
|
|
|
2569
2569
|
}
|
|
2570
2570
|
}
|
|
2571
2571
|
ProgressTextCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2572
|
-
ProgressTextCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressTextCardComponent, selector: "cqa-progress-text-card", inputs: { value: "value", label: "label", deltaPercent: "deltaPercent", deltaSuffix: "deltaSuffix", cardClass: "cardClass" }, ngImport: i0, template: "<div
|
|
2572
|
+
ProgressTextCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressTextCardComponent, selector: "cqa-progress-text-card", inputs: { value: "value", label: "label", deltaPercent: "deltaPercent", deltaSuffix: "deltaSuffix", cardClass: "cardClass" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2573
2573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, decorators: [{
|
|
2574
2574
|
type: Component,
|
|
2575
|
-
args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2575
|
+
args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", styles: [] }]
|
|
2576
2576
|
}], propDecorators: { value: [{
|
|
2577
2577
|
type: Input
|
|
2578
2578
|
}], label: [{
|
|
@@ -2643,10 +2643,10 @@ class DashboardHeaderComponent {
|
|
|
2643
2643
|
}
|
|
2644
2644
|
}
|
|
2645
2645
|
DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2646
|
-
DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,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\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button *ngIf=\"showHelpIcon\" mat-icon-button aria-label=\"Help\" (click)=\"helpIconClick.emit()\" class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2646
|
+
DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,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\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button *ngIf=\"showHelpIcon\" mat-icon-button aria-label=\"Help\" (click)=\"helpIconClick.emit()\" class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2647
2647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
|
|
2648
2648
|
type: Component,
|
|
2649
|
-
args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,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\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button *ngIf=\"showHelpIcon\" mat-icon-button aria-label=\"Help\" (click)=\"helpIconClick.emit()\" class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2649
|
+
args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" *ngIf=\"showHeader\">\n <div\n class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n [ngClass]=\"headerClass\">\n <!-- Left branding block -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button> -->\n <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </cqa-button>\n </div>\n <!-- Optional projected logo -->\n <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n <defs>\n <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n </pattern>\n <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n xlink:href=\"data:image/jpeg;base64,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\" />\n </defs>\n </svg>\n\n <!-- Title + optional badge -->\n <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n <div\n class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n {{ title }}</div>\n <span *ngIf=\"badgeText\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n </div>\n </div>\n\n <!-- Right controls/actions -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n <!-- Optional workspace select -->\n <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Help icon button -->\n <button *ngIf=\"showHelpIcon\" mat-icon-button aria-label=\"Help\" (click)=\"helpIconClick.emit()\" class=\"cqa-flex cqa-items-center\">\n <mat-icon style=\"height: 36px; width: 36px;\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n </button>\n\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2650
2650
|
}], propDecorators: { title: [{
|
|
2651
2651
|
type: Input
|
|
2652
2652
|
}], badgeText: [{
|
|
@@ -2793,10 +2793,10 @@ class CoverageModuleCardComponent {
|
|
|
2793
2793
|
}
|
|
2794
2794
|
}
|
|
2795
2795
|
CoverageModuleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2796
|
-
CoverageModuleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CoverageModuleCardComponent, selector: "cqa-coverage-module-card", inputs: { title: "title", issues: "issues", showViewAction: "showViewAction", layout: "layout", positiveCount: "positiveCount", negativeCount: "negativeCount", edgeCaseCount: "edgeCaseCount", positiveLabel: "positiveLabel", negativeLabel: "negativeLabel", edgeCaseLabel: "edgeCaseLabel", aiCount: "aiCount", humanCount: "humanCount", aiLabel: "aiLabel", humanLabel: "humanLabel", items: "items", ctaText: "ctaText", ctaDisabled: "ctaDisabled", generationMs: "generationMs" }, outputs: { view: "view", issuesClicked: "issuesClicked", ctaClicked: "ctaClicked", aiCoverageClick: "aiCoverageClick", positiveClicked: "positiveClicked", negativeClicked: "negativeClicked", edgeCaseClicked: "edgeCaseClicked" }, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-h-full\">\n <div\n class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n <span (click)=\"issuesClicked.emit()\"\n class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n </span>\n <button type=\"button\"\n class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n View\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Default Layout: Middle metrics row -->\n <ng-container *ngIf=\"layout === 'default'\">\n <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- Left: Positive / Negative / Edge Case -->\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n\n <!-- Right: AI / Human -->\n <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n </div>\n </div>\n </ng-container>\n\n <!-- Mobile Layout: Stacked metrics -->\n <ng-container *ngIf=\"layout === 'mobile'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- First row: Positive / Negative / Edge Case -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n </div>\n <!-- Separator -->\n <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n </div>\n </div>\n </ng-container>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ it.label }}\n </span>\n <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n [style.width]=\"formatPercent(it.percent)\"></div>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n formatPercent(it.percent) }}</span>\n </div>\n </div>\n\n <!-- Footer -->\n <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ ctaText }}\n <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </ng-container>\n <ng-template #generatingTpl>\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n Generating\n </span>\n </ng-template>\n </cqa-button>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2796
|
+
CoverageModuleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CoverageModuleCardComponent, selector: "cqa-coverage-module-card", inputs: { title: "title", issues: "issues", showViewAction: "showViewAction", layout: "layout", positiveCount: "positiveCount", negativeCount: "negativeCount", edgeCaseCount: "edgeCaseCount", positiveLabel: "positiveLabel", negativeLabel: "negativeLabel", edgeCaseLabel: "edgeCaseLabel", aiCount: "aiCount", humanCount: "humanCount", aiLabel: "aiLabel", humanLabel: "humanLabel", items: "items", ctaText: "ctaText", ctaDisabled: "ctaDisabled", generationMs: "generationMs" }, outputs: { view: "view", issuesClicked: "issuesClicked", ctaClicked: "ctaClicked", aiCoverageClick: "aiCoverageClick", positiveClicked: "positiveClicked", negativeClicked: "negativeClicked", edgeCaseClicked: "edgeCaseClicked" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" class=\"cqa-h-full\">\n <div\n class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n <span (click)=\"issuesClicked.emit()\"\n class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n </span>\n <button type=\"button\"\n class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n View\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Default Layout: Middle metrics row -->\n <ng-container *ngIf=\"layout === 'default'\">\n <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- Left: Positive / Negative / Edge Case -->\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n\n <!-- Right: AI / Human -->\n <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n </div>\n </div>\n </ng-container>\n\n <!-- Mobile Layout: Stacked metrics -->\n <ng-container *ngIf=\"layout === 'mobile'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- First row: Positive / Negative / Edge Case -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n </div>\n <!-- Separator -->\n <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n </div>\n </div>\n </ng-container>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ it.label }}\n </span>\n <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n [style.width]=\"formatPercent(it.percent)\"></div>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n formatPercent(it.percent) }}</span>\n </div>\n </div>\n\n <!-- Footer -->\n <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ ctaText }}\n <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </ng-container>\n <ng-template #generatingTpl>\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n Generating\n </span>\n </ng-template>\n </cqa-button>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2797
2797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, decorators: [{
|
|
2798
2798
|
type: Component,
|
|
2799
|
-
args: [{ selector: 'cqa-coverage-module-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root cqa-h-full\">\n <div\n class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n <span (click)=\"issuesClicked.emit()\"\n class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n </span>\n <button type=\"button\"\n class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n View\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Default Layout: Middle metrics row -->\n <ng-container *ngIf=\"layout === 'default'\">\n <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- Left: Positive / Negative / Edge Case -->\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n\n <!-- Right: AI / Human -->\n <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n </div>\n </div>\n </ng-container>\n\n <!-- Mobile Layout: Stacked metrics -->\n <ng-container *ngIf=\"layout === 'mobile'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- First row: Positive / Negative / Edge Case -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n </div>\n <!-- Separator -->\n <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n </div>\n </div>\n </ng-container>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ it.label }}\n </span>\n <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n [style.width]=\"formatPercent(it.percent)\"></div>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n formatPercent(it.percent) }}</span>\n </div>\n </div>\n\n <!-- Footer -->\n <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ ctaText }}\n <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </ng-container>\n <ng-template #generatingTpl>\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n Generating\n </span>\n </ng-template>\n </cqa-button>\n </div>\n</div>", styles: [] }]
|
|
2799
|
+
args: [{ selector: 'cqa-coverage-module-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" class=\"cqa-h-full\">\n <div\n class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n <span (click)=\"issuesClicked.emit()\"\n class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n </span>\n <button type=\"button\"\n class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n View\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n\n <!-- Default Layout: Middle metrics row -->\n <ng-container *ngIf=\"layout === 'default'\">\n <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- Left: Positive / Negative / Edge Case -->\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n\n <!-- Right: AI / Human -->\n <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n </div>\n </div>\n </ng-container>\n\n <!-- Mobile Layout: Stacked metrics -->\n <ng-container *ngIf=\"layout === 'mobile'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n <!-- First row: Positive / Negative / Edge Case -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n </div>\n </div>\n <!-- Separator -->\n <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n {{ aiLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ humanLabel }}\n </span>\n <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n </div>\n </div>\n <div class=\"cqa-col-span-1\"></div>\n </div>\n </div>\n </ng-container>\n\n <!-- Body -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ it.label }}\n </span>\n <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n [style.width]=\"formatPercent(it.percent)\"></div>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n formatPercent(it.percent) }}</span>\n </div>\n </div>\n\n <!-- Footer -->\n <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ ctaText }}\n <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </ng-container>\n <ng-template #generatingTpl>\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n Generating\n </span>\n </ng-template>\n </cqa-button>\n </div>\n</div>", styles: [] }]
|
|
2800
2800
|
}], propDecorators: { title: [{
|
|
2801
2801
|
type: Input
|
|
2802
2802
|
}], issues: [{
|
|
@@ -2928,10 +2928,10 @@ class TestDistributionCardComponent {
|
|
|
2928
2928
|
}
|
|
2929
2929
|
}
|
|
2930
2930
|
TestDistributionCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2931
|
-
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, ngImport: i0, template: "<div
|
|
2931
|
+
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2932
2932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, decorators: [{
|
|
2933
2933
|
type: Component,
|
|
2934
|
-
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2934
|
+
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2935
2935
|
}], propDecorators: { title: [{
|
|
2936
2936
|
type: Input
|
|
2937
2937
|
}], segments: [{
|
|
@@ -3012,10 +3012,10 @@ class FailedTestCasesCardComponent {
|
|
|
3012
3012
|
}
|
|
3013
3013
|
}
|
|
3014
3014
|
FailedTestCasesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3015
|
-
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", fullTitle: "fullTitle", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div
|
|
3015
|
+
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", fullTitle: "fullTitle", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3016
3016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, decorators: [{
|
|
3017
3017
|
type: Component,
|
|
3018
|
-
args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
3018
|
+
args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3019
3019
|
}], propDecorators: { title: [{
|
|
3020
3020
|
type: Input
|
|
3021
3021
|
}], fullTitle: [{
|
|
@@ -3066,10 +3066,10 @@ class SelectedFiltersComponent {
|
|
|
3066
3066
|
}
|
|
3067
3067
|
}
|
|
3068
3068
|
SelectedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3069
|
-
SelectedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: { filterApplied: "filterApplied", chips: "chips", defaultChips: "defaultChips", defaultChipClass: "defaultChipClass" }, outputs: { removeChip: "removeChip", clearAll: "clearAll", onClearAll: "onClearAll" }, ngImport: i0, template: "<div
|
|
3069
|
+
SelectedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: { filterApplied: "filterApplied", chips: "chips", defaultChips: "defaultChips", defaultChipClass: "defaultChipClass" }, outputs: { removeChip: "removeChip", clearAll: "clearAll", onClearAll: "onClearAll" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <!-- Hidden element to ensure Tailwind detects default chip classes -->\n <div class=\"cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE] cqa-hidden\"></div>\n <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n *ngIf=\"filterApplied && hasAnyChips\">\n <!-- Default (non-removable) chips -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-text-[#4B5563] cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE]\"\n [ngClass]=\"defaultChipClass\"\n *ngFor=\"let chip of defaultChips\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium\">{{ chip.label || chip.key }}:</span>\n <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n </div>\n\n <!-- User-selected chips -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n *ngFor=\"let chip of chips\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n }}:</span>\n <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n <button type=\"button\"\n class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n *ngIf=\"hasSelectedChips\"\n (click)=\"clearAll.emit(); onClearAll.emit()\">\n Clear All\n </button>\n </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3070
3070
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, decorators: [{
|
|
3071
3071
|
type: Component,
|
|
3072
|
-
args: [{ selector: 'cqa-selected-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
3072
|
+
args: [{ selector: 'cqa-selected-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <!-- Hidden element to ensure Tailwind detects default chip classes -->\n <div class=\"cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE] cqa-hidden\"></div>\n <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n *ngIf=\"filterApplied && hasAnyChips\">\n <!-- Default (non-removable) chips -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-text-[#4B5563] cqa-border-[#CBD5F5] cqa-bg-[#F4F6FE]\"\n [ngClass]=\"defaultChipClass\"\n *ngFor=\"let chip of defaultChips\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium\">{{ chip.label || chip.key }}:</span>\n <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n </div>\n\n <!-- User-selected chips -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n *ngFor=\"let chip of chips\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n }}:</span>\n <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n <button type=\"button\"\n class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n *ngIf=\"hasSelectedChips\"\n (click)=\"clearAll.emit(); onClearAll.emit()\">\n Clear All\n </button>\n </div>\n</div>", styles: [] }]
|
|
3073
3073
|
}], propDecorators: { filterApplied: [{
|
|
3074
3074
|
type: Input
|
|
3075
3075
|
}], chips: [{
|
|
@@ -3313,10 +3313,10 @@ class BadgeComponent {
|
|
|
3313
3313
|
}
|
|
3314
3314
|
}
|
|
3315
3315
|
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3316
|
-
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "cqa-badge", inputs: { label: "label", icon: "icon", iconLibrary: "iconLibrary", variant: "variant", size: "size", backgroundColor: "backgroundColor", textColor: "textColor", iconBackgroundColor: "iconBackgroundColor", iconColor: "iconColor" }, ngImport: i0, template: "<div
|
|
3316
|
+
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "cqa-badge", inputs: { label: "label", icon: "icon", iconLibrary: "iconLibrary", variant: "variant", size: "size", backgroundColor: "backgroundColor", textColor: "textColor", iconBackgroundColor: "iconBackgroundColor", iconColor: "iconColor" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n <span \n [ngClass]=\"badgeClasses\" \n [ngStyle]=\"badgeStyles\"\n [style.background-color]=\"backgroundColor\"\n [style.color]=\"textColor\"\n class=\"cqa-font-inter cqa-font-normal\">\n <span \n *ngIf=\"icon\" \n [ngClass]=\"iconContainerClasses\"\n [ngStyle]=\"iconContainerStyles\">\n <mat-icon \n *ngIf=\"iconLibrary === 'mat'\"\n [ngClass]=\"iconClasses\"\n [ngStyle]=\"iconStyles\">{{ icon }}</mat-icon>\n <i \n *ngIf=\"iconLibrary === 'fa'\"\n [ngClass]=\"iconClasses + ' ' + icon\"\n [ngStyle]=\"iconStyles\"></i>\n </span>\n {{ label }}\n </span>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3317
3317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
3318
3318
|
type: Component,
|
|
3319
|
-
args: [{ selector: 'cqa-badge', template: "<div
|
|
3319
|
+
args: [{ selector: 'cqa-badge', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n <span \n [ngClass]=\"badgeClasses\" \n [ngStyle]=\"badgeStyles\"\n [style.background-color]=\"backgroundColor\"\n [style.color]=\"textColor\"\n class=\"cqa-font-inter cqa-font-normal\">\n <span \n *ngIf=\"icon\" \n [ngClass]=\"iconContainerClasses\"\n [ngStyle]=\"iconContainerStyles\">\n <mat-icon \n *ngIf=\"iconLibrary === 'mat'\"\n [ngClass]=\"iconClasses\"\n [ngStyle]=\"iconStyles\">{{ icon }}</mat-icon>\n <i \n *ngIf=\"iconLibrary === 'fa'\"\n [ngClass]=\"iconClasses + ' ' + icon\"\n [ngStyle]=\"iconStyles\"></i>\n </span>\n {{ label }}\n </span>\n</div>\n\n", styles: [] }]
|
|
3320
3320
|
}], propDecorators: { label: [{
|
|
3321
3321
|
type: Input
|
|
3322
3322
|
}], icon: [{
|
|
@@ -3514,10 +3514,10 @@ class InsightCardComponent {
|
|
|
3514
3514
|
}
|
|
3515
3515
|
}
|
|
3516
3516
|
InsightCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3517
|
-
InsightCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InsightCardComponent, selector: "cqa-insight-card", inputs: { title: "title", description: "description", showAiSuggestionButton: "showAiSuggestionButton", badges: "badges", metadata: "metadata", prerequisiteSection: "prerequisiteSection", testDataSection: "testDataSection", metadataExpanded: "metadataExpanded", isPrerequisiteMissing: "isPrerequisiteMissing", isTestDataMissing: "isTestDataMissing" }, outputs: { metadataToggle: "metadataToggle", sectionToggle: "sectionToggle", sectionActionClick: "sectionActionClick", onApplySuggestionClick: "onApplySuggestionClick", onAttachPrerequisitesClick: "onAttachPrerequisitesClick", onImportTestDataClick: "onImportTestDataClick" }, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-solid cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n <!-- Section 1: Badges -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge \n *ngFor=\"let badge of visibleBadges\" \n [label]=\"badge.label\"\n [icon]=\"badge.icon\"\n [variant]=\"badge.variant || 'default'\"\n ></cqa-badge>\n </div>\n </div>\n\n <!-- Section 2: Title & Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n {{ description }}\n </p>\n </div>\n\n <!-- Section 3: Metadata Section (always visible) -->\n <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-solid cqa-border-t-primary-surface\"\n [attr.id]=\"getMetadataDetailsId()\"\n role=\"region\"\n >\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n {{ item.key }}:\n </span>\n <span \n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n {{ getMetadataValue(item.value) }}\n </span>\n </div>\n <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n </ng-container>\n </div>\n </div>\n\n <!-- Section 4: Metadata toggle -->\n <button\n *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\"\n type=\"button\"\n class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n (click)=\"toggleMetadata()\"\n [attr.aria-expanded]=\"metadataExpanded\"\n [attr.aria-controls]=\"getMetadataDetailsId()\"\n >\n <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n\n </div>\n\n <!-- Section 5: Sections (toggle visibility) -->\n <ng-container *ngIf=\"visibleSections as sections\">\n <div *ngIf=\"metadataExpanded && sections.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let section of sections; trackBy: trackSectionById\"\n class=\"cqa-border-l-4 cqa-border-solid cqa-rounded-[10px] cqa-overflow-hidden\"\n [ngClass]=\"getSectionBorderClass(section)\"\n >\n <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n <!-- Section Title with Toggle Button aligned right -->\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <h3\n [ngClass]=\"getSectionTitleClasses(section)\"\n class=\"cqa-grow\"\n [attr.id]=\"getSectionHeaderId(section)\"\n >\n {{ section.title }}\n </h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[24px] cqa-min-h-[24px] cqa-ml-auto\"\n (click)=\"toggleSection(section)\"\n [attr.aria-expanded]=\"section.expanded !== false\"\n [attr.aria-controls]=\"getSectionContentId(section)\"\n [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n >\n <mat-icon\n [ngClass]=\"getSectionIconColor(section)\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\"\n >\n {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n </div>\n\n <!-- Collapsible Content: Reason and Action Button -->\n <div\n *ngIf=\"section.expanded !== false\"\n class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\"\n [attr.id]=\"getSectionContentId(section)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getSectionHeaderId(section)\"\n >\n <!-- Reason -->\n <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n Reason: {{ section.reason }}\n </p>\n \n <!-- Action Button -->\n <div>\n <cqa-button\n variant=\"outlined\"\n (clicked)=\"onSectionAction(section.id)\"\n [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate cqa-transition cqa-duration-150 cqa-ease-in-out hover:cqa-border-primary hover:cqa-text-primary hover:cqa-bg-primary-surface'\"\n >\n {{ section.actionButtonLabel }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showAiSuggestionButton\"\n variant=\"filled\"\n (clicked)=\"onMainAction()\"\n [disabled]=\"isApplying\"\n [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n </cqa-button>\n\n</div>\n \n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "iconBackgroundColor", "iconColor"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
|
|
3517
|
+
InsightCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InsightCardComponent, selector: "cqa-insight-card", inputs: { title: "title", description: "description", showAiSuggestionButton: "showAiSuggestionButton", badges: "badges", metadata: "metadata", prerequisiteSection: "prerequisiteSection", testDataSection: "testDataSection", metadataExpanded: "metadataExpanded", isPrerequisiteMissing: "isPrerequisiteMissing", isTestDataMissing: "isTestDataMissing" }, outputs: { metadataToggle: "metadataToggle", sectionToggle: "sectionToggle", sectionActionClick: "sectionActionClick", onApplySuggestionClick: "onApplySuggestionClick", onAttachPrerequisitesClick: "onAttachPrerequisitesClick", onImportTestDataClick: "onImportTestDataClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-solid cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n <!-- Section 1: Badges -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge \n *ngFor=\"let badge of visibleBadges\" \n [label]=\"badge.label\"\n [icon]=\"badge.icon\"\n [variant]=\"badge.variant || 'default'\"\n ></cqa-badge>\n </div>\n </div>\n\n <!-- Section 2: Title & Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n {{ description }}\n </p>\n </div>\n\n <!-- Section 3: Metadata Section (always visible) -->\n <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-solid cqa-border-t-primary-surface\"\n [attr.id]=\"getMetadataDetailsId()\"\n role=\"region\"\n >\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n {{ item.key }}:\n </span>\n <span \n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n {{ getMetadataValue(item.value) }}\n </span>\n </div>\n <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n </ng-container>\n </div>\n </div>\n\n <!-- Section 4: Metadata toggle -->\n <button\n *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\"\n type=\"button\"\n class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n (click)=\"toggleMetadata()\"\n [attr.aria-expanded]=\"metadataExpanded\"\n [attr.aria-controls]=\"getMetadataDetailsId()\"\n >\n <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n\n </div>\n\n <!-- Section 5: Sections (toggle visibility) -->\n <ng-container *ngIf=\"visibleSections as sections\">\n <div *ngIf=\"metadataExpanded && sections.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let section of sections; trackBy: trackSectionById\"\n class=\"cqa-border-l-4 cqa-border-solid cqa-rounded-[10px] cqa-overflow-hidden\"\n [ngClass]=\"getSectionBorderClass(section)\"\n >\n <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n <!-- Section Title with Toggle Button aligned right -->\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <h3\n [ngClass]=\"getSectionTitleClasses(section)\"\n class=\"cqa-grow\"\n [attr.id]=\"getSectionHeaderId(section)\"\n >\n {{ section.title }}\n </h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[24px] cqa-min-h-[24px] cqa-ml-auto\"\n (click)=\"toggleSection(section)\"\n [attr.aria-expanded]=\"section.expanded !== false\"\n [attr.aria-controls]=\"getSectionContentId(section)\"\n [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n >\n <mat-icon\n [ngClass]=\"getSectionIconColor(section)\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\"\n >\n {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n </div>\n\n <!-- Collapsible Content: Reason and Action Button -->\n <div\n *ngIf=\"section.expanded !== false\"\n class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\"\n [attr.id]=\"getSectionContentId(section)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getSectionHeaderId(section)\"\n >\n <!-- Reason -->\n <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n Reason: {{ section.reason }}\n </p>\n \n <!-- Action Button -->\n <div>\n <cqa-button\n variant=\"outlined\"\n (clicked)=\"onSectionAction(section.id)\"\n [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate cqa-transition cqa-duration-150 cqa-ease-in-out hover:cqa-border-primary hover:cqa-text-primary hover:cqa-bg-primary-surface'\"\n >\n {{ section.actionButtonLabel }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showAiSuggestionButton\"\n variant=\"filled\"\n (clicked)=\"onMainAction()\"\n [disabled]=\"isApplying\"\n [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n </cqa-button>\n </div>\n</div>\n \n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "iconBackgroundColor", "iconColor"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
|
|
3518
3518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, decorators: [{
|
|
3519
3519
|
type: Component,
|
|
3520
|
-
args: [{ selector: 'cqa-insight-card', template: "<div class=\"cqa-ui-root cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-solid cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n <!-- Section 1: Badges -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge \n *ngFor=\"let badge of visibleBadges\" \n [label]=\"badge.label\"\n [icon]=\"badge.icon\"\n [variant]=\"badge.variant || 'default'\"\n ></cqa-badge>\n </div>\n </div>\n\n <!-- Section 2: Title & Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n {{ description }}\n </p>\n </div>\n\n <!-- Section 3: Metadata Section (always visible) -->\n <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-solid cqa-border-t-primary-surface\"\n [attr.id]=\"getMetadataDetailsId()\"\n role=\"region\"\n >\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n {{ item.key }}:\n </span>\n <span \n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n {{ getMetadataValue(item.value) }}\n </span>\n </div>\n <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n </ng-container>\n </div>\n </div>\n\n <!-- Section 4: Metadata toggle -->\n <button\n *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\"\n type=\"button\"\n class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n (click)=\"toggleMetadata()\"\n [attr.aria-expanded]=\"metadataExpanded\"\n [attr.aria-controls]=\"getMetadataDetailsId()\"\n >\n <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n\n </div>\n\n <!-- Section 5: Sections (toggle visibility) -->\n <ng-container *ngIf=\"visibleSections as sections\">\n <div *ngIf=\"metadataExpanded && sections.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let section of sections; trackBy: trackSectionById\"\n class=\"cqa-border-l-4 cqa-border-solid cqa-rounded-[10px] cqa-overflow-hidden\"\n [ngClass]=\"getSectionBorderClass(section)\"\n >\n <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n <!-- Section Title with Toggle Button aligned right -->\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <h3\n [ngClass]=\"getSectionTitleClasses(section)\"\n class=\"cqa-grow\"\n [attr.id]=\"getSectionHeaderId(section)\"\n >\n {{ section.title }}\n </h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[24px] cqa-min-h-[24px] cqa-ml-auto\"\n (click)=\"toggleSection(section)\"\n [attr.aria-expanded]=\"section.expanded !== false\"\n [attr.aria-controls]=\"getSectionContentId(section)\"\n [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n >\n <mat-icon\n [ngClass]=\"getSectionIconColor(section)\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\"\n >\n {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n </div>\n\n <!-- Collapsible Content: Reason and Action Button -->\n <div\n *ngIf=\"section.expanded !== false\"\n class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\"\n [attr.id]=\"getSectionContentId(section)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getSectionHeaderId(section)\"\n >\n <!-- Reason -->\n <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n Reason: {{ section.reason }}\n </p>\n \n <!-- Action Button -->\n <div>\n <cqa-button\n variant=\"outlined\"\n (clicked)=\"onSectionAction(section.id)\"\n [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate cqa-transition cqa-duration-150 cqa-ease-in-out hover:cqa-border-primary hover:cqa-text-primary hover:cqa-bg-primary-surface'\"\n >\n {{ section.actionButtonLabel }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showAiSuggestionButton\"\n variant=\"filled\"\n (clicked)=\"onMainAction()\"\n [disabled]=\"isApplying\"\n [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n </cqa-button>\n\n</div>\n \n", styles: [] }]
|
|
3520
|
+
args: [{ selector: 'cqa-insight-card', template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-solid cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n <!-- Section 1: Badges -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <cqa-badge \n *ngFor=\"let badge of visibleBadges\" \n [label]=\"badge.label\"\n [icon]=\"badge.icon\"\n [variant]=\"badge.variant || 'default'\"\n ></cqa-badge>\n </div>\n </div>\n\n <!-- Section 2: Title & Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n {{ description }}\n </p>\n </div>\n\n <!-- Section 3: Metadata Section (always visible) -->\n <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-solid cqa-border-t-primary-surface\"\n [attr.id]=\"getMetadataDetailsId()\"\n role=\"region\"\n >\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n {{ item.key }}:\n </span>\n <span \n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n {{ getMetadataValue(item.value) }}\n </span>\n </div>\n <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n </ng-container>\n </div>\n </div>\n\n <!-- Section 4: Metadata toggle -->\n <button\n *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\"\n type=\"button\"\n class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n (click)=\"toggleMetadata()\"\n [attr.aria-expanded]=\"metadataExpanded\"\n [attr.aria-controls]=\"getMetadataDetailsId()\"\n >\n <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n\n </div>\n\n <!-- Section 5: Sections (toggle visibility) -->\n <ng-container *ngIf=\"visibleSections as sections\">\n <div *ngIf=\"metadataExpanded && sections.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n <div\n *ngFor=\"let section of sections; trackBy: trackSectionById\"\n class=\"cqa-border-l-4 cqa-border-solid cqa-rounded-[10px] cqa-overflow-hidden\"\n [ngClass]=\"getSectionBorderClass(section)\"\n >\n <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n <!-- Section Title with Toggle Button aligned right -->\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <h3\n [ngClass]=\"getSectionTitleClasses(section)\"\n class=\"cqa-grow\"\n [attr.id]=\"getSectionHeaderId(section)\"\n >\n {{ section.title }}\n </h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[24px] cqa-min-h-[24px] cqa-ml-auto\"\n (click)=\"toggleSection(section)\"\n [attr.aria-expanded]=\"section.expanded !== false\"\n [attr.aria-controls]=\"getSectionContentId(section)\"\n [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n >\n <mat-icon\n [ngClass]=\"getSectionIconColor(section)\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\"\n >\n {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n </div>\n\n <!-- Collapsible Content: Reason and Action Button -->\n <div\n *ngIf=\"section.expanded !== false\"\n class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\"\n [attr.id]=\"getSectionContentId(section)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getSectionHeaderId(section)\"\n >\n <!-- Reason -->\n <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n Reason: {{ section.reason }}\n </p>\n \n <!-- Action Button -->\n <div>\n <cqa-button\n variant=\"outlined\"\n (clicked)=\"onSectionAction(section.id)\"\n [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate cqa-transition cqa-duration-150 cqa-ease-in-out hover:cqa-border-primary hover:cqa-text-primary hover:cqa-bg-primary-surface'\"\n >\n {{ section.actionButtonLabel }}\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n \n <cqa-button\n *ngIf=\"showAiSuggestionButton\"\n variant=\"filled\"\n (clicked)=\"onMainAction()\"\n [disabled]=\"isApplying\"\n [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n </cqa-button>\n </div>\n</div>\n \n", styles: [] }]
|
|
3521
3521
|
}], propDecorators: { title: [{
|
|
3522
3522
|
type: Input
|
|
3523
3523
|
}], description: [{
|
|
@@ -3708,10 +3708,10 @@ class DropdownButtonComponent {
|
|
|
3708
3708
|
}
|
|
3709
3709
|
}
|
|
3710
3710
|
DropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3711
|
-
DropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: { label: "label", options: "options", selectedValue: "selectedValue", disabled: "disabled", placeholder: "placeholder" }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<div
|
|
3711
|
+
DropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: { label: "label", options: "options", selectedValue: "selectedValue", disabled: "disabled", placeholder: "placeholder" }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\" #dropdownContainer style=\"position: relative; display: inline-block; width: auto;\">\n <button\n #buttonElement\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n >\n <div [class]=\"labelClasses\">\n {{ displayLabel }}\n </div>\n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n\n <!-- Dropdown Menu -->\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-p-1.5 cqa-bg-white cqa-rounded-lg cqa-shadow-[0px_2px_4px_-2px_rgba(0,0,0,0.10)] cqa-shadow-md cqa-outline cqa-outline-1 cqa-outline-offset-[-1px] cqa-outline-gray-200 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-z-[9999] cqa-w-auto cqa-max-w-[350px]\"\n >\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5 cqa-w-full\">\n <div\n *ngFor=\"let option of options\"\n (click)=\"selectOption(option, $event)\"\n [class]=\"getOptionClasses(option)\"\n class=\"cqa-w-full cqa-whitespace-nowrap\"\n >\n <div class=\"cqa-w-6 cqa-h-4 cqa-pr-2 cqa-inline-flex cqa-flex-col cqa-justify-center cqa-items-center\">\n <mat-icon\n *ngIf=\"selectedValue === option.value\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-primary cqa-text-base cqa-leading-4\"\n >check</mat-icon>\n </div>\n <div class=\"cqa-flex-1 cqa-inline-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-justify-center cqa-text-gray-950 cqa-text-sm cqa-font-normal cqa-leading-5 cqa-font-geist\">\n {{ option.label }}\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
3712
3712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownButtonComponent, decorators: [{
|
|
3713
3713
|
type: Component,
|
|
3714
|
-
args: [{ selector: 'cqa-dropdown-button', template: "<div
|
|
3714
|
+
args: [{ selector: 'cqa-dropdown-button', template: "<div id=\"cqa-ui-root\" #dropdownContainer style=\"position: relative; display: inline-block; width: auto;\">\n <button\n #buttonElement\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n >\n <div [class]=\"labelClasses\">\n {{ displayLabel }}\n </div>\n <div [class]=\"arrowClasses\">\n <svg\n class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n viewBox=\"0 0 8 4\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 0L4 4L8 0\"\n stroke=\"#0B0B0C\"\n stroke-width=\"1.33\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n\n <!-- Dropdown Menu -->\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-p-1.5 cqa-bg-white cqa-rounded-lg cqa-shadow-[0px_2px_4px_-2px_rgba(0,0,0,0.10)] cqa-shadow-md cqa-outline cqa-outline-1 cqa-outline-offset-[-1px] cqa-outline-gray-200 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-z-[9999] cqa-w-auto cqa-max-w-[350px]\"\n >\n <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5 cqa-w-full\">\n <div\n *ngFor=\"let option of options\"\n (click)=\"selectOption(option, $event)\"\n [class]=\"getOptionClasses(option)\"\n class=\"cqa-w-full cqa-whitespace-nowrap\"\n >\n <div class=\"cqa-w-6 cqa-h-4 cqa-pr-2 cqa-inline-flex cqa-flex-col cqa-justify-center cqa-items-center\">\n <mat-icon\n *ngIf=\"selectedValue === option.value\"\n class=\"cqa-w-4 cqa-h-4 cqa-text-primary cqa-text-base cqa-leading-4\"\n >check</mat-icon>\n </div>\n <div class=\"cqa-flex-1 cqa-inline-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-justify-center cqa-text-gray-950 cqa-text-sm cqa-font-normal cqa-leading-5 cqa-font-geist\">\n {{ option.label }}\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
3715
3715
|
}], propDecorators: { label: [{
|
|
3716
3716
|
type: Input
|
|
3717
3717
|
}], options: [{
|
|
@@ -3767,12 +3767,12 @@ class HeatErrorMapCellComponent {
|
|
|
3767
3767
|
}
|
|
3768
3768
|
}
|
|
3769
3769
|
HeatErrorMapCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3770
|
-
HeatErrorMapCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: HeatErrorMapCellComponent, selector: "cqa-heat-error-map-cell", inputs: { type: "type", cases: "cases", defects: "defects", progress: "progress" }, host: { classAttribute: "cqa-block cqa-w-full" }, ngImport: i0, template: "<div
|
|
3770
|
+
HeatErrorMapCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: HeatErrorMapCellComponent, selector: "cqa-heat-error-map-cell", inputs: { type: "type", cases: "cases", defects: "defects", progress: "progress" }, host: { classAttribute: "cqa-block cqa-w-full" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" class=\"cqa-block cqa-w-full\">\n <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n <!-- section 1 -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n {{ cases }} cases\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n {{ defects }} defects\n </div>\n </div>\n </div>\n <!-- section 2 -->\n <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n <div \n class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n [style.width]=\"progressWidth\"\n ></div>\n </div>\n </div>\n</div>\n\n\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3771
3771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, decorators: [{
|
|
3772
3772
|
type: Component,
|
|
3773
3773
|
args: [{ selector: 'cqa-heat-error-map-cell', host: {
|
|
3774
3774
|
class: 'cqa-block cqa-w-full',
|
|
3775
|
-
}, template: "<div
|
|
3775
|
+
}, template: "<div id=\"cqa-ui-root\" class=\"cqa-block cqa-w-full\">\n <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n <!-- section 1 -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n {{ cases }} cases\n </div>\n </div>\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n {{ defects }} defects\n </div>\n </div>\n </div>\n <!-- section 2 -->\n <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n <div \n class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n [style.width]=\"progressWidth\"\n ></div>\n </div>\n </div>\n</div>\n\n\n", styles: [] }]
|
|
3776
3776
|
}], propDecorators: { type: [{
|
|
3777
3777
|
type: Input
|
|
3778
3778
|
}], cases: [{
|
|
@@ -4139,10 +4139,10 @@ class TableTemplateComponent {
|
|
|
4139
4139
|
}
|
|
4140
4140
|
}
|
|
4141
4141
|
TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4142
|
-
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
4142
|
+
TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\" (clicked)=\"handleRefreshClick()\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"currentSelectedItems\"\n [actions]=\"actions\"\n (actionClick)=\"actionClick($event)\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4143
4143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
|
|
4144
4144
|
type: Component,
|
|
4145
|
-
args: [{ selector: 'cqa-table-template', template: "<div
|
|
4145
|
+
args: [{ selector: 'cqa-table-template', template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n <cqa-search-bar\n *ngIf=\"showSearchBar\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n [showClear]=\"showClear\"\n (valueChange)=\"valueChange($event)\"\n (search)=\"search($event)\"\n (cleared)=\"cleared()\"\n ></cqa-search-bar>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n <cqa-button\n *ngIf=\"showFilterButton\"\n variant=\"grey-solid\"\n icon=\"add\"\n [text]=\"'Filter'\"\n (clicked)=\"toggleFilter()\"\n >\n <span>Filter</span>\n </cqa-button>\n <cqa-column-visibility\n *ngIf=\"showSettingsButton\"\n [columns]=\"visibilityColumns\"\n [columnVisibility]=\"columnVisibility\"\n [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n ></cqa-column-visibility>\n <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\" (clicked)=\"handleRefreshClick()\"></cqa-button>\n <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n </div>\n </div>\n\n <cqa-selected-filters \n *ngIf=\"showFilterPanel\"\n [filterApplied]=\"filterApplied\"\n [chips]=\"chips\"\n (removeChip)=\"onRemoveChip($event)\"\n (clearAll)=\"onClearAllChips()\"\n (onClearAll)=\"onClearAll.emit()\"\n >\n </cqa-selected-filters>\n\n <cqa-dynamic-filter\n *ngIf=\"showFilterPanel\"\n [config]=\"filterConfig\"\n [showFilterPanel]=\"showFilterPanel\"\n (filtersChanged)=\"onFiltersChanged($event)\"\n (filtersApplied)=\"onFiltersApplied($event)\"\n (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n (onResetFilterClick)=\"handleResetFilterClick()\"\n >\n </cqa-dynamic-filter>\n\n <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n <app-dynamic-table\n [columns]=\"computedColumns\"\n [data]=\"pagedRows\"\n [isTableLoading]=\"isTableLoading\"\n [isTableDataLoading]=\"isTableDataLoading\">\n <ng-template #emptyTableTpl>\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n </div>\n </ng-template>\n </app-dynamic-table>\n </ng-container>\n\n <ng-template #storyEmptyTpl>\n <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n <cqa-empty-state\n *ngIf=\"isEmptyState\"\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"onEmptyAction($event)\"\n >\n </cqa-empty-state>\n </div>\n </ng-template>\n\n </div>\n\n <cqa-pagination\n [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageItemCount]=\"pagedRows.length\"\n (paginate)=\"onPaginate($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n >\n </cqa-pagination>\n\n <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n <cqa-table-action-toolbar\n [selectedItems]=\"currentSelectedItems\"\n [actions]=\"actions\"\n (actionClick)=\"actionClick($event)\"\n ></cqa-table-action-toolbar>\n </div>\n \n </div>\n</div>\n\n", styles: [] }]
|
|
4146
4146
|
}], propDecorators: { searchPlaceholder: [{
|
|
4147
4147
|
type: Input
|
|
4148
4148
|
}], searchValue: [{
|
|
@@ -4215,11 +4215,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4215
4215
|
|
|
4216
4216
|
/**
|
|
4217
4217
|
* Ensures Angular CDK overlay content (e.g., MatSelect, Datepicker panels, library dialogs)
|
|
4218
|
-
* is nested under an element with
|
|
4219
|
-
* configured with important:
|
|
4218
|
+
* is nested under an element with id="cqa-ui-root" so Tailwind utilities
|
|
4219
|
+
* configured with important: '#cqa-ui-root' are applied inside overlays.
|
|
4220
4220
|
*
|
|
4221
|
-
* IMPORTANT: Only
|
|
4222
|
-
* Portal Material dialogs should NOT have this
|
|
4221
|
+
* IMPORTANT: Only sets id="cqa-ui-root" when library overlays are present.
|
|
4222
|
+
* Portal Material dialogs should NOT have this ID to prevent library CSS from affecting them.
|
|
4223
4223
|
*/
|
|
4224
4224
|
class TailwindOverlayContainer extends OverlayContainer {
|
|
4225
4225
|
constructor() {
|
|
@@ -4229,8 +4229,8 @@ class TailwindOverlayContainer extends OverlayContainer {
|
|
|
4229
4229
|
_createContainer() {
|
|
4230
4230
|
super._createContainer();
|
|
4231
4231
|
if (this._containerElement) {
|
|
4232
|
-
// Don't set
|
|
4233
|
-
this._containerElement.
|
|
4232
|
+
// Don't set ID initially - we'll set it dynamically when library overlays are created
|
|
4233
|
+
this._containerElement.id = '';
|
|
4234
4234
|
// Use MutationObserver to detect when library overlays are created/destroyed
|
|
4235
4235
|
this.observeLibraryOverlays();
|
|
4236
4236
|
}
|
|
@@ -4239,16 +4239,16 @@ class TailwindOverlayContainer extends OverlayContainer {
|
|
|
4239
4239
|
if (!this._containerElement)
|
|
4240
4240
|
return;
|
|
4241
4241
|
const observer = new MutationObserver(() => {
|
|
4242
|
-
this.
|
|
4242
|
+
this.updateContainerId();
|
|
4243
4243
|
});
|
|
4244
4244
|
observer.observe(this._containerElement, {
|
|
4245
4245
|
childList: true,
|
|
4246
4246
|
subtree: true,
|
|
4247
4247
|
});
|
|
4248
4248
|
// Also check immediately in case overlays already exist
|
|
4249
|
-
setTimeout(() => this.
|
|
4249
|
+
setTimeout(() => this.updateContainerId(), 0);
|
|
4250
4250
|
}
|
|
4251
|
-
|
|
4251
|
+
updateContainerId() {
|
|
4252
4252
|
if (!this._containerElement)
|
|
4253
4253
|
return;
|
|
4254
4254
|
// Count library overlays (dialogs, select panels, datepicker panels)
|
|
@@ -4260,14 +4260,14 @@ class TailwindOverlayContainer extends OverlayContainer {
|
|
|
4260
4260
|
// Check for portal Material dialogs (those without .cqa-dialog-panel)
|
|
4261
4261
|
const portalDialogs = this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)').length;
|
|
4262
4262
|
if (totalLibraryOverlays > 0) {
|
|
4263
|
-
// Library overlays exist -
|
|
4264
|
-
this._containerElement.
|
|
4263
|
+
// Library overlays exist - set the ID
|
|
4264
|
+
this._containerElement.id = 'cqa-ui-root';
|
|
4265
4265
|
}
|
|
4266
4266
|
else if (portalDialogs > 0 && totalLibraryOverlays === 0) {
|
|
4267
|
-
// Only portal dialogs exist - remove the
|
|
4268
|
-
this._containerElement.
|
|
4267
|
+
// Only portal dialogs exist - remove the ID to prevent library CSS from affecting them
|
|
4268
|
+
this._containerElement.id = '';
|
|
4269
4269
|
}
|
|
4270
|
-
// If both exist, keep the
|
|
4270
|
+
// If both exist, keep the ID (library overlays need it, CSS resets will handle portal dialogs)
|
|
4271
4271
|
}
|
|
4272
4272
|
}
|
|
4273
4273
|
TailwindOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|