@testgorilla/tgo-coding-test 2.0.4 → 2.0.5
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.
|
@@ -2497,7 +2497,7 @@ let TestCasesContentComponent = class TestCasesContentComponent {
|
|
|
2497
2497
|
});
|
|
2498
2498
|
}
|
|
2499
2499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TestCasesContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TestCasesContentComponent, isStandalone: true, selector: "tgo-test-cases-content", inputs: { testCase: "testCase", testCaseResult: "testCaseResult", areTestsRun: "areTestsRun", translations: "translations", applicationTheme: "applicationTheme", isSQL: "isSQL" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (testCase) {\n<div class=\"test-cases-content\" [class.test-cases-content-tests-run]=\"areTestsRun\">\n @if (areTestsRun && isCustomTestCase && (testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-hint-container\">\n <p class=\"custom-tests-info\">{{ translations['BOTH_FIELDS_MUST_BE_FILLED'] }}</p>\n </div>\n } @if (!isCustomTestCase && !areTestsRun) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['EXAMPLE_TEST_CASE_INFO'] }}\n </p>\n } @if (isCustomTestCase && (!testCaseResult || (testCaseResult?.status | memoizeFunc: isEmptyTestCase))) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['FILL_ALL_FIELDS'] }}\n </p>\n } @if (testCaseResult && !(testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-logs\">\n <div class=\"custom-tests-log-row\">\n <h4 class=\"custom-tests-log-header\">{{ translations['LOG'] }}</h4>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.logs\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n @if (isSQL) {\n <div class=\"custom-tests-log-row custom-tests-log-row-cols\">\n <div class=\"custom-tests-log-col custom-tests-log-col-expected-query\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['EXPECTED_QUERY'] }}</h4>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCase.expectedOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n <div class=\"custom-tests-log-col\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['QUERY_RESULT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCaseResult.actualOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"custom-tests-log-row\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['OUTPUT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.actualOutput\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n }\n </div>\n } @if (!isSQL) {\n <form [formGroup]=\"form\">\n <div class=\"custom-tests-inputs-container\">\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['INPUT']\"\n [type]=\"'multi-line'\"\n [disabled]=\"testCase.preloaded\"\n [maxRows]=\"3\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"input\"\n ></ui-field>\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['EXPECTED_OUTPUT']\"\n [type]=\"'multi-line'\"\n [maxRows]=\"3\"\n [disabled]=\"testCase.preloaded\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"expectedOutput\"\n ></ui-field>\n </div>\n </form>\n }\n</div>\n}\n", styles: [".test-cases-content{padding:16px;font-size:14px;font-weight:400}.test-cases-content-tests-run{padding-bottom:50px}@media screen and (min-width:
|
|
2500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TestCasesContentComponent, isStandalone: true, selector: "tgo-test-cases-content", inputs: { testCase: "testCase", testCaseResult: "testCaseResult", areTestsRun: "areTestsRun", translations: "translations", applicationTheme: "applicationTheme", isSQL: "isSQL" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (testCase) {\n<div class=\"test-cases-content\" [class.test-cases-content-tests-run]=\"areTestsRun\">\n @if (areTestsRun && isCustomTestCase && (testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-hint-container\">\n <p class=\"custom-tests-info\">{{ translations['BOTH_FIELDS_MUST_BE_FILLED'] }}</p>\n </div>\n } @if (!isCustomTestCase && !areTestsRun) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['EXAMPLE_TEST_CASE_INFO'] }}\n </p>\n } @if (isCustomTestCase && (!testCaseResult || (testCaseResult?.status | memoizeFunc: isEmptyTestCase))) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['FILL_ALL_FIELDS'] }}\n </p>\n } @if (testCaseResult && !(testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-logs\">\n <div class=\"custom-tests-log-row\">\n <h4 class=\"custom-tests-log-header\">{{ translations['LOG'] }}</h4>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.logs\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n @if (isSQL) {\n <div class=\"custom-tests-log-row custom-tests-log-row-cols\">\n <div class=\"custom-tests-log-col custom-tests-log-col-expected-query\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['EXPECTED_QUERY'] }}</h4>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCase.expectedOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n <div class=\"custom-tests-log-col\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['QUERY_RESULT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCaseResult.actualOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"custom-tests-log-row\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['OUTPUT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.actualOutput\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n }\n </div>\n } @if (!isSQL) {\n <form [formGroup]=\"form\">\n <div class=\"custom-tests-inputs-container\">\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['INPUT']\"\n [type]=\"'multi-line'\"\n [disabled]=\"testCase.preloaded\"\n [maxRows]=\"3\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"input\"\n ></ui-field>\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['EXPECTED_OUTPUT']\"\n [type]=\"'multi-line'\"\n [maxRows]=\"3\"\n [disabled]=\"testCase.preloaded\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"expectedOutput\"\n ></ui-field>\n </div>\n </form>\n }\n</div>\n}\n", styles: [".test-cases-content{padding:16px;font-size:14px;font-weight:400}.test-cases-content-tests-run{padding-bottom:50px}@media screen and (min-width: 1600px){.test-cases-content{max-width:1300px}}.custom-tests-log-header,.custom-tests-info{margin:0;font-size:14px;font-weight:400}.custom-tests-log-heading{display:flex;justify-content:space-between;align-items:center;margin:0}.custom-tests-log-content{padding:4px 12px;margin:4px 0;background-color:var(--status-bg-color)}.custom-tests-log-row,.custom-tests-hint-container,.custom-tests-info-indented{margin-bottom:16px}.custom-tests-log-row-cols{display:flex;gap:16px}@media screen and (max-width: 599px){.custom-tests-log-row-cols{flex-direction:column}}@media screen and (min-width: 600px){.custom-tests-log-col{flex:1 1 50%;max-width:50%}}.custom-tests-log-col-expected-query{order:2}@media screen and (min-width: 600px){.custom-tests-log-col-expected-query{order:unset}}.custom-tests-hint-container{padding:12px 16px;background-color:#f0d6bb;border-radius:4px;color:#000}.custom-tests-inputs-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 600px){.custom-tests-inputs-container{gap:16px}.custom-tests-inputs-container .custom-tests-input{min-width:135px}}.custom-tests-input{flex:1;font-size:14px}::ng-deep .custom-tests-input.mat-focused .mat-form-field-outline-thick,::ng-deep .custom-tests-input.mat-focused .mat-form-field-label{color:var(--company-color, --petrol-text-color)!important}::ng-deep .custom-tests-input.mat-focused .mat-input-element{caret-color:var(--company-color, --petrol-text-color)!important}::ng-deep .custom-tests-input.mat-focused .mat-form-field-wrapper{padding-bottom:0}::ng-deep .custom-tests-input:hover .mat-form-field-outline-thick{color:var(--company-color, --petrol-text-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FieldComponentModule }, { kind: "component", type: i3.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "component", type: TruncatedTextComponent, selector: "tgo-truncated-text", inputs: ["text", "maxChars", "isWordWrap"] }, { kind: "component", type: TestCasesStatusComponent, selector: "tgo-test-cases-status", inputs: ["status", "translations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2501
2501
|
};
|
|
2502
2502
|
TestCasesContentComponent = __decorate([
|
|
2503
2503
|
UntilDestroy()
|
|
@@ -2511,7 +2511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2511
2511
|
MemoizeFuncPipe,
|
|
2512
2512
|
TruncatedTextComponent,
|
|
2513
2513
|
TestCasesStatusComponent,
|
|
2514
|
-
], template: "@if (testCase) {\n<div class=\"test-cases-content\" [class.test-cases-content-tests-run]=\"areTestsRun\">\n @if (areTestsRun && isCustomTestCase && (testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-hint-container\">\n <p class=\"custom-tests-info\">{{ translations['BOTH_FIELDS_MUST_BE_FILLED'] }}</p>\n </div>\n } @if (!isCustomTestCase && !areTestsRun) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['EXAMPLE_TEST_CASE_INFO'] }}\n </p>\n } @if (isCustomTestCase && (!testCaseResult || (testCaseResult?.status | memoizeFunc: isEmptyTestCase))) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['FILL_ALL_FIELDS'] }}\n </p>\n } @if (testCaseResult && !(testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-logs\">\n <div class=\"custom-tests-log-row\">\n <h4 class=\"custom-tests-log-header\">{{ translations['LOG'] }}</h4>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.logs\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n @if (isSQL) {\n <div class=\"custom-tests-log-row custom-tests-log-row-cols\">\n <div class=\"custom-tests-log-col custom-tests-log-col-expected-query\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['EXPECTED_QUERY'] }}</h4>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCase.expectedOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n <div class=\"custom-tests-log-col\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['QUERY_RESULT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCaseResult.actualOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"custom-tests-log-row\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['OUTPUT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.actualOutput\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n }\n </div>\n } @if (!isSQL) {\n <form [formGroup]=\"form\">\n <div class=\"custom-tests-inputs-container\">\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['INPUT']\"\n [type]=\"'multi-line'\"\n [disabled]=\"testCase.preloaded\"\n [maxRows]=\"3\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"input\"\n ></ui-field>\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['EXPECTED_OUTPUT']\"\n [type]=\"'multi-line'\"\n [maxRows]=\"3\"\n [disabled]=\"testCase.preloaded\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"expectedOutput\"\n ></ui-field>\n </div>\n </form>\n }\n</div>\n}\n", styles: [".test-cases-content{padding:16px;font-size:14px;font-weight:400}.test-cases-content-tests-run{padding-bottom:50px}@media screen and (min-width:
|
|
2514
|
+
], template: "@if (testCase) {\n<div class=\"test-cases-content\" [class.test-cases-content-tests-run]=\"areTestsRun\">\n @if (areTestsRun && isCustomTestCase && (testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-hint-container\">\n <p class=\"custom-tests-info\">{{ translations['BOTH_FIELDS_MUST_BE_FILLED'] }}</p>\n </div>\n } @if (!isCustomTestCase && !areTestsRun) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['EXAMPLE_TEST_CASE_INFO'] }}\n </p>\n } @if (isCustomTestCase && (!testCaseResult || (testCaseResult?.status | memoizeFunc: isEmptyTestCase))) {\n <p class=\"custom-tests-info custom-tests-info-indented\">\n {{ translations['FILL_ALL_FIELDS'] }}\n </p>\n } @if (testCaseResult && !(testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {\n <div class=\"custom-tests-logs\">\n <div class=\"custom-tests-log-row\">\n <h4 class=\"custom-tests-log-header\">{{ translations['LOG'] }}</h4>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.logs\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n @if (isSQL) {\n <div class=\"custom-tests-log-row custom-tests-log-row-cols\">\n <div class=\"custom-tests-log-col custom-tests-log-col-expected-query\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['EXPECTED_QUERY'] }}</h4>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCase.expectedOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n <div class=\"custom-tests-log-col\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['QUERY_RESULT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text\n [text]=\"testCaseResult.actualOutput\"\n [isWordWrap]=\"true\"\n class=\"custom-tests-info\"\n ></tgo-truncated-text>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"custom-tests-log-row\">\n <div class=\"custom-tests-log-heading\">\n <h4 class=\"custom-tests-log-header\">{{ translations['OUTPUT'] }}</h4>\n <tgo-test-cases-status\n [status]=\"testCaseResult.status\"\n [translations]=\"translations['STATUSES']\"\n ></tgo-test-cases-status>\n </div>\n <div class=\"custom-tests-log-content\">\n <tgo-truncated-text [text]=\"testCaseResult.actualOutput\" class=\"custom-tests-info\"></tgo-truncated-text>\n </div>\n </div>\n }\n </div>\n } @if (!isSQL) {\n <form [formGroup]=\"form\">\n <div class=\"custom-tests-inputs-container\">\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['INPUT']\"\n [type]=\"'multi-line'\"\n [disabled]=\"testCase.preloaded\"\n [maxRows]=\"3\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"input\"\n ></ui-field>\n <ui-field\n class=\"custom-tests-input\"\n [label]=\"translations['EXPECTED_OUTPUT']\"\n [type]=\"'multi-line'\"\n [maxRows]=\"3\"\n [disabled]=\"testCase.preloaded\"\n [applicationTheme]=\"applicationTheme\"\n formControlName=\"expectedOutput\"\n ></ui-field>\n </div>\n </form>\n }\n</div>\n}\n", styles: [".test-cases-content{padding:16px;font-size:14px;font-weight:400}.test-cases-content-tests-run{padding-bottom:50px}@media screen and (min-width: 1600px){.test-cases-content{max-width:1300px}}.custom-tests-log-header,.custom-tests-info{margin:0;font-size:14px;font-weight:400}.custom-tests-log-heading{display:flex;justify-content:space-between;align-items:center;margin:0}.custom-tests-log-content{padding:4px 12px;margin:4px 0;background-color:var(--status-bg-color)}.custom-tests-log-row,.custom-tests-hint-container,.custom-tests-info-indented{margin-bottom:16px}.custom-tests-log-row-cols{display:flex;gap:16px}@media screen and (max-width: 599px){.custom-tests-log-row-cols{flex-direction:column}}@media screen and (min-width: 600px){.custom-tests-log-col{flex:1 1 50%;max-width:50%}}.custom-tests-log-col-expected-query{order:2}@media screen and (min-width: 600px){.custom-tests-log-col-expected-query{order:unset}}.custom-tests-hint-container{padding:12px 16px;background-color:#f0d6bb;border-radius:4px;color:#000}.custom-tests-inputs-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 600px){.custom-tests-inputs-container{gap:16px}.custom-tests-inputs-container .custom-tests-input{min-width:135px}}.custom-tests-input{flex:1;font-size:14px}::ng-deep .custom-tests-input.mat-focused .mat-form-field-outline-thick,::ng-deep .custom-tests-input.mat-focused .mat-form-field-label{color:var(--company-color, --petrol-text-color)!important}::ng-deep .custom-tests-input.mat-focused .mat-input-element{caret-color:var(--company-color, --petrol-text-color)!important}::ng-deep .custom-tests-input.mat-focused .mat-form-field-wrapper{padding-bottom:0}::ng-deep .custom-tests-input:hover .mat-form-field-outline-thick{color:var(--company-color, --petrol-text-color)!important}\n"] }]
|
|
2515
2515
|
}], propDecorators: { testCase: [{
|
|
2516
2516
|
type: Input
|
|
2517
2517
|
}], testCaseResult: [{
|
|
@@ -2663,7 +2663,7 @@ let TestCasesComponent = class TestCasesComponent {
|
|
|
2663
2663
|
this.isAddTestCasesDisabled = this.testCases.length - exampleTestCasesCount < this.maxTestCasesAllowed;
|
|
2664
2664
|
}
|
|
2665
2665
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TestCasesComponent, deps: [{ token: LibCodingTestService }, { token: i0.ChangeDetectorRef }, { token: TestCasesService }, { token: StorageCodingService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TestCasesComponent, isStandalone: true, selector: "tgo-test-cases", inputs: { exampleTestCases: "exampleTestCases", apiTestCasesResult: "apiTestCasesResult", testCasesStatus: "testCasesStatus", testCases: "testCases", translations: "translations", areTestsRun: "areTestsRun", applicationTheme: "applicationTheme", canAddCustomTestCases: "canAddCustomTestCases", isSQL: "isSQL" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"test-case-container\">\n <div\n id=\"test-cases\"\n class=\"test-case-tabs-wrapper\"\n [ngClass]=\"{\n 'test-case-tabs-wrapper-tests-run': areTestsRun,\n 'test-case-tabs-wrapper-mobile': isMobile,\n 'test-case-tabs-wrapper-hidden': isContentViewOpened\n }\"\n >\n @if (!isMobile) {\n <mat-tab-group\n #tabGroup\n class=\"test-cases-tabs\"\n [selectedIndex]=\"activeTestCaseIndex\"\n (selectedIndexChange)=\"setActiveTestCaseIndex($event)\"\n >\n @for (testCase of testCases; track testCase; let index = $index) {\n <mat-tab label=\"{{ testCase.name }}\">\n <ng-template mat-tab-label>\n <div class=\"tab-label-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <div class=\"test-cases-tabs test-cases-tabs-mobile\">\n @for (testCase of testCases; track testCase; let index = $index) {\n <div class=\"tab-label-wrapper\" (click)=\"setActiveTestCaseIndex(index)\">\n <div class=\"test-case-name-status-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n @if (isMobile) {\n <ui-icon [name]=\"'Arrow-chevron-right-filled'\" [size]=\"'24'\" class=\"themed-button\"></ui-icon>\n }\n </div>\n }\n </div>\n } @if (canAddCustomTestCases) {\n <ui-button\n class=\"add-test-case themed-button\"\n [variant]=\"'tertiary'\"\n [iconName]=\"'Plus'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"!isAddTestCasesDisabled\"\n [fullWidth]=\"true\"\n [tooltip]=\"!isAddTestCasesDisabled ? translations['TOOLTIPS']['CANT_ADD_TEST_CASE'] : null\"\n [label]=\"\n translations['TEST_RESULTS']['TEST_CASES']['ADD_TEST_CASE'] +\n ' (' +\n (testCases?.length - exampleTestCases?.length) +\n '/' +\n maxTestCasesAllowed +\n ')'\n \"\n (buttonClickEvent)=\"addTestCase()\"\n >\n </ui-button>\n }\n </div>\n\n @if (!isMobile) {\n <div class=\"test-case-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n } @if (isMobile && isContentViewOpened) {\n <div class=\"test-case-content-wrapper-mobile\">\n <div class=\"test-case-mobile-name-wrapper\">\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n [tooltip]=\"''\"\n [size]=\"'small'\"\n (buttonClickEvent)=\"closeTestCaseMobileView()\"\n class=\"themed-button\"\n >\n </ui-button>\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{\n testCase: testCases[activeTestCaseIndex],\n index: activeTestCaseIndex,\n hideStatus: true\n }\"\n ></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n }\n</div>\n\n<ng-template #testCaseHeading let-testCase=\"testCase\" let-index=\"index\" let-hideStatus=\"hideStatus\">\n <div class=\"tab-label\">\n @if (testCase.preloaded) {\n <ui-icon [name]=\"'Lock'\" class=\"preloaded-icon\"></ui-icon>\n }\n <span class=\"tab-label-value\">{{ testCase.name }}</span>\n </div>\n\n @if (!hideStatus && testCasesResult?.length) {\n <tgo-test-cases-status\n [status]=\"testCasesResult?.[index]?.status\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']['STATUSES']\"\n ></tgo-test-cases-status>\n } @if (!testCase.preloaded) {\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Delete'\"\n [tooltip]=\"translations['TOOLTIPS']['DELETE_TEST_CASE'] || ''\"\n (buttonClickEvent)=\"removeTestCase(index)\"\n class=\"delete-test-case themed-button\"\n >\n </ui-button>\n }\n</ng-template>\n\n<ng-template #testCasesContentTpl>\n <tgo-test-cases-content\n [testCase]=\"testCases[activeTestCaseIndex]\"\n [testCaseResult]=\"testCasesResult?.[activeTestCaseIndex]\"\n [areTestsRun]=\"areTestsRun\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']\"\n [isSQL]=\"isSQL\"\n [applicationTheme]=\"applicationTheme\"\n (valueChange)=\"modifyTestCase(activeTestCaseIndex, $event)\"\n ></tgo-test-cases-content>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.test-case-container{display:flex;height:100%}.test-case-container .test-case-tabs-wrapper{display:flex;flex-direction:column;position:relative;overflow-y:auto;border-right:1px solid var(--border-bg-color);height:100%;min-width:230px}.test-case-container .test-case-tabs-wrapper-mobile{flex:1}.test-case-container .test-case-tabs-wrapper-mobile.test-case-tabs-wrapper-hidden{display:none}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{width:3px}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator .mdc-tab-indicator__content{border-left:3px solid transparent;height:100%}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab:hover .delete-test-case{display:block}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .tab-label-value{font-weight:600}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content{border-left-color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs{flex-direction:row;flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content{justify-content:flex-start;padding:14px 16px;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .mdc-tab__text-label{flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .tab-label-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-labels{flex-direction:column}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-header{width:100%;border-bottom:none}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab{height:48px;padding:0;border-bottom:1px solid var(--border-bg-color);color:var(--secondary-text-color)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__text-label{width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs.mat-mdc-tab-group.mat-primary ::ng-deep .mat-ink-bar{background-color:transparent}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .test-case-name-status-wrapper{display:flex;justify-content:space-between;flex:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .tab-label-wrapper{display:flex;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--border-bg-color)}.test-case-container .test-case-tabs-wrapper .add-test-case{position:sticky;bottom:0;left:0;right:0;border-top:1px solid var(--border-bg-color);border-radius:0;z-index:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep mat-icon{color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button{justify-content:flex-start;background-color:var(--bg-mat-card)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled{opacity:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled .mdc-button__label{opacity:.75}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button span{color:var(--company-theme-specific-color, #D410AA)!important}.test-case-container .delete-test-case{display:none;position:absolute;right:16px;cursor:pointer}.test-case-container .delete-test-case ::ng-deep .icon-button:not(:hover){background-color:var(--bg-mat-card)!important}.test-case-container .delete-test-case ::ng-deep svg{color:var(--icon-bg-color)}.test-case-container ::ng-deep .mat-tab-label.cdk-program-focused .delete-test-case svg rect{fill:#484c4d00}.test-case-container .test-case-content-wrapper{flex-grow:1;overflow-y:auto}.test-case-container .preloaded-icon{margin-right:4px}.test-case-container .preloaded-icon ::ng-deep mat-icon svg{color:var(--icon-secondary-bg-color)}.test-case-container .tab-label{display:flex;align-items:center;color:var(--main-text-color)}.test-case-container .chevron-icon{margin-left:8px}.test-case-container .test-case-content-wrapper-mobile{overflow:auto}.test-case-container .test-case-mobile-name-wrapper{display:flex;position:relative;padding:14px 16px 0}.test-case-container .test-case-mobile-name-wrapper .chevron-icon{margin:0 4px 0 0}.test-case-container .test-case-mobile-name-wrapper .delete-test-case{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: TestCasesStatusComponent, selector: "tgo-test-cases-status", inputs: ["status", "translations"] }, { kind: "component", type: TestCasesContentComponent, selector: "tgo-test-cases-content", inputs: ["testCase", "testCaseResult", "areTestsRun", "translations", "applicationTheme", "isSQL"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2666
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TestCasesComponent, isStandalone: true, selector: "tgo-test-cases", inputs: { exampleTestCases: "exampleTestCases", apiTestCasesResult: "apiTestCasesResult", testCasesStatus: "testCasesStatus", testCases: "testCases", translations: "translations", areTestsRun: "areTestsRun", applicationTheme: "applicationTheme", canAddCustomTestCases: "canAddCustomTestCases", isSQL: "isSQL" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"test-case-container\">\n <div\n id=\"test-cases\"\n class=\"test-case-tabs-wrapper\"\n [ngClass]=\"{\n 'test-case-tabs-wrapper-tests-run': areTestsRun,\n 'test-case-tabs-wrapper-mobile': isMobile,\n 'test-case-tabs-wrapper-hidden': isContentViewOpened\n }\"\n >\n @if (!isMobile) {\n <mat-tab-group\n #tabGroup\n class=\"test-cases-tabs\"\n [selectedIndex]=\"activeTestCaseIndex\"\n (selectedIndexChange)=\"setActiveTestCaseIndex($event)\"\n >\n @for (testCase of testCases; track testCase; let index = $index) {\n <mat-tab label=\"{{ testCase.name }}\">\n <ng-template mat-tab-label>\n <div class=\"tab-label-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <div class=\"test-cases-tabs test-cases-tabs-mobile\">\n @for (testCase of testCases; track testCase; let index = $index) {\n <div class=\"tab-label-wrapper\" (click)=\"setActiveTestCaseIndex(index)\">\n <div class=\"test-case-name-status-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n @if (isMobile) {\n <ui-icon [name]=\"'Arrow-chevron-right-filled'\" [size]=\"'24'\" class=\"themed-button\"></ui-icon>\n }\n </div>\n }\n </div>\n } @if (canAddCustomTestCases) {\n <ui-button\n class=\"add-test-case themed-button\"\n [variant]=\"'tertiary'\"\n [iconName]=\"'Plus'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"!isAddTestCasesDisabled\"\n [fullWidth]=\"true\"\n [tooltip]=\"!isAddTestCasesDisabled ? translations['TOOLTIPS']['CANT_ADD_TEST_CASE'] : null\"\n [label]=\"\n translations['TEST_RESULTS']['TEST_CASES']['ADD_TEST_CASE'] +\n ' (' +\n (testCases?.length - exampleTestCases?.length) +\n '/' +\n maxTestCasesAllowed +\n ')'\n \"\n (buttonClickEvent)=\"addTestCase()\"\n >\n </ui-button>\n }\n </div>\n\n @if (!isMobile) {\n <div class=\"test-case-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n } @if (isMobile && isContentViewOpened) {\n <div class=\"test-case-content-wrapper-mobile\">\n <div class=\"test-case-mobile-name-wrapper\">\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n [tooltip]=\"''\"\n [size]=\"'small'\"\n (buttonClickEvent)=\"closeTestCaseMobileView()\"\n class=\"themed-button\"\n >\n </ui-button>\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{\n testCase: testCases[activeTestCaseIndex],\n index: activeTestCaseIndex,\n hideStatus: true\n }\"\n ></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n }\n</div>\n\n<ng-template #testCaseHeading let-testCase=\"testCase\" let-index=\"index\" let-hideStatus=\"hideStatus\">\n <div class=\"tab-label\">\n @if (testCase.preloaded) {\n <ui-icon [name]=\"'Lock'\" class=\"preloaded-icon\"></ui-icon>\n }\n <span class=\"tab-label-value\">{{ testCase.name }}</span>\n </div>\n\n @if (!hideStatus && testCasesResult?.length) {\n <tgo-test-cases-status\n [status]=\"testCasesResult?.[index]?.status\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']['STATUSES']\"\n ></tgo-test-cases-status>\n } @if (!testCase.preloaded) {\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Delete'\"\n [tooltip]=\"translations['TOOLTIPS']['DELETE_TEST_CASE'] || ''\"\n (buttonClickEvent)=\"removeTestCase(index)\"\n class=\"delete-test-case themed-button\"\n >\n </ui-button>\n }\n</ng-template>\n\n<ng-template #testCasesContentTpl>\n <tgo-test-cases-content\n [testCase]=\"testCases[activeTestCaseIndex]\"\n [testCaseResult]=\"testCasesResult?.[activeTestCaseIndex]\"\n [areTestsRun]=\"areTestsRun\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']\"\n [isSQL]=\"isSQL\"\n [applicationTheme]=\"applicationTheme\"\n (valueChange)=\"modifyTestCase(activeTestCaseIndex, $event)\"\n ></tgo-test-cases-content>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.test-case-container{display:flex;height:100%}.test-case-container .test-case-tabs-wrapper{display:flex;flex-direction:column;position:relative;overflow-y:auto;border-right:1px solid var(--border-bg-color);height:100%;min-width:230px}@media screen and (min-width: 1600px){.test-case-container .test-case-tabs-wrapper{max-width:300px}}.test-case-container .test-case-tabs-wrapper-mobile{flex:1}.test-case-container .test-case-tabs-wrapper-mobile.test-case-tabs-wrapper-hidden{display:none}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{width:3px}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator .mdc-tab-indicator__content{border-left:3px solid transparent;height:100%}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab:hover .delete-test-case{display:block}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .tab-label-value{font-weight:600}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content{border-left-color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs{flex-direction:row;flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content{justify-content:flex-start;padding:14px 16px;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .mdc-tab__text-label{flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .tab-label-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-labels{flex-direction:column}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-header{width:100%;border-bottom:none}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab{height:48px;padding:0;border-bottom:1px solid var(--border-bg-color);color:var(--secondary-text-color)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__text-label{width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs.mat-mdc-tab-group.mat-primary ::ng-deep .mat-ink-bar{background-color:transparent}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .test-case-name-status-wrapper{display:flex;justify-content:space-between;flex:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .tab-label-wrapper{display:flex;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--border-bg-color)}.test-case-container .test-case-tabs-wrapper .add-test-case{position:sticky;bottom:0;left:0;right:0;border-top:1px solid var(--border-bg-color);border-radius:0;z-index:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep mat-icon{color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button{justify-content:flex-start;background-color:var(--bg-mat-card)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled{opacity:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled .mdc-button__label{opacity:.75}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button span{color:var(--company-theme-specific-color, #D410AA)!important}.test-case-container .delete-test-case{display:none;position:absolute;right:16px;cursor:pointer}.test-case-container .delete-test-case ::ng-deep .icon-button:not(:hover){background-color:var(--bg-mat-card)!important}.test-case-container .delete-test-case ::ng-deep svg{color:var(--icon-bg-color)}.test-case-container ::ng-deep .mat-tab-label.cdk-program-focused .delete-test-case svg rect{fill:#484c4d00}.test-case-container .test-case-content-wrapper{flex-grow:1;overflow-y:auto}.test-case-container .preloaded-icon{margin-right:4px}.test-case-container .preloaded-icon ::ng-deep mat-icon svg{color:var(--icon-secondary-bg-color)}.test-case-container .tab-label{display:flex;align-items:center;color:var(--main-text-color)}.test-case-container .chevron-icon{margin-left:8px}.test-case-container .test-case-content-wrapper-mobile{overflow:auto}.test-case-container .test-case-mobile-name-wrapper{display:flex;position:relative;padding:14px 16px 0}.test-case-container .test-case-mobile-name-wrapper .chevron-icon{margin:0 4px 0 0}.test-case-container .test-case-mobile-name-wrapper .delete-test-case{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: TestCasesStatusComponent, selector: "tgo-test-cases-status", inputs: ["status", "translations"] }, { kind: "component", type: TestCasesContentComponent, selector: "tgo-test-cases-content", inputs: ["testCase", "testCaseResult", "areTestsRun", "translations", "applicationTheme", "isSQL"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2667
2667
|
};
|
|
2668
2668
|
TestCasesComponent = __decorate([
|
|
2669
2669
|
UntilDestroy(),
|
|
@@ -2681,7 +2681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
2681
2681
|
ButtonComponentModule,
|
|
2682
2682
|
TestCasesStatusComponent,
|
|
2683
2683
|
TestCasesContentComponent,
|
|
2684
|
-
], template: "<div class=\"test-case-container\">\n <div\n id=\"test-cases\"\n class=\"test-case-tabs-wrapper\"\n [ngClass]=\"{\n 'test-case-tabs-wrapper-tests-run': areTestsRun,\n 'test-case-tabs-wrapper-mobile': isMobile,\n 'test-case-tabs-wrapper-hidden': isContentViewOpened\n }\"\n >\n @if (!isMobile) {\n <mat-tab-group\n #tabGroup\n class=\"test-cases-tabs\"\n [selectedIndex]=\"activeTestCaseIndex\"\n (selectedIndexChange)=\"setActiveTestCaseIndex($event)\"\n >\n @for (testCase of testCases; track testCase; let index = $index) {\n <mat-tab label=\"{{ testCase.name }}\">\n <ng-template mat-tab-label>\n <div class=\"tab-label-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <div class=\"test-cases-tabs test-cases-tabs-mobile\">\n @for (testCase of testCases; track testCase; let index = $index) {\n <div class=\"tab-label-wrapper\" (click)=\"setActiveTestCaseIndex(index)\">\n <div class=\"test-case-name-status-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n @if (isMobile) {\n <ui-icon [name]=\"'Arrow-chevron-right-filled'\" [size]=\"'24'\" class=\"themed-button\"></ui-icon>\n }\n </div>\n }\n </div>\n } @if (canAddCustomTestCases) {\n <ui-button\n class=\"add-test-case themed-button\"\n [variant]=\"'tertiary'\"\n [iconName]=\"'Plus'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"!isAddTestCasesDisabled\"\n [fullWidth]=\"true\"\n [tooltip]=\"!isAddTestCasesDisabled ? translations['TOOLTIPS']['CANT_ADD_TEST_CASE'] : null\"\n [label]=\"\n translations['TEST_RESULTS']['TEST_CASES']['ADD_TEST_CASE'] +\n ' (' +\n (testCases?.length - exampleTestCases?.length) +\n '/' +\n maxTestCasesAllowed +\n ')'\n \"\n (buttonClickEvent)=\"addTestCase()\"\n >\n </ui-button>\n }\n </div>\n\n @if (!isMobile) {\n <div class=\"test-case-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n } @if (isMobile && isContentViewOpened) {\n <div class=\"test-case-content-wrapper-mobile\">\n <div class=\"test-case-mobile-name-wrapper\">\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n [tooltip]=\"''\"\n [size]=\"'small'\"\n (buttonClickEvent)=\"closeTestCaseMobileView()\"\n class=\"themed-button\"\n >\n </ui-button>\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{\n testCase: testCases[activeTestCaseIndex],\n index: activeTestCaseIndex,\n hideStatus: true\n }\"\n ></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n }\n</div>\n\n<ng-template #testCaseHeading let-testCase=\"testCase\" let-index=\"index\" let-hideStatus=\"hideStatus\">\n <div class=\"tab-label\">\n @if (testCase.preloaded) {\n <ui-icon [name]=\"'Lock'\" class=\"preloaded-icon\"></ui-icon>\n }\n <span class=\"tab-label-value\">{{ testCase.name }}</span>\n </div>\n\n @if (!hideStatus && testCasesResult?.length) {\n <tgo-test-cases-status\n [status]=\"testCasesResult?.[index]?.status\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']['STATUSES']\"\n ></tgo-test-cases-status>\n } @if (!testCase.preloaded) {\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Delete'\"\n [tooltip]=\"translations['TOOLTIPS']['DELETE_TEST_CASE'] || ''\"\n (buttonClickEvent)=\"removeTestCase(index)\"\n class=\"delete-test-case themed-button\"\n >\n </ui-button>\n }\n</ng-template>\n\n<ng-template #testCasesContentTpl>\n <tgo-test-cases-content\n [testCase]=\"testCases[activeTestCaseIndex]\"\n [testCaseResult]=\"testCasesResult?.[activeTestCaseIndex]\"\n [areTestsRun]=\"areTestsRun\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']\"\n [isSQL]=\"isSQL\"\n [applicationTheme]=\"applicationTheme\"\n (valueChange)=\"modifyTestCase(activeTestCaseIndex, $event)\"\n ></tgo-test-cases-content>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.test-case-container{display:flex;height:100%}.test-case-container .test-case-tabs-wrapper{display:flex;flex-direction:column;position:relative;overflow-y:auto;border-right:1px solid var(--border-bg-color);height:100%;min-width:230px}.test-case-container .test-case-tabs-wrapper-mobile{flex:1}.test-case-container .test-case-tabs-wrapper-mobile.test-case-tabs-wrapper-hidden{display:none}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{width:3px}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator .mdc-tab-indicator__content{border-left:3px solid transparent;height:100%}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab:hover .delete-test-case{display:block}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .tab-label-value{font-weight:600}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content{border-left-color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs{flex-direction:row;flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content{justify-content:flex-start;padding:14px 16px;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .mdc-tab__text-label{flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .tab-label-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-labels{flex-direction:column}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-header{width:100%;border-bottom:none}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab{height:48px;padding:0;border-bottom:1px solid var(--border-bg-color);color:var(--secondary-text-color)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__text-label{width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs.mat-mdc-tab-group.mat-primary ::ng-deep .mat-ink-bar{background-color:transparent}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .test-case-name-status-wrapper{display:flex;justify-content:space-between;flex:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .tab-label-wrapper{display:flex;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--border-bg-color)}.test-case-container .test-case-tabs-wrapper .add-test-case{position:sticky;bottom:0;left:0;right:0;border-top:1px solid var(--border-bg-color);border-radius:0;z-index:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep mat-icon{color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button{justify-content:flex-start;background-color:var(--bg-mat-card)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled{opacity:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled .mdc-button__label{opacity:.75}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button span{color:var(--company-theme-specific-color, #D410AA)!important}.test-case-container .delete-test-case{display:none;position:absolute;right:16px;cursor:pointer}.test-case-container .delete-test-case ::ng-deep .icon-button:not(:hover){background-color:var(--bg-mat-card)!important}.test-case-container .delete-test-case ::ng-deep svg{color:var(--icon-bg-color)}.test-case-container ::ng-deep .mat-tab-label.cdk-program-focused .delete-test-case svg rect{fill:#484c4d00}.test-case-container .test-case-content-wrapper{flex-grow:1;overflow-y:auto}.test-case-container .preloaded-icon{margin-right:4px}.test-case-container .preloaded-icon ::ng-deep mat-icon svg{color:var(--icon-secondary-bg-color)}.test-case-container .tab-label{display:flex;align-items:center;color:var(--main-text-color)}.test-case-container .chevron-icon{margin-left:8px}.test-case-container .test-case-content-wrapper-mobile{overflow:auto}.test-case-container .test-case-mobile-name-wrapper{display:flex;position:relative;padding:14px 16px 0}.test-case-container .test-case-mobile-name-wrapper .chevron-icon{margin:0 4px 0 0}.test-case-container .test-case-mobile-name-wrapper .delete-test-case{display:block}\n"] }]
|
|
2684
|
+
], template: "<div class=\"test-case-container\">\n <div\n id=\"test-cases\"\n class=\"test-case-tabs-wrapper\"\n [ngClass]=\"{\n 'test-case-tabs-wrapper-tests-run': areTestsRun,\n 'test-case-tabs-wrapper-mobile': isMobile,\n 'test-case-tabs-wrapper-hidden': isContentViewOpened\n }\"\n >\n @if (!isMobile) {\n <mat-tab-group\n #tabGroup\n class=\"test-cases-tabs\"\n [selectedIndex]=\"activeTestCaseIndex\"\n (selectedIndexChange)=\"setActiveTestCaseIndex($event)\"\n >\n @for (testCase of testCases; track testCase; let index = $index) {\n <mat-tab label=\"{{ testCase.name }}\">\n <ng-template mat-tab-label>\n <div class=\"tab-label-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <div class=\"test-cases-tabs test-cases-tabs-mobile\">\n @for (testCase of testCases; track testCase; let index = $index) {\n <div class=\"tab-label-wrapper\" (click)=\"setActiveTestCaseIndex(index)\">\n <div class=\"test-case-name-status-wrapper\">\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{ testCase: testCase, index: index }\"\n ></ng-container>\n </div>\n @if (isMobile) {\n <ui-icon [name]=\"'Arrow-chevron-right-filled'\" [size]=\"'24'\" class=\"themed-button\"></ui-icon>\n }\n </div>\n }\n </div>\n } @if (canAddCustomTestCases) {\n <ui-button\n class=\"add-test-case themed-button\"\n [variant]=\"'tertiary'\"\n [iconName]=\"'Plus'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"!isAddTestCasesDisabled\"\n [fullWidth]=\"true\"\n [tooltip]=\"!isAddTestCasesDisabled ? translations['TOOLTIPS']['CANT_ADD_TEST_CASE'] : null\"\n [label]=\"\n translations['TEST_RESULTS']['TEST_CASES']['ADD_TEST_CASE'] +\n ' (' +\n (testCases?.length - exampleTestCases?.length) +\n '/' +\n maxTestCasesAllowed +\n ')'\n \"\n (buttonClickEvent)=\"addTestCase()\"\n >\n </ui-button>\n }\n </div>\n\n @if (!isMobile) {\n <div class=\"test-case-content-wrapper\">\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n } @if (isMobile && isContentViewOpened) {\n <div class=\"test-case-content-wrapper-mobile\">\n <div class=\"test-case-mobile-name-wrapper\">\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n [tooltip]=\"''\"\n [size]=\"'small'\"\n (buttonClickEvent)=\"closeTestCaseMobileView()\"\n class=\"themed-button\"\n >\n </ui-button>\n <ng-container\n [ngTemplateOutlet]=\"testCaseHeading\"\n [ngTemplateOutletContext]=\"{\n testCase: testCases[activeTestCaseIndex],\n index: activeTestCaseIndex,\n hideStatus: true\n }\"\n ></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"testCasesContentTpl\"></ng-container>\n </div>\n }\n</div>\n\n<ng-template #testCaseHeading let-testCase=\"testCase\" let-index=\"index\" let-hideStatus=\"hideStatus\">\n <div class=\"tab-label\">\n @if (testCase.preloaded) {\n <ui-icon [name]=\"'Lock'\" class=\"preloaded-icon\"></ui-icon>\n }\n <span class=\"tab-label-value\">{{ testCase.name }}</span>\n </div>\n\n @if (!hideStatus && testCasesResult?.length) {\n <tgo-test-cases-status\n [status]=\"testCasesResult?.[index]?.status\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']['STATUSES']\"\n ></tgo-test-cases-status>\n } @if (!testCase.preloaded) {\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Delete'\"\n [tooltip]=\"translations['TOOLTIPS']['DELETE_TEST_CASE'] || ''\"\n (buttonClickEvent)=\"removeTestCase(index)\"\n class=\"delete-test-case themed-button\"\n >\n </ui-button>\n }\n</ng-template>\n\n<ng-template #testCasesContentTpl>\n <tgo-test-cases-content\n [testCase]=\"testCases[activeTestCaseIndex]\"\n [testCaseResult]=\"testCasesResult?.[activeTestCaseIndex]\"\n [areTestsRun]=\"areTestsRun\"\n [translations]=\"translations['TEST_RESULTS']['TEST_CASES']\"\n [isSQL]=\"isSQL\"\n [applicationTheme]=\"applicationTheme\"\n (valueChange)=\"modifyTestCase(activeTestCaseIndex, $event)\"\n ></tgo-test-cases-content>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.test-case-container{display:flex;height:100%}.test-case-container .test-case-tabs-wrapper{display:flex;flex-direction:column;position:relative;overflow-y:auto;border-right:1px solid var(--border-bg-color);height:100%;min-width:230px}@media screen and (min-width: 1600px){.test-case-container .test-case-tabs-wrapper{max-width:300px}}.test-case-container .test-case-tabs-wrapper-mobile{flex:1}.test-case-container .test-case-tabs-wrapper-mobile.test-case-tabs-wrapper-hidden{display:none}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator{width:3px}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab .mdc-tab-indicator .mdc-tab-indicator__content{border-left:3px solid transparent;height:100%}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab:hover .delete-test-case{display:block}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .tab-label-value{font-weight:600}.test-case-container .test-case-tabs-wrapper:not(.test-case-container .test-case-tabs-wrapper-mobile) ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content{border-left-color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs{flex-direction:row;flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content{justify-content:flex-start;padding:14px 16px;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .mdc-tab__text-label{flex-grow:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__content .tab-label-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-labels{flex-direction:column}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mat-mdc-tab-header{width:100%;border-bottom:none}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab{height:48px;padding:0;border-bottom:1px solid var(--border-bg-color);color:var(--secondary-text-color)}.test-case-container .test-case-tabs-wrapper .test-cases-tabs ::ng-deep .mdc-tab__text-label{width:100%}.test-case-container .test-case-tabs-wrapper .test-cases-tabs.mat-mdc-tab-group.mat-primary ::ng-deep .mat-ink-bar{background-color:transparent}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .test-case-name-status-wrapper{display:flex;justify-content:space-between;flex:1}.test-case-container .test-case-tabs-wrapper .test-cases-tabs-mobile .tab-label-wrapper{display:flex;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--border-bg-color)}.test-case-container .test-case-tabs-wrapper .add-test-case{position:sticky;bottom:0;left:0;right:0;border-top:1px solid var(--border-bg-color);border-radius:0;z-index:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep mat-icon{color:var(--company-color, #D410AA)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button{justify-content:flex-start;background-color:var(--bg-mat-card)}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled{opacity:1}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button:disabled .mdc-button__label{opacity:.75}.test-case-container .test-case-tabs-wrapper .add-test-case ::ng-deep .mdc-button span{color:var(--company-theme-specific-color, #D410AA)!important}.test-case-container .delete-test-case{display:none;position:absolute;right:16px;cursor:pointer}.test-case-container .delete-test-case ::ng-deep .icon-button:not(:hover){background-color:var(--bg-mat-card)!important}.test-case-container .delete-test-case ::ng-deep svg{color:var(--icon-bg-color)}.test-case-container ::ng-deep .mat-tab-label.cdk-program-focused .delete-test-case svg rect{fill:#484c4d00}.test-case-container .test-case-content-wrapper{flex-grow:1;overflow-y:auto}.test-case-container .preloaded-icon{margin-right:4px}.test-case-container .preloaded-icon ::ng-deep mat-icon svg{color:var(--icon-secondary-bg-color)}.test-case-container .tab-label{display:flex;align-items:center;color:var(--main-text-color)}.test-case-container .chevron-icon{margin-left:8px}.test-case-container .test-case-content-wrapper-mobile{overflow:auto}.test-case-container .test-case-mobile-name-wrapper{display:flex;position:relative;padding:14px 16px 0}.test-case-container .test-case-mobile-name-wrapper .chevron-icon{margin:0 4px 0 0}.test-case-container .test-case-mobile-name-wrapper .delete-test-case{display:block}\n"] }]
|
|
2685
2685
|
}], ctorParameters: () => [{ type: LibCodingTestService }, { type: i0.ChangeDetectorRef }, { type: TestCasesService }, { type: StorageCodingService }], propDecorators: { exampleTestCases: [{
|
|
2686
2686
|
type: Input
|
|
2687
2687
|
}], apiTestCasesResult: [{
|