@cqa-lib/cqa-ui 1.1.264 → 1.1.265

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

@@ -33504,6 +33504,278 @@ const DETAIL_SIDE_PANEL_SCROLL_STYLES = `
 }
 `;
 
+class DetailSidePanelComponent {
+    constructor() {
+        /** Tabs - each tab has a side panel icon button; tabs and buttons are 1:1. Host defines tabs and content. */
+        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';
+        /** Whether to show the close button in the side menu */
+        this.showCloseButton = false;
+        /** 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.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;
+    }
+    onBack() {
+        this.back.emit();
+    }
+    onTabClick(tab) {
+        if (!this.expanded) {
+            this.expandToggle.emit();
+        }
+        if (tab.value !== this.activeTab) {
+            this.tabChange.emit(tab.value);
+        }
+    }
+    onExpandToggle() {
+        this.expandToggle.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+}
+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", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", 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\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\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-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\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      <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n      <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.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', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], 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\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\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-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\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      <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n      <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], showCloseButton: [{
+                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
+            }], 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\">\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: i5.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\">\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
+            }] } });
+
 /** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
 const TEST_CASE_DETAILS_SELECT_KEYS = {
     status: 'status',
@@ -34424,234 +34696,43 @@ class TestCaseDetailsComponent {
         return this.editing !== undefined ? this.editing : this._editing;
     }
     ngOnInit() {
-        if (this.startInEditMode) {
-            this._editing = true;
-        }
-    }
-    /** Filtered metadata items - excludes Priority and Type for step groups */
-    get filteredMetadataItems() {
-        if (!this.isStepGroup) {
-            return this.metadataItems;
-        }
-        return this.metadataItems.filter((item) => !this.stepGroupExcludedMetadataLabels.includes(item.label?.toLowerCase() ?? ''));
-    }
-    onEditClick() {
-        if (this.editing === undefined) {
-            this._editing = true;
-            this.cdr.detectChanges();
-        }
-        this.editDescription.emit();
-    }
-    onSaveChanges(data) {
-        if (this.editing === undefined) {
-            this._editing = false;
-        }
-        this.cdr.detectChanges();
-        this.saveChanges.emit(data);
-    }
-    onCancelEdit() {
-        this.cancel.emit();
-        if (this.editing === undefined) {
-            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: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-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 *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" 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=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-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 cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { 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=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-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 *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" 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=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-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 cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
-                type: Input
-            }], startInEditMode: [{
-                type: Input
-            }], descriptionTitle: [{
-                type: Input
-            }], descriptionContent: [{
-                type: Input
-            }], enableMarkdown: [{
-                type: Input
-            }], showEditButton: [{
-                type: Input
-            }], metadataItems: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], configTitle: [{
-                type: Input
-            }], configSections: [{
-                type: Input
-            }], configSectionsRow2: [{
-                type: Input
-            }], platform: [{
-                type: Input
-            }], isStepGroup: [{
-                type: Input
-            }], selectConfigOverrides: [{
-                type: Input
-            }], editDescription: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], saveChanges: [{
-                type: Output
-            }], metadataLinkClick: [{
-                type: Output
-            }], selectSearch: [{
-                type: Output
-            }], selectLoadMore: [{
-                type: Output
-            }], selectOpened: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], labelAdded: [{
-                type: Output
-            }] } });
-
-class DetailSidePanelComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        /** 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 = '';
-        /** When true, description uses rich text editor and renders as HTML. Host app must load Trix. */
-        this.enableMarkdown = false;
-        /** 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';
-        /** When true, hides Priority, Type, Test Data Set, and Prerequisite Case (step groups don't have these). Defaults to false. */
-        this.isStepGroup = false;
-        /** 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.cancel = 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.labelAdded = 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 (this.startInEditMode) {
+            this._editing = true;
         }
-        if (tab.value !== this.activeTab) {
-            this.tabChange.emit(tab.value);
+    }
+    /** Filtered metadata items - excludes Priority and Type for step groups */
+    get filteredMetadataItems() {
+        if (!this.isStepGroup) {
+            return this.metadataItems;
         }
+        return this.metadataItems.filter((item) => !this.stepGroupExcludedMetadataLabels.includes(item.label?.toLowerCase() ?? ''));
     }
-    onEditDescription() {
+    onEditClick() {
+        if (this.editing === undefined) {
+            this._editing = true;
+            this.cdr.detectChanges();
+        }
         this.editDescription.emit();
     }
     onSaveChanges(data) {
+        if (this.editing === undefined) {
+            this._editing = false;
+        }
+        this.cdr.detectChanges();
         this.saveChanges.emit(data);
     }
-    onCancel() {
+    onCancelEdit() {
         this.cancel.emit();
+        if (this.editing === undefined) {
+            this._editing = false;
+        }
+        this.cdr.detectChanges();
     }
-    onExpandToggle() {
-        this.expandToggle.emit();
+    trackByConfigTitle(_i, section) {
+        return section.title;
     }
-    onClose() {
-        this.close.emit();
+    trackByMetadataLabel(_i, item) {
+        return item.label;
     }
     onMetadataLinkClick(item) {
         if (item.link) {
@@ -34673,18 +34754,22 @@ class DetailSidePanelComponent {
                 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]';
+    }
 }
-DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", editing: "editing", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", 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\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\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-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\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        [enableMarkdown]=\"enableMarkdown\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [editing]=\"editing\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        [isStepGroup]=\"isStepGroup\"\n        (editDescription)=\"onEditDescription()\"\n        (cancel)=\"onCancel()\"\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        (labelAdded)=\"labelAdded.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", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["editing", "startInEditMode", "descriptionTitle", "descriptionContent", "enableMarkdown", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["editDescription", "cancel", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }], directives: [{ type: i5.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: [{
+TestCaseDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-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 *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" 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=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-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 cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { 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-detail-side-panel', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], 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\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\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-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\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        [enableMarkdown]=\"enableMarkdown\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [editing]=\"editing\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        [isStepGroup]=\"isStepGroup\"\n        (editDescription)=\"onEditDescription()\"\n        (cancel)=\"onCancel()\"\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        (labelAdded)=\"labelAdded.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" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabs: [{
+            args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-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 *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" 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=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-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 cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
                 type: Input
-            }], activeTab: [{
+            }], startInEditMode: [{
                 type: Input
             }], descriptionTitle: [{
                 type: Input
@@ -34698,6 +34783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], labels: [{
                 type: Input
+            }], configTitle: [{
+                type: Input
             }], configSections: [{
                 type: Input
             }], configSectionsRow2: [{
@@ -34706,44 +34793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isStepGroup: [{
                 type: Input
-            }], configTitle: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], startInEditMode: [{
-                type: Input
-            }], editing: [{
-                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
             }], cancel: [{
@@ -34762,174 +34813,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], labelAdded: [{
                 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\">\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: i5.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\">\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 {