Please refer to the playground for further documentation.
To install the library into your project please run npm i @safetyio/ng-ui-components
To include the playground icon-font and styles to your Angular project simply add the following import statement to your (Angular) application styles.css file.
@import '../node_modules/@safetyio/ng-ui-components/sio-common.scss';
@import '../node_modules/@safetyio/ng-ui-components/src/assets/styles/css/fonts/msa-icon-font/msa-icon-font.css';Once the library is installed Sio modules and standalone components are available to be imported into your application. These modules and components include:
SioAlertsModule
SioBannersModule
SioButtonsModule
SioFormItemsModule
SioNavigationModule
SioChipsModule
SioProgressModule
SioPressureGagesModule
SioScrollersModule
SioTooltipDirective
SioChartsModule
SioAccordionModule
SioPasswordStrengthMeterModule
SelectComponent
OptionComponent
SioNavTabsComponent
Simply add these to the imports section of you app.module.ts file in your Angular application. The library
components
will then be available to use.
Please note: The library uses the Roboto and Material Icons font. These are listed as a peerDependency and if not
already included in your application you will need to install them manually (this is due to npm no longer manually
installing peerDependencies).
The following components are available:
<sio-alert>
<sio-banner>
<sio-chip>
[sioDefaultButton]
[sioInput]
[sioRadio]
[sioCheckbox]
<sio-side-menu>
<sio-tabs>
<sio-progress-bar>
<sio-dial-gage>
<sio-scroll-to-top>
[sioTooltip]
<sio-donut-chart>
<sio-spinner>
<sio-linear>
<sio-accordion>
<sio-toggle-menu>
[sio-slider]
[sioToggleOption]
<sio-nav-tabs>
The aforementioned components and directives have the following Input/Output structure, this is all documented in the playground.
<sio-toggle-menu
(toggleChange)="fn($event)"
[buttonSize]="string"
[selectedStyle]="'default' | 'primary'"
[toggleStyle]="'default' | 'rounded'">
<button>Option 1</button>
<button>Option 2</button>
<button (click)="fn($event)">Option 3</button>
</sio-toggle-menu><button [sioToggleOption]="T">Option 1</button> <sio-alert
[type]="'success' | 'info' | 'error' | 'alarm' | 'warn'"
[heading]="string"
[details]="boolean"
[message]="string | HTML"
[compact]="boolean"
[pulse]="boolean">
<!-- optional html or Angular Component if details === true -->
</sio-alert><sio-banner
[canClose]="boolean"
[autoFade]="boolean"
[sticky]="boolean"
styling="string"
type="string"
message="string">
</sio-banner><button
type="string"
sioDefaultButton
[fluid]="boolean"
[buttonSize]="string"
[buttonStyle]="string"
[materialIcon]="string"
[msaIcon]="string"
[whiteIcon]="boolean"
[rightMargin]="boolean"
[rightIcon]="boolean"
[rotate]="boolean"
[toggleRotate]="boolean"
[centered]="boolean">
Button Text
</button><input sioInput
type="string"
name="string"
fill="flex | width"
placeholder="string"
formControlName="string"
[label]="'string'"
[helperText]="'string'"
[iconType]="IconType"
[errors]="string[]"
[iconPlacement]="IconPlacement">Notice that this component uses the IconType and IconPlacement types which take the following structure:
export type IconType = 'search' | 'email' | 'password' | 'clear';
export type IconPlacement = 'left' | 'right';<input
sioCheckbox
[label]="'string'"
[indeterminate]="boolean"
[boldLabel]="boolean"
[checked]="boolean"><input
sioNumber
[controls]="boolean"
[unit]="'string'"
[subLabel]="'string'"><input type="radio" sioRadio><input type="radio" sioToggleSwitch><select
sioSelect
selectPlaceholder="string"
selectOptions="string[] & SioSelectOption[]">
<option value="string">string</option>
</select>Notice this uses an optional SioSelectOption type that takes the following structure:
export interface SioSelectOption {
label: string;
value: any;
selected?: boolean;
}<!-- single choice select -->
<sio-select placeholder="Choose a number" [(ngModel)]="formValue">
<sio-option>--</sio-option>
<sio-option [value]="0">Zero</sio-option>
<sio-option [value]="1">One</sio-option>
<sio-option [value]="2">Two</sio-option>
</sio-select>
<!-- multiple choice select -->
<sio-select placeholder="Where do you want to go?" [(ngModel)]="formValue">
<sio-option [value]="berlin">Berlin</sio-option>
<sio-option [value]="london">London</sio-option>
<sio-option [value]="paris">Paris</sio-option>
<sio-option [value]="rome">Rome</sio-option>
</sio-select>The component works with both Reactive and Template-driven form. It can also be used with two-way binding. It supports both single and multiple choice.
<input
sioSlider
type="range"
min="number"
max="number"><sio-side-menu
[showNavigation]="boolean"
[menuOpen]="boolean"
[routes]="routes"
[activeRoute]="number"
[closeLogo]="string"
[openLogo]="string"
(hrefClicked)="fn($event)">
</sio-side-menu>Notice that this component uses the routes type which takes the following structure:
export interface Route {
id: string; // this is used within the template for submenus... must be unique and contain no spaces
label: string;
href?: string;
icon?: string;
children?: ChildRoute[];
}
export interface ChildRoute {
label: string;
href: string;
icon?: string;
}<sio-tabs [tabs]="tabs[]"
[vertical]="boolean"
[separate]="boolean"
[tabWidth]="number"
[indent]="boolean"
[greyMode]="boolean"
[contentPadding]="boolean"
[noContentBorder]="boolean"
[tabBackground]="string"
[contentPaddingManual]="string"
[initialTabIndent]="string"
(clickedTab)="fn($event)">
</sio-tabs>
<!-- manual implementation -->
<sio-tabs [manual]="boolean" [tabs]="tabs[]">
<div #manualcontents>Put content here</div>
</sio-tabs>Notice this uses a tabs type that takes the following structure:
export interface Tab {
label: string;
icon?: string;
selected: boolean;
html?: string;
component?: ComponentReference;
dataTest?: string;
contentDataTest: string;
inputs?: any; // object { key: value, key: value }
}<sio-nav-tabs [tabs]="tabs[]"></sio-nav-tabs>Notice this uses a tabs type that takes the following structure:
export type NavTab = {
path: string;
label: string;
dataTest?: string;
}<sio-chip
label="string"
chipType="string"
chipStyle="string"
[addSpacing]="boolean"
[canClose]="boolean"
[collapse]="boolean"
[hideIcon]="boolean"
[capitalise]="boolean"
(chipClosed)="fn(foo)">
</sio-chip><sio-progress-bar max="number"
value="number"
type="string"
[fluid]="boolean">
</sio-progress-bar><sio-dial-gage
[value]="number"
[unit]="string"
[maxValue]="number">
</sio-dial-gage><sio-scroll-to-top
[positionLeft]="string"
[positionBottom]="string"
[fixed]="string"
[animate]="boolean">
</sio-scroll-to-top><!-- can be any HTML element -->
<a href="#" sioTooltip="string | NgTemplate"></a><sio-donut-chart
[type]="'success' | 'info' | 'error' | 'alarm' | 'warn'"
[label]="string"
[borderWidth]="string"
[percentage]="number"
[rounded]="boolean"
[animate]="boolean">
</sio-donut-chart><sio-spinner
[spinner]="'default' | 'stretch' | 'circle'"
[size]="'small' | 'medium' | 'large' | 'xlarge'">
</sio-spinner><sio-linear></sio-linear><sio-accordion
[heading]="string"
[headingSize]="number"
[isOpen]="boolean"
[indent]="string">
<!-- content here -->
</sio-accordion><div
[sioLoadingPlaceholder]="boolean">
<!-- content here -->
</div>The UI Components Library (@safetyio/ng-ui-components) has been upgraded so that it now contains a local version of the MSA icon-font. The reasons for this were/are: The generator used in the exiting icon-font project MsaIconFont was last published 7 years ago and has thus come to the end of its lifecycle. The project was Ruby based whilst a NodeJS based project would be more inline with our techstack. The names of the SVGs used to produce the icon-font followed no naming convention and thus the generated css classes had no uniform naming convention. This has been resolved and is the main source of the breaking changes. thus previous css class names like 'msa-No-Connection--2x' has been changed to 'msa-no-connection', A map for old to new CSS classnames is provided. The final reason for the move was that moving the generated icon-font from one project to the next and next was problematic and due to its many stages introduced risk. Moving the icon-font to the UI components library removes the need to copy and paste the icon-font between projects. Increasing the number of icons to the internal library is simplified and quickened.
A class name map is provided, you will need to find and replace the previous class names with the updated class names. The object keys are the previous css name values, the object values are the new css class names. You will need to do a find and replace within your host application to update your class name references or breakages will occur.
{
'msa-360x1': 'msa-360',
'msa-360_hardware_error': 'msa-360-hardware-error',
'msa-2-way-communication-2x': 'msa-two-way-communication',
'msa-Admin--2x': 'msa-admin',
'msa-Cleaning': 'msa-cleaning',
'msa-Cloud': 'msa-cloud',
'msa-Color-2x': 'msa-color',
'msa-Filter---2x': 'msa-filter',
'msa-LTE-lost-signal-1x': 'msa-lte-lost-signal',
'msa-No-Connection--2x': 'msa-no-connection',
'msa-Persona-Remove-2x': 'msa-persona-remove',
'msa-SCBA-lost-connection': 'msa-scba-lost-connection',
'msa-SCBA-secondary': 'msa-scba-secondary',
'msa-STEL': 'msa-stel',
'msa-Shopping-Basket--2x': 'msa-shopping-basket',
'msa-TWA': 'msa-twa',
'msa-a4x_a5x_hardware_error': 'msa-a4x-a5x-hardware-error',
'msa-alarmBar': 'msa-alarm-bar',
'msa-alarmCircle': 'msa-alarm-circle',
'msa-arrow_circle_right': 'msa-arrow-circle-right',
'msa-arrow_left': 'msa-arrow-left',
'msa-arrow_right': 'msa-arrow-right',
'msa-assets-2x': 'msa-assets',
'msa-barcodeScan': 'msa-barcode-scan',
'msa-battery-powered-2x': 'msa-battery-powered',
'msa-bumpdue': 'msa-bump-due',
'msa-bluetoothCircle': 'msa-bluetooth-circle',
'msa-brightness-2x': 'msa-brightness-2',
'msa-calBottle': 'msa-cal-bottle',
'msa-calendarDue': 'msa-calendar-due',
'msa-calendarWarn': 'msa-calendar-warn',
'msa-checkList': 'msa-checklist',
'msa-closeCircle': 'msa-close-circle',
'msa-cloud_done': 'msa-cloud-done',
'msa-cloud_download': 'msa-cloud-download',
'msa-cloud_sync': 'msa-cloud-sync',
'msa-code_black': 'msa-code',
'msa-comments': 'msa-comments',
'msa-company-Info-2x': 'msa-company-info',
'msa-csv-document-2x': 'msa-csv-document',
'msa-customers-2x': 'msa-customers',
'msa-cylinder-empty--2x': 'msa-cylinder-empty',
'msa-cylinder-empty--horizontal-2x': 'msa-cylinder-empty-horizontal',
'msa-cylinder-empty-2x': 'msa-cylinder-empty',
'msa-cylinder-fills--2x': 'msa-cylinder-fills',
'msa-cylinder-fills-2x': 'msa-cylinder-fills-horizontal',
'msa-cylinder-fills--horizontal-2x': 'msa-cylinder-fills-horizontal',
'msa-data-2x': 'msa-data-black',
'msa-documents': 'msa-document-black',
'msa-document-configuration-2x': 'msa-documents',
'msa-documents2': 'msa-document',
'msa-donut_large': 'msa-donut-large',
'msa-donut_small': 'msa-donut-small',
'msa-download-alt-2x': 'msa-download-2',
'msa-evacuate-2x': 'msa-evacuate',
'msa-gasEmpty': 'msa-gas-empty',
'msa-gasLow': 'msa-gas-low',
'msa-general-device-2x': 'msa-general-device',
'msa-general-device-lost-connection-2x': 'msa-general-device-lost-connection',
'msa-get_out': 'msa-get-out',
'msa-hardware-error-1x': 'msa-hardware-error',
'msa-hardware-error-SCBA-2x': 'msa-hardware-error-scba',
'msa-hardware-error-lunar-2x': 'msa-hardware-error-lunar',
'msa-high_value': 'msa-high-value',
'msa-hydro-test--2x': 'msa-hydro-test',
'msa-iOSshare': 'msa-ios-share',
'msa-icEvent': 'msa-ic-event',
'msa-ic_exit_to_app': 'msa-ic-exit-to-app',
'msa-ic_wifi': 'msa-ic-wifi',
'msa-ic_wifi_lost': 'msa-ic-wifi-lost',
'msa-incidentsHistory': 'msa-incidents-history',
'msa-incomplete_circle': 'msa-incomplete-circle',
'msa-information-2x': 'msa-information',
'msa-instantalarm': 'msa-instant-alarm',
'msa-instrumentHistory': 'msa-instrument-history',
'msa-keyboard_arrow_down': 'msa-keyboard-arrow-down',
'msa-keyboard_black': 'msa-keyboard-black',
'msa-label-manager-2x': 'msa-label-manager',
'msa-languages-2x': 'msa-languages',
'msa-list-view-2x': 'msa-list-view',
'msa-liveData': 'msa-live-data',
'msa-low_value': 'msa-low-value',
'msa-lunar_lost_connection': 'msa-lunar-lost-connection',
'msa-maintenance-2x': 'msa-maintenance',
'msa-man-down-2x': 'msa-man-down',
'msa-mandown': 'msa-mandown-label',
'msa-manual-alarm--1x': 'msa-manual-alarm',
'msa-manufacturerCircle': 'msa-manufacturer-circle',
'msa-matClose': 'msa-mat-close',
'msa-matEmail': 'msa-mat-email',
'msa-matEye': 'msa-mat-eye',
'msa-matEyeOff': 'msa-mat-eye-off',
'msa-matKeyboardArrowDown': 'msa-mat-keyboard-arrow-down',
'msa-matRefresh': 'msa-mat-refresh',
'msa-matRightArrow': 'msa-mat-right-arrow',
'msa-matSearch': 'msa-mat-search',
'msa-menu-2x': 'msa-menu',
'msa-network-2x': 'msa-network',
'msa-news-2x': 'msa-news',
'msa-opticalScan': 'msa-optical-scan',
'msa-parts-2x': 'msa-parts',
'msa-pdf-document-2x': 'msa-pdf-document',
'msa-phonelink_erase': 'msa-phonelink-erase',
'msa-phonelink_lock': 'msa-phonelink-lock',
'msa-phonelink_off': 'msa-phonelink-off',
'msa-phonelink_ring': 'msa-phonelink-ring',
'msa-phonelink_setup': 'msa-phonelink-setup',
'msa-pin_number': 'msa-pin-number',
'msa-power-2x': 'msa-power-2',
'msa-print-2x': 'msa-print-2',
'msa-pulse_check': 'msa-pulse-check',
'msa-pumpfault': 'msa-pump-fault',
'msa-purchase-order-2x': 'msa-purchase-order',
'msa-qrCode': 'msa-qr-code',
'msa-radio_connection_repeater': 'msa-radio-connection-repeater',
'msa-refresh-2x': 'msa-refresh',
'msa-refreshCircle': 'msa-refresh-circle',
'msa-remove_outlined': 'msa-remove-outlined',
'msa-running-man-2x': 'msa-running-man',
'msa-sdCard': 'msa-sd-card',
'msa-search-2x': 'msa-search',
'msa-signal-celular-2x': 'msa-signal-celular',
'msa-sortAscending': 'msa-sort-ascending',
'msa-sortDescending': 'msa-sort-descending',
'msa-statistocs-2x': 'msa-statistics',
'msa-success-doble-check-2x': 'msa-success-double-check',
'msa-successCircle': 'msa-success-circle',
'msa-target-1x': 'msa-target',
'msa-temperature-2x': 'msa-temperature',
'msa-thumbtack-off-2x': 'msa-thumbtack-off',
'msa-thumbtack-on-2x': 'msa-thumbtack-on',
'msa-tile-view-2x': 'msa-tile-view',
'msa-toggle_on': 'msa-toggle-on',
'msa-track_changes': 'msa-track-changes',
'msa-upload-alt-2x': 'msa-upload-alt',
'msa-volume_level': 'msa-volume-level',
'msa-waiting-2x': 'msa-waiting-2',
'msa-wave_sensors': 'msa-wave-sensors',
'msa-wave-sensors': 'msa-wave-sensors-off',
'msa-work-Orders-2x': 'msa-work-orders',
'msa-work-folder-2x': 'msa-work-folder',
'msa-zoomToLocation': 'msa-zoom-to-location',
'msa-gas_bump-3x': 'msa-gas-bump-icon',
'msa-group3': 'msa-group-tick'
}Moving forward should you want to continue using the UI components library your application will have to update the css class names for the msa icon-font. Should you not wish to do this then continue to use the MsaIconFont and continue to use @safetyio/ng-ui-components 1.1.1.
The Grid team will no longer support the use of MsaIconFont with @safetyio/ng-ui-components