tauro-components/README.md

É uma biblioteca Angular composta de diversos componentes úteis.

# Tauro Components

This is an Angular library composed of several useful components developed by the team of developers of [3Tecnos Tecnologia](http://www.3tecnos.com.br/).

Three components are available: `DataTable`, `Dialog Confirmation`, `Dialog Warning`, `Date Period`, `Year-Month` and `UF Selection`.

## Installation

Run `npm install tauro-components --save`

## Usage

### DataTable
Datatable component is based on Angular Material Table and easily configurable. Various features such as expanded row and table export have been made available for: PDF, EXCEL, CSV, XML and PRINT. It was also included pipes to the columns.

Example:

```
<ta-datatable *ngIf="values.length > 0"
        [apiUrl]="apiUrl"
        [showPaginator]="true"
        [showSearch]="true"
        [showExportButtons]="true"
        emptyDataMessage="Não houve movimentações no período"
        [showCheckbox]="false"
        [disabledToolTipIcons]="true"
        (selectedRows)="selectChange($event)">
        <ta-datacolumns>
            <ta-datacolumn dataPropertyName="NmOrgao" headerText="Órgão"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmCargo" headerText="Cargo"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmFavorecido" headerText="Favorecido"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtSaida" headerText="Saída" pipe="date"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtChegada" headerText="Chegada" pipe="date"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmDestino" headerText="Destino"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="QtDiaria" headerText="Quantidade"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="VlDiaria" headerText="Diária" pipe="currency"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="VlTotal" headerText="Total" pipe="currency"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtPagamento" headerText="Pagamento" pipe="date"></ta-datacolumn>
        </ta-datacolumns>
        <ta-dataexpanded headerText="Histórico" dataPropertyName="DsMotivo" [expanded]="true" [enableExpandedDetail]="true">
        </ta-dataexpanded>
    </ta-datatable>
```
![alt text][logo]

[logo]: https://raw.githubusercontent.com/fasjunior/tauro-components/master/images/datatable_1.png "DataTable Example"

#### Parameters

##### ta-datatable

Input | Type | Default | Description
--- | --- | --- | ---
apiUrl | `string` | - | Path of the WebAPI method to get the data that will be displayed in the table
[showPaginator] | `boolean` | false | Displays the table pager
[showSearch] | `boolean` | false | Displays the search field
[showExportButtons] | `boolean` | false | Displays export buttons
[showCheckbox] | `boolean` | false | Displays the checkboxes, allowing you to select the rows
[disabledToolTipIcons] | `boolean` | false | Disables the ToolTip of export buttons
emptyDataMessage | `string` | Não há dados a serem exibidos | Sets the message to be displayed when there is no data
(selectedRows) | `Array<any>` | - | Event that returns selected rows
(changeValues) | `Array<any>` | - | Event that returns all data. Triggered whenever there is a change in the displayed data

##### ta-datacolumn

Input | Type | Default | Description
--- | --- | --- | ---
headerText | `string` | - | Text that will be displayed in the column header
dataPropertyName | `string` | - | Property name of the object to be displayed
[disabledSort] | `boolean` | false | Disables sorting
width | `string` | - | Sets column widtht
align | `string` | - | Sets column alignment
pipe | `string` | - | Sets the pipe that will be used in the column, with the following options: `currency` and `date`

##### ta-dataexpanded

Input | Type | Default | Description
--- | --- | --- | ---
headerText | `string` | - | Text that will be displayed in the expanded row header
dataPropertyName | `string` | - | Property name of the object to be displayed
lineHeight | `string` | - | Sets the height of table rows
[enableExpandedDetail] | `boolean` | false | Enables expanded line
[expanded] | `boolean` | false | All expanded lines will be displayed
width | `string` | - | Sets row widtht
align | `string` | - | Sets row alignment
pipe | `string` | - | Sets the pipe that will be used in the expanded row, with the following options: `currency` and `date`

##### ta-datacolumnexpanded

Input | Type | Default | Description
--- | --- | --- | ---
headerText | `string` | - | Text that will be displayed in the column header of the expanded table
dataPropertyName | `string` | - | Property name of the object to be displayed
width | `string` | - | Sets row widtht
pipe | `string` | - | Sets the pipe that will be used in the expanded table, with the following options: `currency` and `date`


### DatePeriod
Component based on the Datepicker of the Angular Material, which provides the start and end date of a given period.

Example:

```
<ta-date-period widthBetweenDates="10px" (dtStart)="changeDtInicio($event)" (dtEnd)="changeDtFim($event)" ></ta-date-period>
```

#### Parameters

Input | Type | Default | Description
--- | --- | --- | ---
[placeholderStart] | `string` | Data Início | Set the placeholder of DateStart
[placeholderEnd] | `string` | Data Fim | Set the placeholder of DateEnd
[disabled] | `boolean` | false | Disable dates
[widthBetweenDates] | `string` | 30px | Sets the width between the dates
(dtStart) | `string` | - | Event that returns the start date
(dtEnd) | `string` | - | Event that returns the end date

### Year-Month
Component based on the Datepicker of the Angular Material, which provides only the month and year of a date.

Example:

```
<ta-year-month (value)="changeAnoMes($event)"></ta-year-month>
```

#### Parameters

Input | Type | Default | Description
--- | --- | --- | ---
[placeholder] | `string` | Mês e Ano | Set the placeholder 
(value) | `any` | - | Event that returns the selected month and year