@cqa-lib/cqa-ui 1.1.550 → 1.1.552

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

@@ -7759,6 +7759,7 @@ const DEFAULT_MODULAR_CONFIG = {
     allowCreateFolder: true,
     allowRenameFolder: true,
     allowDeleteFolder: true,
+    allowDuplicateFolder: false,
     allowNestedFolders: true,
     allowTestDragDrop: true,
     allowBulkSelection: true,
@@ -7813,12 +7814,16 @@ const DEFAULT_MODULAR_LABELS = {
     folderMenuDuplicate: 'Duplicate folder',
     folderMenuDelete: 'Delete folder',
     deleteFolderDialogTitle: 'Delete folder',
-    deleteFolderDialogBodySingular: 'This folder contains 1 test case. What should happen to them?',
-    deleteFolderDialogBodyPlural: 'This folder contains {n} test cases. What should happen to them?',
-    deleteFolderDialogMoveToParentTitle: 'Move test cases to parent folder',
-    deleteFolderDialogMoveToParentDescription: 'Test cases move one level up — nothing is lost',
-    deleteFolderDialogMoveToUnorganizedTitle: 'Move test cases to Unorganized',
-    deleteFolderDialogMoveToUnorganizedDescription: 'Test cases return to the Unorganized section',
+    deleteFolderDialogBodyTemplate: 'This folder contains {items}. What should happen to them?',
+    deleteFolderDialogBodyTestCaseSingular: '1 test case',
+    deleteFolderDialogBodyTestCasePlural: '{n} test cases',
+    deleteFolderDialogBodyStepGroupSingular: '1 step group',
+    deleteFolderDialogBodyStepGroupPlural: '{n} step groups',
+    deleteFolderDialogBodyJoin: 'and',
+    deleteFolderDialogMoveToParentTitle: 'Move to parent folder',
+    deleteFolderDialogMoveToParentDescription: 'Move them one level up — nothing is lost',
+    deleteFolderDialogMoveToUnorganizedTitle: 'Move to Unorganized',
+    deleteFolderDialogMoveToUnorganizedDescription: 'Move them to the Unorganized section',
     deleteFolderDialogCancel: 'Cancel',
     deleteFolderDialogConfirm: 'Delete folder',
     emptyNoTestsInFolderTitle: 'No Test Case Found',
@@ -8490,6 +8495,7 @@ class DeleteFolderDialogComponent {
         this.cdr = cdr;
         this.folderName = '';
         this.testCount = 0;
+        this.stepGroupCount = 0;
         this.hasParent = false;
         this.labels = { ...DEFAULT_MODULAR_LABELS };
         this.strategy = 'MOVE_TO_PARENT';
@@ -8509,10 +8515,21 @@ class DeleteFolderDialogComponent {
         }
     }
     get bodyText() {
-        const template = this.testCount === 1
-            ? this.labels.deleteFolderDialogBodySingular
-            : this.labels.deleteFolderDialogBodyPlural;
-        return template.replace('{n}', '' + this.testCount);
+        const parts = [];
+        if (this.testCount > 0) {
+            const tpl = this.testCount === 1
+                ? this.labels.deleteFolderDialogBodyTestCaseSingular
+                : this.labels.deleteFolderDialogBodyTestCasePlural;
+            parts.push(tpl.replace('{n}', '' + this.testCount));
+        }
+        if (this.stepGroupCount > 0) {
+            const tpl = this.stepGroupCount === 1
+                ? this.labels.deleteFolderDialogBodyStepGroupSingular
+                : this.labels.deleteFolderDialogBodyStepGroupPlural;
+            parts.push(tpl.replace('{n}', '' + this.stepGroupCount));
+        }
+        const items = parts.join(` ${this.labels.deleteFolderDialogBodyJoin} `);
+        return this.labels.deleteFolderDialogBodyTemplate.replace('{items}', items);
     }
     setStrategy(value) {
         if (this.strategy === value)
@@ -8523,7 +8540,7 @@ class DeleteFolderDialogComponent {
     }
 }
 DeleteFolderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DeleteFolderDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DeleteFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DeleteFolderDialogComponent, selector: "cqa-delete-folder-dialog", inputs: { folderName: "folderName", testCount: "testCount", hasParent: "hasParent", labels: "labels", strategy: "strategy" }, outputs: { strategyChange: "strategyChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: `
+DeleteFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DeleteFolderDialogComponent, selector: "cqa-delete-folder-dialog", inputs: { folderName: "folderName", testCount: "testCount", stepGroupCount: "stepGroupCount", hasParent: "hasParent", labels: "labels", strategy: "strategy" }, outputs: { strategyChange: "strategyChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full">
       <p class="cqa-text-sm cqa-text-neutral-800 cqa-m-0">{{ bodyText }}</p>
 
@@ -8639,6 +8656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], testCount: [{
                 type: Input
+            }], stepGroupCount: [{
+                type: Input
             }], hasParent: [{
                 type: Input
             }], labels: [{
@@ -11184,10 +11203,10 @@ class ModularTableTemplateComponent {
 }
 ModularTableTemplateComponent.GRID_SCROLL_LOAD_THRESHOLD_PX = 96;
 ModularTableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", folders: "folders", rootFolders: "rootFolders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", subfolderSectionExpanded: "subfolderSectionExpanded", organizedSectionExpanded: "organizedSectionExpanded", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", folderSearchValue: "folderSearchValue", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", selectedFolderNode: "selectedFolderNode", selectedFolderTrail: "selectedFolderTrail", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", rootLoadMoreRequested: "rootLoadMoreRequested", folderSearchChange: "folderSearchChange", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", subfolderSectionExpandedChange: "subfolderSectionExpandedChange", organizedSectionExpandedChange: "organizedSectionExpandedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganizedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "foldersAccordionExpanded", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading", "savingFolderIds", "searchValue"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange", "foldersAccordionExpandedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ModularTableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModularTableTemplateComponent, selector: "cqa-modular-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", showExportButton: "showExportButton", isExporting: "isExporting", filterConfig: "filterConfig", filterModel: "filterModel", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", showViewModeToggle: "showViewModeToggle", viewMode: "viewMode", viewModeLabels: "viewModeLabels", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", rowSelectable: "rowSelectable", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", pageSizeMenuDirection: "pageSizeMenuDirection", serverSidePagination: "serverSidePagination", totalElements: "totalElements", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", selectedItems: "selectedItems", showSelectAllInToolbar: "showSelectAllInToolbar", showDismissInToolbar: "showDismissInToolbar", allSelectedInToolbar: "allSelectedInToolbar", folders: "folders", rootFolders: "rootFolders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", subfolderSectionExpanded: "subfolderSectionExpanded", organizedSectionExpanded: "organizedSectionExpanded", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", folderSearchValue: "folderSearchValue", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", selectedFolderNode: "selectedFolderNode", selectedFolderTrail: "selectedFolderTrail", useInternalDialogs: "useInternalDialogs", showReorderButton: "showReorderButton", reorderSaving: "reorderSaving", reorderLabels: "reorderLabels", columnVisibility: "columnVisibility" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", viewModeChange: "viewModeChange", pageChange: "pageChange", sortChange: "sortChange", folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", rootLoadMoreRequested: "rootLoadMoreRequested", folderSearchChange: "folderSearchChange", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", testsMoved: "testsMoved", bulkActionClick: "bulkActionClick", bulkSelectAllChange: "bulkSelectAllChange", bulkDismiss: "bulkDismiss", bulkActionInvoked: "bulkActionInvoked", sidebarCollapsedChange: "sidebarCollapsedChange", subfolderSectionExpandedChange: "subfolderSectionExpandedChange", organizedSectionExpandedChange: "organizedSectionExpandedChange", reorderStart: "reorderStart", reorderCancel: "reorderCancel", reorderSave: "reorderSave", moveRequested: "moveRequested", selectedItemsChange: "selectedItemsChange", folderDeleteRequested: "folderDeleteRequested", folderMoveRequested: "folderMoveRequested", folderMoved: "folderMoved", folderDuplicateRequested: "folderDuplicateRequested", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick", columnVisibilityChange: "columnVisibilityChange", autoRefreshIntervalChange: "autoRefreshIntervalChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dynamicFilterComponent", first: true, predicate: DynamicFilterComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [allowDuplicate]=\"modularConfig.allowDuplicateFolder\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: ["folders", "selectedFolderId", "expandedFolderIds", "unorganizedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "foldersAccordionExpanded", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading", "savingFolderIds", "searchValue"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange", "foldersAccordionExpandedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "rowSelectable", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "enableRowReorder", "reorderHandleTooltip"], outputs: ["sortChange", "rowReorder"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions", "pageSizeMenuDirection"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModularTableTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-modular-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder-icon chip. Render via <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>. -->\n<ng-template #folderIconChip let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" [attr.stroke]=\"color || 'currentColor'\" stroke-width=\"0.916667\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 20\" [attr.height]=\"size || 20\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable \"+\" chip used by the \"New folder\" tile. -->\n<ng-template #addIconChip>\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-lg cqa-bg-[#F0F0F1] cqa-text-[#6D6D74] cqa-flex-shrink-0 group-hover:cqa-bg-indigo-50 group-hover:cqa-text-[#3F43EE]\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"1.275\" stroke-linecap=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [disabled]=\"isReordering\"\n          (clicked)=\"toggleFilter()\"\n        >\n        <span class=\"cqa-flex cqa-items-center cqa-gap-1\">\n          Filter          \n           <div [class]=\"arrowClasses\">\n            <svg\n              class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n              viewBox=\"0 0 8 4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M0 0L4 4L8 0\"\n                stroke=\"#0B0B0C\"\n                stroke-width=\"1.33\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n          [disabled]=\"isReordering\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n        <cqa-segment-control\n          *ngIf=\"showViewModeToggle\"\n          size=\"lg\"\n          [segments]=\"viewModeSegments\"\n          [value]=\"viewMode\"\n          (valueChange)=\"onViewModeChange($event)\"\n        ></cqa-segment-control>\n        <cqa-button\n          *ngIf=\"showReorderButton && !isReordering\"\n          variant=\"outlined\"\n          icon=\"drag_indicator\"\n          [text]=\"reorderLabels.reorderButton\"\n          [disabled]=\"!pagedRows || pagedRows.length === 0 || isTableLoading || isTableDataLoading\"\n          (clicked)=\"startReorder()\"\n        ></cqa-button>\n        <ng-container *ngIf=\"showReorderButton && isReordering\">\n          <cqa-button\n            variant=\"outlined\"\n            [text]=\"reorderLabels.cancelButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"cancelReorder()\"\n          ></cqa-button>\n          <cqa-button\n            variant=\"filled\"\n            [icon]=\"reorderSaving ? 'hourglass_empty' : ''\"\n            [text]=\"reorderSaving ? reorderLabels.savingButton : reorderLabels.doneButton\"\n            [disabled]=\"reorderSaving\"\n            (clicked)=\"saveReorder()\"\n          ></cqa-button>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Reorder mode banner -->\n    <div *ngIf=\"isReordering\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#FFFBEB] cqa-border cqa-border-[#FDE68A]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"#92400E\"></circle>\n      </svg>\n      <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#92400E]\">{{ reorderLabels.bannerTitle }}</span>\n      <span class=\"cqa-text-sm cqa-text-[#92400E]\">{{ reorderLabels.bannerDescription }}</span>\n    </div>\n\n    <cqa-selected-filters\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [model]=\"filterModel\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-min-h-0 \" style=\"border-bottom: 1px solid rgb(226, 226, 227);\">\n      <!-- Sidebar (only shown in modular view) -->\n      <cqa-folder-sidebar\n        *ngIf=\"isModularView && modularConfig.showSidebar\"\n        [folders]=\"folders\"\n        [selectedFolderId]=\"selectedFolderId\"\n        [expandedFolderIds]=\"expandedFolderIds\"\n        [unorganizedCount]=\"unorganizedCount\"\n        [allowCreate]=\"modularConfig.allowCreateFolder\"\n        [allowRename]=\"modularConfig.allowRenameFolder\"\n        [allowDelete]=\"modularConfig.allowDeleteFolder\"\n        [allowDrop]=\"modularConfig.allowTestDragDrop\"\n        [allowDuplicate]=\"modularConfig.allowDuplicateFolder\"\n        [showCounts]=\"modularConfig.showCounts\"\n        [collapsed]=\"sidebarCollapsed\"\n        [labels]=\"modularLabels\"\n        [serverSideSearch]=\"serverSideSearch\"\n        [rootTotal]=\"rootTotal\"\n        [folderSearchLoading]=\"folderSearchLoading\"\n        [rootFoldersLoading]=\"rootFoldersLoading\"\n        [savingFolderIds]=\"savingFolderIds\"\n        [searchValue]=\"folderSearchValue\"\n        (folderSelected)=\"onFolderSelected($event)\"\n        (folderExpansionToggled)=\"onFolderExpansionToggled($event)\"\n        (folderChildrenRequested)=\"folderChildrenRequested.emit($event)\"\n        (folderLoadMoreRequested)=\"folderLoadMoreRequested.emit($event)\"\n        (rootLoadMoreRequested)=\"rootLoadMoreRequested.emit()\"\n        (searchChange)=\"folderSearchChange.emit($event)\"\n        (folderCreated)=\"onFolderCreated($event)\"\n        (folderCreateRequested)=\"onFolderCreateRequested($event)\"\n        (folderRenamed)=\"onFolderRenamed($event)\"\n        (folderDeleted)=\"onFolderDeleted($event)\"\n        (folderMoveRequested)=\"onFolderMoveRequested($event)\"\n        (folderDuplicateRequested)=\"onFolderDuplicateRequested($event)\"\n        (testsDropped)=\"onTestsDropped($event)\"\n        (folderDropped)=\"onFolderDropped($event)\"\n        (collapsedChange)=\"onSidebarCollapsedChange($event)\"\n      ></cqa-folder-sidebar>\n\n      <!-- Right pane -->\n      <div\n        class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0\"\n        [style.border-top]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-left]=\"isModularView ? '1px solid #E2E2E3' : null\"\n        [style.border-right]=\"isModularView ? '1px solid #E2E2E3' : null\"\n      >\n        <!-- Breadcrumb (modular view, folder drilled-in) -->\n        <nav\n          *ngIf=\"isModularView && modularConfig.showBreadcrumb && !isRootView\"\n          aria-label=\"Folder path\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-sm cqa-px-3 cqa-py-2 cqa-rounded-none cqa-min-w-0\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-flex-1 cqa-min-w-0 cqa-overflow-x-auto cqa-scrollbar-thin cqa-whitespace-nowrap\">\n            <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1 cqa-flex-shrink-0\" (click)=\"onFolderSelected(null)\">\n              <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"currentColor\" stroke-width=\"0.916667\"/>\n              </svg>\n              <span>{{ modularLabels.allFolders }}</span>\n            </button>\n            <ng-container *ngFor=\"let crumb of breadcrumbTrail; let last = last\">\n              <mat-icon class=\"cqa-align-middle cqa-flex-shrink-0\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n              <button\n                type=\"button\"\n                class=\"cqa-flex-shrink-0\"\n                [ngClass]=\"last\n                  ? 'cqa-text-[#161617] cqa-font-semibold'\n                  : 'cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE]'\"\n                [disabled]=\"last\"\n                (click)=\"!last && onFolderSelected(crumb.id)\"\n              >{{ crumb.name }}</button>\n            </ng-container>\n          </div>\n          <cqa-button\n            *ngIf=\"modularConfig.showSubfolderSection && subfolderTiles.length\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            [icon]=\"subfolderSectionExpanded ? 'expand_less' : 'expand_more'\"\n            [text]=\"(subfolderSectionExpanded ? 'Hide' : 'Show') + ' subfolders'\"\n            [attr.aria-expanded]=\"subfolderSectionExpanded\"\n            (clicked)=\"toggleSubfolderSection()\"\n          ></cqa-button>\n          <cqa-button\n            *ngIf=\"modularConfig.allowCreateFolder\"\n            class=\"cqa-flex-shrink-0\"\n            variant=\"text\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px] !cqa-leading-[18px]\"\n            icon=\"add\"\n            [text]=\"modularLabels.newFolder\"\n            (clicked)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n          ></cqa-button>\n        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-px-5 cqa-pt-2\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-w-full cqa-text-left\"\n            [attr.aria-expanded]=\"organizedSectionExpanded\"\n            (click)=\"toggleOrganizedSection()\"\n          >\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9583 10.4585C12.9583 10.79 12.8266 11.108 12.5921 11.3424C12.3577 11.5768 12.0398 11.7085 11.7083 11.7085H1.70825C1.37673 11.7085 1.05879 11.5768 0.824368 11.3424C0.589948 11.108 0.458252 10.79 0.458252 10.4585V1.7085C0.458252 1.37698 0.589948 1.05903 0.824368 0.824613C1.05879 0.590192 1.37673 0.458496 1.70825 0.458496H4.83325L6.08325 2.3335H11.7083C12.0398 2.3335 12.3577 2.46519 12.5921 2.69961C12.8266 2.93403 12.9583 3.25198 12.9583 3.5835V10.4585Z\" stroke=\"#6D6D74\" stroke-width=\"0.916667\"/>\n            </svg>\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.organized }}</h3>\n            <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n              {{ rootFolderTiles.length === 1 ? modularLabels.foldersCountSingular : modularLabels.foldersCountPlural.replace('{n}', '' + rootFolderTiles.length) }}\n            </span>\n            <mat-icon class=\"cqa-text-[#6D6D74] cqa-ml-auto\" style=\"font-size:18px;width:18px;height:18px\">\n              {{ organizedSectionExpanded ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n          <div\n            class=\"cqa-grid\"\n            style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n            [style.grid-template-rows]=\"organizedSectionExpanded ? '1fr' : '0fr'\"\n          >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-1\"\n               (scroll)=\"onRootGridScroll($event)\">\n            <button\n              *ngFor=\"let f of rootFolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}<ng-container *ngIf=\"f.children?.length\"> \u00B7 {{ f.children!.length === 1 ? modularLabels.oneSubfolder : modularLabels.subfoldersCount.replace('{n}', '' + f.children!.length) }}</ng-container>\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: null })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Pagination spinner anchored at the right edge of the Organized\n                 row. Only renders during an in-flight root fetch (initial OR\n                 scroll-driven \"load more\"), and is filtered to suppress when\n                 the section is empty so we don't show a spinner inside an\n                 otherwise-blank row. -->\n            <div\n              *ngIf=\"rootFoldersLoading && rootFolderTiles.length > 0\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading more folders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n          </div>\n        </section>\n\n        <!-- Subfolder section: modular + folder view. Shown whenever drilled in\n             (even if no subfolders, so the \"+ New folder\" tile remains\n             reachable, and so we can render a loading state during the\n             drill-in fetch before children arrive). -->\n        <section\n          *ngIf=\"isModularView && !isRootView && modularConfig.showSubfolderSection && (subfolderTiles.length || currentFolderNode?.childrenLoading)\"\n          class=\"cqa-grid\"\n          style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n          [style.grid-template-rows]=\"subfolderSectionExpanded ? '1fr' : '0fr'\"\n        >\n          <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n          <div class=\"cqa-px-3 cqa-py-2 cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin\"\n               (scroll)=\"onSubfolderGridScroll($event)\">\n            <button\n              *ngFor=\"let f of subfolderTiles\"\n              type=\"button\"\n              [cqaFolderDrop]=\"f.id\"\n              [dropEnabled]=\"modularConfig.allowTestDragDrop\"\n              (testsDropped)=\"onTestsDropped($event)\"\n              (click)=\"onFolderSelected(f.id)\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-solid cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-white hover:cqa-border-[#3F43EE] hover:cqa-shadow-sm cqa-transition-colors\"\n            >\n              <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-min-w-0\">\n                <ng-container *ngTemplateOutlet=\"folderIconChip; context: { color: f.color }\"></ng-container>\n                <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                  <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ f.name }}</span>\n                  <span *ngIf=\"modularConfig.showCounts\" class=\"cqa-text-sm cqa-text-neutral-500 cqa-truncate\">\n                    {{ (f.count ?? 0) === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + (f.count ?? 0)) }}\n                  </span>\n                </div>\n              </div>\n              <mat-icon class=\"cqa-text-neutral-400 cqa-flex-shrink-0\" style=\"font-size:20px;width:20px;height:20px\">chevron_right</mat-icon>\n            </button>\n\n            <!-- \"+ New folder\" tile -->\n            <button\n              *ngIf=\"modularConfig.allowCreateFolder\"\n              type=\"button\"\n              (click)=\"onFolderCreateRequested({ parentId: selectedFolderId })\"\n              class=\"cqa-group cqa-flex-shrink-0 cqa-w-[240px] cqa-flex cqa-items-center cqa-gap-3 cqa-text-left cqa-p-3 cqa-rounded-[10px] cqa-border-dashed cqa-border-[0.5px] cqa-border-[#E2E2E3] cqa-bg-[#FAFAFA] hover:cqa-border-[#3F43EE] hover:cqa-bg-white cqa-transition-colors\"\n            >\n              <ng-container *ngTemplateOutlet=\"addIconChip\"></ng-container>\n              <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n                <span class=\"cqa-text-[15px] cqa-text-[#161617] cqa-truncate cqa-leading-tight group-hover:cqa-text-[#3F43EE]\">{{ modularLabels.newFolder }}</span>\n                <span class=\"cqa-text-sm cqa-text-neutral-400\">{{ modularLabels.testsCountPlural.replace('{n}', '0') }}</span>\n              </div>\n            </button>\n\n            <!-- Subfolder fetch indicator. Two cases:\n                 - Drill-in fetch: no subfolderTiles yet, render a centered\n                   row spinner so the section isn't empty during the fetch.\n                 - Pagination fetch: tiles exist, anchor a small spinner at\n                   the right edge so the user knows the next page is loading. -->\n            <div\n              *ngIf=\"currentFolderNode?.childrenLoading\"\n              class=\"cqa-flex-shrink-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-[80px]\"\n              aria-live=\"polite\"\n              [attr.aria-label]=\"'Loading subfolders'\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n            </div>\n          </div>\n          </div>\n        </section>\n\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-border cqa-border-indigo-100\"\n          style=\"background-color: #D8D9FC;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n              <path d=\"M12.9585 10.4585C12.9585 10.79 12.8268 11.108 12.5924 11.3424C12.358 11.5768 12.04 11.7085 11.7085 11.7085H1.7085C1.37698 11.7085 1.05903 11.5768 0.824613 11.3424C0.590192 11.108 0.458496 10.79 0.458496 10.4585V1.7085C0.458496 1.37698 0.590192 1.05903 0.824613 0.824613C1.05903 0.590192 1.37698 0.458496 1.7085 0.458496H4.8335L6.0835 2.3335H11.7085C12.04 2.3335 12.358 2.46519 12.5924 2.69961C12.8268 2.93403 12.9585 3.25198 12.9585 3.5835V10.4585Z\" stroke=\"#3F43EE\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold\" style=\"color: #3F43EE;\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <cqa-button\n            variant=\"outlined\"\n            btnSize=\"sm\"\n            customClass=\"!cqa-text-[13px]\"\n            inlineStyles=\"border-color: #3F43EE; color: #3F43EE;\"\n            [text]=\"modularLabels.clearFilter\"\n            (clicked)=\"onFolderSelected(null)\"\n          ></cqa-button>\n        </div>\n\n        <!-- Unorganized section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganizedSection\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2 cqa-mt-2\" style=\"margin-left: 20px;\"\n        >\n          <mat-icon class=\"cqa-text-[#6D6D74]\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n          <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-[#6D6D74]\">{{ modularLabels.unorganized }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganizedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganizedCount) }}\n          </span>\n        </div>\n\n        <div class=\"cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [class.cqa-modular-table-flush]=\"isModularView\"\n             [attr.style]=\"(!isModularView ? 'border-radius: 7px;' : '') + ((pagedRows && pagedRows.length > 0) ? '' : ' border-bottom: none !important;')\">\n          <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!effectiveIsEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n            <app-dynamic-table\n              [style.border-bottom]=\"pagedRows && pagedRows.length > 0 ? '1px solid rgb(226, 226, 227)' : null\"\n              [columns]=\"computedColumns\"\n              [data]=\"pagedRows\"\n              [rowSelectable]=\"rowSelectable\"\n              [enableLocalSort]=\"enableLocalSort && !isReordering\"\n              [isTableLoading]=\"isTableLoading\"\n              [isTableDataLoading]=\"isTableDataLoading\"\n              [cellJsonPathGetter]=\"cellJsonPathGetter\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [enableRowReorder]=\"isReordering\"\n              (rowReorder)=\"onRowReorder($event)\"\n              (sortChange)=\"sortChange.emit($event)\">\n              <ng-template #emptyTableTpl>\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n                  <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n                  <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n                  <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n                  <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n                </div>\n              </ng-template>\n            </app-dynamic-table>\n          </ng-container>\n\n          <ng-template #storyEmptyTpl>\n            <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <cqa-empty-state\n                *ngIf=\"effectiveIsEmptyState\"\n                [title]=\"effectiveEmptyStateConfig.title\"\n                [description]=\"effectiveEmptyStateConfig.description\"\n                [imageUrl]=\"effectiveEmptyStateConfig.imageUrl\"\n                [actions]=\"effectiveEmptyStateConfig.actions\"\n                (actionClick)=\"onEmptyAction($event)\"\n              >\n              </cqa-empty-state>\n            </div>\n          </ng-template>\n        </div>\n\n        <cqa-pagination\n          [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"pageSizeOptions\"\n          [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\n          [pageItemCount]=\"pagedRows.length\"\n          (paginate)=\"onPaginate($event)\"\n          (pageSizeChange)=\"onPageSizeChange($event)\"\n        >\n        </cqa-pagination>\n      </div>\n    </div>\n\n    <!-- Reused bulk action toolbar -->\n    <div *ngIf=\"anyRowSelected && modularConfig.allowBulkSelection && !isReordering\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\">\n      <cqa-table-action-toolbar\n        [selectedItems]=\"selectedItems && selectedItems.length > 0 ? selectedItems : currentSelectedItems\"\n        [actions]=\"effectiveBulkActions\"\n        [showSelectAll]=\"showSelectAllInToolbar\"\n        [allSelected]=\"allSelectedInToolbar\"\n        [showDismiss]=\"showDismissInToolbar\"\n        (actionClick)=\"onBulkAction($event)\"\n        (selectAllChange)=\"onBulkSelectAll($event)\"\n        (dismiss)=\"onBulkDismiss()\"\n      ></cqa-table-action-toolbar>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DialogService }]; }, propDecorators: { searchPlaceholder: [{
                 type: Input
             }], searchValue: [{