@realcommerce/rc-ui

##rcUI package

A collection of UI components / directives / pipes

Install

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

@import '~bootstrap/scss/bootstrap';

Api

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

<input type="text" rc-autofocus />

• ##rc-textarea-autoresize directive

auto resize text area height according to lines of texts

<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

<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

<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

<lib-rc-checkbox [control]="myFormControl" [disabled]="isDisabled" [elementId]="'myCheckboxElementID'" (valueChangedCallback)="checkboxChanged($event)" [errorMsg]="errorMsg">
    approve email
</lib-rc-checkbox>

• rc-datepicker

###Example

<lib-rc-datepicker></lib-rc-datepicker>

• rc-radios

###Example Define an array of items in your component

public radioItems: any[] = [
        {
            value: 1,
            selected: false,
        },
        {
            value: 2,
            selected: false,
        },
        {
            value: 3,
            selected: false,
        },
    ];

Use items array in template

<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

<lib-rc-switcher [control]="control" [elementId]="'mySwitcherID'">
    Please approve email notification
</lib-rc-switcher>
    

• rc-textarea

###Example

    <lib-rc-text-area [control]="textAreaControl"></lib-rc-text-area>

• rc-recaptcha (using ngx-recaptcha2)

###Example

  <lib-rc-recaptcha (resolved)="onRecaptchaResolved($event)" [siteKey]="recaptchaSiteKey"></lib-rc-recaptcha>

UI components

• rc-popover

###Example

<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

<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