@cqa-lib/cqa-ui 1.1.540 → 1.1.541

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

@@ -9510,10 +9510,10 @@ FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
  *  position is within this many px of the end. */
 FolderSidebarComponent.SCROLL_LOAD_THRESHOLD_PX = 64;
 FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2 cqa-relative\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"onSearchInput($event)\"\n        (cleared)=\"onSearchClear()\"\n      ></cqa-search-bar>\n      <!-- Inline loading affordance during server-side folder search. Sits\n           inside the relative container above so it overlays the trailing\n           edge of the search input without shifting layout. -->\n      <span\n        *ngIf=\"folderSearchLoading\"\n        class=\"cqa-absolute cqa-right-7 cqa-top-1/2 -cqa-translate-y-1/2 cqa-flex cqa-items-center\"\n        aria-live=\"polite\"\n        aria-label=\"Searching folders\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </span>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganisedCount: "unorganisedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <div class=\"cqa-relative\">\n        <cqa-search-bar\n          size=\"sm\"\n          [fullWidth]=\"true\"\n          [value]=\"searchValue\"\n          [placeholder]=\"labels.searchFoldersPlaceholder\"\n          [showClear]=\"true\"\n          (valueChange)=\"onSearchInput($event)\"\n          (cleared)=\"onSearchClear()\"\n        ></cqa-search-bar>\n        <span\n          *ngIf=\"folderSearchLoading\"\n          class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n          aria-live=\"polite\"\n          aria-label=\"Searching folders\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n        </span>\n      </div>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2 cqa-relative\">\n      <cqa-search-bar\n        size=\"sm\"\n        [fullWidth]=\"true\"\n        [value]=\"searchValue\"\n        [placeholder]=\"labels.searchFoldersPlaceholder\"\n        [showClear]=\"true\"\n        (valueChange)=\"onSearchInput($event)\"\n        (cleared)=\"onSearchClear()\"\n      ></cqa-search-bar>\n      <!-- Inline loading affordance during server-side folder search. Sits\n           inside the relative container above so it overlays the trailing\n           edge of the search input without shifting layout. -->\n      <span\n        *ngIf=\"folderSearchLoading\"\n        class=\"cqa-absolute cqa-right-7 cqa-top-1/2 -cqa-translate-y-1/2 cqa-flex cqa-items-center\"\n        aria-live=\"polite\"\n        aria-label=\"Searching folders\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </span>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n</aside>\n", styles: [] }]
+            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-lg cqa-h-full cqa-min-h-0\"\n  [class.cqa-w-[240px]]=\"!collapsed\"\n  [class.cqa-w-[48px]]=\"collapsed\"\n  style=\"transition: width 150ms ease;\"\n>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-3 cqa-py-1\"\n    [style.border-bottom]=\"collapsed ? null : '1px solid #E2E2E3'\"\n    [style.margin-bottom.px]=\"collapsed ? 0 : 8\"\n  >\n    <span *ngIf=\"!collapsed\" class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900\">\n      {{ labels.folders }}\n    </span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" [class.cqa-w-full]=\"collapsed\" [class.cqa-justify-center]=\"collapsed\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"collapsed ? 'Expand folders panel' : 'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">\n          {{ collapsed ? 'chevron_right' : 'keyboard_double_arrow_left' }}\n        </mat-icon>\n      </button>\n      <button\n        *ngIf=\"!collapsed && allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!collapsed\">\n    <!-- Search -->\n    <div class=\"cqa-px-3 cqa-pb-2\">\n      <div class=\"cqa-relative\">\n        <cqa-search-bar\n          size=\"sm\"\n          [fullWidth]=\"true\"\n          [value]=\"searchValue\"\n          [placeholder]=\"labels.searchFoldersPlaceholder\"\n          [showClear]=\"true\"\n          (valueChange)=\"onSearchInput($event)\"\n          (cleared)=\"onSearchClear()\"\n        ></cqa-search-bar>\n        <span\n          *ngIf=\"folderSearchLoading\"\n          class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n          aria-live=\"polite\"\n          aria-label=\"Searching folders\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n        </span>\n      </div>\n    </div>\n\n    <!-- Tree (folders only \u2014 Unorganised sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[60vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"20\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-indigo-50 cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative\"\n          [class.cqa-bg-indigo-50]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id\"\n          [style.paddingLeft.px]=\"8 + row.depth * 16\"\n          [attr.title]=\"row.node.totalCount != null ? (row.node.totalCount + ' total including subfolders') : null\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <mat-spinner diameter=\"14\" mode=\"indeterminate\"></mat-spinner>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganised tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganised \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-indigo-50 focus:cqa-outline-none focus:cqa-bg-indigo-50 cqa-relative cqa-shrink-0\"\n      [class.cqa-bg-indigo-50]=\"isSelected(null)\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganised()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganised }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganisedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n</aside>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{