# Components

## Fonts

Basier 400 normal
Basier 500 normal
Basier 600 normal
Basier 700 normal
Basier 400 italic
Basier 500 italic
Basier 600 italic
Basier 700 italic

## Containers

normal normal normal normal pressed small small pressed `<neu-container style="width: 600px; height: auto;">
<neu-container style="min-width: 400px; width: 100%; height: 100px;">normal</neu-container>
<neu-container style="min-width: 400px; width: 100%; height: 100px;">normal</neu-container>
<neu-container style="min-width: 400px; width: 100%; height: 100px;">normal</neu-container>
</neu-container>
<neu-container neu_pressed style="width: 600px; height: 100px;">normal pressed</neu-container>
<neu-container neu_small style="width: 150px; height: 60px;">small</neu-container>
<neu-container neu_pressed neu_small style="width: 150px; height: 60px;">small pressed</neu-container>`

El que canvia d'un normal a un small (.neu-small) és que la intensitat de la sombra disminueix i el border-radius també.

## Dropdown

opcio 1 opcio 2 opcio 3 opcio 4 opcio 5 opcio 6 `<neu-select [(ngModel)]="dropdown_val" [placeholder]="'Selecciona'">
<neu-option [value]="1">opcio 1</neu-option>
<neu-option [value]="2">opcio 2</neu-option>
</neu-select>`

Valor del dropdown: {{ dropdown_val }}

## Buttons

Here are some buttons

They support type and routerlink and disabled

Botón sin color Botón sin color con icono Botón sin color con icono Botón con color Botón con color con icono Botón con color con icono Botón round Botón round con ícono Botón round con ícono Botón small sin color Botón small con color Botón small sin color round Botón small con color round Botón full width
`<neu-button>Botón sin color</neu-button>
<neu-button><i class="fab fa-amazon-pay"></i>Botón sin color con icono</neu-button>
<neu-button>Botón sin color con icono<i class="fab fa-amazon-pay"></i></neu-button>
<neu-button color="primary">Botón con color</neu-button>
<neu-button color="primary"><i class="fab fa-amazon-pay"></i>Botón con color con icono</neu-button>
<neu-button color="primary">Botón con color con icono<i class="fab fa-amazon-pay"></i></neu-button>
<neu-button shape="round">Botón round</neu-button>
<neu-button shape="round"><i class="fab fa-amazon-pay"></i>Botón round con ícono</neu-button>
<neu-button shape="round">Botón round con ícono<i class="fab fa-amazon-pay"></i></neu-button>
<neu-button size="small">Botón small sin color</neu-button>
<neu-button color="primary" size="small">Botón small con color</neu-button>
<neu-button size="small" shape="round">Botón small sin color round</neu-button>
<neu-button color="primary" size="small" shape="round">Botón small con color round</neu-button>
<neu-button color="primary" size="full-width" >Botón full width</neu-button>
`

## Inputs

Tots suporten "value", "required", "disabled", "name".

Més info aquí.

### type="text"

Suporta atributs "placeholder", "size", "pattern".

`<neu-input type="text" [(ngModel)]="inputtext_val" placeholder="text normal amb placeholder" name="prova"></neu-input>
<neu-input type="text" placeholder="disabled" name="prova" disabled></neu-input>`

valor del text input: {{ inputtext_val }}

### type="number"

Suporta atributs "max", "min", "placeholder", "step".

`<neu-input type="number" placeholder="type num placeholder" [(ngModel)]="inputnum_val"></neu-input> <neu-input type="number" placeholder="amb mins i maxs" min="2" max="5"></neu-input>`

valor del num input: {{ inputnum_val }}

### type="email"

Suporta atributs "placeholder", "pattern", "size".

`<neu-input type="email" placeholder="email" required [(ngModel)]="inputemail_val"></neu-input>`

valor del email input: {{ inputemail_val }}

### type="password"

Suporta atributs "placeholder".

`<neu-input [(ngModel)]="inputpassword_val" type="password" placeholder="password" required></neu-input>`

valor del password input: {{ inputpassword_val }}

### type="time"

Suporta atributs "max", "min", "step".

`<neu-input type="time" [(ngModel)]="inputtime_val"></neu-input>
<neu-input type="time" step="5"></neu-input>`

valor del time input: {{ inputtime_val }}

### type="date"

Suporta atributs "max", "min", "step".

`<neu-input type="date" [(ngModel)]="inputdate_val"></neu-input>`

valor del date input: {{ inputdate_val }}

### type="datetime-local"

Suporta atributs "max", "min", "step".

`<neu-input type="datetime-local" [(ngModel)]="inputdatetime_val"></neu-input>`

valor del datetime input: {{ inputdatetime_val }}

### textarea

Suporta atributs "cols", "placeholder", "rows".

`<neu-input type="textarea" placeholder="placeholder textarea" [(ngModel)]="textarea_val"></neu-input>`

valor del textarea: {{ textarea_val }}

## Radio buttons

opcio 1 opcio 2 opcio 3 `<neu-radio-group [(ngModel)]="radio_val">
<neu-radio-button [value]="1">opcio 1</neu-radio-button>
<neu-radio-button [value]="2">opcio 2</neu-radio-button>
<neu-radio-button [value]="3">opcio 3</neu-radio-button>
</neu-radio-group>`

Valor del radio: {{ radio_val }}

## Checkbox

Checkbox text
`<neu-checkbox [(ngModel)]="checkbox_val">Checkbox text</neu-checkbox>`

Valor del checkbox: {{ checkbox_val ? "True" : "False" }}

## Paginator

page: {{ page }}

`<neu-paginator [length]="111" [pageSize]="10" [(page)]="page"></neu-paginator>`

Input: [length], [pageSize] i [page]. Output: (page)

## Table

basic

Col 1 | Col 2 (class .expand + .sortable.up) | Col 3 | Col 4
--- | --- | --- | ---
{{ i+1 }} | {{ country.name }} | {{ country.area }} | {{ country.population }}

`<div class="neu-container">
<table class="neu-table">
<thead>
<tr>
<th>Col 1</th>
<th class="sortable up">Col 2 (class .expand + .sortable.up)</th>
<th class="sortable down">Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries; let i = index;">
<th> i+1 </th>
<td class="expand"><img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" style="width: 20px; margin-right: 20px;"> country.name </td>
<td> country.area }}</td>
<td> country.population </td>
</tr>
</tbody>
</table>
</div>`

Els sort, es poden fer amb un (click) al th. Afegir classe "sortable" + "up"/"down".

## Expansion panel

Accordion title Accordion description

Aixo és contingut de prova, a veure si funciona

Guardar Accordion title Accordion description Content inside `<neu-accordion>
<neu-expansion-panel>
<neu-expansion-panel-header>
<neu-panel-title>Accordion title</neu-panel-title>
<neu-panel-description>Accordion description</neu-panel-description>
</neu-expansion-panel-header>
<p>Aixo és contingut de prova, a veure si funciona</p>
<neu-input type="text"></neu-input><br>
<neu-button color="primary">Guardar</neu-button>
</neu-expansion-panel>
<neu-expansion-panel>
<neu-expansion-panel-header>
<neu-panel-title>Accordion title</neu-panel-title>
<neu-panel-description>Accordion description</neu-panel-description>
</neu-expansion-panel-header>
Content inside
</neu-expansion-panel>
</neu-accordion>`

## Progress Bar

Determinate

`<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>`

Indeterminate

`<mat-progress-bar mode="indeterminate"></mat-progress-bar>`

## Snackbar for notifications

Show notification
`<neu-button (neu_click)="showToast()">Show notification</neu-button>
showToast()
this.toastr.info("Notificació de prova", "Descripció de prova", (
progressBar: true
));`

## Neu Autocomplete

{{ c.name }} `Model: {{ autocomplete_val | json }}`
`<neu-autocomplete placeholder="placeholder"
[(ngModel)]="autocomplete_val"
(onInputChanged)="autocompleteInputChanged($event)"
[filterMinLength]="3">
</neu-autocomplete>
`

## Chips

primary secondary #FF0050
`<neu-chip color="primary">primary</neu-chip>
<neu-chip color="secondary"><i class="icon-power-off"></i>secondary</neu-chip>
<neu-chip color="#FF0050">#FF0050</neu-chip>`

Es pot customitzar el color passant-hi color="hex" al neu-chip. També accepta "primary" i "secondary". També et calcula el gradient que fa tot sol.

## Carousel

Slide 1 Slide 2 Slide 3

## Multi Toggle

L M X J V S D

{{ multi_toggle_value | json }}