@cqa-lib/cqa-ui 1.1.1 → 1.1.2
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/configuration-card/configuration-card.component.mjs +93 -0
- package/esm2020/lib/console-alert/console-alert.component.mjs +3 -3
- package/esm2020/lib/run-history-card/run-history-card.component.mjs +25 -10
- package/esm2020/lib/simulator/simulator.component.mjs +3 -3
- package/esm2020/lib/ui-kit.module.mjs +15 -5
- package/esm2020/lib/view-image-modal/view-image-modal.component.mjs +40 -0
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +168 -18
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +168 -18
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/configuration-card/configuration-card.component.d.ts +31 -0
- package/lib/run-history-card/run-history-card.component.d.ts +6 -1
- package/lib/ui-kit.module.d.ts +18 -16
- package/lib/view-image-modal/view-image-modal.component.d.ts +13 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/styles.css +1 -1
|
@@ -5479,10 +5479,10 @@ class SimulatorComponent {
|
|
|
5479
5479
|
}
|
|
5480
5480
|
}
|
|
5481
5481
|
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5482
|
-
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]=\"isFullScreen && {\n position: 'fixed',\n inset: '1rem',\n zIndex: '50',\n boxShadow: '0px 13px 25px -12px rgba(0, 0, 0, 0.25)',\n borderRadius: '.5rem',\n border: '1px solid #E5E7EB',\n width: 'calc(100% - 32px)',\n height: 'calc(100% - 32px)',\n overflow: 'hidden'\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-py-12 cqa-sm:cqa-py-16 cqa-my-auto h-[calc(100vh-32px)]\">\n <div *ngIf=\"currentView === 'video'\">\n <div class=\"cqa-w-full cqa-mb-4\" *ngIf=\"videoUrl\">\n <video\n #vplayer\n class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-[calc(100dvh-220px)] 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'\">\n <div class=\"cqa-w-full cqa-mb-4\" *ngIf=\"screenShotUrl\">\n <img\n [src]=\"screenShotUrl\"\n alt=\"Screenshot\"\n class=\"cqa-object-contain cqa-w-full cqa-max-h-[calc(100dvh-220px)] 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5482
|
+
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"] }] });
|
|
5483
5483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
5484
5484
|
type: Component,
|
|
5485
|
-
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"
|
|
5485
|
+
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: [] }]
|
|
5486
5486
|
}], propDecorators: { videoUrl: [{
|
|
5487
5487
|
type: Input
|
|
5488
5488
|
}], videoCurrentDuration: [{
|
|
@@ -5522,9 +5522,9 @@ class ConsoleAlertComponent {
|
|
|
5522
5522
|
case 'warn':
|
|
5523
5523
|
return 'warning_amber';
|
|
5524
5524
|
case 'info':
|
|
5525
|
-
return '
|
|
5525
|
+
return 'info';
|
|
5526
5526
|
default:
|
|
5527
|
-
return '
|
|
5527
|
+
return 'info';
|
|
5528
5528
|
}
|
|
5529
5529
|
}
|
|
5530
5530
|
get typeColor() {
|
|
@@ -5628,6 +5628,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5628
5628
|
}] } });
|
|
5629
5629
|
|
|
5630
5630
|
class RunHistoryCardComponent {
|
|
5631
|
+
constructor() {
|
|
5632
|
+
this.size = 'normal';
|
|
5633
|
+
}
|
|
5631
5634
|
get statusBadgeVariant() {
|
|
5632
5635
|
switch (this.status) {
|
|
5633
5636
|
case 'passed':
|
|
@@ -5704,11 +5707,14 @@ class RunHistoryCardComponent {
|
|
|
5704
5707
|
get typeLabel() {
|
|
5705
5708
|
return this.type === 'automated' ? 'Automated' : 'Manual';
|
|
5706
5709
|
}
|
|
5710
|
+
get isSmall() {
|
|
5711
|
+
return this.size === 'small';
|
|
5712
|
+
}
|
|
5707
5713
|
get statusIconContainerStyles() {
|
|
5708
5714
|
return {
|
|
5709
5715
|
'background-color': this.statusIconBgColor,
|
|
5710
|
-
'width': '20px',
|
|
5711
|
-
'height': '20px',
|
|
5716
|
+
'width': this.isSmall ? '16px' : '20px',
|
|
5717
|
+
'height': this.isSmall ? '16px' : '20px',
|
|
5712
5718
|
'border-radius': '4px',
|
|
5713
5719
|
'display': 'inline-flex',
|
|
5714
5720
|
'align-items': 'center',
|
|
@@ -5718,9 +5724,9 @@ class RunHistoryCardComponent {
|
|
|
5718
5724
|
get statusIconStyles() {
|
|
5719
5725
|
return {
|
|
5720
5726
|
'color': this.statusColor,
|
|
5721
|
-
'font-size': '12px',
|
|
5722
|
-
'width': '12px',
|
|
5723
|
-
'height': '12px'
|
|
5727
|
+
'font-size': this.isSmall ? '10px' : '12px',
|
|
5728
|
+
'width': this.isSmall ? '10px' : '12px',
|
|
5729
|
+
'height': this.isSmall ? '10px' : '12px'
|
|
5724
5730
|
};
|
|
5725
5731
|
}
|
|
5726
5732
|
get statusBadgeStyles() {
|
|
@@ -5731,16 +5737,23 @@ class RunHistoryCardComponent {
|
|
|
5731
5737
|
get runLabelStyles() {
|
|
5732
5738
|
return {
|
|
5733
5739
|
'background-color': '#ecedfe',
|
|
5734
|
-
'padding': '2px 8px',
|
|
5735
|
-
'border-radius': '4px'
|
|
5740
|
+
'padding': this.isSmall ? '2px 6px' : '2px 8px',
|
|
5741
|
+
'border-radius': '4px',
|
|
5742
|
+
'font-size': this.isSmall ? '8px' : '10px'
|
|
5736
5743
|
};
|
|
5737
5744
|
}
|
|
5745
|
+
get cardPadding() {
|
|
5746
|
+
return this.isSmall ? '10px' : '12px';
|
|
5747
|
+
}
|
|
5748
|
+
get borderLeftWidth() {
|
|
5749
|
+
return this.isSmall ? '3px' : '4px';
|
|
5750
|
+
}
|
|
5738
5751
|
}
|
|
5739
5752
|
RunHistoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5740
|
-
RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div
|
|
5753
|
+
RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage", size: "size" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n padding: cardPadding,\n border: '1px solid #E4E4E4',\n 'border-left-color': statusColor,\n 'border-left-width': borderLeftWidth\n }\">\n\n <!-- Header: Run ID and Status Badge -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n 'cqa-mb-[10px]': isSmall,\n 'cqa-mb-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n <span [ngStyle]=\"statusIconContainerStyles\">\n <mat-icon [ngStyle]=\"statusIconStyles\">\n {{ statusIcon }}\n </mat-icon>\n </span>\n <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\">\n #{{ id }}\n </span>\n </div>\n\n <!-- Status Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n [ngClass]=\"{\n 'cqa-py-[2px] cqa-text-[10px]': isSmall,\n 'cqa-py-1 cqa-text-xs': !isSmall\n }\" [ngStyle]=\"statusBadgeStyles\">\n {{ statusLabel }}\n </span>\n </div>\n\n <!-- Type and Timestamp -->\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n {{ typeIcon }}\n </mat-icon>\n <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n {{ typeLabel }}\n </span>\n </div>\n\n <!-- Timestamp -->\n <div class=\"cqa-font-normal cqa-text-[#0B0B0B]\" [ngClass]=\"{\n 'cqa-text-sm': !isSmall,\n 'cqa-text-[11px]': isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n {{ timestamp }}\n </div>\n\n <!-- Duration and Run Label -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n schedule\n </mat-icon>\n <span [ngClass]=\"{\n 'cqa-text-[8px]': isSmall,\n 'cqa-text-[10px]': !isSmall\n }\">\n {{ duration }}\n </span>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-font-medium cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\">\n {{ runLabel }}\n </span>\n </div>\n\n <!-- Error Message (only for failed status and normal size) -->\n <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n style=\"border-top: 1px solid #E4E4E4;\">\n <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n {{ errorMessage }}\n </p>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
5741
5754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, decorators: [{
|
|
5742
5755
|
type: Component,
|
|
5743
|
-
args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div
|
|
5756
|
+
args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n padding: cardPadding,\n border: '1px solid #E4E4E4',\n 'border-left-color': statusColor,\n 'border-left-width': borderLeftWidth\n }\">\n\n <!-- Header: Run ID and Status Badge -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n 'cqa-mb-[10px]': isSmall,\n 'cqa-mb-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n <span [ngStyle]=\"statusIconContainerStyles\">\n <mat-icon [ngStyle]=\"statusIconStyles\">\n {{ statusIcon }}\n </mat-icon>\n </span>\n <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\">\n #{{ id }}\n </span>\n </div>\n\n <!-- Status Badge -->\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n [ngClass]=\"{\n 'cqa-py-[2px] cqa-text-[10px]': isSmall,\n 'cqa-py-1 cqa-text-xs': !isSmall\n }\" [ngStyle]=\"statusBadgeStyles\">\n {{ statusLabel }}\n </span>\n </div>\n\n <!-- Type and Timestamp -->\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n {{ typeIcon }}\n </mat-icon>\n <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n {{ typeLabel }}\n </span>\n </div>\n\n <!-- Timestamp -->\n <div class=\"cqa-font-normal cqa-text-[#0B0B0B]\" [ngClass]=\"{\n 'cqa-text-sm': !isSmall,\n 'cqa-text-[11px]': isSmall,\n 'cqa-mb-2': isSmall,\n 'cqa-mb-[6px]': !isSmall\n }\">\n {{ timestamp }}\n </div>\n\n <!-- Duration and Run Label -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\">\n <mat-icon [ngClass]=\"{\n 'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n 'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n schedule\n </mat-icon>\n <span [ngClass]=\"{\n 'cqa-text-[8px]': isSmall,\n 'cqa-text-[10px]': !isSmall\n }\">\n {{ duration }}\n </span>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-font-medium cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\">\n {{ runLabel }}\n </span>\n </div>\n\n <!-- Error Message (only for failed status and normal size) -->\n <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n style=\"border-top: 1px solid #E4E4E4;\">\n <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n {{ errorMessage }}\n </p>\n </div>\n </div>\n</div>", styles: [] }]
|
|
5744
5757
|
}], propDecorators: { id: [{
|
|
5745
5758
|
type: Input
|
|
5746
5759
|
}], status: [{
|
|
@@ -5755,6 +5768,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5755
5768
|
type: Input
|
|
5756
5769
|
}], errorMessage: [{
|
|
5757
5770
|
type: Input
|
|
5771
|
+
}], size: [{
|
|
5772
|
+
type: Input
|
|
5773
|
+
}] } });
|
|
5774
|
+
|
|
5775
|
+
class ViewImageModalComponent {
|
|
5776
|
+
constructor() {
|
|
5777
|
+
this.imageUrl = '';
|
|
5778
|
+
this.title = 'View Image';
|
|
5779
|
+
this.isOpen = false;
|
|
5780
|
+
this.close = new EventEmitter();
|
|
5781
|
+
}
|
|
5782
|
+
onClose() {
|
|
5783
|
+
this.close.emit();
|
|
5784
|
+
}
|
|
5785
|
+
onBackdropClick(event) {
|
|
5786
|
+
const target = event.target;
|
|
5787
|
+
const currentTarget = event.currentTarget;
|
|
5788
|
+
if (target === currentTarget || target.classList.contains('modal-backdrop')) {
|
|
5789
|
+
this.onClose();
|
|
5790
|
+
}
|
|
5791
|
+
}
|
|
5792
|
+
onImageError(event) {
|
|
5793
|
+
const img = event.target;
|
|
5794
|
+
img.style.display = 'none';
|
|
5795
|
+
}
|
|
5796
|
+
}
|
|
5797
|
+
ViewImageModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5798
|
+
ViewImageModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ViewImageModalComponent, selector: "cqa-view-image-modal", inputs: { imageUrl: "imageUrl", title: "title", isOpen: "isOpen" }, outputs: { close: "close" }, 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-max-h-[90vh] 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-4 cqa-sm:cqa-px-6 cqa-py-3 cqa-sm:cqa-py-4 cqa-border-b cqa-border-gray-200 cqa-bg-white cqa-gap-4\">\n <h2 class=\"cqa-text-cqa-sm sm:cqa-text-base cqa-sm:cqa-text-lg cqa-font-semibold cqa-text-gray-900 cqa-m-0 cqa-truncate cqa-flex-1 cqa-min-w-0\">\n {{ title }}\n </h2>\n \n <button\n type=\"button\"\n class=\"cqa-flex-shrink-0 cqa-p-1.5 cqa-sm:cqa-p-2 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none cqa-focus:outline-none cqa-focus:ring-2 cqa-focus:ring-primary cqa-focus:ring-offset-2\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg \n class=\"cqa-w-4 cqa-h-4 cqa-sm:cqa-w-5 cqa-sm:cqa-h-5\" \n fill=\"none\" \n stroke=\"currentColor\" \n viewBox=\"0 0 24 24\" \n xmlns=\"http://www.w3.org/2000/svg\">\n <path \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\" \n stroke-width=\"2\" \n d=\"M6 18L18 6M6 6l12 12\">\n </path>\n </svg>\n </button>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-bg-gray-100 cqa-p-4\">\n <div *ngIf=\"imageUrl\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\">\n <img\n [src]=\"imageUrl\"\n [alt]=\"title\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!imageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg \n class=\"cqa-w-16 cqa-h-16 cqa-text-gray-400 cqa-mb-4\" \n fill=\"none\" \n stroke=\"currentColor\" \n viewBox=\"0 0 24 24\">\n <path \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\" \n stroke-width=\"2\" \n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\">\n </path>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium\">No image available</p>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
5799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewImageModalComponent, decorators: [{
|
|
5800
|
+
type: Component,
|
|
5801
|
+
args: [{ selector: 'cqa-view-image-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-max-h-[90vh] 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-4 cqa-sm:cqa-px-6 cqa-py-3 cqa-sm:cqa-py-4 cqa-border-b cqa-border-gray-200 cqa-bg-white cqa-gap-4\">\n <h2 class=\"cqa-text-cqa-sm sm:cqa-text-base cqa-sm:cqa-text-lg cqa-font-semibold cqa-text-gray-900 cqa-m-0 cqa-truncate cqa-flex-1 cqa-min-w-0\">\n {{ title }}\n </h2>\n \n <button\n type=\"button\"\n class=\"cqa-flex-shrink-0 cqa-p-1.5 cqa-sm:cqa-p-2 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none cqa-focus:outline-none cqa-focus:ring-2 cqa-focus:ring-primary cqa-focus:ring-offset-2\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg \n class=\"cqa-w-4 cqa-h-4 cqa-sm:cqa-w-5 cqa-sm:cqa-h-5\" \n fill=\"none\" \n stroke=\"currentColor\" \n viewBox=\"0 0 24 24\" \n xmlns=\"http://www.w3.org/2000/svg\">\n <path \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\" \n stroke-width=\"2\" \n d=\"M6 18L18 6M6 6l12 12\">\n </path>\n </svg>\n </button>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-bg-gray-100 cqa-p-4\">\n <div *ngIf=\"imageUrl\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\">\n <img\n [src]=\"imageUrl\"\n [alt]=\"title\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!imageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg \n class=\"cqa-w-16 cqa-h-16 cqa-text-gray-400 cqa-mb-4\" \n fill=\"none\" \n stroke=\"currentColor\" \n viewBox=\"0 0 24 24\">\n <path \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\" \n stroke-width=\"2\" \n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\">\n </path>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium\">No image available</p>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
5802
|
+
}], propDecorators: { imageUrl: [{
|
|
5803
|
+
type: Input
|
|
5804
|
+
}], title: [{
|
|
5805
|
+
type: Input
|
|
5806
|
+
}], isOpen: [{
|
|
5807
|
+
type: Input
|
|
5808
|
+
}], close: [{
|
|
5809
|
+
type: Output
|
|
5810
|
+
}] } });
|
|
5811
|
+
|
|
5812
|
+
class ConfigurationCardComponent {
|
|
5813
|
+
constructor() {
|
|
5814
|
+
this.data = [];
|
|
5815
|
+
}
|
|
5816
|
+
// Check if item has icon (Key Flags style)
|
|
5817
|
+
hasIcon(item) {
|
|
5818
|
+
return !!item.icon;
|
|
5819
|
+
}
|
|
5820
|
+
// Check if value is empty/null/undefined
|
|
5821
|
+
isEmptyValue(value) {
|
|
5822
|
+
return value === null || value === undefined || value === '';
|
|
5823
|
+
}
|
|
5824
|
+
// Check if value is boolean
|
|
5825
|
+
isBoolean(value) {
|
|
5826
|
+
return typeof value === 'boolean';
|
|
5827
|
+
}
|
|
5828
|
+
// Get display value for item
|
|
5829
|
+
getDisplayValue(item) {
|
|
5830
|
+
if (this.isEmptyValue(item.value)) {
|
|
5831
|
+
return 'Not set';
|
|
5832
|
+
}
|
|
5833
|
+
if (this.isBoolean(item.value)) {
|
|
5834
|
+
return item.value ? 'On' : 'Off';
|
|
5835
|
+
}
|
|
5836
|
+
return String(item.value);
|
|
5837
|
+
}
|
|
5838
|
+
// Get color for value
|
|
5839
|
+
getValueColor(item) {
|
|
5840
|
+
if (this.isEmptyValue(item.value)) {
|
|
5841
|
+
return '#63636399';
|
|
5842
|
+
}
|
|
5843
|
+
if (this.isBoolean(item.value)) {
|
|
5844
|
+
return item.value ? '#009966' : '#E7000B';
|
|
5845
|
+
}
|
|
5846
|
+
return '#0B0B0B';
|
|
5847
|
+
}
|
|
5848
|
+
// Get status badge text for icon items (Key Flags style)
|
|
5849
|
+
getStatusBadge(item) {
|
|
5850
|
+
if (this.isEmptyValue(item.value)) {
|
|
5851
|
+
return 'Not set';
|
|
5852
|
+
}
|
|
5853
|
+
if (this.isBoolean(item.value)) {
|
|
5854
|
+
return item.value ? 'Enabled' : 'Not set';
|
|
5855
|
+
}
|
|
5856
|
+
return 'Enabled';
|
|
5857
|
+
}
|
|
5858
|
+
// Get icon background color
|
|
5859
|
+
getIconBgColor(item) {
|
|
5860
|
+
if (this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value)) {
|
|
5861
|
+
return '#F5F5F5';
|
|
5862
|
+
}
|
|
5863
|
+
return '#D0FAE5';
|
|
5864
|
+
}
|
|
5865
|
+
// Get icon color
|
|
5866
|
+
getIconColor(item) {
|
|
5867
|
+
if (this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value)) {
|
|
5868
|
+
return '#636363';
|
|
5869
|
+
}
|
|
5870
|
+
return '#009966';
|
|
5871
|
+
}
|
|
5872
|
+
// Styles for header icon
|
|
5873
|
+
get headerIconStyles() {
|
|
5874
|
+
return {
|
|
5875
|
+
'color': '#1A4EDA',
|
|
5876
|
+
'font-size': '16px',
|
|
5877
|
+
'width': '16px',
|
|
5878
|
+
'height': '16px'
|
|
5879
|
+
};
|
|
5880
|
+
}
|
|
5881
|
+
getItemCardStyle(item) {
|
|
5882
|
+
const isEmpty = this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value);
|
|
5883
|
+
return {
|
|
5884
|
+
border: isEmpty ? '1px dashed #E4E4E4' : '1px solid #A4F4CF',
|
|
5885
|
+
'background-color': isEmpty ? '#F5F5F533' : '#ECFDF580'
|
|
5886
|
+
};
|
|
5887
|
+
}
|
|
5888
|
+
}
|
|
5889
|
+
ConfigurationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5890
|
+
ConfigurationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: { icon: "icon", title: "title", data: "data" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n\t<div class=\"cqa-bg-white cqa-rounded-lg cqa-bg-white\" style=\"border: 1px solid #E4E4E499;\">\n\n\t\t<!-- Section Header -->\n\t\t<div class=\"cqa-py-[6px] cqa-px-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F5F5F566]\"\n\t\t\tstyle=\"border-bottom: 1px solid #E4E4E499;\">\n\t\t\t<ng-container *ngIf=\"icon\">\n\t\t\t\t<i class=\"material-icons\" [ngStyle]=\"headerIconStyles\">\n\t\t\t\t\t{{ icon }}\n\t\t\t\t</i>\n\t\t\t</ng-container>\n\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-color-[#636363]\">\n\t\t\t\t{{ title }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Configuration Items With Icons -->\n\t\t<div class=\"cqa-py-2 cqa-px-3\" *ngIf=\"data.length > 0 && data[0].icon\">\n\t\t\t<div class=\"cqa-grid cqa-gap-2\"\n\t\t\tstyle=\"grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\">\n\t\t\t\t<div *ngFor=\"let item of data\" class=\"cqa-rounded-lg cqa-p-[17px] cqa-flex cqa-flex-col cqa-gap-[6px]\"\n\t\t\t\t\t[ngStyle]=\"getItemCardStyle(item)\">\n\n\t\t\t\t\t<!-- Icon and Status Badge Row -->\n\t\t\t\t\t<div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n\t\t\t\t\t\t<div class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center\"\n\t\t\t\t\t\t\t[ngStyle]=\" { 'background-color' : getIconBgColor(item) }\" *ngIf=\"item.icon\">\n\t\t\t\t\t\t\t<i class=\"material-icons cqa-text-[16px]\" [ngStyle]=\" { color: getIconColor(item) }\">\n\t\t\t\t\t\t\t\t{{ item.icon }}\n\t\t\t\t\t\t\t</i>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Status Badge -->\n\t\t\t\t\t\t<span class=\"cqa-text-[10px] cqa-font-medium cqa-px-2 cqa-py-0.5 cqa-rounded-[5px]\"\n\t\t\t\t\t\t\t[ngStyle]=\" { 'background-color' : getIconBgColor(item), 'color' : getIconColor(item) }\">\n\t\t\t\t\t\t\t{{ getStatusBadge(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-text-[#0B0B0B]\">\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- SubLabel -->\n\t\t\t\t\t<div *ngIf=\"item.subLabel\" class=\"cqa-text-[10px] cqa-text-[#636363]\">\n\t\t\t\t\t\t{{ item.subLabel }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t\n\t\t<!-- Configuration Items Without Icons -->\n\t\t<div class=\"cqa-py-[6px] cqa-px-3\" *ngIf=\"data.length > 0 && !data[0].icon\">\n\t\t\t<div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-x-3 cqa-gap-y-[6px]\">\n\t\t\t\t<ng-container *ngFor=\"let item of data\">\n\t\t\t\t\t<div *ngIf=\"!isBoolean(item.value)\" \n\t\t\t\t\t\tclass=\"cqa-flex cqa-flex-col cqa-gap-[6px] cqa-px-3 cqa-py-1\">\n\t\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#636363]\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<!-- Value -->\n\t\t\t\t\t\t<span class=\"cqa-text-sm\" [style.color]=\"getValueColor(item)\">\n\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"isBoolean(item.value)\" \n\t\t\t\t\t\tclass=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-[6px] cqa-px-3 cqa-py-1\">\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#636363]\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<span class=\"cqa-text-sm cqa-font-semibold\" [style.color]=\"getValueColor(item)\">\n\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</div>\n\n\t</div>\n</div>", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, decorators: [{
|
|
5892
|
+
type: Component,
|
|
5893
|
+
args: [{ selector: 'cqa-configuration-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n\t<div class=\"cqa-bg-white cqa-rounded-lg cqa-bg-white\" style=\"border: 1px solid #E4E4E499;\">\n\n\t\t<!-- Section Header -->\n\t\t<div class=\"cqa-py-[6px] cqa-px-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F5F5F566]\"\n\t\t\tstyle=\"border-bottom: 1px solid #E4E4E499;\">\n\t\t\t<ng-container *ngIf=\"icon\">\n\t\t\t\t<i class=\"material-icons\" [ngStyle]=\"headerIconStyles\">\n\t\t\t\t\t{{ icon }}\n\t\t\t\t</i>\n\t\t\t</ng-container>\n\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-color-[#636363]\">\n\t\t\t\t{{ title }}\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Configuration Items With Icons -->\n\t\t<div class=\"cqa-py-2 cqa-px-3\" *ngIf=\"data.length > 0 && data[0].icon\">\n\t\t\t<div class=\"cqa-grid cqa-gap-2\"\n\t\t\tstyle=\"grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\">\n\t\t\t\t<div *ngFor=\"let item of data\" class=\"cqa-rounded-lg cqa-p-[17px] cqa-flex cqa-flex-col cqa-gap-[6px]\"\n\t\t\t\t\t[ngStyle]=\"getItemCardStyle(item)\">\n\n\t\t\t\t\t<!-- Icon and Status Badge Row -->\n\t\t\t\t\t<div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n\t\t\t\t\t\t<div class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center\"\n\t\t\t\t\t\t\t[ngStyle]=\" { 'background-color' : getIconBgColor(item) }\" *ngIf=\"item.icon\">\n\t\t\t\t\t\t\t<i class=\"material-icons cqa-text-[16px]\" [ngStyle]=\" { color: getIconColor(item) }\">\n\t\t\t\t\t\t\t\t{{ item.icon }}\n\t\t\t\t\t\t\t</i>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Status Badge -->\n\t\t\t\t\t\t<span class=\"cqa-text-[10px] cqa-font-medium cqa-px-2 cqa-py-0.5 cqa-rounded-[5px]\"\n\t\t\t\t\t\t\t[ngStyle]=\" { 'background-color' : getIconBgColor(item), 'color' : getIconColor(item) }\">\n\t\t\t\t\t\t\t{{ getStatusBadge(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t<div class=\"cqa-text-xs cqa-font-semibold cqa-text-[#0B0B0B]\">\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- SubLabel -->\n\t\t\t\t\t<div *ngIf=\"item.subLabel\" class=\"cqa-text-[10px] cqa-text-[#636363]\">\n\t\t\t\t\t\t{{ item.subLabel }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t\n\t\t<!-- Configuration Items Without Icons -->\n\t\t<div class=\"cqa-py-[6px] cqa-px-3\" *ngIf=\"data.length > 0 && !data[0].icon\">\n\t\t\t<div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-x-3 cqa-gap-y-[6px]\">\n\t\t\t\t<ng-container *ngFor=\"let item of data\">\n\t\t\t\t\t<div *ngIf=\"!isBoolean(item.value)\" \n\t\t\t\t\t\tclass=\"cqa-flex cqa-flex-col cqa-gap-[6px] cqa-px-3 cqa-py-1\">\n\t\t\t\t\t\t<!-- Label -->\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#636363]\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<!-- Value -->\n\t\t\t\t\t\t<span class=\"cqa-text-sm\" [style.color]=\"getValueColor(item)\">\n\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"isBoolean(item.value)\" \n\t\t\t\t\t\tclass=\"cqa-flex cqa-justify-between cqa-items-center cqa-gap-[6px] cqa-px-3 cqa-py-1\">\n\t\t\t\t\t\t<span class=\"cqa-text-xs cqa-text-[#636363]\">\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<span class=\"cqa-text-sm cqa-font-semibold\" [style.color]=\"getValueColor(item)\">\n\t\t\t\t\t\t\t{{ getDisplayValue(item) }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</div>\n\n\t</div>\n</div>", styles: [] }]
|
|
5894
|
+
}], propDecorators: { icon: [{
|
|
5895
|
+
type: Input
|
|
5896
|
+
}], title: [{
|
|
5897
|
+
type: Input
|
|
5898
|
+
}], data: [{
|
|
5899
|
+
type: Input
|
|
5758
5900
|
}] } });
|
|
5759
5901
|
|
|
5760
5902
|
class UiKitModule {
|
|
@@ -5801,7 +5943,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
5801
5943
|
ConsoleAlertComponent,
|
|
5802
5944
|
AiDebugAlertComponent,
|
|
5803
5945
|
NetworkRequestComponent,
|
|
5804
|
-
RunHistoryCardComponent
|
|
5946
|
+
RunHistoryCardComponent,
|
|
5947
|
+
ViewImageModalComponent,
|
|
5948
|
+
ConfigurationCardComponent], imports: [CommonModule,
|
|
5805
5949
|
FormsModule,
|
|
5806
5950
|
ReactiveFormsModule,
|
|
5807
5951
|
MatIconModule,
|
|
@@ -5854,7 +5998,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
5854
5998
|
ConsoleAlertComponent,
|
|
5855
5999
|
AiDebugAlertComponent,
|
|
5856
6000
|
NetworkRequestComponent,
|
|
5857
|
-
RunHistoryCardComponent
|
|
6001
|
+
RunHistoryCardComponent,
|
|
6002
|
+
ViewImageModalComponent,
|
|
6003
|
+
ConfigurationCardComponent] });
|
|
5858
6004
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
5859
6005
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
5860
6006
|
], imports: [[
|
|
@@ -5918,7 +6064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5918
6064
|
ConsoleAlertComponent,
|
|
5919
6065
|
AiDebugAlertComponent,
|
|
5920
6066
|
NetworkRequestComponent,
|
|
5921
|
-
RunHistoryCardComponent
|
|
6067
|
+
RunHistoryCardComponent,
|
|
6068
|
+
ViewImageModalComponent,
|
|
6069
|
+
ConfigurationCardComponent
|
|
5922
6070
|
],
|
|
5923
6071
|
imports: [
|
|
5924
6072
|
CommonModule,
|
|
@@ -5977,7 +6125,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5977
6125
|
ConsoleAlertComponent,
|
|
5978
6126
|
AiDebugAlertComponent,
|
|
5979
6127
|
NetworkRequestComponent,
|
|
5980
|
-
RunHistoryCardComponent
|
|
6128
|
+
RunHistoryCardComponent,
|
|
6129
|
+
ViewImageModalComponent,
|
|
6130
|
+
ConfigurationCardComponent
|
|
5981
6131
|
],
|
|
5982
6132
|
providers: [
|
|
5983
6133
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
@@ -6119,5 +6269,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6119
6269
|
* Generated bundle index. Do not edit.
|
|
6120
6270
|
*/
|
|
6121
6271
|
|
|
6122
|
-
export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, ConsoleAlertComponent, CoverageModuleCardComponent, 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, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
6272
|
+
export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, 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, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, ViewImageModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
6123
6273
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|