@cqa-lib/cqa-ui 1.1.507 → 1.1.509

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -18684,6 +18684,7 @@ class AiPromptCardComponent {
             case 'edited': return 'Edited';
             case 'duplicated': return 'Duplicated';
             case 'deleted': return 'Deleted';
+            case 'converted': return 'Converted';
             default: return '';
         }
     }
@@ -18693,6 +18694,7 @@ class AiPromptCardComponent {
             case 'edited': return { bg: '#FFFBEB', text: '#B45309', border: '#FDE68A' };
             case 'duplicated': return { bg: '#EEF2FF', text: '#4338CA', border: '#C7D2FE' };
             case 'deleted': return { bg: '#FEF2F2', text: '#B42318', border: '#FECACA' };
+            case 'converted': return { bg: '#CFFAFE', text: '#155E75', border: '#A5F3FC' };
             default: return { bg: '#F3F4F6', text: '#374151', border: '#E5E7EB' };
         }
     }
@@ -41337,6 +41339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/** Sentinel value emitted in save payloads to tell the host to send null for the field (use org-level default). */
+const ORG_LEVEL_SENTINEL = 'Org level';
 /** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
 const TEST_CASE_DETAILS_SELECT_KEYS = {
     status: 'status',
@@ -41443,6 +41447,8 @@ class TestCaseDetailsEditComponent {
         /** Local edit-mode mirror of the `storeMock` boolean. */
         this.editApiMockingStoreMock = false;
         this.testCaseTimeout = '';
+        /** 'org' → input disabled, payload sends null for testcaseTimeout; 'custom' → input enabled, payload sends the typed value. */
+        this.testCaseTimeoutMode = 'org';
         this.waitTimeoutLocators = '';
         this.autoWaitEnabled = false;
         this.retryFailedSteps = '';
@@ -41658,6 +41664,10 @@ class TestCaseDetailsEditComponent {
                 { value: 'none', name: 'None' },
             ],
         };
+        this.testCaseTimeoutModeOptions = [
+            { label: 'ORG level', value: 'org' },
+            { label: 'Custom', value: 'custom' },
+        ];
         /** Current labels use consistent indigo style */
         this.LABEL_CHIP_STYLE = {
             bg: '#6366F1',
@@ -41820,6 +41830,23 @@ class TestCaseDetailsEditComponent {
         const s = String(val).trim();
         return s.replace(/\s*s$/i, '');
     }
+    /** Value shown in the disabled (org) or enabled (custom) Test Case Timeout input. */
+    get testCaseTimeoutDisplayValue() {
+        if (this.testCaseTimeoutMode === 'org') {
+            return this.orgLevelTestCaseTimeout != null ? String(this.orgLevelTestCaseTimeout) : '';
+        }
+        return this.testCaseTimeout;
+    }
+    onTestCaseTimeoutModeChange(mode) {
+        this.testCaseTimeoutMode = mode;
+        this.cdr.markForCheck();
+    }
+    /** True when the portal wrapped the Test Case Timeout value as "Org Level (...)", meaning the TC API returned null. */
+    isTestCaseTimeoutFromOrg() {
+        const raw = this.getConfigItemValue('Wait and retries', 'Test Case Timeout (minutes)') ||
+            this.getConfigItemValue('Waits & Retries', 'Test Case Timeout (minutes)');
+        return raw.trim().toLowerCase().startsWith(ORG_LEVEL_SENTINEL.toLowerCase());
+    }
     /** Allow only digits; used for Retry Failed Steps, Test Case Timeout, Wait Timeout inputs */
     onlyDigits(val) {
         if (val == null || val === '')
@@ -41860,6 +41887,7 @@ class TestCaseDetailsEditComponent {
         const autoWaitVal = this.getWaitsRetriesValue('Enable Avoid Auto wait for steps') || this.getConfigItemValue('Waits & Retries', 'Auto Wait');
         this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '' && String(autoWaitVal) !== 'false');
         this.retryFailedSteps = this.getWaitsRetriesValue('Retry Failed Steps');
+        this.testCaseTimeoutMode = this.isTestCaseTimeoutFromOrg() ? 'org' : 'custom';
         this.testCaseTimeout = this.stripTrailingUnitS(this.getWaitsRetriesValue('Test Case Timeout (minutes)'));
         this.waitTimeoutLocators = this.stripTrailingUnitS(this.getWaitsRetriesValue('Wait Timeout for Locators (secs)'));
         this.mobileTestingEnabled = !!this.getConfigItemValue('Key Flags', 'Mobile Testing');
@@ -42093,6 +42121,7 @@ class TestCaseDetailsEditComponent {
             const autoWaitVal = this.getWaitsRetriesValue('Enable Avoid Auto wait for steps') || this.getConfigItemValue('Waits & Retries', 'Auto Wait');
             this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '' && String(autoWaitVal) !== 'false');
             this.retryFailedSteps = this.getWaitsRetriesValue('Retry Failed Steps');
+            this.testCaseTimeoutMode = this.isTestCaseTimeoutFromOrg() ? 'org' : 'custom';
             this.testCaseTimeout = this.stripTrailingUnitS(this.getWaitsRetriesValue('Test Case Timeout (minutes)'));
             this.waitTimeoutLocators = this.stripTrailingUnitS(this.getWaitsRetriesValue('Wait Timeout for Locators (secs)'));
             this.mobileTestingEnabled = !!this.getConfigItemValue('Key Flags', 'Mobile Testing');
@@ -42229,8 +42258,10 @@ class TestCaseDetailsEditComponent {
                         return { ...item, value: this.autoWaitEnabled };
                     if (item.label === 'Retry Failed Steps')
                         return { ...item, value: this.emptyNumToZero(this.retryFailedSteps) };
-                    if (item.label === 'Test Case Timeout (minutes)')
-                        return { ...item, value: this.emptyNumToZero(this.testCaseTimeout) };
+                    if (item.label === 'Test Case Timeout (minutes)') {
+                        const value = this.testCaseTimeoutMode === 'org' ? ORG_LEVEL_SENTINEL : this.emptyNumToZero(this.testCaseTimeout);
+                        return { ...item, value };
+                    }
                     if (item.label === 'Wait Timeout for Locators (secs)')
                         return { ...item, value: this.emptyNumToZero(this.waitTimeoutLocators) };
                     return item;
@@ -42314,10 +42345,10 @@ class TestCaseDetailsEditComponent {
     }
 }
 TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Test Case Timeout (minutes)\"\n              [value]=\"testCaseTimeout\"\n              (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n              placeholder=\"30\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultViewport')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultViewport')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Test Case Timeout (minutes)\"\n              [value]=\"testCaseTimeout\"\n              (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n              placeholder=\"30\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultViewport')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultViewport')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { descriptionTitle: [{
                 type: Input
             }], descriptionContent: [{
@@ -42374,6 +42405,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], apiMockingPercentText: [{
                 type: Input
+            }], orgLevelTestCaseTimeout: [{
+                type: Input
             }], save: [{
                 type: Output
             }], cancel: [{
@@ -42563,10 +42596,10 @@ class TestCaseDetailsComponent {
     }
 }
 TestCaseDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", isSaving: "isSaving", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", apiMockingConfigureButtonLabel: "apiMockingConfigureButtonLabel" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", configureApiMocking: "configureApiMocking", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [isSaving]=\"isSaving\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  [showApiMockingCard]=\"showApiMockingCard\"\n  [apiMockingTitle]=\"apiMockingTitle\"\n  [apiMockingStatusLabel]=\"apiMockingStatusLabel\"\n  [apiMockingCaptureLabel]=\"apiMockingCaptureLabel\"\n  [apiMockingCaptureHint]=\"apiMockingCaptureHint\"\n  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRenewHint]=\"apiMockingRenewHint\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\n  [apiMockingStoreMock]=\"apiMockingStoreMock\"\n  [apiMockingMockedApisCount]=\"apiMockingMockedApisCount\"\n  [apiMockingTotalApisCount]=\"apiMockingTotalApisCount\"\n  [apiMockingProgressPercent]=\"apiMockingProgressPercent\"\n  [apiMockingShowProgress]=\"apiMockingShowProgress\"\n  [apiMockingSummaryText]=\"apiMockingSummaryText\"\n  [apiMockingPercentText]=\"apiMockingPercentText\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\"\n  (apiMockingRestoreMockChange)=\"apiMockingRestoreMockChange.emit($event)\"\n  (apiMockingStoreMockChange)=\"apiMockingStoreMockChange.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-rounded !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[#6B7280] cqa-text-xs cqa-font-semibold cqa-cursor-pointer cqa-transition-all hover:cqa-text-[#374151] hover:!cqa-border-[#9CA3AF] hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px]\">edit</mat-icon>\n          <span>Edit</span>\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-1\">\n        <div\n          *ngIf=\"enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\"\n          [innerHTML]=\"descriptionContent\"></div>\n        <div\n          *ngIf=\"!enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\">{{ descriptionContent }}</div>\n        <button\n          *ngIf=\"showDescriptionReadMore\"\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-xs cqa-font-medium hover:cqa-underline cqa-cursor-pointer cqa-bg-transparent cqa-border-none cqa-p-0 cqa-self-start focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"toggleDescriptionExpand()\">\n          {{ descriptionExpanded ? 'Read less' : 'Read more' }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n      <!-- API Mocking Card (read-only) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"apiMockingRestoreMock\"\n        [storeMock]=\"apiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [configureButtonLabel]=\"apiMockingConfigureButtonLabel\"\n        [editing]=\"false\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "isSaving", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides", "showApiMockingCard", "apiMockingTitle", "apiMockingStatusLabel", "apiMockingCaptureLabel", "apiMockingCaptureHint", "apiMockingRenewLabel", "apiMockingRenewHint", "apiMockingRestoreMock", "apiMockingStoreMock", "apiMockingMockedApisCount", "apiMockingTotalApisCount", "apiMockingProgressPercent", "apiMockingShowProgress", "apiMockingSummaryText", "apiMockingPercentText"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded", "apiMockingRestoreMockChange", "apiMockingStoreMockChange"] }, { 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", "fullWidth", "centerContent", "title"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", isSaving: "isSaving", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", apiMockingConfigureButtonLabel: "apiMockingConfigureButtonLabel", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", configureApiMocking: "configureApiMocking", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [isSaving]=\"isSaving\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  [showApiMockingCard]=\"showApiMockingCard\"\n  [apiMockingTitle]=\"apiMockingTitle\"\n  [apiMockingStatusLabel]=\"apiMockingStatusLabel\"\n  [apiMockingCaptureLabel]=\"apiMockingCaptureLabel\"\n  [apiMockingCaptureHint]=\"apiMockingCaptureHint\"\n  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRenewHint]=\"apiMockingRenewHint\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\n  [apiMockingStoreMock]=\"apiMockingStoreMock\"\n  [apiMockingMockedApisCount]=\"apiMockingMockedApisCount\"\n  [apiMockingTotalApisCount]=\"apiMockingTotalApisCount\"\n  [apiMockingProgressPercent]=\"apiMockingProgressPercent\"\n  [apiMockingShowProgress]=\"apiMockingShowProgress\"\n  [apiMockingSummaryText]=\"apiMockingSummaryText\"\n  [apiMockingPercentText]=\"apiMockingPercentText\"\n  [orgLevelTestCaseTimeout]=\"orgLevelTestCaseTimeout\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\"\n  (apiMockingRestoreMockChange)=\"apiMockingRestoreMockChange.emit($event)\"\n  (apiMockingStoreMockChange)=\"apiMockingStoreMockChange.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-rounded !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[#6B7280] cqa-text-xs cqa-font-semibold cqa-cursor-pointer cqa-transition-all hover:cqa-text-[#374151] hover:!cqa-border-[#9CA3AF] hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px]\">edit</mat-icon>\n          <span>Edit</span>\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-1\">\n        <div\n          *ngIf=\"enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\"\n          [innerHTML]=\"descriptionContent\"></div>\n        <div\n          *ngIf=\"!enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\">{{ descriptionContent }}</div>\n        <button\n          *ngIf=\"showDescriptionReadMore\"\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-xs cqa-font-medium hover:cqa-underline cqa-cursor-pointer cqa-bg-transparent cqa-border-none cqa-p-0 cqa-self-start focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"toggleDescriptionExpand()\">\n          {{ descriptionExpanded ? 'Read less' : 'Read more' }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n      <!-- API Mocking Card (read-only) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"apiMockingRestoreMock\"\n        [storeMock]=\"apiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [configureButtonLabel]=\"apiMockingConfigureButtonLabel\"\n        [editing]=\"false\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "isSaving", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides", "showApiMockingCard", "apiMockingTitle", "apiMockingStatusLabel", "apiMockingCaptureLabel", "apiMockingCaptureHint", "apiMockingRenewLabel", "apiMockingRenewHint", "apiMockingRestoreMock", "apiMockingStoreMock", "apiMockingMockedApisCount", "apiMockingTotalApisCount", "apiMockingProgressPercent", "apiMockingShowProgress", "apiMockingSummaryText", "apiMockingPercentText", "orgLevelTestCaseTimeout"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded", "apiMockingRestoreMockChange", "apiMockingStoreMockChange"] }, { 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", "fullWidth", "centerContent", "title"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [isSaving]=\"isSaving\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  [showApiMockingCard]=\"showApiMockingCard\"\n  [apiMockingTitle]=\"apiMockingTitle\"\n  [apiMockingStatusLabel]=\"apiMockingStatusLabel\"\n  [apiMockingCaptureLabel]=\"apiMockingCaptureLabel\"\n  [apiMockingCaptureHint]=\"apiMockingCaptureHint\"\n  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRenewHint]=\"apiMockingRenewHint\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\n  [apiMockingStoreMock]=\"apiMockingStoreMock\"\n  [apiMockingMockedApisCount]=\"apiMockingMockedApisCount\"\n  [apiMockingTotalApisCount]=\"apiMockingTotalApisCount\"\n  [apiMockingProgressPercent]=\"apiMockingProgressPercent\"\n  [apiMockingShowProgress]=\"apiMockingShowProgress\"\n  [apiMockingSummaryText]=\"apiMockingSummaryText\"\n  [apiMockingPercentText]=\"apiMockingPercentText\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\"\n  (apiMockingRestoreMockChange)=\"apiMockingRestoreMockChange.emit($event)\"\n  (apiMockingStoreMockChange)=\"apiMockingStoreMockChange.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-rounded !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[#6B7280] cqa-text-xs cqa-font-semibold cqa-cursor-pointer cqa-transition-all hover:cqa-text-[#374151] hover:!cqa-border-[#9CA3AF] hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px]\">edit</mat-icon>\n          <span>Edit</span>\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-1\">\n        <div\n          *ngIf=\"enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\"\n          [innerHTML]=\"descriptionContent\"></div>\n        <div\n          *ngIf=\"!enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\">{{ descriptionContent }}</div>\n        <button\n          *ngIf=\"showDescriptionReadMore\"\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-xs cqa-font-medium hover:cqa-underline cqa-cursor-pointer cqa-bg-transparent cqa-border-none cqa-p-0 cqa-self-start focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"toggleDescriptionExpand()\">\n          {{ descriptionExpanded ? 'Read less' : 'Read more' }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n      <!-- API Mocking Card (read-only) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"apiMockingRestoreMock\"\n        [storeMock]=\"apiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [configureButtonLabel]=\"apiMockingConfigureButtonLabel\"\n        [editing]=\"false\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [isSaving]=\"isSaving\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  [showApiMockingCard]=\"showApiMockingCard\"\n  [apiMockingTitle]=\"apiMockingTitle\"\n  [apiMockingStatusLabel]=\"apiMockingStatusLabel\"\n  [apiMockingCaptureLabel]=\"apiMockingCaptureLabel\"\n  [apiMockingCaptureHint]=\"apiMockingCaptureHint\"\n  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRenewHint]=\"apiMockingRenewHint\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\n  [apiMockingStoreMock]=\"apiMockingStoreMock\"\n  [apiMockingMockedApisCount]=\"apiMockingMockedApisCount\"\n  [apiMockingTotalApisCount]=\"apiMockingTotalApisCount\"\n  [apiMockingProgressPercent]=\"apiMockingProgressPercent\"\n  [apiMockingShowProgress]=\"apiMockingShowProgress\"\n  [apiMockingSummaryText]=\"apiMockingSummaryText\"\n  [apiMockingPercentText]=\"apiMockingPercentText\"\n  [orgLevelTestCaseTimeout]=\"orgLevelTestCaseTimeout\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\"\n  (apiMockingRestoreMockChange)=\"apiMockingRestoreMockChange.emit($event)\"\n  (apiMockingStoreMockChange)=\"apiMockingStoreMockChange.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-rounded !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[#6B7280] cqa-text-xs cqa-font-semibold cqa-cursor-pointer cqa-transition-all hover:cqa-text-[#374151] hover:!cqa-border-[#9CA3AF] hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"!cqa-w-[14px] !cqa-h-[14px] !cqa-text-[14px]\">edit</mat-icon>\n          <span>Edit</span>\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-1\">\n        <div\n          *ngIf=\"enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\"\n          [innerHTML]=\"descriptionContent\"></div>\n        <div\n          *ngIf=\"!enableMarkdown\"\n          class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\"\n          [style]=\"(!descriptionExpanded && showDescriptionReadMore) ? 'display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;' : ''\">{{ descriptionContent }}</div>\n        <button\n          *ngIf=\"showDescriptionReadMore\"\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-xs cqa-font-medium hover:cqa-underline cqa-cursor-pointer cqa-bg-transparent cqa-border-none cqa-p-0 cqa-self-start focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"toggleDescriptionExpand()\">\n          {{ descriptionExpanded ? 'Read less' : 'Read more' }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-[10px] cqa-h-[10px] cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n      <!-- API Mocking Card (read-only) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"apiMockingRestoreMock\"\n        [storeMock]=\"apiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [configureButtonLabel]=\"apiMockingConfigureButtonLabel\"\n        [editing]=\"false\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
                 type: Input
             }], startInEditMode: [{
@@ -42629,6 +42662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], apiMockingConfigureButtonLabel: [{
                 type: Input
+            }], orgLevelTestCaseTimeout: [{
+                type: Input
             }], editDescription: [{
                 type: Output
             }], cancel: [{
@@ -45458,31 +45493,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /**
  * Confirmation dialog shown before editing an AI-Agent step whose execution has
- * already generated sub-steps (CON-926). The caller supplies the option list
- * and copy; this component only renders the UI and emits the user's choice.
+ * already generated sub-steps (CON-926). Also used by CON-1166 to review
+ * AI-generated steps before persisting.
+ *
+ * The caller supplies the whole payload via the `config` input (one object, one
+ * reference change = one re-render). `isOpen` stays separate so open/close
+ * transitions don't force callers to rebuild the payload.
  */
 class SubStepsConfirmationDialogComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.isOpen = false;
-        this.title = 'This step has generated sub-steps';
-        this.description = '';
-        this.options = [];
-        this.cancelLabel = 'Cancel';
-        this.disableBackdropClose = false;
+        this.config = { options: [] };
         this.selectionChange = new EventEmitter();
         this.confirm = new EventEmitter();
         this.closeModal = new EventEmitter();
+        this.timeoutExpired = new EventEmitter();
+        this.remainingSeconds = 0;
+        this._tickIntervalId = null;
+        this._timeoutEmitted = false;
     }
     ngOnChanges(changes) {
-        if (changes['options'] || changes['selectedValue'] || changes['isOpen']) {
-            const valid = this.options?.some(o => o.value === this.selectedValue);
-            if (!valid && this.options?.length) {
-                this.selectedValue = this.options[0].value;
+        if (changes['config'] || changes['isOpen']) {
+            const options = this.config?.options ?? [];
+            const incoming = this.config?.selectedValue;
+            const stillValid = options.some(o => o.value === this.selectedValue);
+            if (incoming != null && options.some(o => o.value === incoming)) {
+                this.selectedValue = incoming;
+            }
+            else if (!stillValid) {
+                this.selectedValue = options.length ? options[0].value : undefined;
+            }
+        }
+        if (changes['isOpen'] || changes['config']) {
+            const timeoutSeconds = this.config?.timeoutSeconds;
+            if (this.isOpen && typeof timeoutSeconds === 'number' && timeoutSeconds > 0) {
+                const prevTimeout = changes['config']
+                    ? changes['config'].previousValue?.timeoutSeconds
+                    : undefined;
+                const opening = !!changes['isOpen'] && this.isOpen;
+                if (opening || timeoutSeconds !== prevTimeout || this._tickIntervalId == null) {
+                    this._startCountdown(timeoutSeconds);
+                }
+            }
+            else {
+                this._stopCountdown();
             }
         }
     }
+    ngOnDestroy() {
+        this._stopCountdown();
+    }
+    get title() { return this.config?.title ?? 'This step has generated sub-steps'; }
+    get description() { return this.config?.description ?? ''; }
+    get subtitle() { return this.config?.subtitle; }
+    get options() { return this.config?.options ?? []; }
+    get cancelLabel() { return this.config?.cancelLabel ?? 'Cancel'; }
+    get disableBackdropClose() { return !!this.config?.disableBackdropClose; }
+    get hideCloseButton() { return !!this.config?.hideCloseButton; }
+    get hideCancel() { return !!this.config?.hideCancel; }
+    get warnings() { return this.config?.warnings ?? []; }
+    get previewItems() { return this.config?.previewItems ?? []; }
+    get previewOverflowCount() { return this.config?.previewOverflowCount ?? 0; }
     get currentOption() {
-        return this.options?.find(o => o.value === this.selectedValue);
+        return this.options.find(o => o.value === this.selectedValue);
+    }
+    get showCountdown() {
+        const t = this.config?.timeoutSeconds;
+        return typeof t === 'number' && t > 0;
+    }
+    get countdownLabel() {
+        const total = Math.max(0, this.remainingSeconds);
+        const m = Math.floor(total / 60);
+        const s = total % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
     }
     isSelected(option) {
         return option.value === this.selectedValue;
@@ -45494,7 +45578,7 @@ class SubStepsConfirmationDialogComponent {
         this.selectionChange.emit(option.value);
     }
     onRadioChange(event) {
-        const option = this.options?.find(o => o.value === event.value);
+        const option = this.options.find(o => o.value === event.value);
         if (option)
             this.onSelect(option);
     }
@@ -45515,25 +45599,37 @@ class SubStepsConfirmationDialogComponent {
             return;
         this.confirm.emit(this.selectedValue);
     }
+    _startCountdown(seconds) {
+        this._stopCountdown();
+        this.remainingSeconds = seconds;
+        this._timeoutEmitted = false;
+        this._tickIntervalId = setInterval(() => {
+            if (this.remainingSeconds > 0) {
+                this.remainingSeconds--;
+                this.cdr.markForCheck();
+                if (this.remainingSeconds === 0 && !this._timeoutEmitted) {
+                    this._timeoutEmitted = true;
+                    this.timeoutExpired.emit();
+                    this._stopCountdown();
+                }
+            }
+        }, 1000);
+    }
+    _stopCountdown() {
+        if (this._tickIntervalId) {
+            clearInterval(this._tickIntervalId);
+            this._tickIntervalId = null;
+        }
+    }
 }
-SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", title: "title", description: "description", options: "options", selectedValue: "selectedValue", cancelLabel: "cancelLabel", disableBackdropClose: "disableBackdropClose" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", config: "config" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal", timeoutExpired: "timeoutExpired" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n        <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <span *ngIf=\"subtitle\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n          {{ subtitle }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <span *ngIf=\"showCountdown\"\n          class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n          style=\"background: #F3F4F6;\"\n          [title]=\"'Auto-discards when timer reaches 0'\">\n          {{ countdownLabel }}\n        </span>\n        <button *ngIf=\"!hideCloseButton\" type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n          (click)=\"onClose()\"\n          aria-label=\"Close\">\n          <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <!-- Warnings (amber) -->\n      <div *ngIf=\"warnings?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n        style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n        <div *ngFor=\"let warn of warnings\"\n          class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n          <span aria-hidden=\"true\">\u26A0</span>\n          <span>{{ warn }}</span>\n        </div>\n      </div>\n\n      <!-- Preview list (optional) -->\n      <div *ngIf=\"previewItems?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n        <div *ngFor=\"let item of previewItems; let i = index\"\n          class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n          <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n          <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n          <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014&nbsp;&nbsp;{{ item.secondary }}</span>\n        </div>\n        <div *ngIf=\"previewOverflowCount > 0\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n          + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n        </div>\n      </div>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-sub-steps-confirmation-dialog', template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
-        }], propDecorators: { isOpen: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], cancelLabel: [{
+            args: [{ selector: 'cqa-sub-steps-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n        <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <span *ngIf=\"subtitle\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n          {{ subtitle }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <span *ngIf=\"showCountdown\"\n          class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n          style=\"background: #F3F4F6;\"\n          [title]=\"'Auto-discards when timer reaches 0'\">\n          {{ countdownLabel }}\n        </span>\n        <button *ngIf=\"!hideCloseButton\" type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n          (click)=\"onClose()\"\n          aria-label=\"Close\">\n          <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <!-- Warnings (amber) -->\n      <div *ngIf=\"warnings?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n        style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n        <div *ngFor=\"let warn of warnings\"\n          class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n          <span aria-hidden=\"true\">\u26A0</span>\n          <span>{{ warn }}</span>\n        </div>\n      </div>\n\n      <!-- Preview list (optional) -->\n      <div *ngIf=\"previewItems?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n        <div *ngFor=\"let item of previewItems; let i = index\"\n          class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n          <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n          <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n          <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014&nbsp;&nbsp;{{ item.secondary }}</span>\n        </div>\n        <div *ngIf=\"previewOverflowCount > 0\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n          + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n        </div>\n      </div>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
                 type: Input
-            }], disableBackdropClose: [{
+            }], config: [{
                 type: Input
             }], selectionChange: [{
                 type: Output
@@ -45541,6 +45637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], closeModal: [{
                 type: Output
+            }], timeoutExpired: [{
+                type: Output
             }] } });
 
 class UiKitModule {