@cqa-lib/cqa-ui 1.1.496 → 1.1.497

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

@@ -40811,6 +40811,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Dual-mode card summarising the API mocking configuration of a test case.
+ *
+ * The card surfaces **one boolean choice** — `restoreMock` — as two mutually-exclusive rows
+ * labelled "Capture API responses" and "Renew API responses":
+ *
+ *   restoreMock === true   →   Renew = ON,  Capture = OFF
+ *   restoreMock === false  →   Renew = OFF, Capture = ON
+ *
+ * In read-only mode both rows show a value text ("On"/"Off") derived from `restoreMock`.
+ * In edit mode both rows render a toggle; interacting with either one flips `restoreMock`
+ * and the card emits `restoreMockChange` so the parent can persist the new value.
+ */
+class ApiMockingCardComponent {
+    constructor() {
+        this.title = 'API Mocking';
+        this.statusLabel = 'Not configured';
+        this.captureLabel = 'Capture API responses';
+        this.renewLabel = 'Renew API responses';
+        /**
+         * Single source of truth for the card's dual-toggle state.
+         * Defaults to `false` → Capture is ON, Renew is OFF.
+         */
+        this.restoreMock = false;
+        this.mockedApisCount = 0;
+        this.totalApisCount = 0;
+        this.progressPercent = 0;
+        this.configureButtonLabel = 'Configure';
+        this.editing = false;
+        /**
+         * Controls whether the "Mocked X of Y / progress bar / percent" block is shown.
+         * Hidden when the test case has no captured mock summary yet (and always hidden in
+         * edit mode regardless of this flag).
+         */
+        this.showProgress = false;
+        this.configure = new EventEmitter();
+        /**
+         * Emitted whenever the effective `restoreMock` value changes (either row's toggle was
+         * interacted with in edit mode). Parent components should persist this value — e.g. under
+         * `testCase.mockApiSettings.restoreMock`.
+         */
+        this.restoreMockChange = new EventEmitter();
+    }
+    // Derived per-row state (template binds these directly so the two rows stay in lock-step).
+    get renewEnabled() { return this.restoreMock; }
+    get captureEnabled() { return !this.restoreMock; }
+    get renewValueText() { return this.restoreMock ? 'On' : 'Off'; }
+    get captureValueText() { return this.restoreMock ? 'Off' : 'On'; }
+    get computedSummaryText() {
+        if (this.summaryText)
+            return this.summaryText;
+        return `${this.mockedApisCount} of ${this.totalApisCount} APIs set to mock`;
+    }
+    get computedPercentText() {
+        if (this.percentText)
+            return this.percentText;
+        return `${this.progressPercent}% of calls will use mock responses`;
+    }
+    get progressWidth() {
+        const clamped = Math.max(0, Math.min(100, Number(this.progressPercent) || 0));
+        return `${clamped}%`;
+    }
+    onConfigureClick() {
+        this.configure.emit();
+    }
+    /**
+     * User interacted with the "Renew API responses" toggle in edit mode.
+     * Renew ON  → restoreMock = true  (Capture OFF).
+     * Renew OFF → restoreMock = false (Capture ON — mutual exclusivity).
+     */
+    onRenewToggle(value) {
+        this.setRestoreMock(value);
+    }
+    /**
+     * User interacted with the "Capture API responses" toggle in edit mode.
+     * Capture ON  → restoreMock = false (Renew OFF).
+     * Capture OFF → restoreMock = true  (Renew ON — mutual exclusivity).
+     */
+    onCaptureToggle(value) {
+        this.setRestoreMock(!value);
+    }
+    setRestoreMock(next) {
+        if (this.restoreMock === next)
+            return;
+        this.restoreMock = next;
+        this.restoreMockChange.emit(next);
+    }
+}
+ApiMockingCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiMockingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ApiMockingCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: { title: "title", statusLabel: "statusLabel", captureLabel: "captureLabel", renewLabel: "renewLabel", restoreMock: "restoreMock", mockedApisCount: "mockedApisCount", totalApisCount: "totalApisCount", progressPercent: "progressPercent", summaryText: "summaryText", percentText: "percentText", configureButtonLabel: "configureButtonLabel", editing: "editing", showProgress: "showProgress" }, outputs: { configure: "configure", restoreMockChange: "restoreMockChange" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-amc-card\">\n  <div class=\"cqa-amc-header\">\n    <span class=\"cqa-amc-title\">{{ title }}</span>\n    <span class=\"cqa-amc-status\" *ngIf=\"statusLabel\">{{ statusLabel }}</span>\n  </div>\n\n  <!-- Read-only rows -->\n  <ng-container *ngIf=\"!editing\">\n    <div class=\"cqa-amc-row\">\n      <span class=\"cqa-amc-label\">{{ captureLabel }}</span>\n      <span class=\"cqa-amc-value\">{{ captureValueText }}</span>\n    </div>\n    <div class=\"cqa-amc-row\">\n      <span class=\"cqa-amc-label\">{{ renewLabel }}</span>\n      <span class=\"cqa-amc-value\">{{ renewValueText }}</span>\n    </div>\n  </ng-container>\n\n  <!-- Edit rows: toggles -->\n  <ng-container *ngIf=\"editing\">\n    <div class=\"cqa-amc-row cqa-amc-row--edit\">\n      <span class=\"cqa-amc-label\">{{ captureLabel }}</span>\n      <cqa-custom-toggle\n        [checked]=\"captureEnabled\"\n        [ariaLabel]=\"captureLabel\"\n        (checkedChange)=\"onCaptureToggle($event)\">\n      </cqa-custom-toggle>\n    </div>\n    <div class=\"cqa-amc-row cqa-amc-row--edit\">\n      <span class=\"cqa-amc-label\">{{ renewLabel }}</span>\n      <cqa-custom-toggle\n        [checked]=\"renewEnabled\"\n        [ariaLabel]=\"renewLabel\"\n        (checkedChange)=\"onRenewToggle($event)\">\n      </cqa-custom-toggle>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"showProgress && !editing\">\n    <p class=\"cqa-amc-summary\">{{ computedSummaryText }}</p>\n    <div class=\"cqa-amc-progress-track\">\n      <div class=\"cqa-amc-progress-fill\" [style.width]=\"progressWidth\"></div>\n    </div>\n    <p class=\"cqa-amc-percent\">{{ computedPercentText }}</p>\n  </ng-container>\n\n  <button\n    *ngIf=\"!editing\"\n    type=\"button\"\n    class=\"cqa-amc-configure-btn\"\n    (click)=\"onConfigureClick()\">\n    {{ configureButtonLabel }}\n  </button>\n</div>\n", components: [{ type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiMockingCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-api-mocking-card', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-amc-card\">\n  <div class=\"cqa-amc-header\">\n    <span class=\"cqa-amc-title\">{{ title }}</span>\n    <span class=\"cqa-amc-status\" *ngIf=\"statusLabel\">{{ statusLabel }}</span>\n  </div>\n\n  <!-- Read-only rows -->\n  <ng-container *ngIf=\"!editing\">\n    <div class=\"cqa-amc-row\">\n      <span class=\"cqa-amc-label\">{{ captureLabel }}</span>\n      <span class=\"cqa-amc-value\">{{ captureValueText }}</span>\n    </div>\n    <div class=\"cqa-amc-row\">\n      <span class=\"cqa-amc-label\">{{ renewLabel }}</span>\n      <span class=\"cqa-amc-value\">{{ renewValueText }}</span>\n    </div>\n  </ng-container>\n\n  <!-- Edit rows: toggles -->\n  <ng-container *ngIf=\"editing\">\n    <div class=\"cqa-amc-row cqa-amc-row--edit\">\n      <span class=\"cqa-amc-label\">{{ captureLabel }}</span>\n      <cqa-custom-toggle\n        [checked]=\"captureEnabled\"\n        [ariaLabel]=\"captureLabel\"\n        (checkedChange)=\"onCaptureToggle($event)\">\n      </cqa-custom-toggle>\n    </div>\n    <div class=\"cqa-amc-row cqa-amc-row--edit\">\n      <span class=\"cqa-amc-label\">{{ renewLabel }}</span>\n      <cqa-custom-toggle\n        [checked]=\"renewEnabled\"\n        [ariaLabel]=\"renewLabel\"\n        (checkedChange)=\"onRenewToggle($event)\">\n      </cqa-custom-toggle>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"showProgress && !editing\">\n    <p class=\"cqa-amc-summary\">{{ computedSummaryText }}</p>\n    <div class=\"cqa-amc-progress-track\">\n      <div class=\"cqa-amc-progress-fill\" [style.width]=\"progressWidth\"></div>\n    </div>\n    <p class=\"cqa-amc-percent\">{{ computedPercentText }}</p>\n  </ng-container>\n\n  <button\n    *ngIf=\"!editing\"\n    type=\"button\"\n    class=\"cqa-amc-configure-btn\"\n    (click)=\"onConfigureClick()\">\n    {{ configureButtonLabel }}\n  </button>\n</div>\n", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], statusLabel: [{
+                type: Input
+            }], captureLabel: [{
+                type: Input
+            }], renewLabel: [{
+                type: Input
+            }], restoreMock: [{
+                type: Input
+            }], mockedApisCount: [{
+                type: Input
+            }], totalApisCount: [{
+                type: Input
+            }], progressPercent: [{
+                type: Input
+            }], summaryText: [{
+                type: Input
+            }], percentText: [{
+                type: Input
+            }], configureButtonLabel: [{
+                type: Input
+            }], editing: [{
+                type: Input
+            }], showProgress: [{
+                type: Input
+            }], configure: [{
+                type: Output
+            }], restoreMockChange: [{
+                type: Output
+            }] } });
+
 /** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
 const TEST_CASE_DETAILS_SELECT_KEYS = {
     status: 'status',
@@ -40869,6 +40994,24 @@ class TestCaseDetailsEditComponent {
          * - Initial fetch on open: initialFetchOnOpen: true
          */
         this.selectConfigOverrides = {};
+        // ── API Mocking card (edit mode: shows two toggles) ───────────────────────
+        this.showApiMockingCard = false;
+        this.apiMockingTitle = 'API Mocking';
+        this.apiMockingStatusLabel = 'Not configured';
+        this.apiMockingCaptureLabel = 'Capture API responses';
+        this.apiMockingRenewLabel = 'Renew API responses';
+        /**
+         * Single source of truth for the card's dual toggle state.
+         *   true  → Renew ON, Capture OFF
+         *   false → Renew OFF, Capture ON
+         */
+        this.apiMockingRestoreMock = false;
+        this.apiMockingMockedApisCount = 0;
+        this.apiMockingTotalApisCount = 0;
+        this.apiMockingProgressPercent = 0;
+        /** Forwarded to `cqa-api-mocking-card`. In edit mode the card hides the block anyway, but
+         *  we still pipe the input through for symmetry with the read-only component. */
+        this.apiMockingShowProgress = false;
         this.save = new EventEmitter();
         this.cancel = new EventEmitter();
         /** Emitted when user searches in a select (serverSearch mode). Call API and update options via selectConfigOverrides. */
@@ -40881,11 +41024,15 @@ class TestCaseDetailsEditComponent {
         this.selectionChange = new EventEmitter();
         /** Emitted when user adds a new custom label via the "New" option. */
         this.labelAdded = new EventEmitter();
+        /** Emitted when the user flips either API mocking toggle — emits new `restoreMock` value. */
+        this.apiMockingRestoreMockChange = new EventEmitter();
         /** Form state */
         this.editDescription = '';
         this.editStatus = '';
         this.editPriority = '';
         this.editLabels = [];
+        /** Local edit-mode mirror of the `restoreMock` boolean. Seeded from @Input() on init/changes. */
+        this.editApiMockingRestoreMock = false;
         this.testCaseTimeout = '';
         this.waitTimeoutLocators = '';
         this.autoWaitEnabled = false;
@@ -41325,6 +41472,7 @@ class TestCaseDetailsEditComponent {
         const deviceType = this.getConfigItemValue('Device', 'Type');
         const deviceOS = this.getConfigItemValue('Device', 'OS');
         this._labelsSelectConfigDirty = true;
+        this.editApiMockingRestoreMock = !!this.apiMockingRestoreMock;
         this.editForm.patchValue({
             status: this.editStatus,
             priority: this.editPriority,
@@ -41370,8 +41518,19 @@ class TestCaseDetailsEditComponent {
             testDataSetIndex: testDataSetVal ?? null,
             configSections: configSectionsMerged,
             configSectionsRow2: configSectionsRow2Merged,
+            apiMockingRestoreMock: this.editApiMockingRestoreMock,
         };
     }
+    /**
+     * Handler bound to the embedded `<cqa-api-mocking-card>` `restoreMockChange` output.
+     * Keeps the local edit-mode mirror in sync and re-emits to the parent component so the
+     * save payload (and hasUnsavedChanges snapshot) reflects the new state.
+     */
+    onApiMockingRestoreMockChange(value) {
+        this.editApiMockingRestoreMock = value;
+        this.apiMockingRestoreMockChange.emit(value);
+        this.cdr.markForCheck();
+    }
     resolveToOptionValue(configValue, options) {
         if (configValue == null || configValue === '')
             return configValue;
@@ -41729,10 +41888,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" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, 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  <!-- 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    </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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRestoreMock: "apiMockingRestoreMock", 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" }, 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        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\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      </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", "renewLabel", "restoreMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress"], outputs: ["configure", "restoreMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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  <!-- 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    </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            <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        [renewLabel]=\"apiMockingRenewLabel\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\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      </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: [{
@@ -41759,6 +41918,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], selectConfigOverrides: [{
                 type: Input
+            }], showApiMockingCard: [{
+                type: Input
+            }], apiMockingTitle: [{
+                type: Input
+            }], apiMockingStatusLabel: [{
+                type: Input
+            }], apiMockingCaptureLabel: [{
+                type: Input
+            }], apiMockingRenewLabel: [{
+                type: Input
+            }], apiMockingRestoreMock: [{
+                type: Input
+            }], apiMockingMockedApisCount: [{
+                type: Input
+            }], apiMockingTotalApisCount: [{
+                type: Input
+            }], apiMockingProgressPercent: [{
+                type: Input
+            }], apiMockingShowProgress: [{
+                type: Input
+            }], apiMockingSummaryText: [{
+                type: Input
+            }], apiMockingPercentText: [{
+                type: Input
             }], save: [{
                 type: Output
             }], cancel: [{
@@ -41773,6 +41956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], labelAdded: [{
                 type: Output
+            }], apiMockingRestoreMockChange: [{
+                type: Output
             }] } });
 
 class TestCaseDetailsComponent {
@@ -41808,6 +41993,26 @@ class TestCaseDetailsComponent {
         this.selectConfigOverrides = {};
         /** True while parent is saving changes. */
         this.isSaving = false;
+        // ── API Mocking card ───────────────────────────────────────────────────────
+        /** When true, render the API Mocking card below the configuration section. */
+        this.showApiMockingCard = false;
+        this.apiMockingTitle = 'API Mocking';
+        this.apiMockingStatusLabel = 'Not configured';
+        this.apiMockingCaptureLabel = 'Capture API responses';
+        this.apiMockingRenewLabel = 'Renew API responses';
+        /**
+         * Single source of truth for the API mocking card's dual toggle state.
+         *   true  → Renew API responses ON,  Capture API responses OFF
+         *   false → Renew API responses OFF, Capture API responses ON
+         * The two legacy `*CaptureEnabled` / `*RenewEnabled` inputs are no longer used.
+         */
+        this.apiMockingRestoreMock = false;
+        this.apiMockingMockedApisCount = 0;
+        this.apiMockingTotalApisCount = 0;
+        this.apiMockingProgressPercent = 0;
+        /** Forwarded to `cqa-api-mocking-card` — gates the "Mocked / progress / percent" block. */
+        this.apiMockingShowProgress = false;
+        this.apiMockingConfigureButtonLabel = 'Configure';
         /** Labels to filter out from metadata for step groups */
         this.stepGroupExcludedMetadataLabels = ['priority', 'type'];
         /** When true, description (view mode) is expanded; when false, clamped to 4 lines with Read more */
@@ -41823,6 +42028,9 @@ class TestCaseDetailsComponent {
         this.selectOpened = new EventEmitter();
         this.selectionChange = new EventEmitter();
         this.labelAdded = new EventEmitter();
+        this.configureApiMocking = new EventEmitter();
+        /** Fired when the user flips either toggle — emits the new `restoreMock` value. */
+        this.apiMockingRestoreMockChange = new EventEmitter();
     }
     /** Resolved editing state: parent-controlled or internal */
     get isEditing() {
@@ -41915,10 +42123,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" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, 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  (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</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    </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"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { 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"] }], 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", apiMockingRestoreMock: "apiMockingRestoreMock", 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" }, 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  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\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</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        [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", "apiMockingRenewLabel", "apiMockingRestoreMock", "apiMockingMockedApisCount", "apiMockingTotalApisCount", "apiMockingProgressPercent", "apiMockingShowProgress", "apiMockingSummaryText", "apiMockingPercentText"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded", "apiMockingRestoreMockChange"] }, { 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", "renewLabel", "restoreMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress"], outputs: ["configure", "restoreMockChange"] }], 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  (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</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    </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  [apiMockingRenewLabel]=\"apiMockingRenewLabel\"\n  [apiMockingRestoreMock]=\"apiMockingRestoreMock\"\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</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        [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: [{
@@ -41949,6 +42157,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isSaving: [{
                 type: Input
+            }], showApiMockingCard: [{
+                type: Input
+            }], apiMockingTitle: [{
+                type: Input
+            }], apiMockingStatusLabel: [{
+                type: Input
+            }], apiMockingCaptureLabel: [{
+                type: Input
+            }], apiMockingRenewLabel: [{
+                type: Input
+            }], apiMockingRestoreMock: [{
+                type: Input
+            }], apiMockingMockedApisCount: [{
+                type: Input
+            }], apiMockingTotalApisCount: [{
+                type: Input
+            }], apiMockingProgressPercent: [{
+                type: Input
+            }], apiMockingShowProgress: [{
+                type: Input
+            }], apiMockingSummaryText: [{
+                type: Input
+            }], apiMockingPercentText: [{
+                type: Input
+            }], apiMockingConfigureButtonLabel: [{
+                type: Input
             }], editDescription: [{
                 type: Output
             }], cancel: [{
@@ -41967,6 +42201,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], labelAdded: [{
                 type: Output
+            }], configureApiMocking: [{
+                type: Output
+            }], apiMockingRestoreMockChange: [{
+                type: Output
             }] } });
 
 class StepBuilderGroupComponent {
@@ -44997,6 +45235,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DetailDrawerTabContentDirective,
         TestCaseDetailsComponent,
         TestCaseDetailsEditComponent,
+        ApiMockingCardComponent,
         StepBuilderGroupComponent,
         StepDetailsDrawerComponent,
         TemplateVariablesFormComponent,
@@ -45168,6 +45407,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DetailDrawerTabContentDirective,
         TestCaseDetailsComponent,
         TestCaseDetailsEditComponent,
+        ApiMockingCardComponent,
         StepBuilderGroupComponent,
         StepDetailsDrawerComponent,
         TemplateVariablesFormComponent,
@@ -45386,6 +45626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DetailDrawerTabContentDirective,
                         TestCaseDetailsComponent,
                         TestCaseDetailsEditComponent,
+                        ApiMockingCardComponent,
                         StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                         TemplateVariablesFormComponent,
@@ -45563,6 +45804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DetailDrawerTabContentDirective,
                         TestCaseDetailsComponent,
                         TestCaseDetailsEditComponent,
+                        ApiMockingCardComponent,
                         StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                         TemplateVariablesFormComponent,
@@ -46345,5 +46587,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map