npm - monkey-style-guide - Versions diffs - 2.0.179 → 2.0.180 - Mend

monkey-style-guide 2.0.179 → 2.0.180

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (603) hide show

package/README.md CHANGED Viewed

@@ -1,1282 +1,1283 @@
-[![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**
-- **address-book**
-- **arrow-down**
-- **arrow-left**
-- **arrow-line-right**
-- **arrow-right**
-- **arrow-up**
-- **arrows**
-- **auction**
-- **average-tax**
-- **bank-account**
-- **bank-agency**
-- **bank**
-- **banknote-search**
-- **bell**
-- **block**
-- **book-open-text**
-- **book**
-- **box**
-- **build-approved**
-- **build-person**
-- **build-refused**
-- **build-waiting**
-- **calendar**
-- **calendar-box**
-- **camera**
-- **card-machine**
-- **card**
-- **cash-banknote-invoice**
-- **chat**
-- **check-circle-out**
-- **check-circle**
-- **check-grey**
-- **check-white**
-- **check**
-- **clipboard**
-- **clock-closed**
-- **clock**
-- **close-circle**
-- **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**
-- **drag-drop**
-- **edit-square**
-- **edit**
-- **email-send-fast**
-- **email**
-- **empty-doc**
-- **error**
-- **eye-closed**
-- **eye-open**
-- **filter-add**
-- **filter**
-- **grid**
-- **hands-clap**
-- **help**
-- **hexagon**
-- **home**
-- **image**
-- **info**
-- **invoice**
-- **invoices-anticipated**
-- **invoices-approval**
-- **invoices-refused**
-- **lighting-circle**
-- **list**
-- **location-pin**
-- **login**
-- **logout**
-- **mail-box-upload**
-- **mail-open-document**
-- **medal**
-- **menu**
-- **money-cedule**
-- **money-discount**
-- **money-hand**
-- **money-net**
-- **money-new**
-- **money-percent**
-- **money-refused**
-- **money-sign**
-- **money**
-- **money-waiting**
-- **more-circle**
-- **more**
-- **new-company**
-- **offered**
-- **open-external**
-- **password**
-- **people**
-- **percent**
-- **percent-box**
-- **person-document**
-- **person-sad**
-- **phone-call**
-- **phone**
-- **pin-navigation**
-- **pork**
-- **radio**
-- **refresh**
-- **registration**
-- **repeat**
-- **search**
-- **second-warning**
-- **settings**
-- **shield-chekmark**
-- **star-shining**
-- **star**
-- **store**
-- **target-dart-arrow**
-- **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.bootstrap('');
-  }
-}
-```
-<!-- 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://github.com/MonkeyECX/monkey-style-guide/assets/12416871/a71f2dcf-b9d2-4868-9868-9ac798ffe28a
-[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**
+- **address-book**
+- **arrow-down**
+- **arrow-left**
+- **arrow-line-right**
+- **arrow-right**
+- **arrow-up**
+- **arrows**
+- **auction**
+- **average-tax**
+- **bank-account**
+- **bank-agency**
+- **bank**
+- **banknote-search**
+- **bell**
+- **block**
+- **book-open-text**
+- **book**
+- **box**
+- **build-approved**
+- **build-person**
+- **build-refused**
+- **build-waiting**
+- **calendar**
+- **calendar-box**
+- **camera**
+- **card-machine**
+- **card**
+- **cash-banknote-invoice**
+- **chat**
+- **check-circle-out**
+- **check-circle**
+- **check-grey**
+- **check-white**
+- **check**
+- **clipboard**
+- **clock-closed**
+- **clock**
+- **close-circle**
+- **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**
+- **drag-drop**
+- **edit-square**
+- **edit**
+- **email-send-fast**
+- **email**
+- **empty-doc**
+- **error**
+- **eye-closed**
+- **eye-open**
+- **filter-add**
+- **filter**
+- **grid**
+- **hands-clap**
+- **help**
+- **hexagon**
+- **home**
+- **image**
+- **info**
+- **invoice**
+- **invoices-anticipated**
+- **invoices-approval**
+- **invoices-refused**
+- **lighting-circle**
+- **list**
+- **location-pin**
+- **login**
+- **logout**
+- **mail-box-upload**
+- **mail-letter-fast-circle**
+- **mail-open-document**
+- **medal**
+- **menu**
+- **money-cedule**
+- **money-discount**
+- **money-hand**
+- **money-net**
+- **money-new**
+- **money-percent**
+- **money-refused**
+- **money-sign**
+- **money**
+- **money-waiting**
+- **more-circle**
+- **more**
+- **new-company**
+- **offered**
+- **open-external**
+- **password**
+- **people**
+- **percent**
+- **percent-box**
+- **person-document**
+- **person-sad**
+- **phone-call**
+- **phone**
+- **pin-navigation**
+- **pork**
+- **radio**
+- **refresh**
+- **registration**
+- **repeat**
+- **search**
+- **second-warning**
+- **settings**
+- **shield-chekmark**
+- **star-shining**
+- **star**
+- **store**
+- **target-dart-arrow**
+- **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.bootstrap('');
+  }
+}
+```
+<!-- 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://github.com/MonkeyECX/monkey-style-guide/assets/12416871/a71f2dcf-b9d2-4868-9868-9ac798ffe28a
+[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