@cqa-lib/cqa-ui 1.1.204 → 1.1.205

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, Optional, Injector, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, Optional, Injector, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -25799,6 +25799,1128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
+const TEST_CASE_DETAILS_SELECT_KEYS = {
+    status: 'status',
+    priority: 'priority',
+    prerequisiteCases: 'prerequisiteCases',
+    videoRecording: 'videoRecording',
+    enableAiSmartness: 'enableAiSmartness',
+    defaultAiAction: 'defaultAiAction',
+    knowledgeBaseDefaultTestCase: 'knowledgeBaseDefaultTestCase',
+    useAiMetadata: 'useAiMetadata',
+    defaultBrowser: 'defaultBrowser',
+    defaultViewport: 'defaultViewport',
+    deviceType: 'deviceType',
+    deviceOS: 'deviceOS',
+};
+const FREQUENTLY_USED_LABELS = [
+    'Case',
+    'Critical',
+    'PO',
+    'Upload',
+    'Validation',
+    'Review',
+    'Edge-cases',
+    'Security',
+    'Integration',
+    'Smoke',
+];
+class TestCaseDetailsEditComponent {
+    constructor() {
+        this.descriptionTitle = 'Description';
+        this.descriptionContent = '';
+        this.metadataItems = [];
+        this.labels = [];
+        this.configTitle = 'Configuration';
+        this.configSections = [];
+        this.configSectionsRow2 = [];
+        /** Optional list of prerequisite test case options for the multi-select. If not provided, uses default sample options. */
+        this.prerequisiteCaseOptions = [];
+        /** Platform: 'web' shows Default Browser + Viewport; 'mobile' shows Device Type + OS. Defaults to 'web'. */
+        this.platform = 'web';
+        /**
+         * Override config per select key. Use for:
+         * - API-driven options: pass options array (update when API returns)
+         * - Server-side search: serverSearch: true, onSearch in override or listen to selectSearch
+         * - Infinite scroll: hasMore: true, onLoadMore in override or listen to selectLoadMore
+         * - Initial fetch on open: initialFetchOnOpen: true
+         */
+        this.selectConfigOverrides = {};
+        this.save = new EventEmitter();
+        this.cancel = new EventEmitter();
+        /** Emitted when user searches in a select (serverSearch mode). Call API and update options via selectConfigOverrides. */
+        this.selectSearch = new EventEmitter();
+        /** Emitted when user scrolls to load more. Call API, append to options via selectConfigOverrides. */
+        this.selectLoadMore = new EventEmitter();
+        /** Emitted when a select panel is opened. Use to call API for initial load (e.g. when initialFetchOnOpen). */
+        this.selectOpened = new EventEmitter();
+        /** Emitted when selection changes in any select. */
+        this.selectionChange = new EventEmitter();
+        /** Form state */
+        this.editDescription = '';
+        this.editStatus = '';
+        this.editPriority = '';
+        this.editLabels = [];
+        this.labelSearch = '';
+        this.testCaseTimeout = '';
+        this.waitTimeoutLocators = '';
+        this.autoWaitEnabled = false;
+        this.retryFailedSteps = '';
+        this.configExpanded = true;
+        this.executionExpanded = true;
+        this.aiConfigExpanded = true;
+        this.waitsRetriesExpanded = true;
+        this.deviceExpanded = true;
+        this.keyFlagsExpanded = true;
+        this.mobileTestingEnabled = false;
+        this.extensionUseEnabled = false;
+        this.dataDrivenEnabled = false;
+        this.frequentlyUsedLabels = FREQUENTLY_USED_LABELS;
+        /** FormGroup for cqa-dynamic-select bindings */
+        this.editForm = new FormGroup({
+            status: new FormControl(''),
+            priority: new FormControl(''),
+            prerequisiteCases: new FormControl([]),
+            defaultBrowser: new FormControl(''),
+            videoRecording: new FormControl(''),
+            defaultViewport: new FormControl(''),
+            deviceType: new FormControl(''),
+            deviceOS: new FormControl(''),
+            enableAiSmartness: new FormControl(''),
+            defaultAiAction: new FormControl(''),
+            knowledgeBaseDefaultTestCase: new FormControl(''),
+            useAiMetadata: new FormControl(''),
+        });
+        /** Cached configs to avoid new object refs each change detection (prevents infinite loops) */
+        this.statusSelectConfig = {
+            key: 'status',
+            label: '',
+            placeholder: 'Status',
+            searchable: false,
+            options: [
+                { value: 'Draft', name: 'Draft' },
+                { value: 'In Review', name: 'In Review' },
+                { value: 'Approved', name: 'Approved' },
+                { value: 'Active', name: 'Active' },
+                { value: 'Inactive', name: 'Inactive' },
+                { value: 'Blocked', name: 'Blocked' },
+            ],
+        };
+        this.defaultPrerequisiteCaseOptions = [
+            { value: 'TC-001', name: 'TC-001: Login flow' },
+            { value: 'TC-002', name: 'TC-002: User registration' },
+            { value: 'TC-003', name: 'TC-003: Password reset' },
+            { value: 'TC-004', name: 'TC-004: Dashboard load' },
+            { value: 'TC-005', name: 'TC-005: API health check' },
+        ];
+        this.videoRecordingSelectConfig = {
+            key: 'videoRecording',
+            label: 'Record test execution video',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: 'true', name: 'True' },
+                { value: 'false', name: 'False' },
+                { value: 'Org level', name: 'Org level' },
+            ],
+        };
+        this.aiMetadataCollectionSelectConfig = {
+            key: 'useAiMetadata',
+            label: 'Enable AI metadata collection',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: 'true', name: 'True' },
+                { value: 'false', name: 'False' },
+                { value: 'Org level', name: 'Org level' },
+            ],
+        };
+        this.prerequisiteCaseSelectConfig = {
+            key: 'prerequisiteCases',
+            label: 'Prerequisite Case',
+            placeholder: 'Select',
+            searchable: true,
+            multiple: true,
+            optionStyle: 'checkbox',
+            showSelectAll: true,
+            selectAllLabel: 'All',
+            options: [
+                { value: 'TC-001', name: 'TC-001: Login flow' },
+                { value: 'TC-002', name: 'TC-002: User registration' },
+                { value: 'TC-003', name: 'TC-003: Password reset' },
+                { value: 'TC-004', name: 'TC-004: Dashboard load' },
+                { value: 'TC-005', name: 'TC-005: API health check' },
+            ],
+        };
+        this.defaultViewportSelectConfig = {
+            key: 'defaultViewport',
+            label: 'Default Viewport',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: '1920x1080', name: '1920x1080' },
+                { value: '1366x768', name: '1366x768' },
+                { value: '1536x864', name: '1536x864' },
+                { value: '1280x720', name: '1280x720' },
+                { value: '1440x900', name: '1440x900' },
+                { value: '2560x1440', name: '2560x1440' },
+            ],
+        };
+        this.deviceTypeSelectConfig = {
+            key: 'deviceType',
+            label: 'Device Type',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: 'iPhone 14', name: 'iPhone 14' },
+                { value: 'iPhone 15', name: 'iPhone 15' },
+                { value: 'iPhone 17', name: 'iPhone 17' },
+                { value: 'Iphone 17', name: 'Iphone 17' },
+                { value: 'Samsung Galaxy', name: 'Samsung Galaxy' },
+                { value: 'Pixel', name: 'Pixel' },
+            ],
+        };
+        this.deviceOSSelectConfig = {
+            key: 'deviceOS',
+            label: 'OS',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: 'ipa', name: 'iOS (ipa)' },
+                { value: 'apk', name: 'Android (apk)' },
+                { value: 'iOS 16', name: 'iOS 16' },
+                { value: 'iOS 17', name: 'iOS 17' },
+                { value: 'Android 13', name: 'Android 13' },
+                { value: 'Android 14', name: 'Android 14' },
+            ],
+        };
+        this.defaultBrowserSelectConfig = {
+            key: 'defaultBrowser',
+            label: 'Default Browser',
+            placeholder: 'Chrome',
+            searchable: false,
+            options: [
+                { value: 'Chrome', name: 'Chrome' },
+                { value: 'Firefox', name: 'Firefox' },
+                { value: 'Safari', name: 'Safari' },
+                { value: 'Edge', name: 'Edge' },
+            ],
+        };
+        this.prioritySelectConfig = {
+            key: 'priority',
+            label: '',
+            placeholder: 'Priority',
+            searchable: false,
+            options: [
+                { value: 'Critical', name: 'Critical' },
+                { value: 'Major', name: 'Major' },
+                { value: 'High', name: 'High' },
+                { value: 'Medium', name: 'Medium' },
+                { value: 'Low', name: 'Low' },
+                { value: 'Minor', name: 'Minor' },
+                { value: 'Not set', name: 'Not set' },
+            ],
+        };
+        this.enableAiSmartnessSelectConfig = {
+            key: 'enableAiSmartness',
+            label: 'Enable AI Smartness',
+            placeholder: 'Advanced',
+            searchable: false,
+            options: [
+                { value: 'Basic', name: 'Basic' },
+                { value: 'Advanced', name: 'Advanced' },
+                { value: 'Off', name: 'Off' },
+            ],
+        };
+        this.defaultAiActionSelectConfig = {
+            key: 'defaultAiAction',
+            label: 'Default AI Action',
+            placeholder: 'Smart wait',
+            searchable: false,
+            options: [
+                { value: 'Smart wait', name: 'Smart wait' },
+                { value: 'Smart Wait', name: 'Smart Wait' },
+                { value: 'Wait for element', name: 'Wait for element' },
+                { value: 'Retry', name: 'Retry' },
+                { value: 'Skip', name: 'Skip' },
+            ],
+        };
+        this.knowledgeBaseDefaultTestCaseSelectConfig = {
+            key: 'knowledgeBaseDefaultTestCase',
+            label: 'Knowledge Base Default Test Case',
+            placeholder: 'Select',
+            searchable: false,
+            options: [
+                { value: 'Enabled', name: 'Enabled' },
+                { value: 'Disabled', name: 'Disabled' },
+            ],
+        };
+        /** Current labels use consistent indigo style */
+        this.LABEL_CHIP_STYLE = {
+            bg: '#6366F1',
+            border: '#6366F1',
+            text: '#FFFFFF',
+            icon: '#FFFFFF',
+        };
+    }
+    get statusItem() {
+        return this.metadataItems.find((m) => m.label === 'Status');
+    }
+    get priorityItem() {
+        return this.metadataItems.find((m) => m.label === 'Priority');
+    }
+    get statusOptions() {
+        return ['Draft', 'In Review', 'Approved', 'Active', 'Inactive', 'Blocked'];
+    }
+    get priorityOptions() {
+        return ['Critical', 'Major', 'High', 'Medium', 'Low', 'Minor', 'Not set'];
+    }
+    /**
+     * Returns merged config for a select: base config + override.
+     * Wires onSearch, onLoadMore to both override callbacks and output events.
+     */
+    getConfigForSelect(key, baseConfig) {
+        const override = this.selectConfigOverrides?.[key];
+        if (!override)
+            return baseConfig;
+        const merged = {
+            ...baseConfig,
+            ...override,
+            options: override.options ?? baseConfig.options,
+            key: baseConfig.key,
+        };
+        if (override.serverSearch || override.onSearch) {
+            merged.onSearch = (query) => {
+                override.onSearch?.(query);
+                this.selectSearch.emit({ key, query });
+            };
+        }
+        if (override.hasMore || override.onLoadMore) {
+            merged.onLoadMore = (query) => {
+                const q = query ?? '';
+                override.onLoadMore?.(q);
+                this.selectLoadMore.emit({ key, query: q });
+            };
+        }
+        return merged;
+    }
+    onSelectOpened(key) {
+        this.selectOpened.emit({ key });
+    }
+    onSelectSearch(event) {
+        this.selectSearch.emit(event);
+        const override = this.selectConfigOverrides?.[event.key];
+        override?.onSearch?.(event.query);
+    }
+    onSelectLoadMore(event) {
+        this.selectLoadMore.emit(event);
+        const override = this.selectConfigOverrides?.[event.key];
+        override?.onLoadMore?.(event.query);
+    }
+    onSelectionChange(event) {
+        this.selectionChange.emit({ key: event.key, value: event.value });
+    }
+    getConfigItemValue(sectionTitle, itemLabel) {
+        const section = [...this.configSections, ...this.configSectionsRow2].find((s) => s.title === sectionTitle);
+        const item = section?.items?.find((i) => i.label === itemLabel);
+        return item?.value ?? '';
+    }
+    getPrerequisiteCasesFromConfig() {
+        const val = this.getConfigItemValue('Execution', 'Prerequisite Case');
+        if (!val)
+            return [];
+        return val.includes(',') ? val.split(',').map((s) => s.trim()).filter(Boolean) : [val];
+    }
+    ngOnInit() {
+        this.editDescription = this.descriptionContent;
+        this.editStatus = this.statusItem?.value ?? '';
+        this.editPriority = this.priorityItem?.value ?? '';
+        this.editLabels = [...this.labels];
+        const autoWaitVal = this.getConfigItemValue('Waits & Retries', 'Auto Wait');
+        this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '');
+        this.mobileTestingEnabled = !!this.getConfigItemValue('Key Flags', 'Mobile Testing');
+        this.extensionUseEnabled = !!this.getConfigItemValue('Key Flags', 'Extension Use');
+        this.dataDrivenEnabled = !!this.getConfigItemValue('Key Flags', 'Data Driven');
+        const enableAiSmartness = this.getConfigItemValue('AI Configuration', 'Enable AI Smartness');
+        const defaultAiAction = this.getConfigItemValue('AI Configuration', 'Default AI Action');
+        const knowledgeBaseDefaultTestCase = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
+        const useAiMetadataRaw = this.getConfigItemValue('AI Configuration', 'Enable AI metadata collection');
+        const useAiMetadata = this.normalizeBooleanSelectValue(useAiMetadataRaw);
+        const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
+        const defaultBrowser = this.platform === 'web'
+            ? this.getConfigItemValue('Device', 'Default Browser') || this.getConfigItemValue('Execution', 'Default Browser')
+            : this.getConfigItemValue('Execution', 'Default Browser');
+        const videoRecordingRaw = this.getConfigItemValue('Execution', 'Video Recording');
+        const videoRecording = this.normalizeBooleanSelectValue(videoRecordingRaw);
+        const defaultViewport = this.getConfigItemValue('Device', 'Default Viewport') || this.getConfigItemValue('Device', 'Viewport') || '';
+        const deviceType = this.getConfigItemValue('Device', 'Type');
+        const deviceOS = this.getConfigItemValue('Device', 'OS');
+        this.editForm.patchValue({
+            status: this.editStatus,
+            priority: this.editPriority,
+            prerequisiteCases,
+            defaultBrowser: defaultBrowser || 'Chrome',
+            videoRecording: videoRecording || '',
+            defaultViewport: defaultViewport || '',
+            deviceType: deviceType || '',
+            deviceOS: deviceOS || '',
+            enableAiSmartness: enableAiSmartness || 'Advanced',
+            defaultAiAction: defaultAiAction || 'Smart wait',
+            knowledgeBaseDefaultTestCase: knowledgeBaseDefaultTestCase || 'Enabled',
+            useAiMetadata: useAiMetadata || '',
+        });
+    }
+    normalizeBooleanSelectValue(val) {
+        if (val === true || val === 'true')
+            return 'true';
+        if (val === false || val === 'false')
+            return 'false';
+        if (val === 'Org level' || val === 'Org Level')
+            return 'Org level';
+        if (val === 'On Wait' || val === 'on wait')
+            return 'true';
+        return val && String(val).trim() ? String(val) : '';
+    }
+    ngOnChanges(changes) {
+        if (changes['descriptionContent'] || changes['labels'] || changes['metadataItems']) {
+            this.editDescription = this.descriptionContent;
+            this.editLabels = [...this.labels];
+            this.editStatus = this.statusItem?.value ?? '';
+            this.editPriority = this.priorityItem?.value ?? '';
+            this.editForm.patchValue({
+                status: this.editStatus,
+                priority: this.editPriority,
+            });
+        }
+        if (changes['prerequisiteCaseOptions'] && this.prerequisiteCaseOptions.length) {
+            this.prerequisiteCaseSelectConfig = {
+                ...this.prerequisiteCaseSelectConfig,
+                options: this.prerequisiteCaseOptions,
+            };
+        }
+        if (changes['configSections'] || changes['configSectionsRow2']) {
+            const enableAiSmartness = this.getConfigItemValue('AI Configuration', 'Enable AI Smartness');
+            const defaultAiAction = this.getConfigItemValue('AI Configuration', 'Default AI Action');
+            const knowledgeBaseDefaultTestCase = this.getConfigItemValue('AI Configuration', 'Knowledge Base Default Test Case');
+            const prerequisiteCases = this.getPrerequisiteCasesFromConfig();
+            const defaultBrowser = this.getConfigItemValue('Execution', 'Default Browser');
+            const videoRecordingRaw = this.getConfigItemValue('Execution', 'Video Recording');
+            const videoRecording = this.normalizeBooleanSelectValue(videoRecordingRaw);
+            const useAiMetadataRaw = this.getConfigItemValue('AI Configuration', 'Enable AI metadata collection');
+            const useAiMetadata = this.normalizeBooleanSelectValue(useAiMetadataRaw);
+            const defaultViewport = this.getConfigItemValue('Device', 'Default Viewport') || this.getConfigItemValue('Device', 'Viewport') || '';
+            const deviceType = this.getConfigItemValue('Device', 'Type');
+            const deviceOS = this.getConfigItemValue('Device', 'OS');
+            const autoWaitVal = this.getConfigItemValue('Waits & Retries', 'Auto Wait');
+            this.autoWaitEnabled = !!(autoWaitVal && autoWaitVal.trim() !== '');
+            this.mobileTestingEnabled = !!this.getConfigItemValue('Key Flags', 'Mobile Testing');
+            this.extensionUseEnabled = !!this.getConfigItemValue('Key Flags', 'Extension Use');
+            this.dataDrivenEnabled = !!this.getConfigItemValue('Key Flags', 'Data Driven');
+            const patch = {};
+            if (enableAiSmartness)
+                patch.enableAiSmartness = enableAiSmartness;
+            if (defaultAiAction)
+                patch.defaultAiAction = defaultAiAction;
+            if (knowledgeBaseDefaultTestCase)
+                patch.knowledgeBaseDefaultTestCase = knowledgeBaseDefaultTestCase;
+            if (useAiMetadata)
+                patch.useAiMetadata = useAiMetadata;
+            if (prerequisiteCases.length)
+                patch.prerequisiteCases = prerequisiteCases;
+            if (defaultBrowser)
+                patch.defaultBrowser = defaultBrowser;
+            if (videoRecording)
+                patch.videoRecording = videoRecording;
+            if (defaultViewport)
+                patch.defaultViewport = defaultViewport;
+            if (deviceType)
+                patch.deviceType = deviceType;
+            if (deviceOS)
+                patch.deviceOS = deviceOS;
+            if (Object.keys(patch).length)
+                this.editForm.patchValue(patch);
+        }
+    }
+    onRemoveLabel(label) {
+        this.editLabels = this.editLabels.filter((l) => l !== label);
+    }
+    onClearAllLabels() {
+        this.editLabels = [];
+    }
+    onAddFrequentLabel(label) {
+        if (!this.editLabels.includes(label)) {
+            this.editLabels = [...this.editLabels, label];
+        }
+    }
+    onAddSearchedLabel() {
+        const trimmed = this.labelSearch.trim();
+        if (trimmed && !this.editLabels.includes(trimmed)) {
+            this.editLabels = [...this.editLabels, trimmed];
+            this.labelSearch = '';
+        }
+    }
+    onSave() {
+        const status = this.editForm.get('status')?.value ?? this.editStatus;
+        const priority = this.editForm.get('priority')?.value ?? this.editPriority;
+        const configSectionsMerged = this.mergeConfigSections();
+        const configSectionsRow2Merged = this.mergeConfigSectionsRow2();
+        this.save.emit({
+            descriptionContent: this.editDescription,
+            status,
+            priority,
+            labels: this.editLabels,
+            configSections: configSectionsMerged,
+            configSectionsRow2: configSectionsRow2Merged,
+        });
+    }
+    mergeConfigSections() {
+        const platform = this.platform;
+        const videoRecordingValue = this.editForm.get('videoRecording')?.value ?? '';
+        const videoRecording = videoRecordingValue === 'true' ? true : videoRecordingValue === 'false' ? false : videoRecordingValue;
+        const useAiMetadataValue = this.editForm.get('useAiMetadata')?.value ?? '';
+        const useAiMetadata = useAiMetadataValue === 'true' ? true : useAiMetadataValue === 'false' ? false : useAiMetadataValue;
+        return this.configSections.map((section) => {
+            if (section.title === 'Execution') {
+                const items = section.items
+                    .filter((item) => !(platform === 'web' && item.label === 'Default Browser'))
+                    .map((item) => item.label === 'Video Recording' ? { ...item, value: videoRecording } : item);
+                return { ...section, items };
+            }
+            if (section.title === 'AI Configuration') {
+                const items = section.items.map((item) => item.label === 'Enable AI metadata collection' ? { ...item, value: useAiMetadata } : item);
+                return { ...section, items };
+            }
+            return section;
+        });
+    }
+    mergeConfigSectionsRow2() {
+        const platform = this.platform;
+        const defaultBrowser = this.editForm.get('defaultBrowser')?.value ?? '';
+        const defaultViewport = this.editForm.get('defaultViewport')?.value ?? '';
+        const deviceType = this.editForm.get('deviceType')?.value ?? '';
+        const deviceOS = this.editForm.get('deviceOS')?.value ?? '';
+        let result = this.configSectionsRow2.map((section) => {
+            if (section.title === 'Waits & Retries') {
+                const autoWaitValue = this.autoWaitEnabled ? 'Enabled' : '';
+                const items = section.items.map((item) => item.label === 'Auto Wait' ? { ...item, value: autoWaitValue } : item);
+                return { ...section, items };
+            }
+            if (section.title === 'Device') {
+                const items = [
+                    ...(platform === 'web'
+                        ? [
+                            { label: 'Default Browser', value: defaultBrowser },
+                            { label: 'Default Viewport', value: defaultViewport },
+                        ]
+                        : [
+                            { label: 'Type', value: deviceType },
+                            { label: 'OS', value: deviceOS },
+                        ]),
+                ];
+                return { ...section, items };
+            }
+            return section;
+        });
+        const existingDevice = result.find((s) => s.title === 'Device');
+        if (!existingDevice) {
+            const deviceSection = {
+                title: 'Device',
+                icon: 'devices',
+                items: [
+                    ...(platform === 'web'
+                        ? [
+                            { label: 'Default Browser', value: defaultBrowser },
+                            { label: 'Default Viewport', value: defaultViewport },
+                        ]
+                        : [
+                            { label: 'Type', value: deviceType },
+                            { label: 'OS', value: deviceOS },
+                        ]),
+                ],
+            };
+            result = [...result, deviceSection];
+        }
+        const keyFlagsSection = {
+            title: 'Key Flags',
+            icon: 'flag',
+            items: [
+                { label: 'Mobile Testing', value: this.mobileTestingEnabled ? 'Enabled' : '' },
+                { label: 'Extension Use', value: this.extensionUseEnabled ? 'Enabled' : '' },
+                { label: 'Data Driven', value: this.dataDrivenEnabled ? 'Enabled' : '' },
+            ],
+        };
+        const existingKeyFlags = result.find((s) => s.title === 'Key Flags');
+        if (existingKeyFlags) {
+            result = result.map((s) => s.title === 'Key Flags' ? keyFlagsSection : s);
+        }
+        else {
+            result = [...result, keyFlagsSection];
+        }
+        return result;
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    trackByLabel(_i, label) {
+        return label;
+    }
+    trackByConfigTitle(_i, section) {
+        return section.title;
+    }
+    getCurrentLabelChipStyle(_label) {
+        const colors = this.LABEL_CHIP_STYLE;
+        return {
+            'background-color': colors.bg,
+            'border-color': colors.border,
+            'border-width': '1px',
+            'border-style': 'solid',
+            color: colors.text,
+        };
+    }
+    getLabelCloseIconColor(_label) {
+        return this.LABEL_CHIP_STYLE.icon;
+    }
+}
+TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [], 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", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", selectConfigOverrides: "selectConfigOverrides" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\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      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 (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 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>\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    <cqa-search-bar\n      [value]=\"labelSearch\"\n      (valueChange)=\"labelSearch = $event\"\n      (search)=\"onAddSearchedLabel()\"\n      placeholder=\"Search labels to add ......\"\n      [fullWidth]=\"true\">\n    </cqa-search-bar>\n  </div>\n\n  <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\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-[16px] cqa-py-0 cqa-px-3\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n        <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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 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            <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-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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-bg-white cqa-rounded-lg cqa-border 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 cqa-bg-[#fbfcff]\">\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                label=\"Retry Failed Steps\"\n                [value]=\"retryFailedSteps\"\n                (valueChange)=\"retryFailedSteps = $event\"\n                placeholder=\".\"\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                label=\"Test Case Timeout (minutes)\"\n                [value]=\"testCaseTimeout\"\n                (valueChange)=\"testCaseTimeout = $event\"\n                placeholder=\"25\"\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                label=\"Wait Timeout for Locators (secs)\"\n                [value]=\"waitTimeoutLocators\"\n                (valueChange)=\"waitTimeoutLocators = $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>\n        </div>\n        <!-- Device Settings -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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            <ng-container *ngIf=\"platform === 'web'\">\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            </ng-container>\n            <ng-container *ngIf=\"platform === 'mobile'\">\n              <div class=\"cqa-min-w-0 cqa-w-full\">\n                <cqa-dynamic-select\n                  [form]=\"editForm\"\n                  [config]=\"getConfigForSelect('deviceType', deviceTypeSelectConfig)\"\n                  (searchChange)=\"onSelectSearch($event)\"\n                  (loadMore)=\"onSelectLoadMore($event)\"\n                  (selectClick)=\"onSelectOpened('deviceType')\"\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('deviceOS', deviceOSSelectConfig)\"\n                  (searchChange)=\"onSelectSearch($event)\"\n                  (loadMore)=\"onSelectLoadMore($event)\"\n                  (selectClick)=\"onSelectOpened('deviceOS')\"\n                  (selectionChange)=\"onSelectionChange($event)\"\n                  class=\"cqa-w-full\"></cqa-dynamic-select>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n        <!-- Key Flags -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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 cqa-bg-[#fbfcff]\">\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 cqa-bg-[#fbfcff]\">\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 cqa-bg-[#fbfcff]\">\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  </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        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\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", "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"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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 });
+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-py-4 cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg\">\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      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 (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 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>\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    <cqa-search-bar\n      [value]=\"labelSearch\"\n      (valueChange)=\"labelSearch = $event\"\n      (search)=\"onAddSearchedLabel()\"\n      placeholder=\"Search labels to add ......\"\n      [fullWidth]=\"true\">\n    </cqa-search-bar>\n  </div>\n\n  <!-- Configuration (Figma: collapsible, gear icon, light purple inputs) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-[12px]\">\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-[16px] cqa-py-0 cqa-px-3\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-px-3 cqa-text-xs\">\n        <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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 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            <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-py-0 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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-bg-white cqa-rounded-lg cqa-border 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 cqa-bg-[#fbfcff]\">\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                label=\"Retry Failed Steps\"\n                [value]=\"retryFailedSteps\"\n                (valueChange)=\"retryFailedSteps = $event\"\n                placeholder=\".\"\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                label=\"Test Case Timeout (minutes)\"\n                [value]=\"testCaseTimeout\"\n                (valueChange)=\"testCaseTimeout = $event\"\n                placeholder=\"25\"\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                label=\"Wait Timeout for Locators (secs)\"\n                [value]=\"waitTimeoutLocators\"\n                (valueChange)=\"waitTimeoutLocators = $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>\n        </div>\n        <!-- Device Settings -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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            <ng-container *ngIf=\"platform === 'web'\">\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            </ng-container>\n            <ng-container *ngIf=\"platform === 'mobile'\">\n              <div class=\"cqa-min-w-0 cqa-w-full\">\n                <cqa-dynamic-select\n                  [form]=\"editForm\"\n                  [config]=\"getConfigForSelect('deviceType', deviceTypeSelectConfig)\"\n                  (searchChange)=\"onSelectSearch($event)\"\n                  (loadMore)=\"onSelectLoadMore($event)\"\n                  (selectClick)=\"onSelectOpened('deviceType')\"\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('deviceOS', deviceOSSelectConfig)\"\n                  (searchChange)=\"onSelectSearch($event)\"\n                  (loadMore)=\"onSelectLoadMore($event)\"\n                  (selectClick)=\"onSelectOpened('deviceOS')\"\n                  (selectionChange)=\"onSelectionChange($event)\"\n                  class=\"cqa-w-full\"></cqa-dynamic-select>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n        <!-- Key Flags -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-bg-white cqa-rounded-lg cqa-border 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 cqa-bg-[#fbfcff]\">\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 cqa-bg-[#fbfcff]\">\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 cqa-bg-[#fbfcff]\">\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  </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        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { descriptionTitle: [{
+                type: Input
+            }], descriptionContent: [{
+                type: Input
+            }], metadataItems: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], configTitle: [{
+                type: Input
+            }], configSections: [{
+                type: Input
+            }], configSectionsRow2: [{
+                type: Input
+            }], prerequisiteCaseOptions: [{
+                type: Input
+            }], platform: [{
+                type: Input
+            }], selectConfigOverrides: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], selectSearch: [{
+                type: Output
+            }], selectLoadMore: [{
+                type: Output
+            }], selectOpened: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class TestCaseDetailsComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        /** Whether the component is in edit mode */
+        this.editing = false;
+        /** When true, start in edit mode (useful for Storybook). */
+        this.startInEditMode = false;
+        /** Description section title */
+        this.descriptionTitle = 'Description';
+        /** Description text content */
+        this.descriptionContent = '';
+        /** Whether to show the Edit button in the Description header */
+        this.showEditButton = false;
+        /** Metadata items (createdOn, status, priority, environment, version, testPlanName, etc.) */
+        this.metadataItems = [];
+        /** Labels/tags (e.g. Automation, API, SDK, UI/UX) */
+        this.labels = [];
+        /** Configuration section title */
+        this.configTitle = 'Configuration';
+        /** Configuration sections (e.g. Execution, AI Configuration) */
+        this.configSections = [];
+        /** Optional config sections displayed in a 2-column row (e.g. Waits & Retries, Device) */
+        this.configSectionsRow2 = [];
+        /** Platform: 'web' or 'mobile'. Defaults to 'web'. Used for Device Settings fields. */
+        this.platform = 'web';
+        /** Override config per select for API-driven options, server search, load more. */
+        this.selectConfigOverrides = {};
+        this.editDescription = new EventEmitter();
+        this.saveChanges = new EventEmitter();
+        this.metadataLinkClick = new EventEmitter();
+        this.selectSearch = new EventEmitter();
+        this.selectLoadMore = new EventEmitter();
+        this.selectOpened = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.startInEditMode) {
+            this.editing = true;
+        }
+    }
+    onEditClick() {
+        this.editing = true;
+        this.cdr.detectChanges();
+        this.editDescription.emit();
+    }
+    onSaveChanges(data) {
+        this.editing = false;
+        this.cdr.detectChanges();
+        this.saveChanges.emit(data);
+    }
+    onCancelEdit() {
+        this.editing = false;
+        this.cdr.detectChanges();
+    }
+    trackByConfigTitle(_i, section) {
+        return section.title;
+    }
+    trackByMetadataLabel(_i, item) {
+        return item.label;
+    }
+    onMetadataLinkClick(item) {
+        if (item.link) {
+            this.metadataLinkClick.emit(item);
+        }
+    }
+    getStatusDotClass(item) {
+        if (!item.statusColor)
+            return '';
+        switch (item.statusColor) {
+            case 'yellow':
+                return 'cqa-bg-[#EAB308]';
+            case 'red':
+                return 'cqa-bg-[#DC2626]';
+            case 'green':
+                return 'cqa-bg-[#16A34A]';
+            case 'gray':
+            default:
+                return 'cqa-bg-[#94A3B8]';
+        }
+    }
+    /** Text color for metadata value (e.g. red for critical priority) */
+    getValueTextClass(item) {
+        if (item.statusColor === 'red') {
+            return 'cqa-text-[#DC2626]';
+        }
+        return 'cqa-text-[#111827]';
+    }
+}
+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: { startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"editing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\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</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!editing\" 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-overflow-hidden 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-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors 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-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"metadataItems.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-3 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of metadataItems; 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 class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-2.5 cqa-min-w-0 cqa-w-full\">\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-3.5 cqa-h-3.5 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\" [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", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange"] }, { 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"] }, { 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 });
+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=\"editing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\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</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!editing\" 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-overflow-hidden 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-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors 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-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"metadataItems.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-3 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of metadataItems; 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 class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-2.5 cqa-min-w-0 cqa-w-full\">\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-3.5 cqa-h-3.5 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\" [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: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { startInEditMode: [{
+                type: Input
+            }], descriptionTitle: [{
+                type: Input
+            }], descriptionContent: [{
+                type: Input
+            }], showEditButton: [{
+                type: Input
+            }], metadataItems: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], configTitle: [{
+                type: Input
+            }], configSections: [{
+                type: Input
+            }], configSectionsRow2: [{
+                type: Input
+            }], platform: [{
+                type: Input
+            }], selectConfigOverrides: [{
+                type: Input
+            }], editDescription: [{
+                type: Output
+            }], saveChanges: [{
+                type: Output
+            }], metadataLinkClick: [{
+                type: Output
+            }], selectSearch: [{
+                type: Output
+            }], selectLoadMore: [{
+                type: Output
+            }], selectOpened: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class DetailSidePanelComponent {
+    constructor() {
+        /** Tabs - each tab has a side panel icon button; tabs and buttons are 1:1 */
+        this.tabs = [
+            { label: 'Test Case', value: 'test-case', icon: 'description' },
+            { label: 'Data Library', value: 'data-library', icon: 'folder' },
+            { label: 'Variables', value: 'variables', icon: 'code' },
+        ];
+        /** Currently active tab value */
+        this.activeTab = 'test-case';
+        /** Description section title */
+        this.descriptionTitle = 'Description';
+        /** Description text content */
+        this.descriptionContent = '';
+        /** Whether to show the Edit button in the Description header */
+        this.showEditButton = true;
+        /** Metadata items (Created on, Status, Priority, etc.) */
+        this.metadataItems = [];
+        /** Labels/tags (e.g. Automation, API, SDK, UI/UX) */
+        this.labels = [];
+        /** Configuration sections - full width (e.g. Execution, AI Configuration) */
+        this.configSections = [];
+        /** Optional config sections displayed in a 2-column row (e.g. Waits & Retries, Device) */
+        this.configSectionsRow2 = [];
+        /** Platform: 'web' or 'mobile'. Defaults to 'web'. Used for Device Settings. */
+        this.platform = 'web';
+        /** Configuration section title */
+        this.configTitle = 'Configuration';
+        /** Whether to show the close button in the side menu */
+        this.showCloseButton = false;
+        /** When true, test case details start in edit mode (useful for Storybook). */
+        this.startInEditMode = false;
+        /** Override config per select for API-driven options, server search, load more. */
+        this.selectConfigOverrides = {};
+        /** Whether the panel is expanded (affects expand button icon and panel width) */
+        this.expanded = true;
+        /** Panel width when expanded (e.g. '480px', '25%') */
+        this.expandedWidth = '380px';
+        /** Panel width when collapsed (e.g. '56px' - fits icon bar + back button) */
+        this.collapsedWidth = '56px';
+        this.hostOverflow = 'hidden';
+        /** Tooltip for expand button when panel is collapsed */
+        this.expandTooltip = 'Expand';
+        /** Tooltip for expand button when panel is expanded (collapse) */
+        this.collapseTooltip = 'Collapse';
+        /** Tooltip for close button */
+        this.closeTooltip = 'Close';
+        this.back = new EventEmitter();
+        this.tabChange = new EventEmitter();
+        this.editDescription = new EventEmitter();
+        this.saveChanges = new EventEmitter();
+        this.metadataLinkClick = new EventEmitter();
+        this.selectSearch = new EventEmitter();
+        this.selectLoadMore = new EventEmitter();
+        this.selectOpened = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.expandToggle = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    get hostWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMinWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMaxWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    trackByTabValue(_i, tab) {
+        return tab.value;
+    }
+    trackByMetadataLabel(_i, item) {
+        return item.label;
+    }
+    trackByConfigTitle(_i, section) {
+        return section.title;
+    }
+    onBack() {
+        this.back.emit();
+    }
+    onTabClick(tab) {
+        if (!this.expanded) {
+            this.expandToggle.emit();
+        }
+        if (tab.value !== this.activeTab) {
+            this.tabChange.emit(tab.value);
+        }
+    }
+    onEditDescription() {
+        this.editDescription.emit();
+    }
+    onSaveChanges(data) {
+        this.saveChanges.emit(data);
+    }
+    onExpandToggle() {
+        this.expandToggle.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onMetadataLinkClick(item) {
+        if (item.link) {
+            this.metadataLinkClick.emit(item);
+        }
+    }
+    getStatusDotClass(item) {
+        if (!item.statusColor)
+            return '';
+        switch (item.statusColor) {
+            case 'yellow':
+                return 'cqa-bg-[#EAB308]';
+            case 'red':
+                return 'cqa-bg-[#DC2626]';
+            case 'green':
+                return 'cqa-bg-[#16A34A]';
+            case 'gray':
+            default:
+                return 'cqa-bg-[#94A3B8]';
+        }
+    }
+}
+DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden cqa-w-full\">\n      <div class=\"cqa-h-full cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n      <cqa-test-case-details\n        *ngIf=\"activeTab === 'test-case'\"\n        [descriptionTitle]=\"descriptionTitle\"\n        [descriptionContent]=\"descriptionContent\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["startInEditMode", "descriptionTitle", "descriptionContent", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "selectConfigOverrides"], outputs: ["editDescription", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-detail-side-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
+                        style: 'transition: width 0.3s ease-in-out',
+                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden cqa-w-full\">\n      <div class=\"cqa-h-full cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n      <cqa-test-case-details\n        *ngIf=\"activeTab === 'test-case'\"\n        [descriptionTitle]=\"descriptionTitle\"\n        [descriptionContent]=\"descriptionContent\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], descriptionTitle: [{
+                type: Input
+            }], descriptionContent: [{
+                type: Input
+            }], showEditButton: [{
+                type: Input
+            }], metadataItems: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], configSections: [{
+                type: Input
+            }], configSectionsRow2: [{
+                type: Input
+            }], platform: [{
+                type: Input
+            }], configTitle: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], startInEditMode: [{
+                type: Input
+            }], selectConfigOverrides: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedWidth: [{
+                type: Input
+            }], collapsedWidth: [{
+                type: Input
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostMinWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], hostOverflow: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }], expandTooltip: [{
+                type: Input
+            }], collapseTooltip: [{
+                type: Input
+            }], closeTooltip: [{
+                type: Input
+            }], back: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }], editDescription: [{
+                type: Output
+            }], saveChanges: [{
+                type: Output
+            }], metadataLinkClick: [{
+                type: Output
+            }], selectSearch: [{
+                type: Output
+            }], selectLoadMore: [{
+                type: Output
+            }], selectOpened: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], expandToggle: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class DetailDrawerTabContentDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+DetailDrawerTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DetailDrawerTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabContentDirective, selector: "[cqaTabContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cqaTabContent]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class DetailDrawerTabComponent {
+    constructor() {
+        /** Tab label (shown in tooltip on icon button) */
+        this.label = '';
+        /** Tab value (unique identifier) */
+        this.value = '';
+        /** Material icon name for the tab button */
+        this.icon = 'folder';
+    }
+    get contentTemplate() {
+        return this.contentDirective?.templateRef ?? null;
+    }
+}
+DetailDrawerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailDrawerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabComponent, selector: "cqa-detail-drawer-tab", inputs: { label: "label", value: "value", icon: "icon" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "contentDirective", first: true, predicate: DetailDrawerTabContentDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cqa-detail-drawer-tab',
+                    template: '',
+                    host: {
+                        style: 'display: contents',
+                    },
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], contentDirective: [{
+                type: ContentChild,
+                args: [DetailDrawerTabContentDirective]
+            }] } });
+
+class DetailDrawerComponent {
+    constructor() {
+        /** Currently active tab value */
+        this.activeTab = '';
+        /** Whether to show the close button */
+        this.showCloseButton = true;
+        /** Whether the drawer is expanded */
+        this.expanded = true;
+        /** Panel width when expanded */
+        this.expandedWidth = '280px';
+        /** Maximum width when expanded (e.g. '600px', '30vw'). Default: 30% of viewport */
+        this.maxExpandedWidth = '30vw';
+        /** Panel width when collapsed */
+        this.collapsedWidth = '56px';
+        this.expandTooltip = 'Expand';
+        this.collapseTooltip = 'Collapse';
+        this.closeTooltip = 'Close';
+        this.activeTabChange = new EventEmitter();
+        this.expandToggle = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    get hostWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMinWidth() {
+        return this.expanded && this.minExpandedWidth ? this.minExpandedWidth : null;
+    }
+    get hostMaxWidth() {
+        return this.expanded ? this.maxExpandedWidth : null;
+    }
+    ngAfterContentInit() {
+        this.ensureActiveTab();
+    }
+    ngAfterContentChecked() {
+        this.ensureActiveTab();
+    }
+    ensureActiveTab() {
+        const tabs = this.tabComponents?.toArray() ?? [];
+        if (tabs.length > 0 && !this.activeTab) {
+            this.activeTab = tabs[0].value;
+            this.activeTabChange.emit(this.activeTab);
+        }
+    }
+    onTabClick(tab) {
+        // If drawer is collapsed, open it (but never close on tab click)
+        if (!this.expanded) {
+            this.expandToggle.emit();
+        }
+        // Select the tab
+        if (tab.value !== this.activeTab) {
+            this.activeTab = tab.value;
+            this.activeTabChange.emit(this.activeTab);
+        }
+    }
+    onExpandToggle() {
+        this.expandToggle.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    trackByValue(_i, tab) {
+        return tab.value;
+    }
+    isTabActive(tab) {
+        return tab.value === this.activeTab;
+    }
+}
+DetailDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerComponent, selector: "cqa-detail-drawer", inputs: { activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", minExpandedWidth: "minExpandedWidth", maxExpandedWidth: "maxExpandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { activeTabChange: "activeTabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, queries: [{ propertyName: "tabComponents", predicate: DetailDrawerTabComponent }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4 cqa-min-w-[280px]\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-detail-drawer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
+                        style: 'transition: width 0.3s ease-in-out',
+                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4 cqa-min-w-[280px]\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { tabComponents: [{
+                type: ContentChildren,
+                args: [DetailDrawerTabComponent]
+            }], activeTab: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedWidth: [{
+                type: Input
+            }], minExpandedWidth: [{
+                type: Input
+            }], maxExpandedWidth: [{
+                type: Input
+            }], collapsedWidth: [{
+                type: Input
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostMinWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], expandTooltip: [{
+                type: Input
+            }], collapseTooltip: [{
+                type: Input
+            }], closeTooltip: [{
+                type: Input
+            }], activeTabChange: [{
+                type: Output
+            }], expandToggle: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
 class StepBuilderGroupComponent {
     constructor(fb) {
         this.fb = fb;
@@ -26347,6 +27469,12 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderDocumentGenerationTemplateStepComponent,
         ElementListComponent,
         StepBuilderDocumentComponent,
+        DetailSidePanelComponent,
+        DetailDrawerComponent,
+        DetailDrawerTabComponent,
+        DetailDrawerTabContentDirective,
+        TestCaseDetailsComponent,
+        TestCaseDetailsEditComponent,
         StepBuilderGroupComponent,
         StepDetailsDrawerComponent,
         TemplateVariablesFormComponent], imports: [CommonModule,
@@ -26478,6 +27606,12 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderDocumentGenerationTemplateStepComponent,
         ElementListComponent,
         StepBuilderDocumentComponent,
+        DetailSidePanelComponent,
+        DetailDrawerComponent,
+        DetailDrawerTabComponent,
+        DetailDrawerTabContentDirective,
+        TestCaseDetailsComponent,
+        TestCaseDetailsEditComponent,
         StepBuilderGroupComponent,
         StepDetailsDrawerComponent,
         TemplateVariablesFormComponent] });
@@ -26658,6 +27792,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderDocumentGenerationTemplateStepComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
+                        DetailSidePanelComponent,
+                        DetailDrawerComponent,
+                        DetailDrawerTabComponent,
+                        DetailDrawerTabContentDirective,
+                        TestCaseDetailsComponent,
+                        TestCaseDetailsEditComponent,
                         StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                         TemplateVariablesFormComponent,
@@ -26795,6 +27935,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderDocumentGenerationTemplateStepComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
+                        DetailSidePanelComponent,
+                        DetailDrawerComponent,
+                        DetailDrawerTabComponent,
+                        DetailDrawerTabContentDirective,
+                        TestCaseDetailsComponent,
+                        TestCaseDetailsEditComponent,
                         StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                         TemplateVariablesFormComponent,
@@ -27281,9 +28427,176 @@ function getDynamicFieldsFromLegacyConfig(step) {
     return result;
 }
 
+/** Default status value -> dot color. Override via BuildTestCaseDetailsOptions. */
+const DEFAULT_STATUS_COLOR_CONFIG = {
+    active: 'green',
+    inactive: 'gray',
+    pending: 'yellow',
+    completed: 'green',
+    'in review': 'yellow',
+    draft: 'gray',
+    approved: 'green',
+    rejected: 'red',
+    blocked: 'red',
+    'in progress': 'yellow',
+    done: 'green',
+};
+/** Default priority value -> dot color. Override via BuildTestCaseDetailsOptions. */
+const DEFAULT_PRIORITY_COLOR_CONFIG = {
+    critical: 'red',
+    major: 'red',
+    high: 'red',
+    medium: 'yellow',
+    low: 'green',
+    minor: 'green',
+    'not set': 'gray',
+    p0: 'red',
+    p1: 'yellow',
+    p2: 'green',
+    p3: 'gray',
+};
+/**
+ * API field names for mapping test case data to cqa-test-case-details.
+ * Use these when building metadataItems and configSections from your API response.
+ */
+const TEST_CASE_DETAILS_FIELD_MAP = {
+    /** Metadata (description section) */
+    metadata: {
+        createdOn: 'createdOn',
+        status: 'status',
+        priority: 'priority',
+        environment: 'environment',
+        version: 'version',
+        platform: 'platform',
+        labels: 'labels',
+    },
+    /** Execution config */
+    execution: {
+        prerequisiteCase: 'prerequisiteCase',
+        defaultBrowser: 'defaultBrowser',
+        videoRecording: 'videoRecording',
+        testCaseTimeout: 'testCaseTimeout',
+        waitTimeoutForLocators: 'waitTimeoutForLocators',
+        webBrowser: 'webBrowser',
+        viewport: 'viewport',
+    },
+    /** AI Configuration */
+    aiConfig: {
+        enableAiSmartness: 'enableAiSmartness',
+        defaultAiAction: 'defaultAiAction',
+        knowledgeBaseDefaultTestCase: 'knowledgeBaseDefaultTestCase',
+        useAiMetadata: 'useAiMetadata',
+    },
+    /** Waits & Retries */
+    waitsRetries: {
+        autoWait: 'autoWait',
+        retryFailedSteps: 'retryFailedSteps',
+    },
+    /** Device */
+    device: {
+        platform: 'platform',
+        deviceType: 'deviceType',
+        deviceOS: 'deviceOS',
+        defaultBrowser: 'defaultBrowser',
+        defaultViewport: 'defaultViewport',
+        viewport: 'viewport',
+    },
+};
+/**
+ * Build metadataItems and configSections from API data for cqa-test-case-details.
+ * Use in ts-portal when mapping test case API response to component inputs.
+ */
+function buildTestCaseDetailsFromApi(data, options) {
+    const formatDate = (v) => v ? (typeof v === 'string' ? v : v.toISOString?.() ?? String(v)) : '';
+    const statusConfig = { ...DEFAULT_STATUS_COLOR_CONFIG, ...options?.statusColorConfig };
+    const priorityConfig = { ...DEFAULT_PRIORITY_COLOR_CONFIG, ...options?.priorityColorConfig };
+    const resolveColor = (value, config) => config[value.toLowerCase().trim()] ?? 'gray';
+    const metadataItems = [];
+    if (data.createdOn != null)
+        metadataItems.push({ label: 'Created on', value: formatDate(data.createdOn), icon: 'calendar_today' });
+    if (data.status != null)
+        metadataItems.push({ label: 'Status', value: data.status, statusColor: resolveColor(data.status, statusConfig) });
+    if (data.priority != null)
+        metadataItems.push({ label: 'Priority', value: data.priority, statusColor: resolveColor(data.priority, priorityConfig) });
+    if (data.environment != null)
+        metadataItems.push({ label: 'Environment', value: data.environment, icon: 'storage' });
+    if (data.version != null)
+        metadataItems.push({ label: 'Version', value: data.version, icon: 'label' });
+    if (data.platform != null)
+        metadataItems.push({
+            label: 'Platform',
+            value: data.platform === 'web' ? 'web' : 'iOS',
+            icon: 'devices',
+        });
+    const configSections = [
+        {
+            title: 'Execution',
+            icon: 'play_circle',
+            items: [
+                { label: 'Prerequisite Case', value: data.prerequisiteCase ?? null },
+                { label: 'Video Recording', value: data.videoRecording ?? '' },
+            ],
+        },
+        {
+            title: 'AI Configuration',
+            icon: 'smart_toy',
+            items: [
+                { label: 'Enable AI Smartness', value: data.enableAiSmartness ?? '' },
+                { label: 'Default AI Action', value: data.defaultAiAction ?? '' },
+                { label: 'Knowledge Base Default Test Case', value: data.knowledgeBaseDefaultTestCase ?? null },
+                { label: 'Enable AI metadata collection', value: data.useAiMetadata ?? '' },
+            ],
+        },
+    ];
+    const configSectionsRow2 = [
+        {
+            title: 'Wait and retries',
+            icon: 'timer',
+            items: [
+                { label: 'Enable Avoid Auto wait for steps', value: data.autoWaitEnabled ?? false },
+                { label: 'Retry Failed Steps', value: data.retryFailedSteps ?? '' },
+                { label: 'Test Case Timeout (minutes)', value: data.testCaseTimeout ?? '' },
+                { label: 'Wait Timeout for Locators (secs)', value: data.waitTimeoutForLocators ?? '' },
+            ],
+        },
+        {
+            title: 'Device Setting',
+            icon: 'devices',
+            items: (() => {
+                const platform = data.platform ?? 'web';
+                if (platform === 'web') {
+                    return [
+                        { label: 'Default Browser', value: data.defaultBrowser ?? data.webBrowser ?? '' },
+                        { label: 'Default Viewport', value: data.defaultViewport ?? data.viewport ?? '' },
+                    ];
+                }
+                return [
+                    { label: 'Default OS', value: data.deviceOS ?? '' },
+                    { label: 'Default Phone', value: data.deviceType ?? '' },
+                ];
+            })(),
+        },
+        {
+            title: 'Key Flags',
+            icon: 'flag',
+            items: [
+                { label: 'Mobile Testing', value: data.mobileTesting ?? '' },
+                { label: 'Extension Use', value: data.extensionUse ?? '' },
+                { label: 'Data Driven', value: data.dataDriven ?? '' },
+            ],
+        },
+    ];
+    return {
+        metadataItems,
+        labels: data.labels ?? [],
+        configSections,
+        configSectionsRow2,
+    };
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, 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, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, 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, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, 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, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, 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, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, 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, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, 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