npm package: @realcommerce/rc-ui
Description: A collection of UI components / directives / pipes
Latest version: 1.0.25

##rcUI package

A collection of UI components / directives / pipes 

## Install

```typescript
npm i @realcommerce/rc-ui --save
npm i bootstrap@4.0.0-beta.2 --save
npm i ngx-bootstrap@3.0.1 --save
```
Import bootstrap theme
 
```typescript
@import '~bootstrap/scss/bootstrap';
```


## Api
```typescript
import { RcUiModule } from '@realcommerce/rc-ui'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RcUiModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

##directives
* ##rc-autofocus directive
#### auto focus element on init

```typescript
<input type="text" rc-autofocus />
````
* ##rc-textarea-autoresize directive
#### auto resize text area height according to lines of texts

```typescript
<textarea rc-textarea-autoresize></textarea>
````
Optional input autoresize: boolean default true

* ##rc-inview directive
#### a directive that emit a callback function with true / false each time the element enter or out the screen  

```typescript
<div lib-rc-inview [rcInviewMargin]="200" (rcInviewCallback)="inview($event)">some content</div>
````

* ##rc-click-outside directive
#### emit a callback function once the user click outside the element  

```typescript
<div lib-rc-click-outside (clickOutside)="myFunc()">Some content</div>
````

## Form Components
All form components can receive a form control object and bind the value to the form control
* ## rc-checkbox
###Example
```typescript
<lib-rc-checkbox [control]="myFormControl" [disabled]="isDisabled" [elementId]="'myCheckboxElementID'" (valueChangedCallback)="checkboxChanged($event)" [errorMsg]="errorMsg">
    approve email
</lib-rc-checkbox>

```
* ## rc-datepicker
###Example
```typescript
<lib-rc-datepicker></lib-rc-datepicker>
```
* ## rc-radios
###Example
Define an array of items in your component
```typescript
public radioItems: any[] = [
        {
            value: 1,
            selected: false,
        },
        {
            value: 2,
            selected: false,
        },
        {
            value: 3,
            selected: false,
        },
    ];
```
Use items array in template
```typescript
<lib-rc-radios [elementId]="'myRadioButtonID'" [items]="radioItems" [radiosName]="'myRadiosName'">
    <lib-rc-radio>radio 1</lib-rc-radio>
    <lib-rc-radio>radio 2</lib-rc-radio>
    <lib-rc-radio>radio 3</lib-rc-radio>
</lib-rc-radios>
```
* ## rc-switcher
###Example
```typescript
<lib-rc-switcher [control]="control" [elementId]="'mySwitcherID'">
    Please approve email notification
</lib-rc-switcher>
    
```
* ## rc-textarea
###Example
```typescript
    <lib-rc-text-area [control]="textAreaControl"></lib-rc-text-area>
```
* ## rc-recaptcha (using ngx-recaptcha2)
###Example
```typescript
  <lib-rc-recaptcha (resolved)="onRecaptchaResolved($event)" [siteKey]="recaptchaSiteKey"></lib-rc-recaptcha>

```
## UI components
* ## rc-popover
###Example
```typescript
<lib-rc-popover>
    <div popoverOpener (click)="someAction()">I am the opener</div>
    <div popoverContent>I am the content</div>
</lib-rc-popover>
```

* ## rc-popup-wrapper
### Example

```typescript
<lib-rc-popup-wrapper *ngIf="openPopup" (closeCallback)="openPopup = false">
    <div>Some popup content</div>
</lib-rc-popup-wrapper>
```
* note - when openPopup will be true, the popup will be opened
### Author
**Zion Ben Yacov**