@dmytrokhylko/tb-cdu-ui 0.1.5 → 0.2.3

package/README.md

@@ -1,63 +1,90 @@
-# TbUi
+# @dmytrokhylko/tb-cdu-ui
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+ThingsBoard shared UI components library — base table, loading overlay, action button, and data source utilities.
 
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Installation
 
 ```bash
-ng generate component component-name
+npm install @dmytrokhylko/tb-cdu-ui
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
+## Package structure
 
-## Building
+The library is published as a single npm package with multiple entry points:
 
-To build the library, run:
+| Entry point | Import path | Description |
+|---|---|---|
+| **Primary** | `@dmytrokhylko/tb-cdu-ui` | Re-exports everything from `core` and `widgets` |
+| **Core** | `@dmytrokhylko/tb-cdu-ui/core` | UI components, models, and data source utilities |
+| **Widgets** | `@dmytrokhylko/tb-cdu-ui/widgets` | Ready-made widgets built on top of `core` |
 
-```bash
-ng build tb-ui
+```ts
+import { BaseTableComponent } from '@dmytrokhylko/tb-cdu-ui/core';
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+## Components
 
-### Publishing the Library
+| Component | Selector | Docs |
+|---|---|---|
+| `BaseTableComponent` | `<tb-cd-base-table>` | [core/base-table](./core/base-table/README.md) |
+| `LoadingOverlayComponent` | `<tb-cd-loading-overlay>` | — |
+| `ActionButtonComponent` | `<tb-cd-action-button>` | — |
 
-Once the project is built, you can publish your library by following these steps:
+## Adapters
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/tb-ui
-   ```
+| Adapter | Description |
+|---|---|
+| `TbSubscriptionDatasource` | Drives a table from a ThingsBoard widget subscription (non-paginated) |
+| `TbSubscriptionDatasourcePaginated` | Drives a table from a ThingsBoard widget subscription with server-side pagination |
+| `collectSubscriptionData` | Maps raw `IWidgetSubscription` data to a typed entity array |
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+## Project layout
 
-## Running unit tests
+```
+tb-cdu-ui/
+  package.json             # npm package manifest + dev dependencies
+  ng-package.json          # ng-packagr primary entry point
+  public-api.ts            # primary barrel (re-exports core + widgets)
+  core/                    # @dmytrokhylko/tb-cdu-ui/core
+    ng-package.json
+    public-api.ts
+    action-button/
+    adapters/              # ThingsBoard subscription adapters
+    base-table/
+    loading-overlay/
+    models/
+    styles/
+  widgets/                 # @dmytrokhylko/tb-cdu-ui/widgets
+    ng-package.json
+    public-api.ts
+```
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+Secondary entry points are discovered automatically by ng-packagr from directories containing `ng-package.json`. The directory name relative to the library root determines the import path suffix (e.g. `core/` → `@dmytrokhylko/tb-cdu-ui/core`).
 
-```bash
-ng test
-```
+## Peer dependencies
 
-## Running end-to-end tests
+- `@angular/common`, `@angular/core`, `@angular/forms` `^20.0.0`
+- `@angular/cdk`, `@angular/material` `^20.0.0`
+- `@ngx-translate/core` `^17.0.0`
+- `thingsboard` `^4.0.0`
+- `rxjs` `^7.8.0`
 
-For end-to-end (e2e) testing, run:
+## Development
 
 ```bash
-ng e2e
+npm ci                  # install dependencies
+npm run build           # production build → dist/tb-cdu-ui/
+npm run watch           # development build with watch
+npm run format          # format source files with Prettier
+npm run format:check    # check formatting without writing
+npm test                # run unit tests
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### Publishing
 
-## Additional Resources
+Releases are published automatically to npm when a `v*` tag is pushed to `master`:
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+```bash
+git tag v1.0.0
+git push origin master --tags
+```

package/core/index.d.ts

@@ -0,0 +1,254 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, AfterViewInit, ElementRef, Signal, Injector } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FormControl } from '@angular/forms';
+import { PageEvent } from '@angular/material/paginator';
+import { SortDirection, Sort } from '@angular/material/sort';
+import { Direction, PageLink, DataKeyType, EntityFilter, widgetType, KeyFilter, EntityId, DataEntry } from '@shared/public-api';
+import { EntityColumn } from '@home/components/public-api';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { IWidgetSubscription } from '@core/public-api';
+import { WidgetContext } from '@home/models/widget-component.models';
+
+declare class ActionButtonComponent {
+    icon: _angular_core.InputSignal<string | null>;
+    label: _angular_core.InputSignal<string | null>;
+    backgroundColor: _angular_core.InputSignal<string | null>;
+    textColor: _angular_core.InputSignal<string | null>;
+    clicked: _angular_core.OutputEmitterRef<void>;
+    protected readonly resolvedBackgroundColor: _angular_core.Signal<string | null>;
+    protected readonly resolvedTextColor: _angular_core.Signal<string | null>;
+    protected handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionButtonComponent, "tb-cd-action-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+interface EntityColumnExtended<T = unknown> extends EntityColumn {
+    nullDisplayValue?: string;
+    headerStyle?: Record<string, string>;
+    cellTemplate?: TemplateRef<{
+        $implicit: unknown;
+        entity: T;
+    }>;
+}
+
+declare enum LoadingPhase {
+    IDLE = "idle",
+    GENERATING = "generating",
+    POLLING = "polling",
+    FETCHING = "fetching"
+}
+type LoadingState = {
+    phase: LoadingPhase.IDLE;
+} | {
+    phase: LoadingPhase.GENERATING;
+} | {
+    phase: LoadingPhase.POLLING;
+    processed: number;
+    total: number;
+} | {
+    phase: LoadingPhase.FETCHING;
+};
+declare const getLoadingState: {
+    idle: () => LoadingState;
+    generating: () => LoadingState;
+    polling: (processed: number, total: number) => LoadingState;
+    fetching: () => LoadingState;
+};
+
+interface TableRowAction<T> {
+    id: string;
+    icon: string;
+    label?: string;
+    visible?: (entity: T) => boolean;
+    disabled?: (entity: T) => boolean;
+    handler?: (entity: T) => void;
+}
+interface TableHeaderAction {
+    id: string;
+    icon: string;
+    label?: string;
+    visible?: () => boolean;
+    disabled?: () => boolean;
+    handler?: () => void;
+}
+interface TableBulkAction<T> {
+    id: string;
+    icon: string;
+    label?: string;
+    visible?: () => boolean;
+    disabled?: (selected: T[]) => boolean;
+    handler?: (selected: T[]) => void;
+}
+interface TableState {
+    pageIndex: number;
+    pageSize: number;
+    sortProperty: string;
+    sortDirection: Direction | null;
+    textSearch: string;
+}
+
+declare class BaseTableComponent<T> implements AfterViewInit {
+    dataSource: _angular_core.InputSignal<T[]>;
+    columns: _angular_core.InputSignal<EntityColumnExtended<T>[]>;
+    displayedColumns: _angular_core.InputSignal<string[]>;
+    loadingState: _angular_core.InputSignal<LoadingState>;
+    widgetTitle: _angular_core.InputSignal<string>;
+    noDataMessage: _angular_core.InputSignal<string>;
+    totalElements: _angular_core.InputSignal<number>;
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    selectionEnabled: _angular_core.InputSignal<boolean>;
+    rowActions: _angular_core.InputSignal<TableRowAction<T>[]>;
+    headerActions: _angular_core.InputSignal<TableHeaderAction[]>;
+    bulkActions: _angular_core.InputSignal<TableBulkAction<T>[]>;
+    expandable: _angular_core.InputSignal<boolean>;
+    expandedRowTemplate: _angular_core.InputSignal<TemplateRef<{
+        $implicit: T;
+        entity: T;
+    }> | null>;
+    expansionTrackBy: _angular_core.InputSignal<(entity: T) => unknown>;
+    selectionTrackBy: _angular_core.InputSignal<(entity: T) => unknown>;
+    clearSelectionTrigger: _angular_core.InputSignal<unknown>;
+    pageLink: _angular_core.ModelSignal<PageLink>;
+    rowClick: _angular_core.OutputEmitterRef<T>;
+    cellClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        entity: T;
+        column: EntityColumnExtended<T>;
+    }>;
+    actionClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        entity: T;
+        action: TableRowAction<T>;
+    }>;
+    headerActionClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        action: TableHeaderAction;
+    }>;
+    bulkActionClick: _angular_core.OutputEmitterRef<{
+        event: Event;
+        action: TableBulkAction<T>;
+        selected: T[];
+    }>;
+    selectionChange: _angular_core.OutputEmitterRef<T[]>;
+    expansionChange: _angular_core.OutputEmitterRef<T[]>;
+    textSearchMode: _angular_core.WritableSignal<boolean>;
+    readonly selection: SelectionModel<T>;
+    readonly expandedKeys: _angular_core.WritableSignal<Set<unknown>>;
+    readonly lastExpandedKey: _angular_core.WritableSignal<unknown>;
+    readonly detailRowColumns: _angular_core.Signal<string[]>;
+    private readonly selectionCount;
+    readonly isLoadingState: _angular_core.Signal<boolean>;
+    readonly toolbarMode: _angular_core.Signal<"default" | "search" | "bulk">;
+    readonly effectiveDisplayedColumns: _angular_core.Signal<string[]>;
+    readonly visibleHeaderActions: _angular_core.Signal<TableHeaderAction[]>;
+    readonly visibleBulkActions: _angular_core.Signal<TableBulkAction<T>[]>;
+    pageLinkSortDirection: _angular_core.Signal<SortDirection>;
+    searchControl: FormControl<string>;
+    searchInputField: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    private readonly table;
+    private readonly tableScrollContainer;
+    protected readonly LoadingPhase: typeof LoadingPhase;
+    private injector;
+    private destroyRef;
+    constructor();
+    ngAfterViewInit(): void;
+    onPaginate(event: PageEvent): void;
+    onSort(event: Sort): void;
+    enterFilterMode(): void;
+    exitFilterMode(): void;
+    isAllSelected(): boolean;
+    isIndeterminate(): boolean;
+    masterToggle(): void;
+    toggleRow(entity: T): void;
+    clearSelection(): void;
+    onCellClick(event: Event, entity: T, column: EntityColumnExtended<T>): void;
+    onRowClick(event: MouseEvent, entity: T): void;
+    isExpanded(entity: T): boolean;
+    readonly isExpandedRow: (_: number, row: T) => boolean;
+    toggleExpansion(entity: T, rowElement?: HTMLElement): void;
+    private scrollExpandedRowUnderHeader;
+    private reconcileSelection;
+    private reconcileExpansion;
+    private emitExpansionChange;
+    onExpandToggleClick(event: Event, entity: T): void;
+    onActionClick(event: Event, entity: T, action: TableRowAction<T>): void;
+    onHeaderActionClick(event: Event, action: TableHeaderAction): void;
+    onBulkActionClick(event: Event, action: TableBulkAction<T>): void;
+    private clone;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseTableComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTableComponent<any>, "tb-cd-base-table", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": true; "isSignal": true; }; "loadingState": { "alias": "loadingState"; "required": true; "isSignal": true; }; "widgetTitle": { "alias": "widgetTitle"; "required": false; "isSignal": true; }; "noDataMessage": { "alias": "noDataMessage"; "required": false; "isSignal": true; }; "totalElements": { "alias": "totalElements"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "bulkActions": { "alias": "bulkActions"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; "isSignal": true; }; "expansionTrackBy": { "alias": "expansionTrackBy"; "required": false; "isSignal": true; }; "selectionTrackBy": { "alias": "selectionTrackBy"; "required": false; "isSignal": true; }; "clearSelectionTrigger": { "alias": "clearSelectionTrigger"; "required": false; "isSignal": true; }; "pageLink": { "alias": "pageLink"; "required": false; "isSignal": true; }; }, { "pageLink": "pageLinkChange"; "rowClick": "rowClick"; "cellClick": "cellClick"; "actionClick": "actionClick"; "headerActionClick": "headerActionClick"; "bulkActionClick": "bulkActionClick"; "selectionChange": "selectionChange"; "expansionChange": "expansionChange"; }, never, never, true, never>;
+}
+
+declare class LoadingOverlayComponent {
+    state: _angular_core.InputSignal<LoadingState>;
+    mode: _angular_core.InputSignal<ProgressSpinnerMode>;
+    generating: _angular_core.InputSignal<string>;
+    processingDeterminate: _angular_core.InputSignal<string>;
+    processingIndeterminate: _angular_core.InputSignal<string>;
+    fetching: _angular_core.InputSignal<string>;
+    protected readonly LoadingPhase: typeof LoadingPhase;
+    spinnerMode: _angular_core.Signal<ProgressSpinnerMode>;
+    percentage: _angular_core.Signal<number>;
+    pollingProcessed: _angular_core.Signal<number>;
+    pollingTotal: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingOverlayComponent, "tb-cd-loading-overlay", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "generating": { "alias": "generating"; "required": false; "isSignal": true; }; "processingDeterminate": { "alias": "processingDeterminate"; "required": false; "isSignal": true; }; "processingIndeterminate": { "alias": "processingIndeterminate"; "required": false; "isSignal": true; }; "fetching": { "alias": "fetching"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const DEFAULT_PAGE_LINK_PAGE_SIZE = 20;
+declare const DEFAULT_PAGE_SIZES: number[];
+
+interface SubscriptionDataKey {
+    name: string;
+    type: DataKeyType;
+    label?: string;
+    decimals?: number;
+    settings?: Record<string, unknown>;
+}
+interface TbSubscriptionDatasourceConfig<T> {
+    ctx: WidgetContext;
+    entityFilter: Signal<EntityFilter>;
+    dataKeys: SubscriptionDataKey[];
+    widgetType: widgetType;
+    keyFilters?: KeyFilter[];
+    dataMapper: (subscription: IWidgetSubscription) => T[];
+    injector: Injector;
+}
+interface TbSubscriptionDatasourcePaginatedConfig<T> extends TbSubscriptionDatasourceConfig<T> {
+    columns: EntityColumn[];
+    pageLink: Signal<PageLink>;
+}
+declare class TbSubscriptionDatasource<T> {
+    private readonly config;
+    readonly data: _angular_core.WritableSignal<T[]>;
+    readonly loadingState: _angular_core.WritableSignal<LoadingState>;
+    private subscription;
+    private subscriptionSub;
+    constructor(config: TbSubscriptionDatasourceConfig<T>);
+    refresh(): void;
+    private recreateSubscription;
+    private onDataUpdated;
+    private cleanup;
+}
+declare class TbSubscriptionDatasourcePaginated<T> {
+    private readonly config;
+    readonly data: _angular_core.WritableSignal<T[]>;
+    readonly totalElements: _angular_core.WritableSignal<number>;
+    readonly loadingState: _angular_core.WritableSignal<LoadingState>;
+    private subscription;
+    private subscriptionSub;
+    constructor(config: TbSubscriptionDatasourcePaginatedConfig<T>);
+    refresh(): void;
+    private recreateSubscription;
+    private onDataUpdated;
+    private toEntityPageLink;
+    private cleanup;
+}
+declare function collectSubscriptionData<T extends {
+    id: EntityId;
+    name: string;
+}>(subscription: IWidgetSubscription, valueTransformer?: (keyName: string, dataPoint: DataEntry | null) => unknown): T[];
+
+export { ActionButtonComponent, BaseTableComponent, DEFAULT_PAGE_LINK_PAGE_SIZE, DEFAULT_PAGE_SIZES, LoadingOverlayComponent, LoadingPhase, TbSubscriptionDatasource, TbSubscriptionDatasourcePaginated, collectSubscriptionData, getLoadingState };
+export type { EntityColumnExtended, LoadingState, SubscriptionDataKey, TableBulkAction, TableHeaderAction, TableRowAction, TableState, TbSubscriptionDatasourceConfig, TbSubscriptionDatasourcePaginatedConfig };