Beacon Platform UI

About

This library is intended to define styles for Beacon Platform projects and create useful components that can be shared across apps.

It also contains style overrides for elements from commonly used dependencies like:

"@angular/material"
"ngx-bootstrap"
"ngx-infinite-scroll"
"@ng-select/ng-select"
"ngx-mask"
"ngx-quill"
"ngx-toastr"

Using in a Beacon Platform application

First determine which version of Angular is or will be used in the frontend application. The MAJOR version of Angular will match 1-to-1 with the Beacon Platform UI, so Angular 18 apps will use Beacon Platform UI version 18, Angular 16 will use Beacon Platform UI version 16, etc.

Example:

1. The frontend application will use Angular 17.X.X
2. The Beacon Platform UI version to use would be v17 and should include the latest minor and patch updates, which can be installed like this:

$ npm install @beacon-interactive-systems-llc/beacon-platform-ui@^17,

Be sure that core dependencies of the Angular application match those of the Beacon Platform UI.

Then, add this line to the application styles.scss @import "@beacon-interactive-systems-llc/beacon-platform-ui/styles/styles.scss";

That's it!

Documentation

The library defines and exports several key dependencies: stylesheets, static assets and shared components

Stylesheets

Defined in node_modules\@beacon-interactive-systems-llc\beacon-platform-ui\styles, these stylesheets are named after the components/dependency/library they affect:

_material_drawer.scss will contain style overrides for the Angular Material DrawerModule _forms.scss will contain styling for form inputs, dropdowns _theming.scss will contain important definitions for DEFAULT, DARK and HIGH_CONTRAST modes etc.

Any further customization that is required should be done at the component level in the application itself, or, if a global change is warranted a request should be made to Platform UI developers (Nina P, Andy S, Nathan B) so a new patched version can be created and pushed for all apps to use.

Static Assets

Beacon Platform apps will use variations of Roboto fonts, found in /fonts Custom icons (as in, those not added using the Angular Material Icons library) will be added over time to /icons

Shared Components

Two useful support components are available in /lib

1. DeviceDetector can be used to find important information and device resolution, operating system etc.
2. NetworkConnectionService will track changes in the status of the network connection and provide interfaces for isOnline and isOffline