@cqa-lib/cqa-ui 1.1.209 → 1.1.210

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

@@ -25915,6 +25915,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Detail side panel scroll styles as a string for use in component `styles` arrays.
+ * Using a string constant avoids Angular's style compiler receiving non-string values
+ * (e.g. from styleUrls resolution in Storybook), which causes "input.match is not a function".
+ */
+const DETAIL_SIDE_PANEL_SCROLL_STYLES = `
+.detail-side-panel-scroll {
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  min-height: 0 !important;
+  -webkit-overflow-scrolling: touch;
+}
+`;
+
 /** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
 const TEST_CASE_DETAILS_SELECT_KEYS = {
     status: 'status',
@@ -26790,13 +26804,13 @@ class DetailSidePanelComponent {
     }
 }
 DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-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        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["startInEditMode", "descriptionTitle", "descriptionContent", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "selectConfigOverrides"], outputs: ["editDescription", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-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        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n", 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: ["startInEditMode", "descriptionTitle", "descriptionContent", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "selectConfigOverrides"], outputs: ["editDescription", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-detail-side-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            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 class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-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        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}\n"] }]
+                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-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        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        (editDescription)=\"onEditDescription()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeTab: [{