@junte/ui/README.md

Quality Angular UI components kit

![pipleline](https://gitlab.com/junte/junte-ui/badges/master/pipeline.svg)
# Quality Angular UI components kit
Rich & fully native components collection for your beautiful 🤩 angular apps! 

See more demos here 👉 https://junte-ui.com/

## Killer features
* 60 native components - no third parties
* separated styles from components with themes support
* building your own iconsets
* SASS mixins API for customizing components in the context
* useful builders for each component with code generation
* mobile components adaptation from box

## How to install
Install angular `ngc` if you have no yet.
```
sudo npm i -g @angular/cli
```

Create a new angular project
```bash
ng new junte-ui-test --style=scss --routing=false
cd junte-ui-test
```

Install `Junte UI` package
```bash
npm install @junte/ui  --save-dev
```
Import `Junte UI` & `Browser Animations` modules into your app module in `src/app/app.module.ts`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { JunteUiModule } from '@junte/ui';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JunteUiModule.forRoot(), 
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
Import styles and assets in `angular.json`
```json
{
  "options": {
    "assets": [
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/fonts/junte-ui-icons-default/",
        "output": "./assets/fonts/icons/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/icons/animated/",
        "output": "./assets/icons/animated/"
      },
      {
        "glob": "**/*",
        "input": "node_modules/@junte/ui/lib/assets/icons/svg/",
        "output": "./assets/icons/svg/"
      }
    ],
    "styles": [
      "src/styles.scss",
      "node_modules/@junte/ui/lib/assets/fonts/junte-ui-icons-default/junte-ui-icons-default-font.scss",
      "node_modules/@junte/ui/lib/assets/fonts/open-sans/regular-400.scss"
    ]
  }
}
```

Import the styles into the global app styles `src/styles.scss`
```scss
/* You can add global styles to this file, and also import other style files */
@import "~@junte/ui/lib/assets/styles/jnt-all";
@import "~@junte/ui/lib/assets/styles/jnt-common";
body {
      font-family: $jnt-font-family-base;
      font-weight: $jnt-font-weight-light;
      font-size: $jnt-font-size-normal;
      color: $jnt-primary-text-color;
      margin: 20px;
}
```
Bingo 👏 Start your project.
```bash
ng serve
``` 

It is a very fast but rude installation with importing all components & assets.

## How to try
You can go to research all components specifications https://junte-ui.com/

For fast test add link to `UI` enum in `src/app/app.component.ts`
```typescript
import { Component } from '@angular/core';
import { UI } from '@junte/ui';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    ui = UI; // link to junte UI enum
}
```

Add `jnt-button` in to your `src/app/app.component.html`

```html
<jnt-button text="Click on me"
    [icon]="ui.icons.user">
    <jnt-badge [value]="5"></jnt-badge>
</jnt-button>
```

You should see the button 😎

Problems 🙀? Please, add issue an here 👉 https://gitlab.com/junte/junte-ui/-/issues