@cqa-lib/cqa-ui 1.1.542 → 1.1.543

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

@@ -9847,6 +9847,12 @@ class ModularTableTemplateComponent {
         // Folder / modular inputs
         // ============================================================================
         this.folders = [];
+        /** Host-provided snapshot of root-level folders for the "Organised" grid.
+         *  When set, takes precedence over `this.folders` for `rootFolderTiles` so
+         *  the Organised section stays stable while sidebar search swaps `folders`
+         *  to a filtered result set. Mirrors the host-driven fallback pattern used
+         *  by `selectedFolderNode` (subfolders) and `selectedFolderTrail` (breadcrumb). */
+        this.rootFolders = null;
         this.selectedFolderId = null;
         this.expandedFolderIds = [];
         this.unorganisedCount = 0;
@@ -10627,8 +10633,14 @@ class ModularTableTemplateComponent {
     // ============================================================================
     /**
      * Flat list of root-level folders for the "Organised" grid on the root view.
+     * Prefers the host-provided `rootFolders` snapshot when set — analogous to
+     * how `subfolderTiles` falls back to `selectedFolderNode` and `breadcrumbTrail`
+     * falls back to `selectedFolderTrail` when `folders` has been swapped to a
+     * search-results list. Falls back to `this.folders` otherwise.
      */
     get rootFolderTiles() {
+        if (this.rootFolders != null)
+            return this.rootFolders;
         return this.folders || [];
     }
     /**
@@ -10772,11 +10784,15 @@ class ModularTableTemplateComponent {
     /** Horizontal-scroll handler for the "Organised" root tiles. Emits
      *  `rootLoadMoreRequested` when the user scrolls within
      *  `GRID_SCROLL_LOAD_THRESHOLD_PX` of the right edge AND more roots are
-     *  available on the backend. Throttled by `lastRootGridLoadAt`. */
+     *  available on the backend. Throttled by `lastRootGridLoadAt`.
+     *  Uses `rootFolderTiles.length` (not `folders.length`) so the gate stays
+     *  correct when `rootFolders` decouples the Organised grid from the
+     *  search-filtered `folders` input. */
     onRootGridScroll(event) {
-        if (this.folders.length >= this.rootTotal)
+        const loaded = this.rootFolderTiles.length;
+        if (loaded >= this.rootTotal)
             return;
-        if (this.folders.length === this.lastRootGridLoadAt)
+        if (loaded === this.lastRootGridLoadAt)
             return;
         const el = event.target;
         if (!el)
@@ -10784,7 +10800,7 @@ class ModularTableTemplateComponent {
         const distanceFromRight = el.scrollWidth - (el.scrollLeft + el.clientWidth);
         if (distanceFromRight > ModularTableTemplateComponent.GRID_SCROLL_LOAD_THRESHOLD_PX)
             return;
-        this.lastRootGridLoadAt = this.folders.length;
+        this.lastRootGridLoadAt = loaded;
         this.rootLoadMoreRequested.emit();
     }
     /** Horizontal-scroll handler for the "Subfolders in X" tiles. Emits
@@ -11190,7 +11206,7 @@ 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", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", 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", 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-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 \"+\" 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-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-3 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        [unorganisedCount]=\"unorganisedCount\"\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        (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-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (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\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n            <button\n              type=\"button\"\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        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-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.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.organised }}</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          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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 Organised\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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\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-mb-4 cqa-px-3 cqa-py-1\"\n        >\n          <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n            {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n          class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\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\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n            (click)=\"onFolderSelected(null)\"\n          >{{ modularLabels.clearFilter }}</button>\n        </div>\n\n        <!-- Unorganised section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\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.unorganised }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n          </span>\n        </div>\n\n        <!-- Table -->\n        <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : '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", "unorganisedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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", unorganisedCount: "unorganisedCount", folderIdAccessor: "folderIdAccessor", modularConfig: "modularConfig", modularLabels: "modularLabels", bulkActions: "bulkActions", sidebarCollapsed: "sidebarCollapsed", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", 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", 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-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 \"+\" 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-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-3 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        [unorganisedCount]=\"unorganisedCount\"\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        (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-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (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\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n            <button\n              type=\"button\"\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        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-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.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.organised }}</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          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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 Organised\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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\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-mb-4 cqa-px-3 cqa-py-1\"\n        >\n          <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n            {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n          class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\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\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n            (click)=\"onFolderSelected(null)\"\n          >{{ modularLabels.clearFilter }}</button>\n        </div>\n\n        <!-- Unorganised section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\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.unorganised }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n          </span>\n        </div>\n\n        <!-- Table -->\n        <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : '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", "unorganisedCount", "allowCreate", "allowRename", "allowDelete", "allowMove", "allowDuplicate", "allowDrop", "showCounts", "collapsed", "labels", "serverSideSearch", "rootTotal", "folderSearchLoading", "rootFoldersLoading"], outputs: ["folderSelected", "folderExpansionToggled", "folderChildrenRequested", "folderLoadMoreRequested", "searchChange", "rootLoadMoreRequested", "folderCreated", "folderCreateRequested", "folderRenamed", "folderDeleted", "folderMoveRequested", "folderDuplicateRequested", "testsDropped", "folderDropped", "collapsedChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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-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 \"+\" 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-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-3 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        [unorganisedCount]=\"unorganisedCount\"\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        (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-1 cqa-text-sm cqa-px-3 cqa-py-1 cqa-mb-3 cqa-rounded-none\"\n          style=\"color: #6D6D74; border-bottom: 1px solid #E2E2E3;\"\n        >\n          <button type=\"button\" class=\"hover:cqa-text-[#3F43EE] cqa-inline-flex cqa-items-center cqa-gap-1\" (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\" style=\"font-size:16px;width:16px;height:16px;color:#6D6D74;\">chevron_right</mat-icon>\n            <button\n              type=\"button\"\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        </nav>\n\n        <!-- Folder grid: modular + root view -->\n        <section\n          *ngIf=\"isModularView && isRootView && modularConfig.showFolderGrid && rootFolderTiles.length\"\n          class=\"cqa-mb-4 cqa-px-5 cqa-pt-4 cqa-pb-[14px]\"\n          style=\"border-bottom: 1px solid #F0F0F1;\"\n        >\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-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.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.organised }}</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          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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 Organised\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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\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-mb-4 cqa-px-3 cqa-py-1\"\n        >\n          <div *ngIf=\"subfolderTiles.length || modularConfig.allowCreateFolder\" class=\"cqa-text-sm cqa-text-neutral-600 cqa-mb-2\">\n            {{ modularLabels.subfoldersIn }} {{ breadcrumbTrail.length ? breadcrumbTrail[breadcrumbTrail.length - 1].name : '' }}\n          </div>\n          <div class=\"cqa-flex cqa-flex-nowrap cqa-gap-3 cqa-overflow-x-auto cqa-scrollbar-thin cqa-pb-2\"\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-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-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-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-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              <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n            </div>\n          </div>\n        </section>\n\n        <!-- Folder panel header above the table: \"Hotel Search (3)\" + Clear filter -->\n        <div\n          *ngIf=\"isModularView && !isRootView && modularConfig.showUnorganisedSection\"\n          class=\"cqa-flex cqa-mb-1 cqa-items-center cqa-justify-between cqa-px-4 cqa-py-3 cqa-rounded-t-lg cqa-bg-indigo-50 cqa-border cqa-border-indigo-100\"\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\" [attr.stroke]=\"currentFolderNode?.color || '#3F43EE'\" stroke-width=\"0.916667\"/>\n            </svg>\n            <span class=\"cqa-text-sm cqa-font-semibold cqa-text-indigo-700\">\n              {{ currentFolderNode?.name }} ({{ currentFolderDirectCount }})\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"cqa-px-3 cqa-py-1 cqa-text-xs cqa-font-medium cqa-text-indigo-700 cqa-bg-white cqa-border cqa-border-indigo-200 cqa-rounded hover:cqa-bg-indigo-50\"\n            (click)=\"onFolderSelected(null)\"\n          >{{ modularLabels.clearFilter }}</button>\n        </div>\n\n        <!-- Unorganised section header at root view -->\n        <div\n          *ngIf=\"isModularView && isRootView && modularConfig.showUnorganisedSection\"\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.unorganised }}</h3>\n          <span class=\"cqa-text-xs cqa-text-[#6D6D74]\">\n            {{ unorganisedCount === 1 ? modularLabels.testsCountSingular : modularLabels.testsCountPlural.replace('{n}', '' + unorganisedCount) }}\n          </span>\n        </div>\n\n        <!-- Table -->\n        <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\"\n             [attr.style]=\"pagedRows && pagedRows.length > 0 ? null : '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: [] }]
@@ -11306,6 +11322,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], folders: [{
                 type: Input
+            }], rootFolders: [{
+                type: Input
             }], selectedFolderId: [{
                 type: Input
             }], expandedFolderIds: [{
@@ -11407,6 +11425,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Generic single-input prompt modal. Used wherever a flow needs to ask the
+ * user for a single name (or short text) and confirm with a primary button.
+ *
+ * Examples: New Folder, Clone Suite, Rename, New Plan, etc.
+ *
+ * All copy is configurable through Inputs — see `title`, `description`,
+ * `label`, `placeholder`, `submitButtonText`, `cancelButtonText`. Defaults
+ * preserve the legacy "New Folder" wording for callers that haven't migrated.
+ */
+class NamePromptModalComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isOpen = false;
+        this.title = 'New Folder';
+        this.description = 'Rename any time by double-clicking';
+        this.label = 'Folder name';
+        this.placeholder = 'e.g. Checkout Flow, User Auth, Payment Tests';
+        /** Submit (primary) button text. Lets consumers reuse this modal for
+         * "Create folder", "Clone Suite", "Rename", etc. */
+        this.submitButtonText = 'Create folder';
+        /** Cancel (secondary) button text. Most consumers can leave the default. */
+        this.cancelButtonText = 'Cancel';
+        /** When true, locks the modal: spinner on the submit button, all dismiss
+         * paths (cancel, close X, backdrop, ESC) become no-ops, and submit() bails
+         * out so a fast Enter press can't double-fire while the parent is mid-API. */
+        this.isSubmitting = false;
+        this._name = '';
+        this.nameChange = new EventEmitter();
+        this.submitted = new EventEmitter();
+        this.cancelled = new EventEmitter();
+        this.nameTouched = false;
+    }
+    set name(value) {
+        this._name = value || '';
+        this.nameTouched = false;
+        this.cdr.markForCheck();
+    }
+    get name() {
+        return this._name;
+    }
+    onNameChange(value) {
+        this._name = value;
+        this.nameTouched = true;
+        this.nameChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    get nameErrors() {
+        if (!this.nameTouched)
+            return [];
+        const trimmed = (this._name || '').trim();
+        if (!trimmed)
+            return [`${this.label} is required`];
+        return [];
+    }
+    get isValid() {
+        return (this._name || '').trim().length > 0;
+    }
+    submit() {
+        if (!this.isValid || this.isSubmitting)
+            return;
+        this.submitted.emit({ name: this._name.trim() });
+    }
+    onCancel() {
+        if (this.isSubmitting)
+            return;
+        this.cancelled.emit();
+    }
+    onClose() {
+        if (this.isSubmitting)
+            return;
+        this.cancelled.emit();
+    }
+    onBackdropClick() {
+        if (this.isSubmitting)
+            return;
+        this.cancelled.emit();
+    }
+    onEscape(event) {
+        event.stopPropagation();
+        if (this.isSubmitting)
+            return;
+        this.cancelled.emit();
+    }
+}
+NamePromptModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NamePromptModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+NamePromptModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NamePromptModalComponent, selector: "cqa-name-prompt-modal", inputs: { isOpen: "isOpen", title: "title", description: "description", label: "label", placeholder: "placeholder", submitButtonText: "submitButtonText", cancelButtonText: "cancelButtonText", isSubmitting: "isSubmitting", name: "name" }, outputs: { nameChange: "nameChange", submitted: "submitted", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n     id=\"cqa-ui-root\"\n     style=\"position: fixed; inset: 0; z-index: 1000;\">\n  <div class=\"cqa-fixed cqa-inset-0 cqa-bg-black/40\"\n       (click)=\"onBackdropClick()\"></div>\n\n  <div class=\"cqa-fixed cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-pointer-events-none\">\n    <div class=\"cqa-relative cqa-w-full cqa-max-w-[480px] cqa-bg-white cqa-rounded-2xl cqa-shadow-md cqa-border cqa-border-border-default cqa-pointer-events-auto\"\n         (keydown.escape)=\"onEscape($event)\"\n         tabindex=\"-1\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-p-6 cqa-pb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-title cqa-m-0\">{{ title }}</h2>\n          <p *ngIf=\"description\"\n             class=\"cqa-text-sm cqa-text-description cqa-m-0\">\n            {{ description }}\n          </p>\n        </div>\n        <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-bg-transparent cqa-border-0 cqa-text-description hover:cqa-text-title\"\n                [class.cqa-cursor-pointer]=\"!isSubmitting\"\n                [class.cqa-cursor-not-allowed]=\"isSubmitting\"\n                [class.cqa-opacity-50]=\"isSubmitting\"\n                [disabled]=\"isSubmitting\"\n                (click)=\"onClose()\"\n                aria-label=\"Close\">\n          <mat-icon class=\"cqa-text-[20px] cqa-leading-5 cqa-h-5 cqa-w-5\">close</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"cqa-px-6 cqa-pb-5\">\n        <cqa-custom-input\n          [label]=\"label\"\n          [placeholder]=\"placeholder\"\n          [value]=\"name\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [errors]=\"nameErrors\"\n          (valueChange)=\"onNameChange($event)\"\n          (enterPressed)=\"submit()\">\n        </cqa-custom-input>\n      </div>\n\n      <div class=\"cqa-border-t cqa-border-border-default cqa-px-6 cqa-py-4 cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n        <cqa-button variant=\"outlined\"\n                    [text]=\"cancelButtonText\"\n                    btnSize=\"lg\"\n                    [fullWidth]=\"true\"\n                    [disabled]=\"isSubmitting\"\n                    (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button variant=\"filled\"\n                    [text]=\"submitButtonText\"\n                    btnSize=\"lg\"\n                    [fullWidth]=\"true\"\n                    [loading]=\"isSubmitting\"\n                    [disabled]=\"!isValid || isSubmitting\"\n                    (clicked)=\"submit()\">\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NamePromptModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-name-prompt-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n     id=\"cqa-ui-root\"\n     style=\"position: fixed; inset: 0; z-index: 1000;\">\n  <div class=\"cqa-fixed cqa-inset-0 cqa-bg-black/40\"\n       (click)=\"onBackdropClick()\"></div>\n\n  <div class=\"cqa-fixed cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-pointer-events-none\">\n    <div class=\"cqa-relative cqa-w-full cqa-max-w-[480px] cqa-bg-white cqa-rounded-2xl cqa-shadow-md cqa-border cqa-border-border-default cqa-pointer-events-auto\"\n         (keydown.escape)=\"onEscape($event)\"\n         tabindex=\"-1\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-p-6 cqa-pb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-title cqa-m-0\">{{ title }}</h2>\n          <p *ngIf=\"description\"\n             class=\"cqa-text-sm cqa-text-description cqa-m-0\">\n            {{ description }}\n          </p>\n        </div>\n        <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-bg-transparent cqa-border-0 cqa-text-description hover:cqa-text-title\"\n                [class.cqa-cursor-pointer]=\"!isSubmitting\"\n                [class.cqa-cursor-not-allowed]=\"isSubmitting\"\n                [class.cqa-opacity-50]=\"isSubmitting\"\n                [disabled]=\"isSubmitting\"\n                (click)=\"onClose()\"\n                aria-label=\"Close\">\n          <mat-icon class=\"cqa-text-[20px] cqa-leading-5 cqa-h-5 cqa-w-5\">close</mat-icon>\n        </button>\n      </div>\n\n      <div class=\"cqa-px-6 cqa-pb-5\">\n        <cqa-custom-input\n          [label]=\"label\"\n          [placeholder]=\"placeholder\"\n          [value]=\"name\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [errors]=\"nameErrors\"\n          (valueChange)=\"onNameChange($event)\"\n          (enterPressed)=\"submit()\">\n        </cqa-custom-input>\n      </div>\n\n      <div class=\"cqa-border-t cqa-border-border-default cqa-px-6 cqa-py-4 cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n        <cqa-button variant=\"outlined\"\n                    [text]=\"cancelButtonText\"\n                    btnSize=\"lg\"\n                    [fullWidth]=\"true\"\n                    [disabled]=\"isSubmitting\"\n                    (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button variant=\"filled\"\n                    [text]=\"submitButtonText\"\n                    btnSize=\"lg\"\n                    [fullWidth]=\"true\"\n                    [loading]=\"isSubmitting\"\n                    [disabled]=\"!isValid || isSubmitting\"\n                    (clicked)=\"submit()\">\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], submitButtonText: [{
+                type: Input
+            }], cancelButtonText: [{
+                type: Input
+            }], isSubmitting: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], nameChange: [{
+                type: Output
+            }], submitted: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
 class RowDragDirective {
     constructor() {
         this.dragEnabled = true;
@@ -52366,6 +52500,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         RowDragDirective,
         FolderDropDirective,
         FolderDragDirective,
+        NamePromptModalComponent,
         FullTableLoaderComponent,
         TableDataLoaderComponent,
         BasicStepComponent,
@@ -52559,6 +52694,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         RowDragDirective,
         FolderDropDirective,
         FolderDragDirective,
+        NamePromptModalComponent,
         FullTableLoaderComponent,
         TableDataLoaderComponent,
         BasicStepComponent,
@@ -52799,6 +52935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         RowDragDirective,
                         FolderDropDirective,
                         FolderDragDirective,
+                        NamePromptModalComponent,
                         FullTableLoaderComponent,
                         TableDataLoaderComponent,
                         BasicStepComponent,
@@ -52998,6 +53135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         RowDragDirective,
                         FolderDropDirective,
                         FolderDragDirective,
+                        NamePromptModalComponent,
                         FullTableLoaderComponent,
                         TableDataLoaderComponent,
                         BasicStepComponent,
@@ -53841,5 +53979,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NamePromptModalComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map