@ieeesa-npm/dashboard 0.0.2 → 0.0.3

package/lib/components/your-groups/your-groups.component.d.ts

@@ -1,19 +1,24 @@
 import { EventEmitter } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
+import { IconButton } from '@ieeesa-npm/presentation';
 import { DashboardSectionState } from '../../models/dashboard-section-state.model';
 import { GroupHierarchyNode, GroupRow } from '../../models/group-row.model';
 import { PageChange } from '../../models/page-change.model';
 import * as i0 from "@angular/core";
 /**
  * A single rendered table row. Either a top-level group row (`kind: 'group'`,
- * carrying the full {@link GroupRow}) or a hierarchy (ancestor) row revealed
- * when a group is expanded (`kind: 'hierarchy'`, carrying the ancestor node and
- * its depth for indentation).
+ * carrying the full {@link GroupRow}) or a hierarchy node row (`kind:
+ * 'hierarchy'`) revealed step-by-step as the user drills down. `nodeIndex` is
+ * the node's position in the group's `hierarchy[]`, used to drive the next
+ * drill-down level and the per-node toggle (matching the Groups module, where
+ * each level reveals only its next child and that child carries its own +/−).
  */
 interface TableRow {
     kind: 'group' | 'hierarchy';
     group?: GroupRow;
     node?: GroupHierarchyNode;
+    /** Index of this node within the group's hierarchy[] (hierarchy rows only). */
+    nodeIndex?: number;
     level: number;
 }
 /**
@@ -42,6 +47,24 @@ export declare class YourGroupsComponent {
     readonly indentPerLevel = 28;
     /** Selectable "Items per page" page sizes. */
     readonly pageSizeOptions: number[];
+    /**
+     * Expand (+) icon button — the SAME sprite icon the Groups package uses for
+     * its tree expand toggle (icon-expand-collapse-plus), rendered via the shared
+     * IconButtonComponent for a consistent look across the app.
+     */
+    readonly expandIconButton: IconButton;
+    /** Collapse (−) icon button — the Groups package's icon-expand-collapse-minus. */
+    readonly collapseIconButton: IconButton;
+    /**
+     * Returns the +/- toggle icon button for a level, matching the Groups tree:
+     * the minus (collapse) icon when that level is expanded, otherwise the plus
+     * (expand) icon.
+     * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
+     * @return {IconButton}
+     * @memberof YourGroupsComponent
+     */
+    getToggleButton(group: GroupRow, index: number): IconButton;
     private groupsValue;
     /** The groups rendered in the table. */
     set groups(value: GroupRow[]);
@@ -80,9 +103,15 @@ export declare class YourGroupsComponent {
      */
     set expanded(value: boolean);
     get expanded(): boolean;
-    /** GroupIds of the top-level groups whose hierarchy is currently expanded. */
-    private readonly expandedGroupIds;
-    /** The flattened rows currently rendered (group rows + any expanded hierarchy rows). */
+    /**
+     * Keys of the hierarchy levels currently expanded, each `"<groupId>:<index>"`.
+     * Index -1 is the group row itself (its toggle reveals the first hierarchy
+     * node); index N is the Nth hierarchy node (its toggle reveals node N+1). A
+     * level only reveals the NEXT node, matching the Groups module's step-by-step
+     * drill-down.
+     */
+    private readonly expandedKeys;
+    /** The flattened rows currently rendered (group rows + any revealed hierarchy rows). */
     visibleRows: TableRow[];
     /**
      * The count shown in the header subtitle — the server total when provided,
@@ -92,26 +121,53 @@ export declare class YourGroupsComponent {
      */
     get groupCount(): number;
     /**
-     * Whether a group row can expand: it has an ancestor hierarchy (more than the
-     * group's own node). A single-node hierarchy (the group itself) is a leaf.
+     * Builds the expand/collapse key for a hierarchy level. Index -1 is the group
+     * row itself; index N is the Nth hierarchy node.
+     * @param {GroupRow} group
+     * @param {number} index
+     * @return {string}
+     * @memberof YourGroupsComponent
+     */
+    private levelKey;
+    /**
+     * Whether a level shows a +/- toggle.
+     *
+     * - Group row (index -1): expandable when it has ANY hierarchy node, matching
+     *   the Groups module which shows the toggle on every group that has related
+     *   hierarchy (driven by hasChildren, true for all these groups).
+     * - Hierarchy node (index N): expandable only when there is a further node
+     *   after it (step-by-step drill-down); the deepest node is a leaf, no toggle.
+     * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
+     * @return {boolean}
+     * @memberof YourGroupsComponent
+     */
+    isLevelExpandable(group: GroupRow, index: number): boolean;
+    /**
+     * Whether the group row shows a toggle (has related hierarchy to drill into).
      * @param {GroupRow} group
      * @return {boolean}
      * @memberof YourGroupsComponent
      */
     hasHierarchy(group: GroupRow): boolean;
     /**
-     * Whether the given group row is currently expanded.
+     * Whether a given level is currently expanded (its next node is revealed).
      * @param {GroupRow} group
+     * @param {number} index
      * @return {boolean}
      * @memberof YourGroupsComponent
      */
+    isLevelExpanded(group: GroupRow, index: number): boolean;
+    /** Convenience for the group row (level -1). */
     isGroupExpanded(group: GroupRow): boolean;
     /**
-     * Toggles a group's hierarchy expansion and rebuilds the visible rows.
+     * Toggles a level's expansion (reveals/hides its next node). Collapsing a
+     * level also collapses everything deeper under it so re-opening starts fresh.
      * @param {GroupRow} group
+     * @param {number} index - -1 for the group row, else the node index.
      * @memberof YourGroupsComponent
      */
-    onToggleHierarchy(group: GroupRow): void;
+    onToggleLevel(group: GroupRow, index: number): void;
     /**
      * Toggles the card's expanded/collapsed state (whole table visibility) and
      * emits the new state so the host's two-way binding stays in sync.
@@ -147,9 +203,11 @@ export declare class YourGroupsComponent {
      */
     trackByRow(index: number, row: TableRow): string;
     /**
-     * Rebuilds the flat list of visible rows: the current page of top-level group
-     * rows, each optionally followed by its hierarchy (ancestor) rows when the
-     * group is expanded. The hierarchy path is shown root→leaf, indented by depth.
+     * Rebuilds the visible rows for the current page. Each group reveals its
+     * hierarchy ONE level at a time (Groups-module style): the group row reveals
+     * node 0 only when its own level (-1) is expanded; node 0 reveals node 1 only
+     * when node 0's level is expanded; and so on. Each revealed node that still
+     * has a child carries its own +/- toggle.
      * @memberof YourGroupsComponent
      */
     private rebuildRows;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/dashboard",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",