@cqa-lib/cqa-ui 1.1.539 → 1.1.540

package/lib/templates/modular-table-template/folder-sidebar/folder-sidebar.component.d.ts

@@ -2,7 +2,11 @@ import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { FolderNode, FolderRenamedPayload, ModularLabels } from '../modular-table-template.models';
 import * as i0 from "@angular/core";
+/** A row in the flattened sidebar tree. `kind` distinguishes real folder rows
+ *  from the lazy-load affordances ('loading' spinner, 'load-more' button) that
+ *  the `rows` getter interleaves inside an expanded subtree. */
 interface RenderNode {
+    kind: 'folder' | 'loading' | 'load-more';
     node: FolderNode;
     depth: number;
     visible: boolean;
@@ -23,11 +27,43 @@ export declare class FolderSidebarComponent implements OnDestroy {
     showCounts: boolean;
     collapsed: boolean;
     labels: ModularLabels;
+    /** When true, the sidebar emits `searchChange` and skips its local name filter
+     *  — the host is expected to swap `folders` with server-side search results.
+     *  Default keeps the legacy client-side behaviour for callers that haven't
+     *  opted into lazy loading yet. */
+    serverSideSearch: boolean;
+    /** Backend-reported total root folders. When `folders.length < rootTotal` the
+     *  sidebar renders a top-level "Load more" affordance after the tree. */
+    rootTotal: number;
+    /** True while a server-side folder-search request is in flight. The sidebar
+     *  shows a spinner next to the search input so the user can tell typing
+     *  has been registered. */
+    folderSearchLoading: boolean;
+    /** True while a root-page fetch is in flight (initial load OR scroll-driven
+     *  pagination). When set with no folders yet, the sidebar shows a centered
+     *  spinner; when set during pagination, a small spinner appears at the
+     *  bottom of the tree. */
+    rootFoldersLoading: boolean;
     folderSelected: EventEmitter<number>;
     folderExpansionToggled: EventEmitter<{
         id: number;
         expanded: boolean;
     }>;
+    /** Lazy-load: fires when the user expands a node whose children haven't been
+     *  fetched yet (`hasChildren === true && loadedPages === undefined`). Host
+     *  responds by calling its `loadFolderChildren(id, 0)`. */
+    folderChildrenRequested: EventEmitter<number>;
+    /** Lazy-load: fires when the user clicks the per-folder "Load more" row.
+     *  Host responds by calling `loadFolderChildren(id, nextPage)`. */
+    folderLoadMoreRequested: EventEmitter<{
+        id: number;
+        nextPage: number;
+    }>;
+    /** Debounced search-input value. Always emitted; only consumed by hosts that
+     *  set `serverSideSearch=true` to re-fetch the tree from the backend. */
+    searchChange: EventEmitter<string>;
+    /** Lazy-load: user clicked the top-level "Load more" affordance for roots. */
+    rootLoadMoreRequested: EventEmitter<void>;
     /** Emitted after the host completes folder creation (e.g., inline rename flow). Reserved for future use. */
     folderCreated: EventEmitter<{
         parentId: number | null;
@@ -61,6 +97,10 @@ export declare class FolderSidebarComponent implements OnDestroy {
     }>;
     collapsedChange: EventEmitter<boolean>;
     searchValue: string;
+    /** Debounce timer for `searchChange` emissions; cleared on each keystroke so
+     *  the host only re-fetches once the user pauses typing. */
+    private searchEmitTimer;
+    private static readonly SEARCH_DEBOUNCE_MS;
     renamingId: number | null;
     renameDraft: string;
     /** Inline rename uses the same name rules as the New Folder dialog. */
@@ -99,6 +139,27 @@ export declare class FolderSidebarComponent implements OnDestroy {
     isExpanded(id: number): boolean;
     isSelected(id: number | null): boolean;
     onToggle(n: FolderNode, event: Event): void;
+    /** Search input handler: updates the local `searchValue` immediately (so the
+     *  input stays responsive) and debounces `searchChange` emissions so a host
+     *  doing server-side search fires at most one request per pause. */
+    onSearchInput(term: string): void;
+    /** Search input clear handler: flushes the debounce so the host sees an
+     *  empty term immediately and can restore the lazy tree. */
+    onSearchClear(): void;
+    /** Lazy-load: user clicked the per-folder "Load more" row. The sidebar tracks
+     *  pagination via `node.loadedPages`; the next page is loadedPages + 1. */
+    onLoadMore(n: FolderNode): void;
+    /** Cached `folders.length` at the moment we last emitted `rootLoadMoreRequested`.
+     *  Used to throttle the scroll-based pagination so we don't re-emit until the
+     *  host has actually appended a new page. */
+    private lastRootLoadEmittedAt;
+    /** Threshold (px) for "near the bottom" — emit a load-more once the scroll
+     *  position is within this many px of the end. */
+    private static readonly SCROLL_LOAD_THRESHOLD_PX;
+    /** Vertical-scroll handler for the root-folder list. Fires `rootLoadMoreRequested`
+     *  when the user scrolls within the threshold of the bottom and more roots
+     *  are available on the backend. Suppressed during sidebar search. */
+    onTreeScroll(event: Event): void;
     onSelect(n: FolderNode | null): void;
     onSelectUnorganised(): void;
     beginRename(n: FolderNode, event: Event): void;
@@ -162,7 +223,7 @@ export declare class FolderSidebarComponent implements OnDestroy {
     private isDescendantOf;
     private clearAllExpandTimers;
     ngOnDestroy(): void;
-    trackByRow: (_: number, row: RenderNode) => number;
+    trackByRow: (_: number, row: RenderNode) => string;
     onRowKeydown(event: KeyboardEvent, row: RenderNode, index: number): void;
     private focusRowElement;
     /**
@@ -172,6 +233,6 @@ export declare class FolderSidebarComponent implements OnDestroy {
      */
     private focusRenameInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<FolderSidebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FolderSidebarComponent, "cqa-folder-sidebar", never, { "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"; }, { "folderSelected": "folderSelected"; "folderExpansionToggled": "folderExpansionToggled"; "folderCreated": "folderCreated"; "folderCreateRequested": "folderCreateRequested"; "folderRenamed": "folderRenamed"; "folderDeleted": "folderDeleted"; "folderMoveRequested": "folderMoveRequested"; "folderDuplicateRequested": "folderDuplicateRequested"; "testsDropped": "testsDropped"; "folderDropped": "folderDropped"; "collapsedChange": "collapsedChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FolderSidebarComponent, "cqa-folder-sidebar", never, { "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"; }, { "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"; }, never, never>;
 }
 export {};

package/lib/templates/modular-table-template/modular-table-template.component.d.ts

@@ -124,6 +124,33 @@ export declare class ModularTableTemplateComponent implements OnInit, OnChanges,
     modularLabels: ModularLabels;
     bulkActions: TableAction[];
     sidebarCollapsed: boolean;
+    /** Lazy-load: when true, the sidebar emits `searchChange` and skips its
+     *  local name filter so the host can serve search results from the backend. */
+    serverSideSearch: boolean;
+    /** Lazy-load: backend-reported total root folders. Drives the sidebar's
+     *  top-level "Load more" affordance when `folders.length < rootTotal`. */
+    rootTotal: number;
+    /** Lazy-load: true while the host is fetching server-side folder-search
+     *  results. Forwarded to the sidebar so it can render a search spinner. */
+    folderSearchLoading: boolean;
+    /** Lazy-load: true while a root-page fetch is in flight (initial load OR
+     *  the scroll-driven "load more" pagination). Drives the loading indicator
+     *  the modular grid renders at the right edge of the Organised row, and is
+     *  forwarded to the sidebar for its own loading affordance. */
+    rootFoldersLoading: boolean;
+    /** Override for the currently-selected folder node. Used as a fallback when
+     *  `findFolder(folders, selectedFolderId)` misses — e.g., during sidebar
+     *  search when `folders` holds only the matched results, the selected
+     *  folder may not be among them, but its breadcrumb / header label still
+     *  needs to render. The host owns the lookup against its full folder map. */
+    selectedFolderNode: FolderNode | null;
+    /** Host-provided breadcrumb snapshot for the selected folder. Used as a
+     *  fallback in `breadcrumbTrail` when `buildTrail` against `this.folders`
+     *  yields empty — the canonical case is sidebar search, where `folders`
+     *  is the search-results list and the selected folder's ancestors aren't
+     *  present. The host walks `parentId` chains to build this; partial trails
+     *  are acceptable when ancestors haven't been fetched yet. */
+    selectedFolderTrail: FolderNode[] | null;
     /**
      * When true (default), the library opens its own Move dialog for convenience
      * during testing. Hosts taking over API + UX should set this to `false` and
@@ -135,6 +162,19 @@ export declare class ModularTableTemplateComponent implements OnInit, OnChanges,
         id: number;
         expanded: boolean;
     }>;
+    /** Lazy-load: re-emitted from the sidebar when the user expands a node whose
+     *  children haven't been fetched yet. Host responds by fetching that subtree. */
+    folderChildrenRequested: EventEmitter<number>;
+    /** Lazy-load: re-emitted when the user clicks the per-folder "Load more". */
+    folderLoadMoreRequested: EventEmitter<{
+        id: number;
+        nextPage: number;
+    }>;
+    /** Lazy-load: re-emitted when the user clicks the top-level "Load more". */
+    rootLoadMoreRequested: EventEmitter<void>;
+    /** Lazy-load: debounced sidebar-search term. Consumed by hosts that have
+     *  set `serverSideSearch=true` to refetch the tree from the backend. */
+    folderSearchChange: EventEmitter<string>;
     folderCreated: EventEmitter<FolderCreatedPayload>;
     /** Emitted when the user clicks "+ New folder"; host should open a creation modal. */
     folderCreateRequested: EventEmitter<{
@@ -374,6 +414,25 @@ export declare class ModularTableTemplateComponent implements OnInit, OnChanges,
         id: number;
         expanded: boolean;
     }): void;
+    /** Tracks the `folders.length` at which we last emitted `rootLoadMoreRequested`
+     *  from the Organized grid scroll, so rapid scroll events don't spam the host
+     *  before it has had a chance to append the next page. */
+    private lastRootGridLoadAt;
+    /** Tracks the `currentFolderNode.children.length` at which we last emitted
+     *  `folderLoadMoreRequested` from the Subfolders grid scroll, for the same
+     *  reason as `lastRootGridLoadAt`. */
+    private lastSubfolderGridLoadAt;
+    private static readonly GRID_SCROLL_LOAD_THRESHOLD_PX;
+    /** 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`. */
+    onRootGridScroll(event: Event): void;
+    /** Horizontal-scroll handler for the "Subfolders in X" tiles. Emits
+     *  `folderLoadMoreRequested({ id: selectedFolderId, nextPage })` when the
+     *  user scrolls within threshold of the right edge AND the active folder
+     *  has more children on the backend than have been loaded. */
+    onSubfolderGridScroll(event: Event): void;
     onFolderCreated(payload: FolderCreatedPayload): void;
     onFolderCreateRequested(payload: {
         parentId: number | null;
@@ -461,5 +520,5 @@ export declare class ModularTableTemplateComponent implements OnInit, OnChanges,
      */
     buildRowDragPayload: (row: any) => Array<string | number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModularTableTemplateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModularTableTemplateComponent, "cqa-modular-table-template", never, { "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"; "useInternalDialogs": "useInternalDialogs"; "showReorderButton": "showReorderButton"; "reorderSaving": "reorderSaving"; "reorderLabels": "reorderLabels"; "columnVisibility": "columnVisibility"; }, { "onSearchChange": "onSearchChange"; "onExportClick": "onExportClick"; "onApplyFilterClick": "onApplyFilterClick"; "onResetFilterClick": "onResetFilterClick"; "onClearAll": "onClearAll"; "removeChip": "removeChip"; "viewModeChange": "viewModeChange"; "pageChange": "pageChange"; "sortChange": "sortChange"; "folderSelected": "folderSelected"; "folderExpansionToggled": "folderExpansionToggled"; "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"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModularTableTemplateComponent, "cqa-modular-table-template", never, { "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"; }, { "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"; }, never, never>;
 }

package/lib/templates/modular-table-template/modular-table-template.models.d.ts

@@ -7,6 +7,19 @@ export interface FolderNode {
     totalCount?: number;
     color?: string;
     children?: FolderNode[];
+    /** Backend hint: true when this node has at least one direct child. Drives
+     *  the sidebar chevron under lazy loading, so the affordance shows even
+     *  before `children` has been fetched. */
+    hasChildren?: boolean;
+    /** Backend-reported total number of direct children. The sidebar shows a
+     *  "Load more" row when `(children?.length ?? 0) < totalChildren`. */
+    totalChildren?: number;
+    /** Last 0-based page already fetched into `children`. `undefined` means the
+     *  subtree has not been loaded yet — the host should fetch on first expand. */
+    loadedPages?: number;
+    /** True while a children-page fetch is in flight, so the sidebar can render
+     *  a spinner row and the host can suppress duplicate requests. */
+    childrenLoading?: boolean;
 }
 export declare type FolderIdAccessor = (row: any) => number | null | undefined;
 export interface ModularConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqa-lib/cqa-ui",
-  "version": "1.1.539",
+  "version": "1.1.540",
   "description": "UI Kit library for Angular 13.4",
   "keywords": [
     "angular",