@testgorilla/tgo-ui 9.3.3 → 10.1.0

package/types/testgorilla-tgo-ui-components-infinite-scroll-table.d.ts

@@ -0,0 +1,225 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, TrackByFunction, ElementRef } from '@angular/core';
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i1 from '@angular/common';
+
+/**
+ * Column definition for the infinite-scroll table.
+ *
+ * The shape intentionally mirrors the existing `ui-table` `TableColumn` (the fields that carry
+ * over to a virtualized body) so consumers can migrate their column configs and cell templates
+ * with a selector swap. Types have no runtime footprint, so this is a deliberate duplication
+ * rather than a shared import — it keeps the new component fully independent of `ui-table`.
+ */
+interface InfiniteScrollTableColumn<T = any> {
+    /** Stable identifier for the column; also used to read the default cell value from a row. */
+    key: string;
+    /** Header label rendered when no `headerCellTemplate` is provided. */
+    title?: string;
+    /**
+     * Consumer-supplied header cell template.
+     * Context: `{ $implicit: column.title, column, colIndex }` — matches `ui-table`.
+     */
+    headerCellTemplate?: TemplateRef<unknown>;
+    /**
+     * Consumer-supplied row cell template.
+     * Context: `{ $implicit: element, rowIndex }` — matches `ui-table`.
+     */
+    rowCellTemplate?: TemplateRef<unknown>;
+    /** When set, the first sticky column pins to the left and the last sticky column pins to the right. */
+    isSticky?: boolean;
+    styles?: InfiniteScrollTableColumnStyles;
+}
+interface InfiniteScrollTableColumnStyles {
+    'min-width'?: string;
+    width?: string;
+    alignment?: InfiniteScrollTableColumnAlignment;
+}
+type InfiniteScrollTableColumnAlignment = 'left' | 'right' | 'center';
+/** Context object passed to the error template so it can trigger a retry. */
+interface InfiniteScrollTableErrorContext {
+    $implicit: () => void;
+    retry: () => void;
+}
+/**
+ * Payload emitted on `rowClick`: the row plus its data index.
+ *
+ * Note: this is a **shallow copy** (`{ ...row, index }`, matching `ui-table`), so a class instance's
+ * prototype is not preserved and any pre-existing `index` field on the row is overwritten.
+ */
+type InfiniteScrollTableRowClick<T> = T & {
+    index: number;
+};
+/**
+ * Payload emitted on `selectionChange`: the row, its data index, and the new selected state.
+ *
+ * As with `rowClick`, this is a **shallow copy** (`{ ...row, index, selected }`) — no prototype, and
+ * any pre-existing `index` / `selected` field on the row is overwritten.
+ */
+type InfiniteScrollTableRowSelection<T> = T & {
+    index: number;
+    selected: boolean;
+};
+
+/** Internal row wrapper so real rows and skeleton placeholders flow through one virtual list. */
+type RenderRow<T> = {
+    kind: 'data';
+    item: T;
+    index: number;
+} | {
+    kind: 'skeleton';
+    id: string;
+};
+/**
+ * A generic, virtualized table with scroll-driven infinite loading.
+ *
+ * Owns rendering, fixed-height vertical virtualization (CDK), horizontal scroll, a pinned header,
+ * sticky first/last columns, first-load and load-more skeletons, and a guarded `loadMore` event.
+ * All content and layout come from consumer inputs — nothing domain-specific lives here.
+ *
+ * Independent of `ui-table`: it reuses only stable leaf primitives (`ui-skeleton`) and duplicates
+ * the column/context type shapes so consumers can migrate with a selector swap.
+ */
+declare class InfiniteScrollTableComponent<T> {
+    /** Rows loaded so far. The consumer appends pages to this array. */
+    readonly data: _angular_core.InputSignal<T[]>;
+    /** Column definitions. The first `isSticky` column pins left; the last `isSticky` column pins right. */
+    readonly columns: _angular_core.InputSignal<InfiniteScrollTableColumn<T>[]>;
+    /**
+     * Fixed row height in px — used as the virtualization `itemSize`.
+     * Variable / multi-line row heights are unsupported in this variant.
+     */
+    readonly rowHeight: _angular_core.InputSignal<number>;
+    /** Optional stable row identity so recycled rows re-render correctly. Takes precedence over `rowIdKey`. */
+    readonly trackBy: _angular_core.InputSignal<TrackByFunction<T> | undefined>;
+    /** Optional key on each row that holds a stable id. Used when `trackBy` is not provided. */
+    readonly rowIdKey: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accepted for API parity with `ui-table`. In this bounded layout the header is always rendered
+     * above the internal scroll region and stays visible regardless — `.ui-ist` has `overflow: hidden`,
+     * so the header cannot stick to an outer scrolling page. Kept so `ui-table` templates migrate
+     * unchanged. Default `true`.
+     */
+    readonly stickyHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Max height of the internal scroll region (e.g. `'70vh'`). The body shrinks to fit fewer rows. */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    /** Condensed spacing. */
+    readonly isCondensed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enables row selection. When `true`, a dedicated checkbox column is prepended (pinned to the left)
+     * and each row's checkbox reflects the row's `selected` property; toggling it emits `selectionChange`.
+     * Selection stays data-driven and consumer-managed, exactly like `ui-table`. Default `false`.
+     */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** First-load state: renders a full body of skeleton rows. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Appends skeleton rows below the existing rows while the next page is fetched. */
+    readonly loadingMore: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether more pages exist. When `false`, `loadMore` never fires and the load-more skeleton is hidden. */
+    readonly hasMore: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Number of skeleton rows for the first-load state. */
+    readonly skeletonRowCount: _angular_core.InputSignal<number>;
+    /** How many rows from the end trigger `loadMore`. */
+    readonly loadMoreThreshold: _angular_core.InputSignal<number>;
+    /** Empty-state template, shown when `data` is empty and not loading. */
+    readonly noDataTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    /** Error template, shown when `error` is `true`. Receives `{ $implicit: retry, retry }` as context. */
+    readonly errorTemplate: _angular_core.InputSignal<TemplateRef<InfiniteScrollTableErrorContext> | undefined>;
+    /** Whether a page fetch failed. */
+    readonly error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Fires when the user scrolls within `loadMoreThreshold` rows of the end.
+     * Guarded: emits only when `hasMore && !loading && !loadingMore`, and only once per approach.
+     */
+    readonly loadMore: _angular_core.OutputEmitterRef<void>;
+    /** Fires from the error template's retry affordance. */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    /** Fires when a data row is clicked; payload is the row plus its data index. */
+    readonly rowClick: _angular_core.OutputEmitterRef<InfiniteScrollTableRowClick<T>>;
+    /**
+     * Fires when a row's selection checkbox is toggled (only when `selectable`). Payload is the row,
+     * its data index, and the new selected state. The consumer updates its data's `selected` property.
+     */
+    readonly selectionChange: _angular_core.OutputEmitterRef<InfiniteScrollTableRowSelection<T>>;
+    /** Fixed width of the checkbox column; exposed so the template can offset a sticky first column. */
+    protected readonly checkboxColumnWidth = 56;
+    protected readonly viewport: _angular_core.Signal<CdkVirtualScrollViewport | undefined>;
+    protected readonly headerScroll: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Horizontal-scroll state, mirroring the existing table's `scrollSettings`. */
+    protected readonly scrollStart: _angular_core.WritableSignal<boolean>;
+    protected readonly scrollEnd: _angular_core.WritableSignal<boolean>;
+    protected readonly horizontalScroll: _angular_core.WritableSignal<boolean>;
+    /**
+     * Measured width (px) of the body viewport's vertical scrollbar. Reserved as right padding on the
+     * header so the header's content width exactly equals the body's, keeping every column — including
+     * the last — aligned between header and body regardless of browser/scrollbar behaviour.
+     */
+    protected readonly scrollbarWidth: _angular_core.WritableSignal<number>;
+    /** Guards `loadMore` to a single emission per approach to the end. */
+    private loadMoreArmed;
+    protected readonly skeletonTheme: {
+        background: string;
+        'border-radius': string;
+        height: string;
+        'margin-bottom': string;
+    };
+    protected readonly lastStickyKey: _angular_core.Signal<string | undefined>;
+    protected readonly firstStickyKey: _angular_core.Signal<string | undefined>;
+    /** Real rows, with skeleton placeholders in first-load / load-more states, as one virtual list. */
+    protected readonly renderRows: _angular_core.Signal<RenderRow<T>[]>;
+    protected readonly hasData: _angular_core.Signal<boolean>;
+    /** The virtualized body is shown for the first-load skeletons and whenever there are rows. */
+    protected readonly showViewport: _angular_core.Signal<boolean>;
+    protected readonly showEmptyState: _angular_core.Signal<boolean>;
+    protected readonly showErrorState: _angular_core.Signal<boolean>;
+    protected readonly showErrorFooter: _angular_core.Signal<boolean>;
+    /** Viewport height shrinks to the content and is capped at `maxHeight` (CSS `min()` mixes units). */
+    protected readonly viewportHeight: _angular_core.Signal<string>;
+    /** Screen-reader announcement for the busy states. */
+    protected readonly statusMessage: _angular_core.Signal<"Loading" | "Loading more rows" | "">;
+    protected readonly errorContext: InfiniteScrollTableErrorContext;
+    protected readonly renderRowTrackBy: TrackByFunction<RenderRow<T>>;
+    constructor();
+    protected getCellValue(item: T, key: string): unknown;
+    /**
+     * Content-independent flex-basis for a column: its declared width, else its min-width, else the
+     * default. Using this (instead of `flex-basis: auto`) makes header and body cells size identically
+     * so every column stays aligned regardless of the text inside header vs body cells.
+     */
+    protected cellBasis(column: InfiniteScrollTableColumn<T>): string;
+    protected onRowClick(row: RenderRow<T>): void;
+    /**
+     * Whether a row should show the selected highlight. Mirrors `ui-table`: only when `selectable` is
+     * enabled and the row's data carries a truthy `selected` property. Skeleton rows are never selected.
+     */
+    protected isRowSelected(row: RenderRow<T>): boolean;
+    /** Emits the new selection state when a row's checkbox is toggled. Consumer-managed, like `ui-table`. */
+    protected onSelectionToggle(row: RenderRow<T>, selected: boolean): void;
+    /**
+     * Left offset (px) for a sticky-start consumer column: when the checkbox column is present it must
+     * sit to the right of it, so the first sticky column is pushed over by the checkbox column width.
+     */
+    protected stickyStartOffset(column: InfiniteScrollTableColumn<T>): number | null;
+    /** Keyboard equivalent of a row click (Enter/Space) for the currently focused data row. */
+    protected onRowActivate(event: Event, row: RenderRow<T>): void;
+    private onRetry;
+    /** Keep the header horizontally aligned with the body and update the sticky-shadow state. */
+    private syncHorizontalScroll;
+    /**
+     * Emits `loadMore` once when the rendered range reaches the trigger zone near the end,
+     * re-arming when the user scrolls back out. Mirrors the app's `ngx-infinite-scroll` semantics.
+     */
+    private checkLoadMore;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfiniteScrollTableComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InfiniteScrollTableComponent<any>, "ui-infinite-scroll-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "rowIdKey": { "alias": "rowIdKey"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "isCondensed": { "alias": "isCondensed"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "skeletonRowCount": { "alias": "skeletonRowCount"; "required": false; "isSignal": true; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; "isSignal": true; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; "isSignal": true; }; "errorTemplate": { "alias": "errorTemplate"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; }, { "loadMore": "loadMore"; "retry": "retry"; "rowClick": "rowClick"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+declare class InfiniteScrollTableComponentModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfiniteScrollTableComponentModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InfiniteScrollTableComponentModule, never, [typeof i1.CommonModule, typeof i2.ScrollingModule, typeof InfiniteScrollTableComponent], [typeof InfiniteScrollTableComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<InfiniteScrollTableComponentModule>;
+}
+
+export { InfiniteScrollTableComponent, InfiniteScrollTableComponentModule };
+export type { InfiniteScrollTableColumn, InfiniteScrollTableColumnAlignment, InfiniteScrollTableColumnStyles, InfiniteScrollTableErrorContext, InfiniteScrollTableRowClick, InfiniteScrollTableRowSelection };

package/{components/inline-field/index.d.ts → types/testgorilla-tgo-ui-components-inline-field.d.ts}

@@ -1,5 +1,4 @@
-import * as _testgorilla_tgo_ui_components_icon from '@testgorilla/tgo-ui/components/icon';
-import { IconName } from '@testgorilla/tgo-ui/components/icon';
+import * as ______dist_tgo_ui_types_testgorilla_tgo_ui_components_icon from '../../dist/tgo-ui/types/testgorilla-tgo-ui-components-icon';
 import * as _angular_core from '@angular/core';
 import { EventEmitter, OnInit, ChangeDetectorRef, DestroyRef, ElementRef } from '@angular/core';
 import * as i2 from '@angular/forms';
@@ -8,6 +7,8 @@ import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
 import * as i5 from '@testgorilla/tgo-ui/components/field';
 import { FieldType, FieldComponent } from '@testgorilla/tgo-ui/components/field';
+import * as i6 from '@testgorilla/tgo-ui/components/icon';
+import { IconName } from '@testgorilla/tgo-ui/components/icon';
 import * as i1 from '@angular/common';
 import * as i3 from '@angular/material/input';
 import * as i4 from '@testgorilla/tgo-ui/components/button';
@@ -218,14 +219,14 @@ declare class InlineFieldComponent implements OnInit, ControlValueAccessor {
     state: _angular_core.Signal<InlineFieldState>;
     saveButtonConfig: _angular_core.Signal<{
         label: string;
-        iconName: _testgorilla_tgo_ui_components_icon.IconName;
+        iconName: ______dist_tgo_ui_types_testgorilla_tgo_ui_components_icon.IconName;
         variant: "secondary-inverted";
         size: "small";
         disabled: boolean;
     }>;
     cancelButtonConfig: _angular_core.Signal<{
         label: string;
-        iconName: _testgorilla_tgo_ui_components_icon.IconName;
+        iconName: ______dist_tgo_ui_types_testgorilla_tgo_ui_components_icon.IconName;
         variant: "secondary-inverted";
         size: "small";
         disabled: boolean;
@@ -239,8 +240,8 @@ declare class InlineFieldComponent implements OnInit, ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(_isDisabled: boolean): void;
     onComponentFocusOut(event: FocusEvent): void;
-    onEscapePressed(event: KeyboardEvent): void;
-    onEnterPressed(event: KeyboardEvent): void;
+    onEscapePressed(event: Event): void;
+    onEnterPressed(event: Event): void;
     onTabPressed(): void;
     onInputFocus(): void;
     onInputBlur(): void;
@@ -263,7 +264,7 @@ declare class InlineFieldComponent implements OnInit, ControlValueAccessor {
 
 declare class InlineFieldComponentModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InlineFieldComponentModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InlineFieldComponentModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.MatInputModule, typeof i4.ButtonComponentModule, typeof i5.FieldComponentModule, typeof _testgorilla_tgo_ui_components_icon.IconComponentModule, typeof InlineFieldComponent], [typeof InlineFieldComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InlineFieldComponentModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i2.ReactiveFormsModule, typeof i3.MatInputModule, typeof i4.ButtonComponentModule, typeof i5.FieldComponentModule, typeof i6.IconComponentModule, typeof InlineFieldComponent], [typeof InlineFieldComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<InlineFieldComponentModule>;
 }
 

package/{components/side-sheet/index.d.ts → types/testgorilla-tgo-ui-components-side-sheet.d.ts}

@@ -57,7 +57,7 @@ declare class SideSheetComponent implements OnInit {
     openChange: EventEmitter<boolean>;
     drawer: MatDrawer;
     container: ViewContainerRef;
-    onEscPress(_event: KeyboardEvent): void;
+    onEscPress(): void;
     protected title: string;
     protected showBackButton: boolean;
     protected showTitleTooltip: boolean;