<p align="center">
  <img height="96px" width="96px" style="text-align: center;" src="https://static.life.ai/app-icons/ring-icon-white-96x96.png">
</p>

# la-ngx-library - Sample component library of one awesome development team

## Status

* click on a label to see issues

| Label | Description |
|-------|-------------|
| [not-started](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Anot-started+) | Work on issue/component is not yet started |
| [in-progress](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Ain-progress+) | Work in progress |
| [pull-request-pending](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Apull-request-pending+) | Pull request has been created and is waiting for peer review |
| [finished](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Afinished+) | Work on issue is finished, but may not yet be included into library release |
| [deployed](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue++label%3Adeployed+) | Component is now a part of the library release, and can be used by other users |
| [in-use](https://github.com/LIFEAI/la-ngx-library/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Ain-use+) | Component is being used in the Web frontend at least on one screen |


## Demo

View all the directives in action at https://LIFEAI.github.io/la-ngx-library

## How To Videos
* [la-ngx-library Overview](https://youtu.be/bY8XmSoP5L0)
  * Library overview
  * Wiki
  * Git Issues
  * components as modules
  * `src`, `tmp`, `dist`, `demo` folders
  * `gulpfile.js` - example
  * `angular.json` - example
  * How to work with Zeplin, SCSS module for Zeplin, colors, icons
* [la-ngx-library live coding icons release](https://youtu.be/imddsjn_3FY)
  * Live coding on icon component
  * working with SVG icons, optimizing, making SVG sprites, fixing SVG icons
  * How to make new library release, demo, docs, npmjs

## Dependencies
* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0)

## Installation
Install above dependencies via *npm*. 

Now install `@lifeai/la-ngx-library` via:
```shell
npm install --save @lifeai/la-ngx-library
```

---
##### SystemJS
>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
In your systemjs config file, `map` needs to tell the System loader where to look for `la-ngx-library`:
```js
map: {
  'la-ngx-library': 'node_modules/@lifeai/la-ngx-library/bundles/la-ngx-library.umd.js',
}
```
---

Once installed you need to import the main module:
```js
import { LaButtonModule } from '@lifeai/la-ngx-library';
```
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ` LaButtonModule .forRoot()`):
```js
import { LaButtonModule } from '@lifeai/la-ngx-library';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [LaButtonModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

Other modules in your application can simply import `LaButtonModule `:

```js
import { LaButtonModule } from '@lifeai/la-ngx-library';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [LaButtonModule, ...], 
})
export class OtherModule {
}
```

Add Support for Icons

* update your `angular.json` to ship library icons during build

```
"assets": [
  ...,
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/assets/",
    "output": "./assets/"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/sprites/",
    "output": "./assets/"
  }
],
"styles": [
  ...,
  "node_modules/@lifeai/la-ngx-library/style/colors.scss",
  ...,
  "src/styles.scss"
],
```

## Usage
##### Button

``` 
<la-button [kind]="'primary'" [isDisabled]="true" [isHover]="true" [isWide]="true">Button</la-button>
```
##### Empty State
   
   ``` 
    <la-empty [name]="'messages'">
             <la-text [kind]="'title-2'">No Items found</la-text>
             <la-text [kind]="'title-2'">Create new message to start filling up space</la-text>
    </la-empty>
   ```

## License

Copyright (c) 2019 LifeAI