# epom-ng2-pipes-directives
Module that implements pipes package and directives package.
### Pipes
| Pipe | Description |
|------|-------------|
| capitalize | capitalize text |
| safe | bypass security and trust the given value to be a safe resource URL, i.e. a location that may be used to load executable code from, like <script src>, or <iframe src>. |
| customFormat | implements custom format for numbers (currency, e.t.c) |
| removeParams | remove params from url (remove all after "?") |
### Directives
| directive | Description |
|------|-------------|
| datetimepicker | implements `bootstrap-datetimepicker` on a page |
| dropdown | implements bootstrap like dropdown |
| linkpreventer | implements 'prevent default' routine of clicking on <a> |
| toggle | implements smarty DOM-Element toggler |



## Getting Started

This module depends from jquery.

| Name | Description |
| ---- | ----------- |
| `jquery` | animations and class manipulations

Install `jquery` via npm:

```sh
$ npm install jquery@3.1.1 --save
```

### Installing

You need to import `PipesDirectivesModule` in module where you want to use it

```javascript
import {PipesDirectivesModule} from 'epom-ng2-pipes-directives';
...
imports: [
    PipesDirectivesModule,
    ...
];
```

## Parts
    .
    |-- epom-ng2-pipes-directives
    |   |-- pipes
    |   |   |-- capitalize.pipe
    |   |   |-- customFormat.pipe
    |   |   |-- removeParams.pipe
    |   |-- directives
    |   |   |-- datetimepicker
    |   |   |   |-- bootstrap-datetimepicker
    |   |   |   |-- bootstrap-datetimepicker.min.css
    |   |   |   |-- index
    |   |   |-- dropdown
    |   |   |   |-- index
    |   |   |-- linkpreventer
    |   |   |   |-- index
    |   |   |-- toggle
    |   |   |   |-- index

## Directives/datetimepicker Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **useInfinity** | boolean | draws "Infinity" button |
## Directives/datetimepicker Output properties (@Output)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **datetimepicker** | EventEmitter | emits event with picker value when it was changed |

## Directives/toggle Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **toggle** | ElementRef | link on element in dom wich must be toggled |
| **toggleAnimation** | 'fade' \| 'slide' | animation type |
| **closeOnBlur** | boolean | closing block after missing focus |
| **preventCloseIfClickOn** | ElementRef | prevents toggle if clicked this element (event if `closeOnBlue === true`)|

Examples:
```html
 <!-- use pipes -->
 <div class="a">{{name | capitalize}}
 <!-- use directive -->
 <a href="someLink.com" link-preventer>Click me</a
```

## Contributors

Gennady Strelets <g.strelets@itmgmedia.net>
