common-header-lib

Angular 20 shared header library for the Arcon platform. Provides the application header bar, LOB selector, user sidebar, notification panel, mailbox panel, waffle (9-dots) app panel, general configuration drawer, and all supporting services.

Current published version: 0.0.19

Architecture

Entry point

src/public-api.ts — exports the module, all components, services, pipes, and models consumed by host applications.

Module

CommonHeaderLibModule — declares and exports all components. Import this in your host AppModule.

Main component

CommonHeaderLibComponent — selector lib-app-header. Thin coordinator that composes all child components and wires the two component-scoped services.

<lib-app-header
  [EnableLOB]="true"
  [showAllLOB]="false"
  (lobSelected)="onLobSelected($event)"
  (timezoneDetails)="onTimezone($event)"
  (getBgImage)="onBgImage($event)"
></lib-app-header>

Child components

| Component | Selector | Responsibility | |---|---|---| | AppPanelComponent | app-app-panel | 9-dots waffle popover, app list, per-app pre-connection validation | | NotificationPanelComponent | app-notification-panel | Notification sidebar, event-wise count, SignalR sync | | UserSidebarComponent | app-user-sidebar | User profile drawer, password change, logout | | UserMailboxComponent | app-user-mailbox | Mail inbox with data table and pagination | | GeneralConfigurationComponent | app-general-configuration | Settings drawer — timezone, landing page, language | | ViewPasswordPopupComponent | app-viewpassword-popup | View stored password dialog | | SidePopupComponent | app-side-popup | Reusable PrimeNG drawer wrapper | | ConfirmDialogComponent | app-confirm-dialog | Reusable confirmation dialog wrapper | | NoServiceMyAccessPgComponent | app-no-service-my-access-pg | Empty / error state placeholder | | NgTranslationComponent | app-ng-translation | Language switcher | | GridPaginationComponent | app-grid-pagination | Reusable paginator |

Component-scoped services

These are provided directly on CommonHeaderLibComponent (providers: [HeaderDataService, LobService]) — they live and die with the component instance.

| Service | Responsibility | |---|---| | HeaderDataService | forkJoin data loading (logo, user info, timezone, notification count, email count), SignalR / timezone / email / translate listeners, all header state as Angular signals | | LobService | LOB list fetch, localStorage pre-selection restore, confirm / revert / validate LOB change |

Other services (singleton, provided in root or module)

HttpCommonService, HttpGeneralConfigService, RestLoginFormService, RestSignalrService, EventService, ToastMsgService, StorageService, CookieStorageManagerService, EncrpDataService, EncryptDecryptRsaService, AsyncPasswordcheckService, VaptValidationService

Inputs & Outputs

CommonHeaderLibComponent

| Name | Type | Direction | Description | |---|---|---|---| | EnableLOB | boolean | Input | Show/hide the LOB dropdown | | showAllLOB | boolean | Input | Include "All LOBs" option in the list | | lobSelected | LobSelectedEvent | Output | Fired when the user confirms a LOB change | | timezoneDetails | TimezoneEvent | Output | Fired when the user saves a timezone | | getBgImage | any | Output | Fired when a background image is configured |

Angular patterns used

• input() / output() / model() signal-based bindings (Angular 17+)
• viewChild.required() signal queries
• inject() for all dependency injection (no constructor injection)
• effect() + untracked() for reactive side effects
• takeUntilDestroyed(DestroyRef) for subscription teardown
• ChangeDetectionStrategy.OnPush on all components
• ViewEncapsulation.None on all components (styles are global, scoped by class names)
• forkJoin for parallel API calls on header init
• Bridge-signal pattern: services expose signal<T> that the component's effect() watches to emit output() events

SCSS structure

All global styles are in src/scss/. The main component imports styles.scss which forwards all partials.

| File | Contents | |---|---| | styles.scss | Orchestrator — @use of all partials | | common-color.scss | CSS custom properties (design tokens) | | _primeng.scss | PrimeNG component overrides | | _dialogs.scss | Modal and dialog overrides | | _sidebar.scss | Sidebar layout | | _mailbox.scss | Mail table and pagination | | _toast.scss | ngx-toastr styles | | _utilities.scss | Shared utility classes |

Component-specific styles live alongside each component in their own .component.scss file (ViewEncapsulation.None).

Security notes

• The HTTP interceptor (http-error-interceptor.service.ts) rejects all outbound requests when the 001-SAC-GEC key is absent from localStorage and throws Unauthorized. This is intentional security design — do not remove or bypass it.
• The AES encryption key stored in localStorage is provided by the host platform and is required to run the library. This is an accepted design decision.

Build

ng build common-header-lib
# Output: dist/common-header-lib

Publish

ng build common-header-lib
cd dist/common-header-lib
npm publish

Generate a new component

ng generate component component-name --project common-header-lib

Unit tests

ng test common-header-lib