@cqa-lib/cqa-ui 1.1.7 → 1.1.8
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/ai-reasoning/ai-reasoning.component.mjs +18 -0
- package/esm2020/lib/badge/badge.component.mjs +23 -4
- package/esm2020/lib/dashboards/insight-card/insight-card.component.mjs +1 -1
- package/esm2020/lib/failed-step-card/failed-step-card.component.mjs +3 -3
- package/esm2020/lib/simulator/simulator.component.mjs +6 -3
- package/esm2020/lib/table/dynamic-table/dynamic-table.component.mjs +3 -3
- package/esm2020/lib/ui-kit.module.mjs +15 -10
- package/esm2020/lib/visual-difference-modal/visual-difference-modal.component.mjs +116 -0
- package/esm2020/public-api.mjs +3 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs +143 -27
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +143 -27
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/ai-reasoning/ai-reasoning.component.d.ts +6 -0
- package/lib/badge/badge.component.d.ts +10 -1
- package/lib/simulator/simulator.component.d.ts +2 -1
- package/lib/table/dynamic-table/dynamic-table.component.d.ts +0 -1
- package/lib/ui-kit.module.d.ts +18 -17
- package/lib/visual-difference-modal/visual-difference-modal.component.d.ts +28 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -1
- package/styles.css +1 -1
- package/esm2020/lib/view-image-modal/view-image-modal.component.mjs +0 -40
- package/lib/view-image-modal/view-image-modal.component.d.ts +0 -13
|
@@ -1331,10 +1331,10 @@ class DynamicTableComponent {
|
|
|
1331
1331
|
}
|
|
1332
1332
|
}
|
|
1333
1333
|
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 });
|
|
1334
|
-
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" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\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\" *ngIf=\"!showTableLoading\">\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-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"
|
|
1334
|
+
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" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\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\" *ngIf=\"!showTableLoading\">\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }] });
|
|
1335
1335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
1336
1336
|
type: Component,
|
|
1337
|
-
args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\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\" *ngIf=\"!showTableLoading\">\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-[#374151] cqa-bg-[#eff0f7]\"\n [ngClass]=\"
|
|
1337
|
+
args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\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\" *ngIf=\"!showTableLoading\">\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: [] }]
|
|
1338
1338
|
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1339
1339
|
type: Input
|
|
1340
1340
|
}], columns: [{
|
|
@@ -4326,6 +4326,7 @@ function getMetadataValueStyle(key, value) {
|
|
|
4326
4326
|
|
|
4327
4327
|
class BadgeComponent {
|
|
4328
4328
|
constructor() {
|
|
4329
|
+
this.type = 'default';
|
|
4329
4330
|
this.label = '';
|
|
4330
4331
|
this.iconLibrary = 'mat';
|
|
4331
4332
|
this.variant = 'default';
|
|
@@ -4441,6 +4442,10 @@ class BadgeComponent {
|
|
|
4441
4442
|
else if (this.size === 'small') {
|
|
4442
4443
|
iconSize = '12px';
|
|
4443
4444
|
}
|
|
4445
|
+
// Custom iconSize overrides size-based defaults
|
|
4446
|
+
if (this.iconSize && !isNaN(this.iconSize)) {
|
|
4447
|
+
iconSize = `${this.iconSize}px`;
|
|
4448
|
+
}
|
|
4444
4449
|
const styles = {
|
|
4445
4450
|
'font-size': iconSize,
|
|
4446
4451
|
'width': iconSize,
|
|
@@ -4473,11 +4478,13 @@ class BadgeComponent {
|
|
|
4473
4478
|
}
|
|
4474
4479
|
}
|
|
4475
4480
|
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4476
|
-
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", borderColor: "borderColor", iconBackgroundColor: "iconBackgroundColor", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"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 [style.border-color]=\"borderColor\"\n class=\"cqa-font-inter cqa-font-normal\">\n <span \n
|
|
4481
|
+
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "cqa-badge", inputs: { type: "type", label: "label", icon: "icon", iconLibrary: "iconLibrary", variant: "variant", size: "size", backgroundColor: "backgroundColor", textColor: "textColor", borderColor: "borderColor", iconBackgroundColor: "iconBackgroundColor", iconColor: "iconColor", iconSize: "iconSize", inlineStyles: "inlineStyles", key: "key", value: "value", keyTextColor: "keyTextColor", valueTextColor: "valueTextColor" }, ngImport: i0, template: "<div class=\"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 [style.border-color]=\"borderColor\"\n [attr.style]=\"inlineStyles\"\n class=\"cqa-font-inter cqa-font-normal\">\n <!-- Default type: icon + label -->\n <ng-container *ngIf=\"type === 'default'\">\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 </ng-container>\n \n <!-- KeyValue type: key + value with different colors -->\n <ng-container *ngIf=\"type === 'keyValue'\">\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 <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-[6px]\">\n <span [style.color]=\"keyTextColor\">{{ key }}:</span>\n <span [style.color]=\"valueTextColor\">{{ value }}</span>\n </div>\n </ng-container>\n </span>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
4477
4482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
4478
4483
|
type: Component,
|
|
4479
|
-
args: [{ selector: 'cqa-badge', template: "<div class=\"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 [style.border-color]=\"borderColor\"\n class=\"cqa-font-inter cqa-font-normal\">\n <span \n
|
|
4480
|
-
}], propDecorators: {
|
|
4484
|
+
args: [{ selector: 'cqa-badge', template: "<div class=\"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 [style.border-color]=\"borderColor\"\n [attr.style]=\"inlineStyles\"\n class=\"cqa-font-inter cqa-font-normal\">\n <!-- Default type: icon + label -->\n <ng-container *ngIf=\"type === 'default'\">\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 </ng-container>\n \n <!-- KeyValue type: key + value with different colors -->\n <ng-container *ngIf=\"type === 'keyValue'\">\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 <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-[6px]\">\n <span [style.color]=\"keyTextColor\">{{ key }}:</span>\n <span [style.color]=\"valueTextColor\">{{ value }}</span>\n </div>\n </ng-container>\n </span>\n</div>\n\n", styles: [] }]
|
|
4485
|
+
}], propDecorators: { type: [{
|
|
4486
|
+
type: Input
|
|
4487
|
+
}], label: [{
|
|
4481
4488
|
type: Input
|
|
4482
4489
|
}], icon: [{
|
|
4483
4490
|
type: Input
|
|
@@ -4497,6 +4504,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4497
4504
|
type: Input
|
|
4498
4505
|
}], iconColor: [{
|
|
4499
4506
|
type: Input
|
|
4507
|
+
}], iconSize: [{
|
|
4508
|
+
type: Input
|
|
4509
|
+
}], inlineStyles: [{
|
|
4510
|
+
type: Input
|
|
4511
|
+
}], key: [{
|
|
4512
|
+
type: Input
|
|
4513
|
+
}], value: [{
|
|
4514
|
+
type: Input
|
|
4515
|
+
}], keyTextColor: [{
|
|
4516
|
+
type: Input
|
|
4517
|
+
}], valueTextColor: [{
|
|
4518
|
+
type: Input
|
|
4500
4519
|
}] } });
|
|
4501
4520
|
|
|
4502
4521
|
class InsightCardComponent {
|
|
@@ -4688,7 +4707,7 @@ class InsightCardComponent {
|
|
|
4688
4707
|
}
|
|
4689
4708
|
}
|
|
4690
4709
|
InsightCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4691
|
-
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", metadataKeyClick: "metadataKeyClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"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-cursor-pointer 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 \n class=\"cqa-flex cqa-items-center cqa-gap-[6px]\"\n [class.clickable-key-container]=\"isKeyClickable(item.value)\"\n (click)=\"onKeyClick(item.key, item.value)\">\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]=\"item.key != 'ID' ? 'cqa-text-primary' : ''\"\n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"item.key != 'ID' ? getMetadataValueStyle(item.key, item.value) : {}\"\n class=\" cqa-text-primary cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm\">\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", "borderColor", "iconBackgroundColor", "iconColor"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "keyvalue": i2$1.KeyValuePipe } });
|
|
4710
|
+
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", metadataKeyClick: "metadataKeyClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"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-cursor-pointer 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 \n class=\"cqa-flex cqa-items-center cqa-gap-[6px]\"\n [class.clickable-key-container]=\"isKeyClickable(item.value)\"\n (click)=\"onKeyClick(item.key, item.value)\">\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]=\"item.key != 'ID' ? 'cqa-text-primary' : ''\"\n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"item.key != 'ID' ? getMetadataValueStyle(item.key, item.value) : {}\"\n class=\" cqa-text-primary cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm\">\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: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "keyvalue": i2$1.KeyValuePipe } });
|
|
4692
4711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, decorators: [{
|
|
4693
4712
|
type: Component,
|
|
4694
4713
|
args: [{ selector: 'cqa-insight-card', host: { class: 'cqa-ui-root' }, template: "<div class=\"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-cursor-pointer 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 \n class=\"cqa-flex cqa-items-center cqa-gap-[6px]\"\n [class.clickable-key-container]=\"isKeyClickable(item.value)\"\n (click)=\"onKeyClick(item.key, item.value)\">\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]=\"item.key != 'ID' ? 'cqa-text-primary' : ''\"\n [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n [ngStyle]=\"item.key != 'ID' ? getMetadataValueStyle(item.key, item.value) : {}\"\n class=\" cqa-text-primary cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm\">\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: [] }]
|
|
@@ -5480,6 +5499,7 @@ class SimulatorComponent {
|
|
|
5480
5499
|
this.screenShotUrl = '';
|
|
5481
5500
|
this.platformName = 'Web - Chrome';
|
|
5482
5501
|
this.platformType = 'browser';
|
|
5502
|
+
this.isLive = false;
|
|
5483
5503
|
this.videoTimeUpdate = new EventEmitter();
|
|
5484
5504
|
this.videoPlay = new EventEmitter();
|
|
5485
5505
|
this.videoPause = new EventEmitter();
|
|
@@ -5631,10 +5651,10 @@ class SimulatorComponent {
|
|
|
5631
5651
|
}
|
|
5632
5652
|
}
|
|
5633
5653
|
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5634
|
-
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", platformName: "platformName", platformType: "platformType" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayer", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <div *ngIf=\"currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n ></video>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm\" *ngIf=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\" \n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\" \n (mouseleave)=\"stopDrag()\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full cqa-transition-[width] cqa-duration-100\"\n [style.width.%]=\"progress\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 10;\"\n (mousedown)=\"startDrag()\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5654
|
+
SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", platformName: "platformName", platformType: "platformType", isLive: "isLive" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause" }, viewQueries: [{ propertyName: "vplayer", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBar", first: true, predicate: ["timelineBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <div *ngIf=\"currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n ></video>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\" \n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\" \n (mouseleave)=\"stopDrag()\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full cqa-transition-[width] cqa-duration-100\"\n [style.width.%]=\"progress\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 10;\"\n (mousedown)=\"startDrag()\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5635
5655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
5636
5656
|
type: Component,
|
|
5637
|
-
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <div *ngIf=\"currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n ></video>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm\" *ngIf=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\" \n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\" \n (mouseleave)=\"stopDrag()\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full cqa-transition-[width] cqa-duration-100\"\n [style.width.%]=\"progress\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 10;\"\n (mousedown)=\"startDrag()\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
5657
|
+
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\" [ngStyle]=\"{\n position: isFullScreen ? 'fixed' : null,\n inset: isFullScreen ? '1rem' : null,\n zIndex: isFullScreen ? '50' : null,\n boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n borderRadius: isFullScreen ? '.5rem' : null,\n border: isFullScreen ? '1px solid #E5E7EB' : null,\n width: isFullScreen ? 'calc(100% - 32px)' : null,\n height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n overflow: isFullScreen ? 'hidden' : null\n}\">\n <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n </span>\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n </div>\n <mat-icon *ngIf=\"platformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <g clip-path=\"url(#clip0_935_15847)\">\n <path\n d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path\n d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n stroke-linecap=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_935_15847\">\n <rect width=\"10\" height=\"10\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </mat-icon>\n <mat-icon *ngIf=\"platformType === 'device'\" style=\"width: 10px; height: 10px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">{{ platformName }}</p>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-segment-control \n [segments]=\"segments\" \n [value]=\"currentView\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n \n <div *ngIf=\"!isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Expand\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n\n <div *ngIf=\"isFullScreen\" \n class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n (click)=\"toggleFullScreen()\"\n title=\"Exit full screen\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n <div *ngIf=\"currentView === 'video'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-35px)]\" *ngIf=\"videoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device'}\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-black\"\n [src]=\"videoUrl\"\n type=\"video/webm\"\n (loadedmetadata)=\"onVideoMetadataLoaded()\"\n (canplay)=\"onVideoCanPlay()\"\n ></video>\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!videoUrl\">\n No video recording found\n </div>\n \n <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" *ngIf=\"videoUrl\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button \n type=\"button\"\n class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n style=\"pointer-events: auto;\"\n (click)=\"togglePlay()\">\n <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n </svg>\n </span>\n <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n </svg>\n </span>\n </button>\n \n <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-[20px]\">\n {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n </span>\n \n <div \n #timelineBar\n class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n (click)=\"onTimelineClick($event)\" \n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\" \n (mouseleave)=\"stopDrag()\">\n \n <div \n *ngFor=\"let step of stepMarkers\" \n class=\"cqa-absolute cqa-w-1 cqa-h-full cqa-top-0 cqa-rounded-sm\"\n [style.left.%]=\"getStepLeftPosition(step)\"\n [style.background]=\"getStepColor(step)\"\n style=\"pointer-events: none; z-index: 20;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-green-500 cqa-rounded-full cqa-transition-[width] cqa-duration-100\"\n [style.width.%]=\"progress\"\n style=\"pointer-events: none; z-index: 2;\">\n </div>\n \n <div \n class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-green-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n [style.left.%]=\"progress\"\n style=\"transform: translate(-50%, -50%); z-index: 10;\"\n (mousedown)=\"startDrag()\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"currentView === 'screenshots'\" class=\"cqa-h-full\">\n <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-full cqa-block cqa-bg-black cqa-mx-auto\"\n />\n </div>\n \n <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n No screenshot available\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
5638
5658
|
}], propDecorators: { videoUrl: [{
|
|
5639
5659
|
type: Input
|
|
5640
5660
|
}], videoCurrentDuration: [{
|
|
@@ -5647,6 +5667,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5647
5667
|
type: Input
|
|
5648
5668
|
}], platformType: [{
|
|
5649
5669
|
type: Input
|
|
5670
|
+
}], isLive: [{
|
|
5671
|
+
type: Input
|
|
5650
5672
|
}], videoTimeUpdate: [{
|
|
5651
5673
|
type: Output
|
|
5652
5674
|
}], videoPlay: [{
|
|
@@ -5945,12 +5967,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5945
5967
|
type: Input
|
|
5946
5968
|
}] } });
|
|
5947
5969
|
|
|
5948
|
-
class
|
|
5970
|
+
class VisualDifferenceModalComponent {
|
|
5949
5971
|
constructor() {
|
|
5950
|
-
this.
|
|
5951
|
-
this.
|
|
5972
|
+
this.baselineUrl = '';
|
|
5973
|
+
this.currentUrl = '';
|
|
5974
|
+
this.differenceUrl = '';
|
|
5975
|
+
this.title = 'Visual Difference';
|
|
5976
|
+
this.subtitle = 'Comparing Baseline vs. Current Execution';
|
|
5952
5977
|
this.isOpen = false;
|
|
5953
5978
|
this.close = new EventEmitter();
|
|
5979
|
+
this.currentView = 'baseline';
|
|
5980
|
+
this.baselineImageError = false;
|
|
5981
|
+
this.currentImageError = false;
|
|
5982
|
+
this.differenceImageError = false;
|
|
5983
|
+
}
|
|
5984
|
+
ngOnChanges(changes) {
|
|
5985
|
+
if (changes['baselineUrl']) {
|
|
5986
|
+
this.baselineImageError = false;
|
|
5987
|
+
}
|
|
5988
|
+
if (changes['currentUrl']) {
|
|
5989
|
+
this.currentImageError = false;
|
|
5990
|
+
}
|
|
5991
|
+
if (changes['differenceUrl']) {
|
|
5992
|
+
this.differenceImageError = false;
|
|
5993
|
+
}
|
|
5994
|
+
}
|
|
5995
|
+
get currentImageUrl() {
|
|
5996
|
+
switch (this.currentView) {
|
|
5997
|
+
case 'baseline':
|
|
5998
|
+
return this.baselineUrl;
|
|
5999
|
+
case 'current':
|
|
6000
|
+
return this.currentUrl;
|
|
6001
|
+
case 'difference':
|
|
6002
|
+
return this.differenceUrl;
|
|
6003
|
+
default:
|
|
6004
|
+
return '';
|
|
6005
|
+
}
|
|
5954
6006
|
}
|
|
5955
6007
|
onClose() {
|
|
5956
6008
|
this.close.emit();
|
|
@@ -5966,16 +6018,62 @@ class ViewImageModalComponent {
|
|
|
5966
6018
|
const img = event.target;
|
|
5967
6019
|
img.style.display = 'none';
|
|
5968
6020
|
}
|
|
6021
|
+
onThumbnailError(type, event) {
|
|
6022
|
+
const img = event.target;
|
|
6023
|
+
img.style.display = 'none';
|
|
6024
|
+
if (type === 'baseline') {
|
|
6025
|
+
this.baselineImageError = true;
|
|
6026
|
+
}
|
|
6027
|
+
else if (type === 'current') {
|
|
6028
|
+
this.currentImageError = true;
|
|
6029
|
+
}
|
|
6030
|
+
else if (type === 'difference') {
|
|
6031
|
+
this.differenceImageError = true;
|
|
6032
|
+
}
|
|
6033
|
+
}
|
|
6034
|
+
hasThumbnailImage(type) {
|
|
6035
|
+
if (type === 'baseline') {
|
|
6036
|
+
return !!this.baselineUrl && !this.baselineImageError;
|
|
6037
|
+
}
|
|
6038
|
+
else if (type === 'current') {
|
|
6039
|
+
return !!this.currentUrl && !this.currentImageError;
|
|
6040
|
+
}
|
|
6041
|
+
else if (type === 'difference') {
|
|
6042
|
+
return !!this.differenceUrl && !this.differenceImageError;
|
|
6043
|
+
}
|
|
6044
|
+
return false;
|
|
6045
|
+
}
|
|
6046
|
+
setView(view) {
|
|
6047
|
+
this.currentView = view;
|
|
6048
|
+
}
|
|
6049
|
+
navigatePrevious() {
|
|
6050
|
+
const views = ['baseline', 'current', 'difference'];
|
|
6051
|
+
const currentIndex = views.indexOf(this.currentView);
|
|
6052
|
+
const previousIndex = currentIndex > 0 ? currentIndex - 1 : views.length - 1;
|
|
6053
|
+
this.currentView = views[previousIndex];
|
|
6054
|
+
}
|
|
6055
|
+
navigateNext() {
|
|
6056
|
+
const views = ['baseline', 'current', 'difference'];
|
|
6057
|
+
const currentIndex = views.indexOf(this.currentView);
|
|
6058
|
+
const nextIndex = currentIndex < views.length - 1 ? currentIndex + 1 : 0;
|
|
6059
|
+
this.currentView = views[nextIndex];
|
|
6060
|
+
}
|
|
5969
6061
|
}
|
|
5970
|
-
|
|
5971
|
-
|
|
5972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type:
|
|
6062
|
+
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6063
|
+
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: { baselineUrl: "baselineUrl", currentUrl: "currentUrl", differenceUrl: "differenceUrl", title: "title", subtitle: "subtitle", isOpen: "isOpen" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
|
|
5973
6065
|
type: Component,
|
|
5974
|
-
args: [{ selector: 'cqa-
|
|
5975
|
-
}], propDecorators: {
|
|
6066
|
+
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6067
|
+
}], propDecorators: { baselineUrl: [{
|
|
6068
|
+
type: Input
|
|
6069
|
+
}], currentUrl: [{
|
|
6070
|
+
type: Input
|
|
6071
|
+
}], differenceUrl: [{
|
|
5976
6072
|
type: Input
|
|
5977
6073
|
}], title: [{
|
|
5978
6074
|
type: Input
|
|
6075
|
+
}], subtitle: [{
|
|
6076
|
+
type: Input
|
|
5979
6077
|
}], isOpen: [{
|
|
5980
6078
|
type: Input
|
|
5981
6079
|
}], close: [{
|
|
@@ -6701,10 +6799,10 @@ class FailedStepCardComponent {
|
|
|
6701
6799
|
}
|
|
6702
6800
|
}
|
|
6703
6801
|
FailedStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6704
|
-
FailedStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepCardComponent, selector: "cqa-failed-step-card", inputs: { failedStepData: "failedStepData" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px]
|
|
6802
|
+
FailedStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepCardComponent, selector: "cqa-failed-step-card", inputs: { failedStepData: "failedStepData" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-h-[200px] cqa-overflow-y-auto cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[114px] cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px]\" style=\"border: 1px solid #E5E7EB\">\n <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed cqa-h-[85px] cqa-max-h-[85px] cqa-overflow-y-auto cqa-font-medium\">\n {{ expectedResult }}\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-h-[85px] cqa-max-h-[85px] cqa-overflow-y-auto cqa-font-medium\">\n {{ actualResult }}\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n" });
|
|
6705
6803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, decorators: [{
|
|
6706
6804
|
type: Component,
|
|
6707
|
-
args: [{ selector: 'cqa-failed-step-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px]
|
|
6805
|
+
args: [{ selector: 'cqa-failed-step-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-h-[200px] cqa-overflow-y-auto cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n <div>\n <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n <span class=\"cqa-text-[#636363]\">\u2022</span>\n <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[114px] cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px]\" style=\"border: 1px solid #E5E7EB\">\n <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed cqa-h-[85px] cqa-max-h-[85px] cqa-overflow-y-auto cqa-font-medium\">\n {{ expectedResult }}\n </div>\n </div>\n </div>\n\n <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-h-[85px] cqa-max-h-[85px] cqa-overflow-y-auto cqa-font-medium\">\n {{ actualResult }}\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6708
6806
|
}], propDecorators: { failedStepData: [{
|
|
6709
6807
|
type: Input
|
|
6710
6808
|
}] } });
|
|
@@ -6845,6 +6943,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6845
6943
|
type: Output
|
|
6846
6944
|
}] } });
|
|
6847
6945
|
|
|
6946
|
+
class AiReasoningComponent {
|
|
6947
|
+
constructor() {
|
|
6948
|
+
this.reasoningPoints = [];
|
|
6949
|
+
}
|
|
6950
|
+
}
|
|
6951
|
+
AiReasoningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AiReasoningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6952
|
+
AiReasoningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AiReasoningComponent, selector: "cqa-ai-reasoning", inputs: { reasoningPoints: "reasoningPoints" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-h-[200px] cqa-bg-white cqa-rounded-lg cqa-flex cqa-flex-col cqa-gap-[10px]\" style=\"border: 1px solid #E5E7EB; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M6.62467 10.3332C6.56515 10.1025 6.44489 9.89191 6.27641 9.72343C6.10793 9.55495 5.89738 9.43469 5.66667 9.37517L1.57667 8.32051C1.50689 8.3007 1.44547 8.25867 1.40174 8.2008C1.35801 8.14293 1.33435 8.07238 1.33435 7.99984C1.33435 7.9273 1.35801 7.85675 1.40174 7.79888C1.44547 7.74101 1.50689 7.69898 1.57667 7.67917L5.66667 6.62384C5.8973 6.56438 6.1078 6.44422 6.27627 6.27587C6.44474 6.10751 6.56504 5.8971 6.62467 5.66651L7.67933 1.57651C7.69894 1.50645 7.74092 1.44474 7.79888 1.40077C7.85684 1.35681 7.92759 1.33301 8.00033 1.33301C8.07308 1.33301 8.14383 1.35681 8.20179 1.40077C8.25974 1.44474 8.30173 1.50645 8.32133 1.57651L9.37533 5.66651C9.43485 5.89722 9.55511 6.10777 9.72359 6.27625C9.89207 6.44473 10.1026 6.56499 10.3333 6.62451L14.4233 7.67851C14.4937 7.69791 14.5557 7.73985 14.5999 7.79789C14.6441 7.85594 14.668 7.92688 14.668 7.99984C14.668 8.0728 14.6441 8.14374 14.5999 8.20179C14.5557 8.25983 14.4937 8.30177 14.4233 8.32117L10.3333 9.37517C10.1026 9.43469 9.89207 9.55495 9.72359 9.72343C9.55511 9.89191 9.43485 10.1025 9.37533 10.3332L8.32067 14.4232C8.30106 14.4932 8.25908 14.5549 8.20112 14.5989C8.14316 14.6429 8.07241 14.6667 7.99967 14.6667C7.92692 14.6667 7.85617 14.6429 7.79821 14.5989C7.74026 14.5549 7.69827 14.4932 7.67867 14.4232L6.62467 10.3332Z\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M13.3333 2V4.66667\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.6667 3.33301H12\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.66666 11.333V12.6663\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.33333 12H2\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <h3 class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#0A0A0A]\" style=\"margin: 0;\">AI Reasoning</h3>\n </div>\n\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-list-none cqa-m-0 cqa-px-3 cqa-pb-2 cqa-h-[100%-44px] cqa-overflow-y-auto\" *ngIf=\"reasoningPoints && reasoningPoints.length > 0\">\n <li *ngFor=\"let point of reasoningPoints\" class=\"cqa-flex cqa-items-start cqa-gap-2\">\n <span class=\"cqa-w-1.5 cqa-h-1.5 cqa-rounded-full cqa-bg-[#0337DC] cqa-mt-1 cqa-flex-shrink-0\"></span>\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\" style=\"line-height: 1.5;\">{{ point }}</span>\n </li>\n </ul>\n\n <div *ngIf=\"!reasoningPoints || reasoningPoints.length === 0\" class=\"cqa-text-[10px] cqa-text-[#737373]\">\n No reasoning points available.\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AiReasoningComponent, decorators: [{
|
|
6954
|
+
type: Component,
|
|
6955
|
+
args: [{ selector: 'cqa-ai-reasoning', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n <div class=\"cqa-h-[200px] cqa-bg-white cqa-rounded-lg cqa-flex cqa-flex-col cqa-gap-[10px]\" style=\"border: 1px solid #E5E7EB; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M6.62467 10.3332C6.56515 10.1025 6.44489 9.89191 6.27641 9.72343C6.10793 9.55495 5.89738 9.43469 5.66667 9.37517L1.57667 8.32051C1.50689 8.3007 1.44547 8.25867 1.40174 8.2008C1.35801 8.14293 1.33435 8.07238 1.33435 7.99984C1.33435 7.9273 1.35801 7.85675 1.40174 7.79888C1.44547 7.74101 1.50689 7.69898 1.57667 7.67917L5.66667 6.62384C5.8973 6.56438 6.1078 6.44422 6.27627 6.27587C6.44474 6.10751 6.56504 5.8971 6.62467 5.66651L7.67933 1.57651C7.69894 1.50645 7.74092 1.44474 7.79888 1.40077C7.85684 1.35681 7.92759 1.33301 8.00033 1.33301C8.07308 1.33301 8.14383 1.35681 8.20179 1.40077C8.25974 1.44474 8.30173 1.50645 8.32133 1.57651L9.37533 5.66651C9.43485 5.89722 9.55511 6.10777 9.72359 6.27625C9.89207 6.44473 10.1026 6.56499 10.3333 6.62451L14.4233 7.67851C14.4937 7.69791 14.5557 7.73985 14.5999 7.79789C14.6441 7.85594 14.668 7.92688 14.668 7.99984C14.668 8.0728 14.6441 8.14374 14.5999 8.20179C14.5557 8.25983 14.4937 8.30177 14.4233 8.32117L10.3333 9.37517C10.1026 9.43469 9.89207 9.55495 9.72359 9.72343C9.55511 9.89191 9.43485 10.1025 9.37533 10.3332L8.32067 14.4232C8.30106 14.4932 8.25908 14.5549 8.20112 14.5989C8.14316 14.6429 8.07241 14.6667 7.99967 14.6667C7.92692 14.6667 7.85617 14.6429 7.79821 14.5989C7.74026 14.5549 7.69827 14.4932 7.67867 14.4232L6.62467 10.3332Z\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M13.3333 2V4.66667\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.6667 3.33301H12\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.66666 11.333V12.6663\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M3.33333 12H2\" stroke=\"#0337DC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <h3 class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#0A0A0A]\" style=\"margin: 0;\">AI Reasoning</h3>\n </div>\n\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-list-none cqa-m-0 cqa-px-3 cqa-pb-2 cqa-h-[100%-44px] cqa-overflow-y-auto\" *ngIf=\"reasoningPoints && reasoningPoints.length > 0\">\n <li *ngFor=\"let point of reasoningPoints\" class=\"cqa-flex cqa-items-start cqa-gap-2\">\n <span class=\"cqa-w-1.5 cqa-h-1.5 cqa-rounded-full cqa-bg-[#0337DC] cqa-mt-1 cqa-flex-shrink-0\"></span>\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\" style=\"line-height: 1.5;\">{{ point }}</span>\n </li>\n </ul>\n\n <div *ngIf=\"!reasoningPoints || reasoningPoints.length === 0\" class=\"cqa-text-[10px] cqa-text-[#737373]\">\n No reasoning points available.\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6956
|
+
}], propDecorators: { reasoningPoints: [{
|
|
6957
|
+
type: Input
|
|
6958
|
+
}] } });
|
|
6959
|
+
|
|
6848
6960
|
class UiKitModule {
|
|
6849
6961
|
constructor(iconRegistry) {
|
|
6850
6962
|
iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
@@ -6890,12 +7002,13 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6890
7002
|
AiDebugAlertComponent,
|
|
6891
7003
|
NetworkRequestComponent,
|
|
6892
7004
|
RunHistoryCardComponent,
|
|
6893
|
-
|
|
7005
|
+
VisualDifferenceModalComponent,
|
|
6894
7006
|
ConfigurationCardComponent,
|
|
6895
7007
|
CompareRunsComponent,
|
|
6896
7008
|
IterationsLoopComponent,
|
|
6897
7009
|
FailedStepCardComponent,
|
|
6898
|
-
CustomInputComponent
|
|
7010
|
+
CustomInputComponent,
|
|
7011
|
+
AiReasoningComponent], imports: [CommonModule,
|
|
6899
7012
|
FormsModule,
|
|
6900
7013
|
ReactiveFormsModule,
|
|
6901
7014
|
MatIconModule,
|
|
@@ -6949,12 +7062,13 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
6949
7062
|
AiDebugAlertComponent,
|
|
6950
7063
|
NetworkRequestComponent,
|
|
6951
7064
|
RunHistoryCardComponent,
|
|
6952
|
-
|
|
7065
|
+
VisualDifferenceModalComponent,
|
|
6953
7066
|
ConfigurationCardComponent,
|
|
6954
7067
|
CompareRunsComponent,
|
|
6955
7068
|
IterationsLoopComponent,
|
|
6956
7069
|
FailedStepCardComponent,
|
|
6957
|
-
CustomInputComponent
|
|
7070
|
+
CustomInputComponent,
|
|
7071
|
+
AiReasoningComponent] });
|
|
6958
7072
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
6959
7073
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
6960
7074
|
], imports: [[
|
|
@@ -7019,12 +7133,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7019
7133
|
AiDebugAlertComponent,
|
|
7020
7134
|
NetworkRequestComponent,
|
|
7021
7135
|
RunHistoryCardComponent,
|
|
7022
|
-
|
|
7136
|
+
VisualDifferenceModalComponent,
|
|
7023
7137
|
ConfigurationCardComponent,
|
|
7024
7138
|
CompareRunsComponent,
|
|
7025
7139
|
IterationsLoopComponent,
|
|
7026
7140
|
FailedStepCardComponent,
|
|
7027
|
-
CustomInputComponent
|
|
7141
|
+
CustomInputComponent,
|
|
7142
|
+
AiReasoningComponent
|
|
7028
7143
|
],
|
|
7029
7144
|
imports: [
|
|
7030
7145
|
CommonModule,
|
|
@@ -7084,12 +7199,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7084
7199
|
AiDebugAlertComponent,
|
|
7085
7200
|
NetworkRequestComponent,
|
|
7086
7201
|
RunHistoryCardComponent,
|
|
7087
|
-
|
|
7202
|
+
VisualDifferenceModalComponent,
|
|
7088
7203
|
ConfigurationCardComponent,
|
|
7089
7204
|
CompareRunsComponent,
|
|
7090
7205
|
IterationsLoopComponent,
|
|
7091
7206
|
FailedStepCardComponent,
|
|
7092
|
-
CustomInputComponent
|
|
7207
|
+
CustomInputComponent,
|
|
7208
|
+
AiReasoningComponent
|
|
7093
7209
|
],
|
|
7094
7210
|
providers: [
|
|
7095
7211
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
@@ -7233,5 +7349,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
7233
7349
|
* Generated bundle index. Do not edit.
|
|
7234
7350
|
*/
|
|
7235
7351
|
|
|
7236
|
-
export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedStepCardComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule,
|
|
7352
|
+
export { ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedStepCardComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
7237
7353
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|