@cqa-lib/cqa-ui 1.1.117 → 1.1.119
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/run-history-card/run-history-card.component.mjs +48 -4
- package/fesm2015/cqa-lib-cqa-ui.mjs +45 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +45 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/run-history-card/run-history-card.component.d.ts +6 -1
- package/package.json +1 -1
|
@@ -10605,15 +10605,56 @@ class RunHistoryCardComponent {
|
|
|
10605
10605
|
get borderLeftWidth() {
|
|
10606
10606
|
return this.isSmall ? '3px' : '4px';
|
|
10607
10607
|
}
|
|
10608
|
+
get platformIcon() {
|
|
10609
|
+
if (!this.platform)
|
|
10610
|
+
return '';
|
|
10611
|
+
switch (this.platform) {
|
|
10612
|
+
case 'ios':
|
|
10613
|
+
return 'fab fa-apple';
|
|
10614
|
+
case 'android':
|
|
10615
|
+
return 'android';
|
|
10616
|
+
case 'web':
|
|
10617
|
+
return 'language';
|
|
10618
|
+
case 'chromium':
|
|
10619
|
+
return 'web';
|
|
10620
|
+
case 'desktop':
|
|
10621
|
+
return 'desktop_windows';
|
|
10622
|
+
default:
|
|
10623
|
+
return '';
|
|
10624
|
+
}
|
|
10625
|
+
}
|
|
10626
|
+
get platformIconLibrary() {
|
|
10627
|
+
if (!this.platform)
|
|
10628
|
+
return 'mat';
|
|
10629
|
+
return this.platform === 'ios' ? 'fa' : 'mat';
|
|
10630
|
+
}
|
|
10631
|
+
get platformLabel() {
|
|
10632
|
+
if (!this.platform)
|
|
10633
|
+
return '';
|
|
10634
|
+
switch (this.platform) {
|
|
10635
|
+
case 'ios':
|
|
10636
|
+
return 'iOS';
|
|
10637
|
+
case 'android':
|
|
10638
|
+
return 'Android';
|
|
10639
|
+
case 'web':
|
|
10640
|
+
return 'Web';
|
|
10641
|
+
case 'chromium':
|
|
10642
|
+
return 'Chromium';
|
|
10643
|
+
case 'desktop':
|
|
10644
|
+
return 'Web';
|
|
10645
|
+
default:
|
|
10646
|
+
return '';
|
|
10647
|
+
}
|
|
10648
|
+
}
|
|
10608
10649
|
linkClicked() {
|
|
10609
10650
|
this.headingClicked.emit();
|
|
10610
10651
|
}
|
|
10611
10652
|
}
|
|
10612
10653
|
RunHistoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10613
|
-
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", durationTooltip: "durationTooltip" }, outputs: { headingClicked: "headingClicked" }, 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-start 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-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\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] cqa-leading-normal\" [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
|
|
10654
|
+
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", durationTooltip: "durationTooltip", platform: "platform" }, outputs: { headingClicked: "headingClicked" }, 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-start 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-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\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] cqa-leading-normal\" [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, Platform 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-gap-2\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\" [title]=\"durationTooltip\">\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 <cqa-badge \n *ngIf=\"platform\"\n [label]=\"platformLabel\"\n [icon]=\"platformIcon\"\n [iconLibrary]=\"platformIconLibrary\"\n [size]=\"isSmall ? 'extra-small' : 'small'\"\n variant=\"default\"\n [iconSize]=\"isSmall ? 10 : 12\">\n </cqa-badge>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\"\n [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\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"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }], 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"] }] });
|
|
10614
10655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, decorators: [{
|
|
10615
10656
|
type: Component,
|
|
10616
|
-
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-start 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-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\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] cqa-leading-normal\" [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
|
|
10657
|
+
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-start 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-cursor-pointer cqa-underline cqa-text-[#3f43ee]\" [ngClass]=\"{\n 'cqa-text-xs': isSmall,\n 'cqa-text-sm': !isSmall\n }\" (click)=\"linkClicked()\">\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] cqa-leading-normal\" [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, Platform 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-gap-2\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-2': !isSmall\n }\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n 'cqa-gap-1': isSmall,\n 'cqa-gap-[6px]': !isSmall\n }\" [title]=\"durationTooltip\">\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 <cqa-badge \n *ngIf=\"platform\"\n [label]=\"platformLabel\"\n [icon]=\"platformIcon\"\n [iconLibrary]=\"platformIconLibrary\"\n [size]=\"isSmall ? 'extra-small' : 'small'\"\n variant=\"default\"\n [iconSize]=\"isSmall ? 10 : 12\">\n </cqa-badge>\n </div>\n\n <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n [ngStyle]=\"runLabelStyles\"\n [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\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: [] }]
|
|
10617
10658
|
}], propDecorators: { id: [{
|
|
10618
10659
|
type: Input
|
|
10619
10660
|
}], status: [{
|
|
@@ -10632,6 +10673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
10632
10673
|
type: Input
|
|
10633
10674
|
}], durationTooltip: [{
|
|
10634
10675
|
type: Input
|
|
10676
|
+
}], platform: [{
|
|
10677
|
+
type: Input
|
|
10635
10678
|
}], headingClicked: [{
|
|
10636
10679
|
type: Output
|
|
10637
10680
|
}] } });
|