Shared library

What it is

src/app/shared/ is the application-wide library: ~67 components, 18 directives, 12 pipes, plus services, interceptors, guards, resolvers, models and utilities. It is imported by every feature module through SharedModule.

The rule for placement: application-wide code lives here; module-wide code lives in that module’s own shared/; component-specific code lives with the component. See the module map.

Several concerns exist in more than one generation. This page names the current one for each. Before adding a shared component, check whether one of the older generations already covers it — and if it does, extend the current one rather than adding a fifth option.

SharedModule exports

Everything below is exported by SharedModule and available in any feature module that imports it.

Tables and grids

Component Status Use

pyb-ag-grid/

Current

The AG Grid wrapper with the project’s defaults. Use this for new grids.

DataTableAgGridComponent

Widely used

AG Grid table with header-template rendering (data-table-ag-grid-header-template-renderer.service.ts) and summed-value headers (services/headers-with-summed-values-setting.service.ts).

DataTableGridComponent

Transitional

Includes ag-greed-data-reshaper.service.ts (sic) reshaping API responses into grid rows.

data-table/

Oldest

Material-table based. Its data-table.common.ts still supplies DataTableQueryParams — the shared query-parameter contract used by services such as BalanceApprovalService, so the folder cannot simply be deleted.

DataGridComponent + DataGridFormatPipe, DataGridOrderByPipe

Light

Small non-AG-Grid grid.

SimpleTableComponent

Light

Fixed short lists.

cell-components/

Shared

AG Grid cell renderers used across all generations — e.g. ActiveContractsStatusCellComponent. Grep before changing one.

PybPaginationComponent

—

Pagination for the non-AG-Grid tables.

AG Grid enterprise features are in use; the licence key is set in main.ts with an expired ExpiryDate, which produces a console warning but does not disable functionality. See technology stack.

Dialogs

Component Use

dialog/ (DialogModule, DialogService, dialog.config.ts)

The dialog opener and shared MatDialogConfig defaults. Use DialogService, not MatDialog directly.

ConfirmDialogComponent

Generic yes/no. data takes title, message, an optional alertMessage rendered above it in a red alert box, and isProceedButtonVisible to swap Yes/No for a Proceed/Close pair whose confirm button proceedLabel can rename.

ConfirmDeleteComponent

Delete confirmation with the item name.

InformationDialogComponent

Informational, single button.

ReasonDialogComponent

Confirmation that requires a free-text reason — used where the reason is persisted (supplier lifecycle actions). Mode enum in shared/enums/reason-dialog-mode.enum.ts.

SummaryDialogComponent

Shows a computed summary before committing.

B2bPreviewDialogComponent

Inline document preview.

EvaConfirmDialogComponent

Confirmation raised on behalf of an embedded EVA frame.

Domain-specific modals live with their feature (the ~20 folders under suppliers/supplier/), not here.

Forms and inputs

Component Use

CardFormgroupComponent + card-formgroup-message.service.ts

The editable-card pattern: titled panel with edit/save/cancel submitting one formGroupKey. This is the UI half of partial editing — the most important shared component in the app.

DynamicFormComponent, DynamicFormFieldComponent, forms/dynamic-form-control.service.ts

Configuration-driven forms, where the field set comes from data (report configuration, onboarding templates).

inline-edit/ — InlineEditTextComponent, …TextareaComponent, …SelectComponent, …DateComponent, …DateAndTimeComponent, …NumberSliderComponent, …SwitchComponent, …YesNoComponent, InlineAddTextComponent, InlineNumberComponent

A full family of in-place editors. Pick the specific one; do not build another.

InputFileComponent

File selection for uploads.

RadiobuttonsComponent, CheckboxFiltersComponent, ChipComponent, TimeSelectComponent

Input primitives.

editor/ (EditorModule)

TinyMCE wrapper for email bodies and rich notes.

DragAndDropListComponent

Ordering UI.

@ultimate/ngxerrors

Declarative validation messages. Legacy; used in older forms.

Display primitives

Component Use

TextValueComponent

Read-only label/value pair.

TitleWithIconComponent

Section header with an icon.

NoDataComponent

Empty state.

SpinnerButtonComponent

Button with an inline progress state.

loading-spinner/, http-loader/ (SpinnerComponent, PreloaderDirective)

The global loading indicators, driven by PendingInterceptorService.

TaskCountBadgeComponent

The sidebar task counters. filterType of currentUser or currentUserGroup. See CRM.

NotyfToastComponent

A toast variant.

ExternalReportComponent

Renders an external report feed. See reports.
Component Use

FilteringPanelComponent
services/filtering-panel-service/filtering-panel.service.ts

Composite filter panel coordinating multiple controls.

FilterControlInputComponent, FilterControlSelectComponent, FilterControlDatepickerComponent

The individual filter controls.

SearchOverlayComponent, SearchOverlaySingleResultComponent, SearchOverlayDirective, OpenSearchOverlayDirective

The global search modal, mounted once in the shell and opened by the sidebar.

search-overlay/search-engine-service-3-0/

SearchEngineService (the internal API’s search3 parameter, with a legacy search2 path still present), ElasticHighlightsService, SearchDataModel.

SearchEngineService.pybEncode percent-escapes ?, =, &, + as ~F, ~3D, ~26, ~2B before sending the phrase — a backend-specific encoding, not URL encoding. search() has its feature check short-circuited to if (1 === 1).

Layout and navigation

Component/directive Use

layout/ — MainLayoutComponent, AppStageInfoComponent, FabHolderNavComponent, LayoutService, layout.enums.ts, store/

The shell. See UI composition.

sidenav/ — AppSidenavComponent, AppSidenavMenuComponent

The sidebar and its hand-maintained menu tree.

AccordionNavDirective, AppendSubmenuIconDirective, HighlightActiveItemsDirective, AutoCloseMobileNavDirective, ToggleOffcanvasNavDirective

Sidebar behaviour.

StickyDirective

Sticky positioning.

DisabledReasonDirective

Shows why a control is disabled — the tooltip pattern used across the supplier workspace where a field is read-only due to status or permission.

AppFooterComponent, PageNotFoundComponent

Footer and 404.

animations/

Shared animation triggers (panel slide, expand/collapse).

Pipes

CapitalizePipe, CurrencyPipe, DatePipe, PercentPipe, EllipsisPipe, FromUnixPipe, KeysPipe, SafeHtmlPipe, SafeValuePipe, FormatPreviewPipe, plus the two data-grid pipes.

CurrencyPipe, DatePipe and PercentPipe here shadow Angular’s built-ins of the same name. Which one a template resolves depends on module import order. When debugging unexpected formatting, check whether the shared pipe is in play.

Documents

Three document backends, three wrappers:

Folder Backend

apps-document/

AppsDocumentService, AppsDocumentDownloadDirective.

b2b-document/

b2bDocumentsApiUrl (+ mock).

pyb-documents/

pybDocumentsApiUrl, behind the PYB_DOCUMENTS flag.

A fourth path exists — s3FilesProviderApi — and deposit-account documents use documentsApiUrl. Which store a given attachment is in is not always inferable from the front end.

EVA and iframes

eva/ (EvaComponent, EvaService, EvaCommunicationService, selector and cookie constants, EvaPermissions) and iframe/ (CommunicationService, ResizeIframeService, IframeComponent, MESSAGE_TYPE). See iframe messaging and EVA.

The error-page game

error-handling/tetris/ — TetrisComponent, BoardComponent, PybtrisButtonsComponent, piece/, game.service.ts, constants.ts, with specs. Shown on the error page. See error handling.

Services in shared/

Service Purpose

services/error-parser/, error-visualization/, error-logger/

The error pipeline. See error handling.

services/long-term-contracts/

Contract templates and supplier contracts (+ abstract + mock). See contracts.

services/cookie-service/

Wrapper over ngx-cookie-service. See caching and persistence.

services/toastr-mock/

Toastr stub for specs.

lookup-service/

LookupAbstractService → LookupRepository: timezones, funding periods, states, countries, transaction types, plus getAuthGoogleLogin. Backs the utils slice.

configs/

ConfigsAbstractService → ConfigsService over global settings, with ConfigTypes / ConfigEmailTypes. See manage.

users/

UsersAbstractService → UsersService, plus UserModel, UserPermModel, PermissionModel and USER_PERMISSION. See authorisation.

feature-flags/

FeatureFlagsService, FeatureFlagsAdminService, FeatureFlagsEvaService, FeatureFlagGuard, EnabledByFeatureFlagDirective. See feature flags.

interceptors/

FetchedRequestsInterceptor and its actions/reducers.

cache/

HttpCacheAbstract → HttpCacheLocalStorage, plus the unregistered CachingInterceptor.

csv-export-service/

CsvExportService. Note dataToString keeps only string values.

sse.service.ts

Server-sent events. See real-time streams.

table-events.service.ts

The in-app publish/subscribe bus.

monitor.service.ts

Segment/GA bootstrap and the KYC guardrail trail. See observability.

version.service.ts

Front-end and back-end versions.

vpn-tester.service.ts

The CHECK_VPN probe.

message.service.ts

Canned message codes (installExtension, cantReceiveToken, inTestEnvironmentsCanOnlyTo) rendered by /welcome/:messageCode.

dynamic-embedder.service.ts

Dynamic component embedding.

logger.ts

Static dev-only console logging.

onboarding/

OnboardingService for onboarding templates (+ mock).

external-report/

The ExternalReports enum and rendering.

Utilities, models and constants

Folder Contents

component-subscriber/

SubscriberComponent — the base class that collects this.subscriptions and unsubscribes on destroy. Extend this rather than hand-rolling takeUntil.

utils/

route-access-resolver.ts (the auth guard), the utils store slice, to-lowercase-underscore.util.ts, track-by-index.util.ts, communication-commands.util.ts, model-interface.ts.

functions/

Pure helpers, e.g. check-for-special-occasion.ts (seasonal theming).

enums/

custom-sort-direction.ts, form-validation-status.enum.ts, icon-class.enum.ts, marketplace.enum.ts, payment-type.ts, reason-dialog-mode.enum.ts, true-false-filter-amount.enum.ts.

consts/

supplier-status.enum.ts (SUPPLIER_STATUS), available-statements.const.ts, pyb-products.const.ts, uw-tool.enum.ts, general-error-message.ts.

models/

key-value.ts, uw-tool-entity.model.ts and other cross-cutting types.

interfaces/

ServiceUpdatePartialInterface — saveItemPart(itemKey, itemPart, …​params), the contract that makes partial editing work uniformly.

resolvers/

SupplierKeyResolver (+ mock).

Choosing what to use

Need Reach for

A data grid

pyb-ag-grid.

An editable panel on a supplier tab

CardFormgroupComponent with a unique formGroupKey.

An inline field edit

The specific inline-edit/ component.

A confirmation

DialogService + ConfirmDialogComponent, or ReasonDialogComponent when a reason must be recorded.

A user-facing error

ErrorVisualizationService.showError({ name, errorObject }).

Subscription cleanup

Extend SubscriberComponent.

Reference data (states, countries, timezones)

Dispatch FetchUtilAttribute and select from the utils slice — do not call LookupRepository directly.

A CSV download

CsvExportService.exportCsv with a prepared string, or the report make_dump path for large exports.

Telling another component to refresh

TableEventsService, registering the listener once.

Adding to shared/

  1. Confirm the need is genuinely application-wide. If only one module uses it, it belongs in that module’s shared/.

  2. Check the older generations first — especially for tables and dialogs.

  3. Create shared/<name>/ with the component, template, styles and spec.

  4. Declare and export it in SharedModule.

  5. Avoid ViewEncapsulation.None unless the styles genuinely must be global (AppStageInfoComponent, TaskCountBadgeComponent, SelectorFormComponent and the event-rule forms use it — the pattern is not a recommendation).

  6. Do not import from a feature module. The two existing violations (EvaCommunicationService and LookupRepository reaching into suppliers/model) are debt, not precedent — see architectural overview.

  7. Document it here.