monkey-style-guide 2.0.155 → 2.0.158

package/README.md

@@ -1,1244 +1,1253 @@
-[![Contributors][contributors-shield]][contributors-url]
-[![MIT License][license-shield]][license-url]
-[![LinkedIn][linkedin-shield]][linkedin-url]
-
-<br />
-<p align="center">
-  <a href="https:monkey.exchange">
-    <img src="https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/logo.png" alt="Monkey Logo" width="80" height="80">
-  </a>
-  <h3 align="center">Monkey Style Guide</h3>
-  <p align="center">
-    An style guide template to boost your projects.
-    <br />
-    <br />
-    <a href="https://www.monkey.exchange/who-we-are.html">Who We Are?</a>
-  </p>
-</p>
-
-## About The Project
-
-This project was defined to be the main guide to styles, colors and html components of the entire ecosystem of Monkey Exchange systems.
-
-This style guide contains a concept to work with a range of different colors, making possible to create beautiful and useful html components.
-
-## Components
-
-All components was developed to work with angular reactive forms, so we need to define a formGroup and set the formControlName, and the components will do the rest of the job to fill all fields properly.
-First developed on Angular 10, this color guide contains the following components:
-
----
-
-### **Badge**
-
-![Badge Demo Screen Shot][badge-screenshot]
-
-Parameters:
-
-- **count** (string) is used to define the content of badge.
-- **pulseOn** (boolean)(default: false) is used to define if badge has to pulse like a bell.
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyBadgeModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyBadgeModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-badge count="3" [pulseOn]="true"></monkey-badge>
-```
-
----
-
-### **Button**
-
-![Button Demo Screen Shot][buttons-screenshot]
-
-Parameters:
-
-- **color** (string) can be _theme_, _error_, _warning_ or _success_
-- **disabled** (boolean)(default: false) to disable any action
-- **icon** (optional)(string) define the icon for button
-- **iconPoition** (string)(default: 'left') define the icon position. Can be _left_ or _right_
-- **label** (string) define the label that will be displayed inside the button
-- **type** (string) can be _primary_, _secondary_, _tertiary_
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyButtonModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyButtonModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-button color="theme" label="Primary" type="primary"></monkey-button>
-<monkey-button color="error" label="Secondary" type="secondary"></monkey-button>
-<monkey-button color="warning" label="Tertiary" type="tertiary"></monkey-button>
-```
-
----
-
-There are other variations with buttons:
-
-### **Button Avatar**
-
-![Button Avatar Demo Screen Shot][button-avatar-screenshot]
-
-Parameters:
-
-- **label** (string) define the label that will be displayed inside the button
-- **size** (string) define the size of the button
-- **type** (string) can be _theme_, _theme-100_ or _none_
-
-Example:
-
-`example.component.html`
-
-```HTML
-<monkey-button-avatar label="Amilson" size="sm" type="theme"></monkey-button-avatar>
-```
-
-### **Button Dropdown**
-
-![Button Dropdown Demo Screen Shot][button-dropdown-screenshot1]
-
-![Button Dropdown Demo Screen Shot][button-dropdown-screenshot2]
-
-Parameters:
-
-- **label** (ng-template) the label that will be displayed inside the button. For this particular component, label has be a ng-template.
-- **listenClicks** (boolean)(default: true) can be used to define if the dropdown will be closed with clicks inside
-- **type** (string)(default: 'filled') can be _unfilled_ or _filled_
-
-Example:
-
-`example.component.html`
-
-```HTML
-<monkey-button-dropdown [label]="profileButton">
-  <div class="mt-2">
-    <monkey-button
-      color="theme"
-      label="Profile"
-      type="tertiary"
-      [routerLink]="'/app/user/profile/edit'"
-    >
-    </monkey-button>
-  </div>
-  <div class="mt-2">
-    <monkey-button color="theme" label="Logout" type="tertiary"></monkey-button>
-  </div>
-</monkey-button-dropdown>
-
-<ng-template #profileButton>
-  <monkey-button-avatar label="Monkey" size="sm" type="theme"></monkey-button-avatar>
-</ng-template>
-```
-
----
-
-### **Checkbox**
-
-![Checkbox Demo Screen Shot][checkbox-screenshot]
-
-Parameters:
-
-- **description** (optional)(string) description to be displayed by side of the checkbox
-- **errorMessage** (string) message to alert user
-- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **type** (string)(default: 'single') can be _single_ or _multiple_. Will be used to render checkbox with formfield body or not.
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyCheckboxModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyCheckboxModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-checkbox
-  description="I Agree to Terms"
-  errorMessage="Validation Message"
-  formControlName="terms"
-  helperMessage="Mandatory"
-  infoMessage="Info message"
-  label="Terms and Conditions"
-  type="single">
-</monkey-checkbox>
-```
-
----
-
-### **Date Range Picker**
-
-![Date Range Picker Demo Screen Shot][date-range-picker]
-
-Parameters:
-
-- **errorMessage** (string) message to alert user
-- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **i18n** (Object) an i18n object (see example)
-
-Events:
-
-- **onChange** event emited when user select a range of dates or when clicked on some action
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyDateRangePicker } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyDateRangePicker]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-date-range-picker
-  errorMessage="Error Message"
-  helperMessage="Helper Message"
-  infoMessage="Info Message"
-  label="Label"
-  [i18n]="i18n">
-</monkey-date-range-picker>
-```
-
-`example.component.ts`
-
-```Typescript
-...
-i18n = {
-    months: {
-      '1': 'January',
-      '2': 'Febuary',
-      '3': 'March',
-      '4': 'April',
-      '5': 'May',
-      '6': 'June',
-      '7': 'July',
-      '8': 'August',
-      '9': 'September',
-      '10': 'October',
-      '11': 'November',
-      '12': 'December'
-    },
-    days: {
-      '1': 'Sun.',
-      '2': 'Mon.',
-      '3': 'Tue.',
-      '4': 'Wed.',
-      '5': 'Thu.',
-      '6': 'Fri.',
-      '7': 'Sat.'
-    },
-    actions: {
-      '30': '30 days',
-      '60': '60 days',
-      '90': '90 days'
-    },
-    today: 'Today'
-  };
-...
-```
-
----
-
-### **Expansion**
-
-![Expansion Demo Screen Shot][expansion-screenshot1]
-
-![Expansion Demo Screen Shot][expansion-screenshot2]
-
-Parameters:
-
-- **color** (string) can be _theme_, _error_, _warning_ or _success_
-- **disabled** (boolean)(default: false) to disable any action
-- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
-- **label** (string) define the label that will be displayed inside
-- **open** (boolean)(default: false) make expansion open or not
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyExpansionModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyExpansionModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-expansion
-  color="theme"
-  label="Expansion"
-  [helperMessage]="'helperMessage'"
->
-  <div>Content 1</div>
-  <div>Content 2</div>
-</monkey-expansion>
-```
-
----
-
-### **File Upload**
-
-![File Upload Demo Screen Shot][file-upload-screenshot1]
-
-Parameters:
-
-- **allowedExtensions** (array of string) for example ['.jpg', '.jpeg', '.png']
-- **allowedExtensionErrorMessage** (string) message to be displayed if the file extension is wrong
-- **errorMessage** (string) message to alert user
-- **fileUpload** (function) function to be used to upload file
-- **helperMessage** (optional)(string) message to help user to know what to do
-- **infoMessage** (optional)(string) required message
-- **label** (string) define the label that will be displayed inside
-- **listenFiles** (boolean)(default: false) if true, emit event to onHandleFilesReady with the selected file
-- **maxSize** (number) max file size in kbytes (1 \* 1024 \* 1024)
-- **maxSizeErrorMessage** (string) message to be displayed if the file size is wrong
-- **name** (string) name to identify the input
-- **placeholder** (optional)(string) message to help user that will be displayed inside the input
-- **uploadOngoingMessage** (string) message to be used when upload starts
-
-Events:
-
-- **onChange** event emited when user make changes
-- **onHandleFilesReady** event emited when listenFiled is true
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyFileUploadModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyFileUploadModule]
-})
-...
-```
-
-`example.component.ts`
-
-```Typescript
-...
-
-uploadFunction: Function = (file: any, callback?: Function) => {
-  this.uploadService.uploadFile(file, callback);
-};
-
-service.uploadFile(file: File, callback?: Function) {
-  const { httpClient, headers } = this;
-  const formData = new FormData();
-  formData.append('file', file);
-
-  httpClient.post<any>('endpoint/upload', formData, {
-    headers,
-    reportProgress: true,
-    observe: 'events'
-  }).subscribe((event: any) => {
-    const { loaded, total, body } = event;
-    switch (event.type) {
-      case HttpEventType.UploadProgress:
-        const progress = Math.round((loaded / total * 100));
-        if (callback) callback(progress);
-        break;
-      case HttpEventType.Response:
-        const { filename, _links: { file: { href } } } = body;
-        if (callback) {
-          callback(null, {
-            fileName: filename,
-            url: href
-          }, null);
-        }
-        break;
-      default:
-        break;
-    }
-  }, (err: HttpErrorResponse) => {
-    const { error } = err;
-    callback(null, error?.notifications?.join(''));
-  });
-}
-```
-
-`example.component.html`
-
-```HTML
-<monkey-file-upload
-  allowedExtensionErrorMessage="Extension not allowed"
-  icon="upload-20"
-  label="upload"
-  maxSize="5242880"
-  maxSizeErrorMessage="Max file size is 5mb"
-  placeholder="Add File"
-  [fileUpload]="uploadFunction"
-></monkey-file-upload>
-```
-
----
-
-### **Icon**
-
-![Icons Demo Screen Shot][icons-screenshot1]
-
-Parameters:
-
-- **color** (string) define color. Can be _theme_ or _#ffffff_ (hex value)
-- **icon** (string) icon name and size separeted by hyfhen
-
-Icons Options:
-
-- **add-plus**
-- **arrow-down**
-- **arrow-left**
-- **arrow-line-right**
-- **arrow-right**
-- **arrow-up**
-- **arrows**
-- **auction**
-- **bank-account**
-- **bank**
-- **banknote-search**
-- **bell**
-- **book**
-- **box**
-- **build-person**
-- **calendar**
-- **camera**
-- **card-machine**
-- **card**
-- **cash-banknote-invoice**
-- **chat**
-- **check-circle-out**
-- **check-circle**
-- **check-grey**
-- **check-white**
-- **check**
-- **clipboard**
-- **clock**
-- **close**
-- **cnpj**
-- **codepen**
-- **company-name**
-- **contract-pen**
-- **contract**
-- **delete**
-- **document**
-- **dollar-sign-circle**
-- **dollar-sign**
-- **domain**
-- **dots-menu**
-- **double-arrow-left**
-- **double-arrow-right**
-- **download**
-- **edit-square**
-- **edit**
-- **email**
-- **empty-doc**
-- **error**
-- **eye-closed**
-- **eye-open**
-- **filter**
-- **grid**
-- **hands-clap**
-- **help**
-- **hexagon**
-- **home**
-- **image**
-- **info**
-- **invoice**
-- **list**
-- **location-pin**
-- **login**
-- **logout**
-- **medal**
-- **menu**
-- **money-cedule**
-- **money-hand**
-- **money-sign**
-- **money**
-- **more**
-- **more-circle**
-- **new-company**
-- **offered**
-- **password**
-- **people**
-- **percent**
-- **person-document**
-- **person-sad**
-- **phone-call**
-- **phone**
-- **pin-navigation**
-- **pork**
-- **radio**
-- **refresh**
-- **repeat**
-- **search**
-- **second-warning**
-- **settings**
-- **shield-chekmark**
-- **star**
-- **today**
-- **trash**
-- **trophy**
-- **unfold-more**
-- **upload**
-- **user-group**
-- **user**
-- **wallet**
-- **warning**
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyIconModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyIconModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-icon color="#000000" icon="password-16"></monkey-icon>
-```
-
----
-
-### **Input**
-
-![Input Demo Screen Shot][input-screenshot]
-
-Parameters:
-
-- **capitalize** (optional)(boolean) makes the value capitalcase
-- **currency** (optional)(boolean) transforms the input in currency input
-- **errorMessage** (string) message to alert user
-- **helperMessage** (optional)(string) message to help user to know what to do
-- **icon** (optional)(string) icon name and size separeted by hyfhen
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **lowerCase** (optional)(boolean) makes the value lowercase
-- **mask** (optional)(string) mask pattern to mask the input
-- **maxLength** (optional)(number) max 255
-- **name** (optional)(string) name to identify the input
-- **onlyNumber** (optional)(boolean) makes the input accept only number
-- **onlyAlphaNumeric** (optional)(boolean) makes the input accept only alphanumeric characters
-- **placeholder** (optional)(string) message to help user that will be displayed inside the input
-- **prefix** (optional)(string) prefix value for input
-- **type** (string) can be _text_ or _password_
-- **upperCase** (optional)(boolean) makes the value uppercase
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyInputModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyInputModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-input
-  errorMessage="Validation Message"
-  formControlName="name"
-  helperMessage="Mandatory"
-  icon="user-20"
-  infoMessage="Info message"
-  label="Name"
-  placeholder="Input your full name">
-</monkey-input>
-```
-
----
-
-### **Input Filter**
-
-![Input Filter Demo Screen Shot][input-filter-screenshot]
-
-Parameters:
-
-- **helperMessage** (optional)(string) message to help user to know what to do
-- **icon** (optional)(string) icon name and size separeted by hyfhen
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **maxLength** (optional)(number) max 255
-- **name** (optional)(string) name to identify the input
-- **placeholder** (optional)(string) message to help user that will be displayed inside the input
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyInputModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyInputModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-input-filter
-  formControlName="name"
-  helperMessage="Mandatory"
-  icon="user-20"
-  infoMessage="Info message"
-  label="Name"
-  placeholder="Input your full name">
-</monkey-input-filter>
-```
-
----
-
-### **Modal**
-
-![Modal Demo Screen Shot][modal-screenshot]
-
-Parameters:
-
-- **config** (MonkeyModalConfig) the configuration of modal
-- **modalRef** (MonkeyModalRefs) the modal reference
-- **onHandleConfirm** (EventEmitter) will emit and event when you click confirm
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import {
-  MonkeyModalModule,
-  MonkeyStyleGuideModalService
-} from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyModalModule],
-  providers: [MonkeyStyleGuideModalService]
-})
-...
-```
-
-`parent.component.ts`
-
-```Typescript
-...
-import { MonkeyStyleGuideModalService } from 'monkey-style-guide';
-import { ModalComponent } from './modal/modal.component';
-
-...
-
-constructor(private modalService: MonkeyStyleGuideModalService) {}
-
-openModal() {
-  this.modalService.open(ModalComponent, {
-    color: 'theme',
-    size: 'md',
-    action: {
-      cancel: {
-        actionColor: 'theme',
-        actionType: 'tertiary',
-        label: 'Cancel',
-      },
-      confirm: {
-        actionColor: 'theme',
-        actionType: 'primary',
-        label: 'Confirm',
-      },
-    },
-  });
-}
-```
-
-`modal.component.ts`
-
-```Typescript
-import { Component, EventEmitter, Input } from '@angular/core';
-import {
-  MonkeyModalConfig,
-  MonkeyModalRefs,
-  MonkeyStyleGuideModalService
-} from 'monkey-style-guide';
-
-@Component({
-  selector: 'mk-modal',
-  template: `
-    <monkey-modal
-      [config]="config"
-      [modalRef]="modalRef"
-      [onHandleConfirm]="onHandleConfirm"
-    >
-      <div style="align-items: center; display: flex; justify-content: center;">
-        <img
-          src="https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/logo.png"
-        />
-      </div>
-    </monkey-modal>
-  `,
-})
-export class ModalComponent {
-  @Input() config: MonkeyModalConfig;
-  @Input() modalRef: MonkeyModalRefs<this>;
-  @Input() onHandleConfirm = new EventEmitter<any>();
-
-  constructor(private modalService: MonkeyStyleGuideModalService) {
-    this.onHandleConfirm.subscribe(() => {
-      console.log('Confirm clicked!');
-
-      this.modalService.closeAll();
-    });
-  }
-}
-```
-
-In case you need the logic in your parent component you can simply pass the `action` key to `MonkeyModalConfig` and remove `onHandleConfirm` of your modal component like this:
-
-```Typescript
-...
-
-openModal() {
-  this.modalService.open(ModalComponent, {
-    color: 'theme',
-    size: 'md',
-    action: {
-      cancel: {
-        actionColor: 'theme',
-        actionType: 'tertiary',
-        label: 'Cancel',
-      },
-      confirm: {
-        action: () => {
-          console.log('Modal closed!');
-        },
-        actionColor: 'theme',
-        actionType: 'primary',
-        label: 'Confirm',
-      },
-    },
-  });
-}
-```
-
-```Typescript
-...
-
-export class ModalComponent {
-  @Input() config: MonkeyModalConfig;
-  @Input() modalRef: MonkeyModalRefs<this>;
-
-  constructor() {}
-}
-```
-
----
-
-### **Radiobutton**
-
-![Radiobutton Demo Screen Shot][radiobutton-screenshot]
-
-Parameters:
-
-- **errorMessage** (string) message to alert user
-- **helperMessage** (optional)(string) message to help user to know what to do
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **placeholder** (optional)(string) message to help user that will be displayed inside the input
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyRadioButtonModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyRadioButtonModule]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-radiobutton
-  formControlName="gender"
-  label="Gender"
-  helperMessage="Mandatory"
-  icon="help-20"
-  infoMessage="Info message"
-  errorMessage="Validation message"
->
-  <monkey-option label="Female" value="female"></monkey-option>
-  <monkey-option label="Male" value="male"></monkey-option>
-  <monkey-option label="I prefer not to choose" value="not_choose"></monkey-option>
-</monkey-radiobutton>
-```
-
----
-
-### **Select**
-
-![Select Demo Screen Shot][select-screenshot]
-
-Parameters:
-
-- **errorMessage** (string) message to alert user
-- **helperMessage** (optional)(string) message to help user to know what to do
-- **icon** (optional)(string) icon name and size separeted by hyfhen
-- **infoMessage** (optional)(string) message to help user knows about this component purpose
-- **label** (string) define the label that will be displayed inside
-- **placeholder** (optional)(string) message to help user that will be displayed inside the input
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import {
-  MonkeyOptionModule,
-  MonkeySelectModule
-} from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [
-    MonkeyOptionModule,
-    MonkeySelectModule
-  ]
-})
-...
-```
-
-`example.component.html`
-
-```HTML
-<monkey-select
-  errorMessage="Validation Message"
-  formControlName="documentType"
-  helperMessage="Mandatory"
-  icon="upload-20"
-  infoMessage="Info message"
-  label="Select the document type to upload"
->
-  <monkey-option label="Personal Document" value="personal_document">
-  </monkey-option>
-  <monkey-option label="Social Contract" value="social_contract">
-  </monkey-option>
-  <monkey-option label="Procuraction Contract" value="procuration_contract">
-  </monkey-option>
-</monkey-select>
-```
-
----
-
-### **Table**
-
-![Table Demo Screen Shot][table-screenshot]
-
-Parameters:
-
-- **dataSource** (array) the data to be displayed
-- **headers** (array) column headers
-- **loading** (optional)(boolean) show loading progress
-- **rowTemplate** (TemplateRef) the template to show rows
-- **selectable** (optional)(boolean) enable row selection
-
-Events:
-
-- **selection** returns an array with selected rows
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyTableModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyTableModule]
-})
-...
-```
-
-`example.component.ts`
-
-```Typecript
-_dataSourceHeaders = ['column1', 'column2', 'column3', 'column4'];
-_dataSource = [
-  [1, 2, 3, 4, 5, 6],
-  [5, 6, 7, 8, 9, 10],
-  [5, 6, 7, 8, 9, 10],
-  [5, 6, 7, 8, 9, 10],
-];
-```
-
-`example.component.html`
-
-```HTML
-<monkey-table
-  [dataSource]="_dataSource"
-  [headers]="_dataSourceHeaders"
-  [loading]="true"
-  [rowTemplate]="rowTemplate"
-  [selectable]="true"
-  (selection)="onHandleSelection($event)"
->
-  <ng-template #rowTemplate let-row="row">
-    <monkey-table-column>{{ row[0] }}</monkey-table-column>
-    <monkey-table-column>{{ row[1] }}</monkey-table-column>
-    <monkey-table-column>{{ row[2] }}</monkey-table-column>
-    <monkey-table-column>{{ row[3] }}</monkey-table-column>
-  </ng-template>
-</monkey-table>
-```
-
----
-
-### **Toggle**
-
-![Toggle Demo Screen Shot][toggle-screenshot]
-
-Parameters:
-
-- **value** (boolean)(default: false)
-- **disabled** (boolean)(default: false) to disable any action
-
-Events:
-
-- **onChange** event emited when user make changes
-
-Example:
-
-`example.module.ts`
-
-```Typescript
-import { MonkeyToggleModule } from 'monkey-style-guide';
-
-...
-
-@NgModule({
-  imports: [MonkeyToggleModule]
-})
-...
-```
-
-`example.component.html`
-
-## Prerequisites
-
-The main feature of this project is to allow changing the application theme, such as primary colors and error colors.
-For this, it is necessary to have a file called monkey-style-guide-settings.json at the root of your project's assets folder.
-
-For example:
-
-![Settings Json Screen Shot][settings-screenshot]
-
-Content of monkey-style-guide-settings.json:
-
-```JSON
-{
-  "theme": {
-    "title": "Monkey Exchange",
-    "favicon": "assets/favicon.svg"
-  },
-  "colors": {
-    "theme": {
-      "main": "#034EA2",
-      "100": "#F5FAFF",
-      "200": "#D7EAFE",
-      "300": "#A5CFFE",
-      "400": "#72B4FD",
-      "500": "#4099FC",
-      "600": "#0F7EFB",
-      "700": "#0465D2",
-      "800": "#023064",
-      "900": "#023064",
-      "contrast": {
-        "main": "white",
-        "100": "rgba(black, 0.87)",
-        "200": "white",
-        "300": "white",
-        "400": "white",
-        "500": "white",
-        "600": "white",
-        "700": "white",
-        "800": "white",
-        "900": "white"
-      }
-    },
-    "error": {
-      "main": "#e70c0c",
-      "100": "#fbb5b5",
-      "200": "#f87f7f",
-      "300": "#f53b3b",
-      "400": "#f31e1e",
-      "500": "#e70c0c",
-      "600": "#ca0a0a",
-      "700": "#ad0909",
-      "800": "#900707",
-      "900": "#730606",
-      "contrast": {
-        "main": "white",
-        "100": "rgba(black, 0.87)",
-        "200": "rgba(black, 0.87)",
-        "300": "white",
-        "400": "white",
-        "500": "white",
-        "600": "white",
-        "700": "white",
-        "800": "white",
-        "900": "white"
-      }
-    },
-    "warning": {
-      "main": "#efa30e",
-      "100": "#fbe7be",
-      "200": "#f8d389",
-      "300": "#f4b946",
-      "400": "#f2ae29",
-      "500": "#efa30e",
-      "600": "#d28f0c",
-      "700": "#b57c0b",
-      "800": "#986809",
-      "900": "#7b5407",
-      "contrast": {
-        "main": "rgba(black, 0.87)",
-        "100": "rgba(black, 0.87)",
-        "200": "rgba(black, 0.87)",
-        "300": "rgba(black, 0.87)",
-        "400": "rgba(black, 0.87)",
-        "500": "rgba(black, 0.87)",
-        "600": "rgba(black, 0.87)",
-        "700": "rgba(black, 0.87)",
-        "800": "white",
-        "900": "white"
-      }
-    },
-    "success": {
-      "main": "#00875a",
-      "100": "#45ffc1",
-      "200": "#0dffae",
-      "300": "#00c483",
-      "400": "#00a66e",
-      "500": "#00875a",
-      "600": "#006846",
-      "700": "#004a31",
-      "800": "#002b1d",
-      "900": "#000d08",
-      "contrast": {
-        "main": "white",
-        "100": "rgba(black, 0.87)",
-        "200": "rgba(black, 0.87)",
-        "300": "rgba(black, 0.87)",
-        "400": "white",
-        "500": "white",
-        "600": "white",
-        "700": "white",
-        "800": "white",
-        "900": "white"
-      }
-    },
-    "question": {
-      "main": "#8D38FA",
-      "100": "#F4EBFF",
-      "200": "#E8D7FE",
-      "300": "#D2AFFD",
-      "400": "#A460FB",
-      "500": "#8D38FA",
-      "600": "#7710F9",
-      "700": "#5104B3",
-      "800": "#2D0264",
-      "900": "#1B013C",
-      "contrast": {
-        "main": "white",
-        "100": "rgba(black, 0.87)",
-        "200": "rgba(black, 0.87)",
-        "300": "rgba(black, 0.87)",
-        "400": "white",
-        "500": "white",
-        "600": "white",
-        "700": "white",
-        "800": "white",
-        "900": "white"
-      }
-    }
-  }
-}
-```
-
-## Installation
-
-1.  Install NPM packages:
-
-```sh
-npm install monkey-style-guide
-```
-
-## Usage
-
-Import `monkey-style-guide` in your `style.scss`
-
-```scss
-@import '~monkey-style-guide/assets/scss/theme';
-```
-
-Import `MonkeyStyleGuideModule` in your `app.module.ts`
-
-```Typescript
-import { MonkeyStyleGuideModule } from 'monkey-style-guide';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [MonkeyStyleGuideModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-Than call the `bootstrap` method in your `app.component.ts`
-
-```Typescript
-import { Component } from '@angular/core';
-import { MonkeyStyleGuideSettingsService } from 'monkey-style-guide';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-})
-export class AppComponent {
-  constructor(private settingsService: MonkeyStyleGuideSettingsService) {
-    this.settingsService.boostrap('');
-  }
-}
-```
-
-<!-- MARKDOWN LINKS & IMAGES -->
-<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
-
-[badge-screenshot]: https://user-images.githubusercontent.com/10110065/111625441-9e5df280-87cb-11eb-905c-008607cf859e.png
-[button-avatar-screenshot]: https://user-images.githubusercontent.com/10110065/111626956-50e28500-87cd-11eb-85c1-aaa8c06bb4e0.png
-[button-dropdown-screenshot1]: https://user-images.githubusercontent.com/10110065/111631407-1e875680-87d2-11eb-9631-d1d2ccf8f076.png
-[button-dropdown-screenshot2]: https://user-images.githubusercontent.com/10110065/111631726-82118400-87d2-11eb-9653-4502c3d82d51.png
-[buttons-screenshot]: https://user-images.githubusercontent.com/10110065/142933460-7a84ad76-b57f-40a0-b809-292af31c1e8f.png
-[checkbox-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/checkbox.png
-[contributors-shield]: https://img.shields.io/badge/Contributors-2-brightgreen?style=flat
-[contributors-url]: https://github.com/MonkeyECX/monkey-style-guide/graphs/contributors
-[date-range-picker]: https://user-images.githubusercontent.com/12416871/146080473-8543b9ae-7186-42ee-8ec8-bfd1eef09df6.png
-[expansion-screenshot1]: https://user-images.githubusercontent.com/10110065/111636157-f8b08080-87d6-11eb-86ab-86839297d068.png
-[expansion-screenshot2]: https://user-images.githubusercontent.com/10110065/111636340-24336b00-87d7-11eb-9f19-504ab96cc9af.png
-[file-upload-screenshot1]: https://user-images.githubusercontent.com/10110065/111640018-8b065380-87da-11eb-8d47-87ddea29b943.png
-[icons-screenshot1]: https://user-images.githubusercontent.com/12416871/189434246-0e34f5b8-f0fe-4cc5-9e1c-1943cf73f0ca.png
-[input-filter-screenshot]: https://user-images.githubusercontent.com/32619691/163216159-3a9f985e-3ba9-4e10-8ba4-0f60931f83d1.png
-[input-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/input.png
-[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
-[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
-[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=157
-[linkedin-url]: https://www.linkedin.com/company/monkeyexchange
-[modal-screenshot]: https://user-images.githubusercontent.com/12416871/119838920-2c480f00-beda-11eb-9e44-e42262f39c34.png
-[radiobutton-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/radiobutton.png
-[select-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/select.png
-[settings-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/style-settings-json.png
-[table-screenshot]: https://user-images.githubusercontent.com/12416871/119574643-29d79f00-bd8c-11eb-9747-2e6dc86410da.png
-[toggle-screenshot]: https://user-images.githubusercontent.com/12416871/119849813-53570e80-bee3-11eb-87f8-0871f8e26f58.png
+[![Contributors][contributors-shield]][contributors-url]
+[![MIT License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+<br />
+<p align="center">
+  <a href="https:monkey.exchange">
+    <img src="https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/logo.png" alt="Monkey Logo" width="80" height="80">
+  </a>
+  <h3 align="center">Monkey Style Guide</h3>
+  <p align="center">
+    An style guide template to boost your projects.
+    <br />
+    <br />
+    <a href="https://www.monkey.exchange/who-we-are.html">Who We Are?</a>
+  </p>
+</p>
+
+## About The Project
+
+This project was defined to be the main guide to styles, colors and html components of the entire ecosystem of Monkey Exchange systems.
+
+This style guide contains a concept to work with a range of different colors, making possible to create beautiful and useful html components.
+
+## Components
+
+All components was developed to work with angular reactive forms, so we need to define a formGroup and set the formControlName, and the components will do the rest of the job to fill all fields properly.
+First developed on Angular 10, this color guide contains the following components:
+
+---
+
+### **Badge**
+
+![Badge Demo Screen Shot][badge-screenshot]
+
+Parameters:
+
+- **count** (string) is used to define the content of badge.
+- **pulseOn** (boolean)(default: false) is used to define if badge has to pulse like a bell.
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyBadgeModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyBadgeModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-badge count="3" [pulseOn]="true"></monkey-badge>
+```
+
+---
+
+### **Button**
+
+![Button Demo Screen Shot][buttons-screenshot]
+
+Parameters:
+
+- **color** (string) can be _theme_, _error_, _warning_ or _success_
+- **disabled** (boolean)(default: false) to disable any action
+- **icon** (optional)(string) define the icon for button
+- **iconPoition** (string)(default: 'left') define the icon position. Can be _left_ or _right_
+- **label** (string) define the label that will be displayed inside the button
+- **type** (string) can be _primary_, _secondary_, _tertiary_
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyButtonModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyButtonModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-button color="theme" label="Primary" type="primary"></monkey-button>
+<monkey-button color="error" label="Secondary" type="secondary"></monkey-button>
+<monkey-button color="warning" label="Tertiary" type="tertiary"></monkey-button>
+```
+
+---
+
+There are other variations with buttons:
+
+### **Button Avatar**
+
+![Button Avatar Demo Screen Shot][button-avatar-screenshot]
+
+Parameters:
+
+- **label** (string) define the label that will be displayed inside the button
+- **size** (string) define the size of the button
+- **type** (string) can be _theme_, _theme-100_ or _none_
+
+Example:
+
+`example.component.html`
+
+```HTML
+<monkey-button-avatar label="Amilson" size="sm" type="theme"></monkey-button-avatar>
+```
+
+### **Button Dropdown**
+
+![Button Dropdown Demo Screen Shot][button-dropdown-screenshot1]
+
+![Button Dropdown Demo Screen Shot][button-dropdown-screenshot2]
+
+Parameters:
+
+- **label** (ng-template) the label that will be displayed inside the button. For this particular component, label has be a ng-template.
+- **listenClicks** (boolean)(default: true) can be used to define if the dropdown will be closed with clicks inside
+- **type** (string)(default: 'filled') can be _unfilled_ or _filled_
+
+Example:
+
+`example.component.html`
+
+```HTML
+<monkey-button-dropdown [label]="profileButton">
+  <div class="mt-2">
+    <monkey-button
+      color="theme"
+      label="Profile"
+      type="tertiary"
+      [routerLink]="'/app/user/profile/edit'"
+    >
+    </monkey-button>
+  </div>
+  <div class="mt-2">
+    <monkey-button color="theme" label="Logout" type="tertiary"></monkey-button>
+  </div>
+</monkey-button-dropdown>
+
+<ng-template #profileButton>
+  <monkey-button-avatar label="Monkey" size="sm" type="theme"></monkey-button-avatar>
+</ng-template>
+```
+
+---
+
+### **Checkbox**
+
+![Checkbox Demo Screen Shot][checkbox-screenshot]
+
+Parameters:
+
+- **description** (optional)(string) description to be displayed by side of the checkbox
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **type** (string)(default: 'single') can be _single_ or _multiple_. Will be used to render checkbox with formfield body or not.
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyCheckboxModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyCheckboxModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-checkbox
+  description="I Agree to Terms"
+  errorMessage="Validation Message"
+  formControlName="terms"
+  helperMessage="Mandatory"
+  infoMessage="Info message"
+  label="Terms and Conditions"
+  type="single">
+</monkey-checkbox>
+```
+
+---
+
+### **Date Range Picker**
+
+![Date Range Picker Demo Screen Shot][date-range-picker]
+
+Parameters:
+
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **i18n** (Object) an i18n object (see example)
+
+Events:
+
+- **onChange** event emited when user select a range of dates or when clicked on some action
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyDateRangePicker } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyDateRangePicker]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-date-range-picker
+  errorMessage="Error Message"
+  helperMessage="Helper Message"
+  infoMessage="Info Message"
+  label="Label"
+  [i18n]="i18n">
+</monkey-date-range-picker>
+```
+
+`example.component.ts`
+
+```Typescript
+...
+i18n = {
+    months: {
+      '1': 'January',
+      '2': 'Febuary',
+      '3': 'March',
+      '4': 'April',
+      '5': 'May',
+      '6': 'June',
+      '7': 'July',
+      '8': 'August',
+      '9': 'September',
+      '10': 'October',
+      '11': 'November',
+      '12': 'December'
+    },
+    days: {
+      '1': 'Sun.',
+      '2': 'Mon.',
+      '3': 'Tue.',
+      '4': 'Wed.',
+      '5': 'Thu.',
+      '6': 'Fri.',
+      '7': 'Sat.'
+    },
+    actions: {
+      '30': '30 days',
+      '60': '60 days',
+      '90': '90 days'
+    },
+    today: 'Today'
+  };
+...
+```
+
+---
+
+### **Expansion**
+
+![Expansion Demo Screen Shot][expansion-screenshot1]
+
+![Expansion Demo Screen Shot][expansion-screenshot2]
+
+Parameters:
+
+- **color** (string) can be _theme_, _error_, _warning_ or _success_
+- **disabled** (boolean)(default: false) to disable any action
+- **helperMessage** (optional)(string) can be used with type single, for formfield purpose
+- **label** (string) define the label that will be displayed inside
+- **open** (boolean)(default: false) make expansion open or not
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyExpansionModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyExpansionModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-expansion
+  color="theme"
+  label="Expansion"
+  [helperMessage]="'helperMessage'"
+>
+  <div>Content 1</div>
+  <div>Content 2</div>
+</monkey-expansion>
+```
+
+---
+
+### **File Upload**
+
+![File Upload Demo Screen Shot][file-upload-screenshot1]
+
+Parameters:
+
+- **allowedExtensions** (array of string) for example ['.jpg', '.jpeg', '.png']
+- **allowedExtensionErrorMessage** (string) message to be displayed if the file extension is wrong
+- **errorMessage** (string) message to alert user
+- **fileUpload** (function) function to be used to upload file
+- **helperMessage** (optional)(string) message to help user to know what to do
+- **infoMessage** (optional)(string) required message
+- **label** (string) define the label that will be displayed inside
+- **listenFiles** (boolean)(default: false) if true, emit event to onHandleFilesReady with the selected file
+- **maxSize** (number) max file size in kbytes (1 \* 1024 \* 1024)
+- **maxSizeErrorMessage** (string) message to be displayed if the file size is wrong
+- **name** (string) name to identify the input
+- **placeholder** (optional)(string) message to help user that will be displayed inside the input
+- **uploadOngoingMessage** (string) message to be used when upload starts
+
+Events:
+
+- **onChange** event emited when user make changes
+- **onHandleFilesReady** event emited when listenFiled is true
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyFileUploadModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyFileUploadModule]
+})
+...
+```
+
+`example.component.ts`
+
+```Typescript
+...
+
+uploadFunction: Function = (file: any, callback?: Function) => {
+  this.uploadService.uploadFile(file, callback);
+};
+
+service.uploadFile(file: File, callback?: Function) {
+  const { httpClient, headers } = this;
+  const formData = new FormData();
+  formData.append('file', file);
+
+  httpClient.post<any>('endpoint/upload', formData, {
+    headers,
+    reportProgress: true,
+    observe: 'events'
+  }).subscribe((event: any) => {
+    const { loaded, total, body } = event;
+    switch (event.type) {
+      case HttpEventType.UploadProgress:
+        const progress = Math.round((loaded / total * 100));
+        if (callback) callback(progress);
+        break;
+      case HttpEventType.Response:
+        const { filename, _links: { file: { href } } } = body;
+        if (callback) {
+          callback(null, {
+            fileName: filename,
+            url: href
+          }, null);
+        }
+        break;
+      default:
+        break;
+    }
+  }, (err: HttpErrorResponse) => {
+    const { error } = err;
+    callback(null, error?.notifications?.join(''));
+  });
+}
+```
+
+`example.component.html`
+
+```HTML
+<monkey-file-upload
+  allowedExtensionErrorMessage="Extension not allowed"
+  icon="upload-20"
+  label="upload"
+  maxSize="5242880"
+  maxSizeErrorMessage="Max file size is 5mb"
+  placeholder="Add File"
+  [fileUpload]="uploadFunction"
+></monkey-file-upload>
+```
+
+---
+
+### **Icon**
+
+![Icons Demo Screen Shot][icons-screenshot1]
+
+Parameters:
+
+- **color** (string) define color. Can be _theme_ or _#ffffff_ (hex value)
+- **icon** (string) icon name and size separeted by hyfhen
+
+Icons Options:
+
+- **add-plus**
+- **arrow-down**
+- **arrow-left**
+- **arrow-line-right**
+- **arrow-right**
+- **arrow-up**
+- **arrows**
+- **auction**
+- **bank-account**
+- **bank**
+- **banknote-search**
+- **bell**
+- **book**
+- **box**
+- **build-person**
+- **calendar**
+- **camera**
+- **card-machine**
+- **card**
+- **cash-banknote-invoice**
+- **chat**
+- **check-circle-out**
+- **check-circle**
+- **check-grey**
+- **check-white**
+- **check**
+- **clipboard**
+- **clock**
+- **close**
+- **cnpj**
+- **codepen**
+- **company-name**
+- **contract-pen**
+- **contract**
+- **delete**
+- **document**
+- **dollar-sign-circle**
+- **dollar-sign**
+- **domain**
+- **dots-menu**
+- **double-arrow-left**
+- **double-arrow-right**
+- **download**
+- **edit-square**
+- **edit**
+- **email**
+- **empty-doc**
+- **error**
+- **eye-closed**
+- **eye-open**
+- **filter**
+- **grid**
+- **hands-clap**
+- **help**
+- **hexagon**
+- **home**
+- **image**
+- **info**
+- **invoice**
+- **invoices-anticipated**
+- **invoices-approval**
+- **invoices-refused**
+- **list**
+- **location-pin**
+- **login**
+- **logout**
+- **medal**
+- **menu**
+- **money-cedule**
+- **money-hand**
+- **money-sign**
+- **money**
+- **more**
+- **more-circle**
+- **new-company**
+- **offered**
+- **password**
+- **people**
+- **percent**
+- **person-document**
+- **person-sad**
+- **phone-call**
+- **phone**
+- **pin-navigation**
+- **pork**
+- **radio**
+- **refresh**
+- **repeat**
+- **search**
+- **second-warning**
+- **settings**
+- **shield-chekmark**
+- **star**
+- **today**
+- **trash**
+- **trophy**
+- **unfold-more**
+- **upload**
+- **user-group**
+- **user**
+- **wallet**
+- **warning**
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyIconModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyIconModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-icon color="#000000" icon="password-16"></monkey-icon>
+```
+
+---
+
+### **Input**
+
+![Input Demo Screen Shot][input-screenshot]
+
+Parameters:
+
+- **capitalize** (optional)(boolean) makes the value capitalcase
+- **currency** (optional)(boolean) transforms the input in currency input
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) message to help user to know what to do
+- **icon** (optional)(string) icon name and size separeted by hyfhen
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **lowerCase** (optional)(boolean) makes the value lowercase
+- **mask** (optional)(string) mask pattern to mask the input
+- **maxLength** (optional)(number) max 255
+- **name** (optional)(string) name to identify the input
+- **onlyNumber** (optional)(boolean) makes the input accept only number
+- **onlyAlphaNumeric** (optional)(boolean) makes the input accept only alphanumeric characters
+- **placeholder** (optional)(string) message to help user that will be displayed inside the input
+- **prefix** (optional)(string) prefix value for input
+- **type** (string) can be _text_ or _password_
+- **upperCase** (optional)(boolean) makes the value uppercase
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyInputModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyInputModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-input
+  errorMessage="Validation Message"
+  formControlName="name"
+  helperMessage="Mandatory"
+  icon="user-20"
+  infoMessage="Info message"
+  label="Name"
+  placeholder="Input your full name">
+</monkey-input>
+```
+
+---
+
+### **Input Filter**
+
+![Input Filter Demo Screen Shot][input-filter-screenshot]
+
+Parameters:
+
+- **helperMessage** (optional)(string) message to help user to know what to do
+- **icon** (optional)(string) icon name and size separeted by hyfhen
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **maxLength** (optional)(number) max 255
+- **name** (optional)(string) name to identify the input
+- **placeholder** (optional)(string) message to help user that will be displayed inside the input
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyInputModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyInputModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-input-filter
+  formControlName="name"
+  helperMessage="Mandatory"
+  icon="user-20"
+  infoMessage="Info message"
+  label="Name"
+  placeholder="Input your full name">
+</monkey-input-filter>
+```
+
+---
+
+### **Modal**
+
+![Modal Demo Screen Shot][modal-screenshot]
+
+Parameters:
+
+- **config** (MonkeyModalConfig) the configuration of modal
+- **modalRef** (MonkeyModalRefs) the modal reference
+- **onHandleConfirm** (EventEmitter) will emit and event when you click confirm
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import {
+  MonkeyModalModule,
+  MonkeyStyleGuideModalService
+} from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyModalModule],
+  providers: [MonkeyStyleGuideModalService]
+})
+...
+```
+
+`parent.component.ts`
+
+```Typescript
+...
+import { MonkeyStyleGuideModalService } from 'monkey-style-guide';
+import { ModalComponent } from './modal/modal.component';
+
+...
+
+constructor(private modalService: MonkeyStyleGuideModalService) {}
+
+openModal() {
+  this.modalService.open(ModalComponent, {
+    color: 'theme',
+    size: 'md',
+    action: {
+      cancel: {
+        actionColor: 'theme',
+        actionType: 'tertiary',
+        label: 'Cancel',
+      },
+      confirm: {
+        actionColor: 'theme',
+        actionType: 'primary',
+        label: 'Confirm',
+      },
+    },
+  });
+}
+```
+
+`modal.component.ts`
+
+```Typescript
+import { Component, EventEmitter, Input } from '@angular/core';
+import {
+  MonkeyModalConfig,
+  MonkeyModalRefs,
+  MonkeyStyleGuideModalService
+} from 'monkey-style-guide';
+
+@Component({
+  selector: 'mk-modal',
+  template: `
+    <monkey-modal
+      [config]="config"
+      [modalRef]="modalRef"
+      [onHandleConfirm]="onHandleConfirm"
+    >
+      <div style="align-items: center; display: flex; justify-content: center;">
+        <img
+          src="https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/logo.png"
+        />
+      </div>
+    </monkey-modal>
+  `,
+})
+export class ModalComponent {
+  @Input() config: MonkeyModalConfig;
+  @Input() modalRef: MonkeyModalRefs<this>;
+  @Input() onHandleConfirm = new EventEmitter<any>();
+
+  constructor(private modalService: MonkeyStyleGuideModalService) {
+    this.onHandleConfirm.subscribe(() => {
+      console.log('Confirm clicked!');
+
+      this.modalService.closeAll();
+    });
+  }
+}
+```
+
+In case you need the logic in your parent component you can simply pass the `action` key to `MonkeyModalConfig` and remove `onHandleConfirm` of your modal component like this:
+
+```Typescript
+...
+
+openModal() {
+  this.modalService.open(ModalComponent, {
+    color: 'theme',
+    size: 'md',
+    action: {
+      cancel: {
+        actionColor: 'theme',
+        actionType: 'tertiary',
+        label: 'Cancel',
+      },
+      confirm: {
+        action: () => {
+          console.log('Modal closed!');
+        },
+        actionColor: 'theme',
+        actionType: 'primary',
+        label: 'Confirm',
+      },
+    },
+  });
+}
+```
+
+```Typescript
+...
+
+export class ModalComponent {
+  @Input() config: MonkeyModalConfig;
+  @Input() modalRef: MonkeyModalRefs<this>;
+
+  constructor() {}
+}
+```
+
+---
+
+### **Radiobutton**
+
+![Radiobutton Demo Screen Shot][radiobutton-screenshot]
+
+Parameters:
+
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) message to help user to know what to do
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **placeholder** (optional)(string) message to help user that will be displayed inside the input
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyRadioButtonModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyRadioButtonModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-radiobutton
+  formControlName="gender"
+  label="Gender"
+  helperMessage="Mandatory"
+  icon="help-20"
+  infoMessage="Info message"
+  errorMessage="Validation message"
+>
+  <monkey-option label="Female" value="female"></monkey-option>
+  <monkey-option label="Male" value="male"></monkey-option>
+  <monkey-option label="I prefer not to choose" value="not_choose"></monkey-option>
+</monkey-radiobutton>
+```
+
+---
+
+### **Select**
+
+![Select Demo Screen Shot][select-screenshot]
+
+Parameters:
+
+- **errorMessage** (string) message to alert user
+- **helperMessage** (optional)(string) message to help user to know what to do
+- **icon** (optional)(string) icon name and size separeted by hyfhen
+- **infoMessage** (optional)(string) message to help user knows about this component purpose
+- **label** (string) define the label that will be displayed inside
+- **placeholder** (optional)(string) message to help user that will be displayed inside the input
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import {
+  MonkeyOptionModule,
+  MonkeySelectModule
+} from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [
+    MonkeyOptionModule,
+    MonkeySelectModule
+  ]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-select
+  errorMessage="Validation Message"
+  formControlName="documentType"
+  helperMessage="Mandatory"
+  icon="upload-20"
+  infoMessage="Info message"
+  label="Select the document type to upload"
+>
+  <monkey-option label="Personal Document" value="personal_document">
+  </monkey-option>
+  <monkey-option label="Social Contract" value="social_contract">
+  </monkey-option>
+  <monkey-option label="Procuraction Contract" value="procuration_contract">
+  </monkey-option>
+</monkey-select>
+```
+
+---
+
+### **Table**
+
+![Table Demo Screen Shot][table-screenshot]
+
+Parameters:
+
+- **dataSource** (array) the data to be displayed
+- **headers** (array) column headers
+- **loading** (optional)(boolean) show loading progress
+- **rowTemplate** (TemplateRef) the template to show rows
+- **selectable** (optional)(boolean) enable row selection
+
+Events:
+
+- **selection** returns an array with selected rows
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyTableModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyTableModule]
+})
+...
+```
+
+`example.component.ts`
+
+```Typecript
+_dataSourceHeaders = ['column1', 'column2', 'column3', 'column4'];
+_dataSource = [
+  [1, 2, 3, 4, 5, 6],
+  [5, 6, 7, 8, 9, 10],
+  [5, 6, 7, 8, 9, 10],
+  [5, 6, 7, 8, 9, 10],
+];
+```
+
+`example.component.html`
+
+```HTML
+<monkey-table
+  [dataSource]="_dataSource"
+  [headers]="_dataSourceHeaders"
+  [loading]="true"
+  [rowTemplate]="rowTemplate"
+  [selectable]="true"
+  (selection)="onHandleSelection($event)"
+>
+  <ng-template #rowTemplate let-row="row">
+    <monkey-table-column>{{ row[0] }}</monkey-table-column>
+    <monkey-table-column>{{ row[1] }}</monkey-table-column>
+    <monkey-table-column>{{ row[2] }}</monkey-table-column>
+    <monkey-table-column>{{ row[3] }}</monkey-table-column>
+  </ng-template>
+</monkey-table>
+```
+
+---
+
+### **Toggle**
+
+![Toggle Demo Screen Shot][toggle-screenshot]
+
+Parameters:
+
+- **value** (boolean)(default: false)
+- **disabled** (boolean)(default: false) to disable any action
+
+Events:
+
+- **onChange** event emited when user make changes
+
+Example:
+
+`example.module.ts`
+
+```Typescript
+import { MonkeyToggleModule } from 'monkey-style-guide';
+
+...
+
+@NgModule({
+  imports: [MonkeyToggleModule]
+})
+...
+```
+
+`example.component.html`
+
+```HTML
+<monkey-toggle [value]="_form?.get('smsNotification').value"
+  (onChange)="onHandleToggleSMS($event)">
+</monkey-toggle>
+```
+
+## Prerequisites
+
+The main feature of this project is to allow changing the application theme, such as primary colors and error colors.
+For this, it is necessary to have a file called monkey-style-guide-settings.json at the root of your project's assets folder.
+
+For example:
+
+![Settings Json Screen Shot][settings-screenshot]
+
+Content of monkey-style-guide-settings.json:
+
+```JSON
+{
+  "theme": {
+    "title": "Monkey Exchange",
+    "favicon": "assets/favicon.svg"
+  },
+  "colors": {
+    "theme": {
+      "main": "#034EA2",
+      "100": "#F5FAFF",
+      "200": "#D7EAFE",
+      "300": "#A5CFFE",
+      "400": "#72B4FD",
+      "500": "#4099FC",
+      "600": "#0F7EFB",
+      "700": "#0465D2",
+      "800": "#023064",
+      "900": "#023064",
+      "contrast": {
+        "main": "white",
+        "100": "rgba(black, 0.87)",
+        "200": "white",
+        "300": "white",
+        "400": "white",
+        "500": "white",
+        "600": "white",
+        "700": "white",
+        "800": "white",
+        "900": "white"
+      }
+    },
+    "error": {
+      "main": "#e70c0c",
+      "100": "#fbb5b5",
+      "200": "#f87f7f",
+      "300": "#f53b3b",
+      "400": "#f31e1e",
+      "500": "#e70c0c",
+      "600": "#ca0a0a",
+      "700": "#ad0909",
+      "800": "#900707",
+      "900": "#730606",
+      "contrast": {
+        "main": "white",
+        "100": "rgba(black, 0.87)",
+        "200": "rgba(black, 0.87)",
+        "300": "white",
+        "400": "white",
+        "500": "white",
+        "600": "white",
+        "700": "white",
+        "800": "white",
+        "900": "white"
+      }
+    },
+    "warning": {
+      "main": "#efa30e",
+      "100": "#fbe7be",
+      "200": "#f8d389",
+      "300": "#f4b946",
+      "400": "#f2ae29",
+      "500": "#efa30e",
+      "600": "#d28f0c",
+      "700": "#b57c0b",
+      "800": "#986809",
+      "900": "#7b5407",
+      "contrast": {
+        "main": "rgba(black, 0.87)",
+        "100": "rgba(black, 0.87)",
+        "200": "rgba(black, 0.87)",
+        "300": "rgba(black, 0.87)",
+        "400": "rgba(black, 0.87)",
+        "500": "rgba(black, 0.87)",
+        "600": "rgba(black, 0.87)",
+        "700": "rgba(black, 0.87)",
+        "800": "white",
+        "900": "white"
+      }
+    },
+    "success": {
+      "main": "#00875a",
+      "100": "#45ffc1",
+      "200": "#0dffae",
+      "300": "#00c483",
+      "400": "#00a66e",
+      "500": "#00875a",
+      "600": "#006846",
+      "700": "#004a31",
+      "800": "#002b1d",
+      "900": "#000d08",
+      "contrast": {
+        "main": "white",
+        "100": "rgba(black, 0.87)",
+        "200": "rgba(black, 0.87)",
+        "300": "rgba(black, 0.87)",
+        "400": "white",
+        "500": "white",
+        "600": "white",
+        "700": "white",
+        "800": "white",
+        "900": "white"
+      }
+    },
+    "question": {
+      "main": "#8D38FA",
+      "100": "#F4EBFF",
+      "200": "#E8D7FE",
+      "300": "#D2AFFD",
+      "400": "#A460FB",
+      "500": "#8D38FA",
+      "600": "#7710F9",
+      "700": "#5104B3",
+      "800": "#2D0264",
+      "900": "#1B013C",
+      "contrast": {
+        "main": "white",
+        "100": "rgba(black, 0.87)",
+        "200": "rgba(black, 0.87)",
+        "300": "rgba(black, 0.87)",
+        "400": "white",
+        "500": "white",
+        "600": "white",
+        "700": "white",
+        "800": "white",
+        "900": "white"
+      }
+    }
+  }
+}
+```
+
+## Installation
+
+1.  Install NPM packages:
+
+```sh
+npm install monkey-style-guide
+```
+
+## Usage
+
+Import `monkey-style-guide` in your `style.scss`
+
+```scss
+@import '~monkey-style-guide/assets/scss/theme';
+```
+
+Import `MonkeyStyleGuideModule` in your `app.module.ts`
+
+```Typescript
+import { MonkeyStyleGuideModule } from 'monkey-style-guide';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [MonkeyStyleGuideModule],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Than call the `bootstrap` method in your `app.component.ts`
+
+```Typescript
+import { Component } from '@angular/core';
+import { MonkeyStyleGuideSettingsService } from 'monkey-style-guide';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  constructor(private settingsService: MonkeyStyleGuideSettingsService) {
+    this.settingsService.boostrap('');
+  }
+}
+```
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[badge-screenshot]: https://user-images.githubusercontent.com/10110065/111625441-9e5df280-87cb-11eb-905c-008607cf859e.png
+[button-avatar-screenshot]: https://user-images.githubusercontent.com/10110065/111626956-50e28500-87cd-11eb-85c1-aaa8c06bb4e0.png
+[button-dropdown-screenshot1]: https://user-images.githubusercontent.com/10110065/111631407-1e875680-87d2-11eb-9631-d1d2ccf8f076.png
+[button-dropdown-screenshot2]: https://user-images.githubusercontent.com/10110065/111631726-82118400-87d2-11eb-9653-4502c3d82d51.png
+[buttons-screenshot]: https://user-images.githubusercontent.com/10110065/142933460-7a84ad76-b57f-40a0-b809-292af31c1e8f.png
+[checkbox-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/checkbox.png
+[contributors-shield]: https://img.shields.io/badge/Contributors-2-brightgreen?style=flat
+[contributors-url]: https://github.com/MonkeyECX/monkey-style-guide/graphs/contributors
+[date-range-picker]: https://user-images.githubusercontent.com/12416871/146080473-8543b9ae-7186-42ee-8ec8-bfd1eef09df6.png
+[expansion-screenshot1]: https://user-images.githubusercontent.com/10110065/111636157-f8b08080-87d6-11eb-86ab-86839297d068.png
+[expansion-screenshot2]: https://user-images.githubusercontent.com/10110065/111636340-24336b00-87d7-11eb-9f19-504ab96cc9af.png
+[file-upload-screenshot1]: https://user-images.githubusercontent.com/10110065/111640018-8b065380-87da-11eb-8d47-87ddea29b943.png
+[icons-screenshot1]: https://user-images.githubusercontent.com/12416871/189434246-0e34f5b8-f0fe-4cc5-9e1c-1943cf73f0ca.png
+[input-filter-screenshot]: https://user-images.githubusercontent.com/32619691/163216159-3a9f985e-3ba9-4e10-8ba4-0f60931f83d1.png
+[input-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/input.png
+[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=flat-square
+[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=157
+[linkedin-url]: https://www.linkedin.com/company/monkeyexchange
+[modal-screenshot]: https://user-images.githubusercontent.com/12416871/119838920-2c480f00-beda-11eb-9e44-e42262f39c34.png
+[radiobutton-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/radiobutton.png
+[select-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/select.png
+[settings-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/style-settings-json.png
+[table-screenshot]: https://user-images.githubusercontent.com/12416871/119574643-29d79f00-bd8c-11eb-9747-2e6dc86410da.png
+[toggle-screenshot]: https://user-images.githubusercontent.com/12416871/119849813-53570e80-bee3-11eb-87f8-0871f8e26f58.png