npm package: @infrabel-ui/components
Description: Collection of components implementing infrabel build/signaling design system.
Latest version: 0.0.31

# @infrabel-ui/components

Collection of components implementing infrabel build/signaling design system.

# Installation

`yarn add @infrabel-ui/components`

# Usage

To use components from this library, you will need to do the following:

1. import `InfrabelComponentsModule` into your Angular Module
```
import { InfrabelComponentsModule } from '@infrabel-ui/components';
...
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, InfrabelComponentsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

2. Import the **scss** files to your project, for example adding it to an angular project make sure to add it to this array:

`angular.json (workspace.json) > projects > {NAME_OF_YOUR_PROJECT} > architect > build > options`

```
// Content of angular.json
...
"options": {
    "stylePreprocessorOptions": {
        "includePaths": [
        ...
        "./node_modules/@infrabel-ui/styles/src",
        "./node_modules/@infrabel-ui/styles/src/infrabel-ui",
        "./node_modules/@infrabel-ui/components/src/infrabel-ui-components"
        ]
    },
}
```

3. Add `@import "infrabel-ui-components";` to your main style file in your project (e.g. `style.scss`).

# Icons configration 
Material design icons are supported by default, if you need to load other icon set (e.g. Font Awesome), you will need to load the fonts inside your app.
for example: 
```
  ... Inside <head> tag:
  <script src="https://kit.fontawesome.com/YOUR_FONT_AWESOME_KEY.js" crossorigin="anonymous"></script>
```

And use them inside your app like this:
```
  // Somewhere inside your app:
  this.appService.initialize({
    navigationConfig: {
      head: {
        icon: 'fa-address-book',
        iconSet: 'fas',
        label: 'B-S Design System',
        target: 'home'
      },
      items: []
    })
```


# Example 

TBD


# Table of contents

| Name                    | type      | Description                                                                 |
| ----------------------- | --------- | --------------------------------------------------------------------------- |
| `infrabel-ui-button`    | component | Base and variant styles button                                              |
| `infrabel-ui-app-shell` | component | Application shell contining: Menu, Context Menu, Frame, Navigation and more |
| `AppConfigService`      | service   | Angular root service providing an API to interact with app shell            |

# Development

To use the library locally follow the fellowing steps:

- Run `yarn link` inside `dist/libs/components`.
- Run `yarn link "@infarbel-ui/components"` inside the root folder of your own project.
- Run `yarn build --watch` inside the root folder of this library.
- To trigger a change you must save any `.ts` file, saving `.scss` won't do anything.
- To unlink your project from the local development run `yarn unlink "@infrabel-ui/components"` inside the root folder of your own project.

# Publish to npm

TBD