@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
|
@@ -5544,10 +5544,10 @@ class SimulatorComponent {
|
|
|
5544
5544
|
}
|
|
5545
5545
|
}
|
|
5546
5546
|
SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5547
|
-
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"] }] });
|
|
5547
|
+
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"] }] });
|
|
5548
5548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
|
|
5549
5549
|
type: Component,
|
|
5550
|
-
args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"
|
|
5550
|
+
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: [] }]
|
|
5551
5551
|
}], propDecorators: { videoUrl: [{
|
|
5552
5552
|
type: Input
|
|
5553
5553
|
}], videoCurrentDuration: [{
|
|
@@ -5587,9 +5587,9 @@ class ConsoleAlertComponent {
|
|
|
5587
5587
|
case 'warn':
|
|
5588
5588
|
return 'warning_amber';
|
|
5589
5589
|
case 'info':
|
|
5590
|
-
return '
|
|
5590
|
+
return 'info';
|
|
5591
5591
|
default:
|
|
5592
|
-
return '
|
|
5592
|
+
return 'info';
|
|
5593
5593
|
}
|
|
5594
5594
|
}
|
|
5595
5595
|
get typeColor() {
|
|
@@ -5693,6 +5693,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5693
5693
|
}] } });
|
|
5694
5694
|
|
|
5695
5695
|
class RunHistoryCardComponent {
|
|
5696
|
+
constructor() {
|
|
5697
|
+
this.size = 'normal';
|
|
5698
|
+
}
|
|
5696
5699
|
get statusBadgeVariant() {
|
|
5697
5700
|
switch (this.status) {
|
|
5698
5701
|
case 'passed':
|
|
@@ -5769,11 +5772,14 @@ class RunHistoryCardComponent {
|
|
|
5769
5772
|
get typeLabel() {
|
|
5770
5773
|
return this.type === 'automated' ? 'Automated' : 'Manual';
|
|
5771
5774
|
}
|
|
5775
|
+
get isSmall() {
|
|
5776
|
+
return this.size === 'small';
|
|
5777
|
+
}
|
|
5772
5778
|
get statusIconContainerStyles() {
|
|
5773
5779
|
return {
|
|
5774
5780
|
'background-color': this.statusIconBgColor,
|
|
5775
|
-
'width': '20px',
|
|
5776
|
-
'height': '20px',
|
|
5781
|
+
'width': this.isSmall ? '16px' : '20px',
|
|
5782
|
+
'height': this.isSmall ? '16px' : '20px',
|
|
5777
5783
|
'border-radius': '4px',
|
|
5778
5784
|
'display': 'inline-flex',
|
|
5779
5785
|
'align-items': 'center',
|
|
@@ -5783,9 +5789,9 @@ class RunHistoryCardComponent {
|
|
|
5783
5789
|
get statusIconStyles() {
|
|
5784
5790
|
return {
|
|
5785
5791
|
'color': this.statusColor,
|
|
5786
|
-
'font-size': '12px',
|
|
5787
|
-
'width': '12px',
|
|
5788
|
-
'height': '12px'
|
|
5792
|
+
'font-size': this.isSmall ? '10px' : '12px',
|
|
5793
|
+
'width': this.isSmall ? '10px' : '12px',
|
|
5794
|
+
'height': this.isSmall ? '10px' : '12px'
|
|
5789
5795
|
};
|
|
5790
5796
|
}
|
|
5791
5797
|
get statusBadgeStyles() {
|
|
@@ -5796,16 +5802,23 @@ class RunHistoryCardComponent {
|
|
|
5796
5802
|
get runLabelStyles() {
|
|
5797
5803
|
return {
|
|
5798
5804
|
'background-color': '#ecedfe',
|
|
5799
|
-
'padding': '2px 8px',
|
|
5800
|
-
'border-radius': '4px'
|
|
5805
|
+
'padding': this.isSmall ? '2px 6px' : '2px 8px',
|
|
5806
|
+
'border-radius': '4px',
|
|
5807
|
+
'font-size': this.isSmall ? '8px' : '10px'
|
|
5801
5808
|
};
|
|
5802
5809
|
}
|
|
5810
|
+
get cardPadding() {
|
|
5811
|
+
return this.isSmall ? '10px' : '12px';
|
|
5812
|
+
}
|
|
5813
|
+
get borderLeftWidth() {
|
|
5814
|
+
return this.isSmall ? '3px' : '4px';
|
|
5815
|
+
}
|
|
5803
5816
|
}
|
|
5804
5817
|
RunHistoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5805
|
-
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
|
|
5818
|
+
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"] }] });
|
|
5806
5819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, decorators: [{
|
|
5807
5820
|
type: Component,
|
|
5808
|
-
args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n <div
|
|
5821
|
+
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: [] }]
|
|
5809
5822
|
}], propDecorators: { id: [{
|
|
5810
5823
|
type: Input
|
|
5811
5824
|
}], status: [{
|
|
@@ -5820,6 +5833,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5820
5833
|
type: Input
|
|
5821
5834
|
}], errorMessage: [{
|
|
5822
5835
|
type: Input
|
|
5836
|
+
}], size: [{
|
|
5837
|
+
type: Input
|
|
5838
|
+
}] } });
|
|
5839
|
+
|
|
5840
|
+
class ViewImageModalComponent {
|
|
5841
|
+
constructor() {
|
|
5842
|
+
this.imageUrl = '';
|
|
5843
|
+
this.title = 'View Image';
|
|
5844
|
+
this.isOpen = false;
|
|
5845
|
+
this.close = new EventEmitter();
|
|
5846
|
+
}
|
|
5847
|
+
onClose() {
|
|
5848
|
+
this.close.emit();
|
|
5849
|
+
}
|
|
5850
|
+
onBackdropClick(event) {
|
|
5851
|
+
const target = event.target;
|
|
5852
|
+
const currentTarget = event.currentTarget;
|
|
5853
|
+
if (target === currentTarget || target.classList.contains('modal-backdrop')) {
|
|
5854
|
+
this.onClose();
|
|
5855
|
+
}
|
|
5856
|
+
}
|
|
5857
|
+
onImageError(event) {
|
|
5858
|
+
const img = event.target;
|
|
5859
|
+
img.style.display = 'none';
|
|
5860
|
+
}
|
|
5861
|
+
}
|
|
5862
|
+
ViewImageModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5863
|
+
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"] }] });
|
|
5864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewImageModalComponent, decorators: [{
|
|
5865
|
+
type: Component,
|
|
5866
|
+
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: [] }]
|
|
5867
|
+
}], propDecorators: { imageUrl: [{
|
|
5868
|
+
type: Input
|
|
5869
|
+
}], title: [{
|
|
5870
|
+
type: Input
|
|
5871
|
+
}], isOpen: [{
|
|
5872
|
+
type: Input
|
|
5873
|
+
}], close: [{
|
|
5874
|
+
type: Output
|
|
5875
|
+
}] } });
|
|
5876
|
+
|
|
5877
|
+
class ConfigurationCardComponent {
|
|
5878
|
+
constructor() {
|
|
5879
|
+
this.data = [];
|
|
5880
|
+
}
|
|
5881
|
+
// Check if item has icon (Key Flags style)
|
|
5882
|
+
hasIcon(item) {
|
|
5883
|
+
return !!item.icon;
|
|
5884
|
+
}
|
|
5885
|
+
// Check if value is empty/null/undefined
|
|
5886
|
+
isEmptyValue(value) {
|
|
5887
|
+
return value === null || value === undefined || value === '';
|
|
5888
|
+
}
|
|
5889
|
+
// Check if value is boolean
|
|
5890
|
+
isBoolean(value) {
|
|
5891
|
+
return typeof value === 'boolean';
|
|
5892
|
+
}
|
|
5893
|
+
// Get display value for item
|
|
5894
|
+
getDisplayValue(item) {
|
|
5895
|
+
if (this.isEmptyValue(item.value)) {
|
|
5896
|
+
return 'Not set';
|
|
5897
|
+
}
|
|
5898
|
+
if (this.isBoolean(item.value)) {
|
|
5899
|
+
return item.value ? 'On' : 'Off';
|
|
5900
|
+
}
|
|
5901
|
+
return String(item.value);
|
|
5902
|
+
}
|
|
5903
|
+
// Get color for value
|
|
5904
|
+
getValueColor(item) {
|
|
5905
|
+
if (this.isEmptyValue(item.value)) {
|
|
5906
|
+
return '#63636399';
|
|
5907
|
+
}
|
|
5908
|
+
if (this.isBoolean(item.value)) {
|
|
5909
|
+
return item.value ? '#009966' : '#E7000B';
|
|
5910
|
+
}
|
|
5911
|
+
return '#0B0B0B';
|
|
5912
|
+
}
|
|
5913
|
+
// Get status badge text for icon items (Key Flags style)
|
|
5914
|
+
getStatusBadge(item) {
|
|
5915
|
+
if (this.isEmptyValue(item.value)) {
|
|
5916
|
+
return 'Not set';
|
|
5917
|
+
}
|
|
5918
|
+
if (this.isBoolean(item.value)) {
|
|
5919
|
+
return item.value ? 'Enabled' : 'Not set';
|
|
5920
|
+
}
|
|
5921
|
+
return 'Enabled';
|
|
5922
|
+
}
|
|
5923
|
+
// Get icon background color
|
|
5924
|
+
getIconBgColor(item) {
|
|
5925
|
+
if (this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value)) {
|
|
5926
|
+
return '#F5F5F5';
|
|
5927
|
+
}
|
|
5928
|
+
return '#D0FAE5';
|
|
5929
|
+
}
|
|
5930
|
+
// Get icon color
|
|
5931
|
+
getIconColor(item) {
|
|
5932
|
+
if (this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value)) {
|
|
5933
|
+
return '#636363';
|
|
5934
|
+
}
|
|
5935
|
+
return '#009966';
|
|
5936
|
+
}
|
|
5937
|
+
// Styles for header icon
|
|
5938
|
+
get headerIconStyles() {
|
|
5939
|
+
return {
|
|
5940
|
+
'color': '#1A4EDA',
|
|
5941
|
+
'font-size': '16px',
|
|
5942
|
+
'width': '16px',
|
|
5943
|
+
'height': '16px'
|
|
5944
|
+
};
|
|
5945
|
+
}
|
|
5946
|
+
getItemCardStyle(item) {
|
|
5947
|
+
const isEmpty = this.isEmptyValue(item.value) || (this.isBoolean(item.value) && !item.value);
|
|
5948
|
+
return {
|
|
5949
|
+
border: isEmpty ? '1px dashed #E4E4E4' : '1px solid #A4F4CF',
|
|
5950
|
+
'background-color': isEmpty ? '#F5F5F533' : '#ECFDF580'
|
|
5951
|
+
};
|
|
5952
|
+
}
|
|
5953
|
+
}
|
|
5954
|
+
ConfigurationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5955
|
+
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"] }] });
|
|
5956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConfigurationCardComponent, decorators: [{
|
|
5957
|
+
type: Component,
|
|
5958
|
+
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: [] }]
|
|
5959
|
+
}], propDecorators: { icon: [{
|
|
5960
|
+
type: Input
|
|
5961
|
+
}], title: [{
|
|
5962
|
+
type: Input
|
|
5963
|
+
}], data: [{
|
|
5964
|
+
type: Input
|
|
5823
5965
|
}] } });
|
|
5824
5966
|
|
|
5825
5967
|
class UiKitModule {
|
|
@@ -5866,7 +6008,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
5866
6008
|
ConsoleAlertComponent,
|
|
5867
6009
|
AiDebugAlertComponent,
|
|
5868
6010
|
NetworkRequestComponent,
|
|
5869
|
-
RunHistoryCardComponent
|
|
6011
|
+
RunHistoryCardComponent,
|
|
6012
|
+
ViewImageModalComponent,
|
|
6013
|
+
ConfigurationCardComponent], imports: [CommonModule,
|
|
5870
6014
|
FormsModule,
|
|
5871
6015
|
ReactiveFormsModule,
|
|
5872
6016
|
MatIconModule,
|
|
@@ -5919,7 +6063,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
5919
6063
|
ConsoleAlertComponent,
|
|
5920
6064
|
AiDebugAlertComponent,
|
|
5921
6065
|
NetworkRequestComponent,
|
|
5922
|
-
RunHistoryCardComponent
|
|
6066
|
+
RunHistoryCardComponent,
|
|
6067
|
+
ViewImageModalComponent,
|
|
6068
|
+
ConfigurationCardComponent] });
|
|
5923
6069
|
UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
|
|
5924
6070
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
5925
6071
|
], imports: [[
|
|
@@ -5983,7 +6129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5983
6129
|
ConsoleAlertComponent,
|
|
5984
6130
|
AiDebugAlertComponent,
|
|
5985
6131
|
NetworkRequestComponent,
|
|
5986
|
-
RunHistoryCardComponent
|
|
6132
|
+
RunHistoryCardComponent,
|
|
6133
|
+
ViewImageModalComponent,
|
|
6134
|
+
ConfigurationCardComponent
|
|
5987
6135
|
],
|
|
5988
6136
|
imports: [
|
|
5989
6137
|
CommonModule,
|
|
@@ -6042,7 +6190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6042
6190
|
ConsoleAlertComponent,
|
|
6043
6191
|
AiDebugAlertComponent,
|
|
6044
6192
|
NetworkRequestComponent,
|
|
6045
|
-
RunHistoryCardComponent
|
|
6193
|
+
RunHistoryCardComponent,
|
|
6194
|
+
ViewImageModalComponent,
|
|
6195
|
+
ConfigurationCardComponent
|
|
6046
6196
|
],
|
|
6047
6197
|
providers: [
|
|
6048
6198
|
{ provide: OverlayContainer, useClass: TailwindOverlayContainer }
|
|
@@ -6186,5 +6336,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6186
6336
|
* Generated bundle index. Do not edit.
|
|
6187
6337
|
*/
|
|
6188
6338
|
|
|
6189
|
-
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 };
|
|
6339
|
+
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 };
|
|
6190
6340
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|