@apexara/ng-components 1.0.0

package/README.md

@@ -0,0 +1,1867 @@
+# ng-components
+
+This package provides custom Angular UI components, developed and maintained by IPI Soft LLC. <br>
+Website: www.apexara.com 
+
+# Installation
+
+```sh
+npm install @apexara/ng-components
+```
+
+# Components
+
+[🔽 Button](#ipi-button-component) <br>
+[🔽 Checkbox](#ipi-checkbox-component) <br>
+[🔽 Chip](#ipi-checkbox-component) <br>
+[🔽 Dialog](#ipi-dialog-component) <br>
+[🔽 Drawer](#ipi-drawer-component) <br>
+[🔽 Expander](#ipi-expander-component) <br>
+[🔽 Image](#ipi-image-component) <br>
+[🔽 Input](#ipi-input-component) <br>
+[🔽 Listbox](#ipi-listbox-component) <br>
+[🔽 Radiobutton](#ipi-radio-button-component) <br>
+[🔽 Select](#ipi-select-component) <br>
+[🔽 Datepicker](#ipi-datepicker-component) <br>
+[🔽 Carousel](#ipi-carousel-component) <br>
+[🔽 Snackbar](#ipi-snackbar-service) <br>
+[🔽 Table](#ipi-table-component) <br>
+[🔽 Textarea](#ipi-textarea-component) <br>
+[🔽 Tooltip](#ipi-tooltip-component) <br>
+
+
+-----------------------------------------------------------------
+
+# IPI Button Component
+A simple button 
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiButtonComponent }
+>from '@apexara/ng-components/button';
+>
+>@Component({
+>  imports: [ IpiButtonComponent ]
+>})
+>
+>export class ButtonExampleComponent {
+>
+>  public handleClickChange(event: PointerEvent | MouseEvent | KeyboardEvent): void {
+>    // click change login on button emit
+>  }
+>
+>  public handleFocusChange(event: FocusChange): void {
+>    // focus change login on button emit (focusin or focusout type of event)
+>   }
+>
+>}
+>```
+>**`parent.component.html`**
+>```html
+><ipi-button 
+>   [options]="{ 
+>     iconLeft: 'icon.svg',
+>     iconRight: 'icon.svg'
+>     throttleTime: 500ms, // A delay after each clickChange event, defaults to 300ms
+>   }"
+>   [link]="routerLink"
+>   [state]="routerLink state"
+>   (focusChange)="handleFocusChange()"
+>   (clickChange)="handelClickChange()">
+>       Click here 
+></ipi-button>
+>```
+
+### Inputs
+
+>#### options
+>two icons inside the button can be passed optionally on the left or right side ot the text.
+
+>#### clickChange
+>event emitter to handle clicks
+
+>#### focusChange
+>event emitter to focus changes on the a tag inside the ipi-button
+
+>#### link
+>routerLink can be passed to for navigation
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-button:
+>
+>```css
+>ipi-button {
+>    /* Sizes: */
+>    --ipi-button-border-radius: 4px;
+>
+>    /* Focus outline */
+>    --ipi-button-focus-outline: 2px solid #F96138;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-button-disabled-background-color: #E7E7E7;
+>
+>    --ipi-button-left-svg-fill: #FFFFFF;
+>    --ipi-button-left-svg-stroke: #FFFFFF00;
+>
+>    --ipi-button-right-svg-fill: #FFFFFF;
+>    --ipi-button-right-svg-fill: #FFFFFF00;
+>		
+>    --ipi-button-text-color: #FFFFFF;
+>    --ipi-button-border-color: none;
+>    --ipi-button-background-color: #0B1222;
+>
+>/* Note: When you want to setup the color of your icon
+> you should experiment with both these variables or consider
+> using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Checkbox Component
+A simple checkbox that can project content, be used with FormGroup and have a tooltip displayed 
+with a IPI Tooltip.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiCheckboxComponent, IpiCheckboxOptions } 
+>from '@apexara/ng-components/checkbox';
+>
+>@Component({
+>  imports: [ IpiCheckboxComponent ]    
+>})
+>
+>export class CheckboxExampleComponent {
+>
+>  public formGroup = new FormGroup({
+>    checkboxControl: [false, [Validators.required]],
+>   });
+>
+>  public checkboxOptions: IpiCheckboxOptions = {
+>    formGroup: this.formGroup,
+>    formControlName: 'checkboxControl',
+>  }
+>
+>}
+>```
+>**`parent.component.html`**
+>```html
+><ipi-checkbox 
+>  [checked]="true"
+>  [disabled]="false"
+>  [options]="checkboxOptions"
+>  [tooltip]="'example tooltip text'">
+></ipi-checkbox>
+>
+>```
+### Inputs
+
+>#### checked
+>Sets the checked attribute of the checkbox input by default.
+
+>#### disabled
+>Can be used to disabled the input and to prevent a user from interacting with it.
+
+>#### tooltip
+>a text that if present triggers a tooltip component with it inside.
+
+>#### formGroup
+>Refference to the FormGroup that the ipi-checkbox will handle
+
+>#### formControlName
+>Refference to the name of the control that we will access in the FormGroup
+
+### CSS Variables 
+>Here are all the CSS variables (and their default values) you can set when using ipi-checkbox:
+>
+>```css
+>ipi-checkbox {
+>    /* Sizes */
+>    --ipi-checkbox-font-size: 14px;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-checkbox-background-color: #F7F8FB;
+>    --ipi-checkbox-wrapper-border-color: transparent;
+>    --ipi-checkbox-arrow-color: #FFFFFF;
+>    --ipi-checkbox-tooltip-icon-stroke: #FFFFFF;
+>
+>    --ipi-checkbox-border-color: #E9E9E9; 
+>    --ipi-checkbox-border-hover-color: #F96138;
+>    --ipi-checkbox-outline-color: none;
+>
+>    /* Other */
+>    --ipi-checkbox-box-shadow-color: #F96138;
+>    --ipi-checkbox-disabled-opacity: 0.5;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Chip component
+A simple visual container for displaying a text, state, etc.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiChipComponent } 
+>from '@apexara/ng-components/chip';
+>
+>@Component({
+>  imports: [ IpiChipComponent ]
+>})
+>
+>export class ChipExampleComponent { }
+>
+>```
+>**`parent.component.html`**
+>```html
+><ipi-chip 
+>  class="with-close-icon"
+>  [closeIcon]="true"
+>  (closeChange)="chipClose()">
+>    With Close Icon
+></ipi-chip>
+>```
+>
+
+### Inputs
+>#### closeIcon
+>boolean that triggers an X icon that has the closeChange event emitter attached.
+
+>#### closeChange
+>event emitter to handle clicks
+
+### CSS Variables
+>Here all the available CSS variables (and their default values) you can set when using ipi-chip:
+>
+>```css
+>ipi-chip {
+>    /* Sizes: */
+>    --ipi-chip-font-size: 12px;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-chip-color: #FFFFFF;
+>    --ipi-chip-background-color: #0B1222;
+>    --ipi-chip-icon-color: #FFFFFF;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Dialog Component
+Simple Dialog component with the option to project everything necessary - close icon, title, description, other content, actions.
+The styling is only for the Dialog itself, the close icon, the title and the description. The content and the actions can be anything so their styling is up to the parent component
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiDialogComponent }
+>from '@apexara/ng-components/dialog';
+>
+>@Component({
+>  imports: [ IpiDialogComponent ]
+>})
+>
+>export class DialogExampleComponent { }
+>```
+>**`parent.component.html`**
+>```html
+>@if (shouldRender) {
+>    <ipi-dialog>
+>        <ng-template #title>Title Here</ng-template>
+>
+>        <ng-template #description>Description Here</ng-template>
+>
+>        <ng-template #content>
+>            <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+>        </ng-template>
+>
+>        <ng-template #actions>
+>            <ipi-button (clickChange)="shouldRender = false">
+>                Cancel
+>            </ipi-button>
+>        </ng-template>
+>    </ipi-dialog>
+>}
+>```
+
+### Inputs
+>#### Dialog Close Icon
+>Shows a close icon. All you need is to pass [closeIcon]="true" and a function that closes the dialog. In example
+
+>#### Dialog Title
+>The title is projected with the Select=['title']. All you need is an HTML element with 'title' set. In example
+
+>#### Dialog Description
+>The description is projected with the Select=['description']. All you need is an HTML element with 'description' set. In example
+>```html
+><ng-template #description>Description Here</ng-template>
+>```
+
+>#### Dialog Content
+>You can place anything you want here. From Forms to Lists or whatever other stuff you need.
+>The Content is projected with the Select=['content']. All you need is an HTML element with 'content' set. In example
+>
+>**`parent.component.html`**
+>```html
+><ng-template #content>
+>    <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+></ng-template>
+>```
+>
+>**`parent.component.css`**
+>```css
+>ipi-input {
+>    --ipi-input-error-color: red;
+>}
+>```
+
+>#### Dialog Actions
+>**`parent.component.html`**
+>The Actions are projected with the Select=['actions']. All you need is an HTML element with 'actions' set. In example
+>```html
+><ng-template #actions>
+>    <ipi-button>Close</ipi-button>
+></ng-template>
+>```
+>**`parent.component.html`**
+>Or with multiple actions:
+>```html
+><ng-template #actions>
+>    <ipi-button (clickChange)="shouldRender = false">Close</ipi-button>
+>    <ipi-button (clickChange)="triggerAction()">Trigger Action</ipi-button>
+></ng-template>
+>```
+>Again, the styling of the buttons in this case should happen in the Parent component. You can group them in a div with 'display: flex'
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-dialog:
+>
+>```css
+>ipi-dialog {
+>    /* Sizes: */
+>    --ipi-dialog-max-width: 432px;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-dialog-backdrop-background: #0B1222;
+>    --ipi-dialog-background: #FFFFFF;
+>    --ipi-dialog-close-icon-color: #0B1222;
+>    --ipi-dialog-close-icon-hover-color: #F96138;
+>    --ipi-dialog-title-color: #0B1222;
+>    --ipi-dialog-description-color: #5D6068;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Drawer Component
+Simple Drawer component with the option to project everything necessary - title, description, content, actions.
+The styling is only for the Drawer itself, the title and the description. The content and the actions can be anything so their styling is up to the parent component
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiDrawerComponent }
+>from '@apexara/ng-components/drawer';
+>
+>@Component({
+>  imports: [ IpiDrawerComponent ]
+>})
+>
+>export class DrawerExampleComponent { }
+>```
+>**`parent.component.html`**
+>```html
+>@if (shouldRender) {
+>    <ipi-drawer #drawer (clickChange)="shouldRender = false">
+>        <ng-template #title>Title Here</ng-template>
+>
+>        <ng-template #description>Description Here</ng-template>
+>
+>        <ng-template #content>
+>            <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+>        </ng-template>
+>
+>        <ng-template #actions>
+>            <ipi-button (clickChange)="drawer.close()">
+>                Close
+>            </ipi-button>
+>        </ng-template>
+>    </ipi-drawer>
+>}
+>```
+
+### Inputs
+
+>#### closeChange
+>This function should close the drawer. It is called by drawer.close() and is used for the closing transition. It must be provided if drawer.close() is used.
+
+>#### Drawer Title
+>The title is projected with the Select=['title']. All you need is an HTML element with 'title' set. In example
+
+>#### Drawer Description
+>The description is projected with the Select=['description']. All you need is an HTML element with 'description' set. In example
+>```html
+><ng-template #description>Description Here</ng-template>
+>```
+
+>#### Drawer Content
+>You can place anything you want here. From Forms to Lists or whatever other stuff you need.
+>The Content is projected with the Select=['content']. All you need is an HTML element with 'content' set. In example
+>
+>**`parent.component.html`**
+>```html
+><ng-template #content>
+>    <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+></ng-template>
+>```
+>
+>**`parent.component.css`**
+>```css
+>ipi-input {
+>    --ipi-input-error-color: red;
+>}
+>```
+
+>#### Drawer Actions
+>**`parent.component.html`**
+>The Actions are projected with the Select=['actions']. All you need is an HTML element with 'actions' set. In example
+>```html
+><ng-template #actions>
+>    <ipi-button>Close</ipi-button>
+></ng-template>
+>```
+>**`parent.component.html`**
+>Or with multiple actions:
+>```html
+><ng-template #actions>
+>    <ipi-button (clickChange)="triggerAction1()">Trigger Action 1</ipi-button>
+>    <ipi-button (clickChange)="triggerAction2()">Trigger Action 2</ipi-button>
+></ng-template>
+>```
+>Again, the styling of the buttons in this case should happen in the Parent component. You can group them in a div with 'display: flex'
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-drawer:
+>
+>```css
+>ipi-drawer {
+>    /* Sizes: */
+>    --ipi-drawer-width: 410px;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-drawer-backdrop-background: #0B1222;
+>    --ipi-drawer-background: #FFFFFF;
+>    --ipi-drawer-title-color: #0B1222;
+>    --ipi-drawer-description-color: #5D6068;
+>    --ipi-drawer-box-shadow: 0px 4px 8px 0px #D6D6D635;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Expander Component
+A simple component that has a title and and expanding option that displays additional text 
+by expanding horizontally.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiExpanderComponent } 
+>from '@apexara/ng-components/expander';
+>
+>@Component({
+>  imports: [ IpiExpanderComponent ]
+>})
+>
+>export class ExpanderExampleComponent { }
+>```
+>**`parent.component.html`**
+>```html
+><ipi-expander [isOpen]="true">
+>    <ng-container title>
+>        With Variables
+>    </ng-container>
+>
+>    <ng-container content>
+>        Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+>    </ng-container>
+><ipi-expander>
+>
+>```
+
+### Inputs
+
+>#### isOpen -> boolean (false)
+>Set this to "true", to make the expander open by default.
+
+>#### maxHeight -> number | null (null)
+>Set this to stop the content's height from going above a certain number (px). 
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-expander:
+>```css
+>ipi-expander {
+>    /* Sizes: */
+>    --ipi-expander-border: 0px;
+>
+>    /* Colors, Fills, Strokes: */
+>    --ipi-expander-background-color: #FFFFFF;
+>    --ipi-expander-title-color: #0B1222;
+>    --ipi-expander-content-color: #5D6068;
+>    --ipi-expander-chevron-color: #5D6068;
+>    --ipi-expander-chevron-open-color: #F96138;
+>
+>    --ipi-expander-outline-color: none;
+>    /* Other */
+>    --ipi-expander-box-shadow: 0px 4px 8px 0px rgba(214, 214, 214, 0.35);
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Image Component
+An image component that fetches an asset and displays it.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiIconComponent } 
+>from '@apexara/ng-components/image';
+>
+>@Component({
+>  imports: [ IpiIconComponent ]
+>})
+>
+>export class IconExampleComponent { }
+>
+>```
+>
+>**`parent.component.html`**
+>```html
+>
+><ipi-img 
+>  [src]="assets/img/example.svg" 
+>  [ariaLabel]="Example aria label for icon.">
+></ipi-img>
+>
+>```
+
+### Inputs
+>#### src 
+>A url path to the desired img.
+
+>### ariaLabel
+>a string value that adds accessible name to the image.
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Input Component
+A Simple input field that handles formGroup, outputs validation errors, has helper messages and infos,
+emits click events on customizable icons that can be used to handle input changes.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiInputComponent, IpiInputOptions }
+>from '@apexara/ng-components/input';
+>
+>@Component({
+>  imports: [ IpiInputComponent ]
+>})
+>
+>export class InputExampleComponent {
+>
+>  public formGroup = new FormGroup({
+>    inputControl: [[], [Validators.required]],
+>   });
+>
+>  public inputOptions = {
+>   label: 'Sample label',
+>   type: 'text',
+>   placeholder: 'sample placeholder',
+>   info: 'Sample info message on hover',
+>   infoImg: 'icon.svg',
+>   helperText: 'Sample helperText',
+>   helperRoute: '/forgot-password',
+>   prefixImg: 'email.svg',
+>   suffixImg: 'password-hide.svg'
+>   formGroup: this.formGroup,
+>   formControlName: 'inputControl',
+>   errors: {
+>       required: 'error message to display',
+>       }
+>  }
+>
+>}
+>
+>```
+>**`parent.component.html`**
+>```html
+><ipi-input [options]="inputOptions">
+></ipi-input>
+>
+>```
+
+### Inputs
+
+>#### label
+>Label above the input field.
+
+>#### type
+>You can pass the default input type attribute. Default is 'text'.
+
+>#### info && infoImg
+>Info is used together with infoImg to display and icon next to the label that on hover triggers
+>a tooltip with the info string.
+
+>#### placeholder
+>Replaces the input placeholder.
+
+>#### helperText && helperRoute
+>Positioned above the input on the right side ot the label & info can be used
+>to navigate to a given route.
+
+>#### prefixImg && suffixImg
+>Two images for the beggining and end of the input field.
+>suffixImg also emits event on clicks enabling additional logic to be added.
+
+>#### formGroup
+>Refference to the FormGroup that the ipi-input will handle
+
+>#### formControlName
+>Refference to the name of the control that we will access in the FormGroup
+
+>#### errors
+>An object with properties which keys are refferences to Form ValidationErrors and a message to display if
+>the input Control has the error.
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-input:
+>```css
+>ipi-input {
+>    /* Colors, Fills, Strokes: */
+>    --ipi-input-header-color: #0B1222;
+>    --ipi-input-placeholder-color: #0B1222;
+>    --ipi-input-text-color: #0B1222;
+>
+>    /* when there are validator errors we make the text pop-up underneath and change its color */
+>    --ipi-input-error-color: #F96138;
+>    --ipi-input-border-error-width: 1px;
+>
+>    /* Tooltip icon styling */
+>    --ipi-input-tooltip-icon-fill: transparent;
+>    --ipi-input-tooltip-icon-stroke: #C6C6C6;
+>
+>    /* on all validators passed we make the text with this color  */
+>    --ipi-input-success-color: #14BD6C;
+>    --ipi-input-border-color: #E9E9E9;
+>    --ipi-input-border-width: 1px;
+>    --ipi-input-value-color: #0B1222;
+>
+>    /* Left icon fill & stroke : */
+>    `--ipi-input-icon-left-fill: #FFFFFF;
+>    `--ipi-input-icon-left-stroke: transparent;
+>
+>    /* Right icon fill & stroke: */
+>    --ipi-input-icon-right-fill: #FFFFFF;
+>    --ipi-input-icon-right-stroke: transparent;
+>
+>    /* Info icon (the one ot top with the label) fill & stroke */
+>    `--ipi-input-icon-info-fill: #FFFFFF;
+>    `--ipi-input-icon-info-stroke: transparent;
+>
+>/* Note: When you want to setup the color of your icon
+> you should experiment with both these variables or consider
+> using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Listbox Component
+IPI Listbox provides selectable options in a list format.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiListboxComponent, IpiListboxOptions } 
+>from '@apexara/ng-components/listbox';
+>
+>@Component({
+>  imports: [ IpiListboxComponent ]
+>})
+>
+>export class ListboxExampleComponent {
+>
+>  public formGroup = new FormGroup({
+>    listboxControl: [[], [Validators.required]],
+>   });
+>
+>  public listboxOptions = {
+>   label: 'Sample label',
+>   tooltip: 'Optional tooltip for listbox.'
+>   data: [
+>     { label: 'Option 1', value: 1 },
+>     { label: 'Option 2', value: 2 },
+>     { label: 'Option 3', value: 3 },
+>     { label: 'Option 4', value: 4 },
+>     { label: 'Option 5', value: 5 },
+>   ],
+>   formGroup: this.formGroup,
+>   formControlName: 'listboxControl',
+>  }
+>
+>  public selectChange(event) {
+>    // handle change selection if you are not using a form control.
+>  }
+>}
+>
+>```
+>**`parent.component.html`**
+>```html
+>
+><ipi-listbox 
+>  [options]="listboxOptions"
+>  (selectChange)="$event">
+></ipi-listbox>
+>
+>```
+
+### Inputs
+
+>#### label
+>Label above the listbox container.
+
+>#### formGroup
+>Refference to the FormGroup that the ipi-listbox will handle a specific control
+
+>#### formControlName
+>Refference to the name of the control that we will access in the FormGroup
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-listbox:
+
+>```css
+>ipi-listbox {
+>    /* Colors, Fills, Strokes: */
+>    --ipi-listbox-label-color: default;
+>    --ipi-listbox-background-color: #FFFFFF;
+>
+>    --ipi-listbox-item-color: #00000099;
+>    --ipi-listbox-item-selected-color: #F96138;
+>
+>    /* Border */
+>    --ipi-listbox-border-color: #F2F2F2;
+>    --ipi-listbox-border-hovor-color: #4B5368;
+>
+>    /* Tooltip icon styling */
+>    --ipi-listbox-tooltip-icon-fill: transparent;
+>    --ipi-listbox-tooltip-icon-stroke: #C6C6C6;
+>
+>/* Note: When you want to setup the color of the icon you
+> should experiment with both these variables >(fill&stroke)
+> or consider using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Radio-button Component
+Simple styled radio-button that can accept a formGroup and a control.
+
+## Usage
+>**`parent.component.html`**
+>```html
+><ipi-radio-button 
+>   [options]="{ 
+>     data: [dataOptionOne, dataOptionTwo],
+>     inline: true
+>     formGroup: formGroup
+>     formControlName: formGroup.controls[controlName]
+>   }">
+></ipi-radio-button>
+>
+><ipi-radio-button 
+>   [options]="{
+>     checked: 1
+>     data: [dataOptionsOne, dataOptionTwo]
+>   }"
+>   (selectChange)="handleChange($event)">
+></ipi-radio-button>
+>```
+
+### Inputs
+
+>#### data 
+>Array of elements of type IpiRadioData
+
+>#### inline
+>Property that sets the flex-direction to row instead of column(default)
+
+>#### checked
+>Number refference to the index of the element inside the Array of data that we want to be checked by default.
+>Note: for FormGroup use default value inside the FormControl building.
+
+>#### formGroup
+>Refference to the FormGroup that the radio-button will handle
+
+>#### formControlName
+>Refference to the name of the control that we will access in the FormGroup
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-radio-button:
+
+>```css
+>ipi-radio-button {
+>    --ipi-radio-button-background-color: #FFFFFF;
+>
+>    --ipi-radio-button-text-color: #5D6068;
+>
+>    --ipi-radio-button-unchecked-border-color: #E9E9E9;
+>    --ipi-radio-button-checked-border-color: #F96138;
+>    --ipi-radio-button-disabled-border-color: #E7E7E7;
+>
+>    --ipi-radio-button-outline-color: none;
+>
+>    --ipi-radio-button-tooltip-icon-fill: transparent;
+>    --ipi-radio-button-tooltip-icon-stroke: #C6C6C6;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Select Component
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiSelectComponent, IpiSelectOptions } 
+>from '@apexara/ng-components/select';
+>
+>@Component({
+>  imports: [ IpiSelectComponent ],
+>})
+>
+>export class SelectExampleComponent {
+>
+>   public selectForm = this.formBuilder.group({
+>    selectControl: [[], [Validators.required]],
+>   });
+>
+>   public execute() {
+>     // bind any logic to select change or helperText click
+>   }
+>
+>  public selectOptions: IpiSelectOptions = {
+>    label: 'Example label',
+>    data: [
+>           { label: 'Any string', value: any },
+>           { label: '', value: any },
+>           { label: '', value: any },
+>    ],
+>    tooltip: 'tooltip text',
+>    placeholder: 'Placeholder value',
+>    helperText: 'Forgot password?',
+>    prefixImg: 'example.svg',
+>    formGroup: this.selectForm,
+>    formControlName: 'selectControl',
+>    errors: {
+>      required: 'Select is required'
+>    }
+>    ,
+>    // Optional: cap dropdown max height (px)
+>    maxDropdownHeightPx: 240,
+>  }
+>}
+>```
+>**`parent.component.html`**
+>```html 
+>
+><ipi-select 
+>  [options]='selectOptions'
+>  (selectChange)='execute()'
+>  (helperTextChange)='execute()'>
+><ipi-select>
+>```
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-select:
+>```css
+>ipi-select {
+>    /* Dropdown styling */
+>    --ipi-select-dropdown-box-shadow: none;
+>
+>    /* Input styling */
+>    --ipi-select-input-text-color: #0B1222;
+>    --ipi-select-input-text-selected-color: #F96138;
+>    --ipi-select-input-placeholder-color: #0B1222;
+>
+>   /* Chip styling (used on searchable multiple options) */
+>   --ipi-select-chip-font-size: 10px;
+>   --ipi-select-chip-color: #FFFFFF;
+>   --ipi-select-chip-background-color: #0B1222;
+>   --ipi-select-chip-icon-color; #FFFFFF;
+>
+>    /* tooltip icon styling */
+>    --ipi-select-tooltip-icon-fill: transparent;
+>    --ipi-input-tooltip-icon-stroke: #C6C6C6;
+>
+>    /* Prefix icon styling */
+>    --ipi-select-icon-prefix-fill: #C6C6C6;
+>    --ipi-select-icon-prefix-stroke: transparent;
+>
+>    /* Background color of the input element inside the select  */
+>    --ipi-select-input-background-color: #FFFFFF00;
+>
+>    /* Border color of the input element inside the select  */
+>    --ipi-select-input-border-color: #E9E9E9; 
+>    --ipi-select-input-border-width: 1px;
+>
+>    /* Options divider color */
+>    --ipi-select-options-divider-color: #E9E9E9;
+>    --ipi-select-options-divider-height: 1px;
+>
+>    /* Border color on hover  */
+>    --ipi-select-input-border-hover-color: #4B5368;
+>
+>    /* Border color on disabled */
+>    --ipi-select-input-border-disabled-color: #F2F2F2;
+>
+>    /* Border and text color for when Select is invalid */
+>    --ipi-select-invalid-color: #F96138;
+>    --ipi-select-invalid-border-width: 1px;
+>
+>    /* Arrow: */
+>    --ipi-select-arrow-color: #5D6068;
+>    --ipi-select-arrow-checked-color: #F96138;
+>
+>    /* Header: */
+>    --ipi-select-header-color: #0B1222;
+>    --ipi-select-helper-text-color: #5D6068;
+>
+>    /* if type table */
+>    --ipi-select-input-table-color: #5D6068;
+>
+>    /* Dropdown: */
+>    --ipi-select-dropdown-border-color: #E9E9E9;
+>    --ipi-select-dropdown-background-color: #FFFFFF;
+>
+>/* Note: When you want to setup the color of your icon
+> you should experiment with both these variables or consider
+> using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Datepicker Component
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiDatepickerComponent, IpiDatepickerOptions } 
+>from '@apexara/ng-components/datepicker';
+>
+>@Component({
+>  imports: [ IpiDatepickerComponent ],
+>})
+>
+>export class DatepickerExampleComponent {
+>
+>   public datePickerForm = this.formBuilder.group({
+>     singleDate: ['', [Validators.required]],
+>     fromRange: ['', [Validators.required]],
+>     toRange: ['', [Validators.required]],
+>   });
+>
+>   this.singleDateOptions = { 
+>     label: 'Pick a single date.',
+>     formGroup: this.formGroup,
+>     formControlName: 'singleDate',
+>     errors: {
+>       required: 'This is a required field.'
+>     },
+>     min: new Date(2000, 1, 1),
+>     max: new Date(2025, 1, 1),
+>   }
+>
+>   this.rangeDateOptions = {
+>      label: 'Pick a range dates.',
+>      formGroup: this.formGroup,
+>      formControlName: new DateRangeFormControls('fromRange', 'toRange'),
+>      errors: {
+>        required: 'This is a required field',
+>      },
+>      min: new Date(2000, 1, 1),
+>      max: new Date(2025, 1, 1),
+>   };
+>
+>}
+>```
+>**`parent.component.html`**
+>```html 
+> <ipi-datepicker [options]="rangeDateOptions"></ipi-datepicker>
+>
+> <ipi-datepicker [options]="singleDateOptions"></ipi-datepicker>
+>```
+
+### Inputs
+>
+>
+>#### options
+>Options are of type IpiDatepickerOptions with the following properties:
+>
+>    label - string - used for how long the snackbar should be displayed
+>
+>    formGroup - Refference to the FormGroup that the datepicker will handle
+>
+>    formControlName - either a string or instance of class DateRangeFormControls
+>
+>    min - a Minimal value for Date to be selectable.
+>
+>    max - a Maximum value for Date to be selectable.
+>
+>    errors - An object with properties which keys are
+>    refferences to Form ValidationErrors and a message to display if
+>    the input Control has the error.
+>
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-datepicker:
+>```css
+>ipi-datepicker {
+>
+>  /* Picker variables */
+>   --ipi-datepicker-svg-background-color:#FF7955;
+>   --ipi-datepicker-border: 1px solid #E9E9E9;
+>   --ipi-datepicker-border-hover-color: #FF7955;
+>   
+>   --ipi-datepicker-error-color: #F96138;
+>   --ipi-datepicker-svg-fill-color #FFFFFF;
+>   
+>   --ipi-datepicker-svg-background-hover-color: #F96138;
+>   
+>   --ipi-datepicker-input-color: #0B1222;
+>
+>   --ipi-datepicker-header-text-color: #FF7955;
+>
+>   --ipi-calendar-background-color: #FFFFFF;
+>
+>   --ipi-calendar-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+>
+>   --ipi-calendar-header-active-date-view-focus-color: #FFFFFF;
+>   
+>   --ipi-calendar-header-active-date-view-focus-background-color: #FF7955;
+>   
+>   --ipi-calendar-header-active-date-view-hover-color: #FFFFFF;
+>   
+>   --ipi-calendar-header-active-date-view-hover-background-color: #FF7955;
+>
+>   --ipi-calendar-header-chevron-hover-focus-color: #FFFFFF;
+>   
+>   --ipi-calendar-header-chevron-hover-focus-background-color: #FF7955;
+>   
+>   --ipi-calendar-header-chevron-disabled-color: #5D6068;
+>   
+>   --ipi-calendar-month-view-table-header-color: #C6C6C6;
+>   
+>   --ipi-calendar-month-view-table-header-border-bottom-color: #C6C6C6;
+>   
+>   --ipi-calendar-multi-year-view-table-header-border-bottom-color: #C6C6C6;
+>   
+>   --ipi-calendar-year-view-table-header-border-bottom-color: #C6C6C6;
+>   
+>   --ipi-calendar-body-cell-color: #0B1222;
+>
+>   --ipi-calendar-body-cell-background-color: none;
+>
+>   --ipi-calendar-body-cell-border: none;
+>
+>   --ipi-calendar-body-cell-hover-color: white;
+>
+>   --ipi-calendar-body-cell-hover-background-color: #FFD2C6;
+>  
+>   --ipi-calendar-body-today-cell-border: #FFD2C6;
+> 
+>   --ipi-calendar-body-active-cell-background-color: #f9613880;
+>   --ipi-calendar-body-cell-selected-color: #FFFFFF;
+>   --ipi-calendar-body-cell-selected-background-color: #F96138;
+>   --ipi-calendar-body-cell-in-range-background-color: #FFF2EF;
+>   --ipi-calendar-body-cell-in-range-active-background-color: #FFD2C6;
+> 
+>   --ipi-calendar-body-cell-in-preview-background-color: #F962381C;
+>   
+>   --ipi-calendar-body-cell-in-preview-border: 1px dashed #F96138;
+>   --ipi-calendar-body-cell-in-range-border: 1px solid #F96138;
+>   --ipi-calendar-body-cell-range-start-border: 1px sold #F96138;
+>   --ipi-calendar-body-cell-range-start-background-color: #F96138;
+>   
+>   --ipi-calendar-body-cell-range-start-color: #FFFFFFF;
+>   --ipi-calendar-body-cell-range-end-border: 1px sold #F96138;
+>   --ipi-calendar-body-cell-range-end-background-color: #F96138;
+>   
+>   --ipi-calendar-body-cell-range-end-color: #FFFFFFF;
+>   --ipi-calendar-body-cell-active-in-range-start-end-background-color: #FFD2C6;
+>   --ipi-calendar-body-cell-preview-end-border: 1px dashed #F96138;
+>   --ipi-calendar-body-cell-preview-end-background-color: #FFD2C6;
+>   --ipi-calendar-body-cell-preview-end-color: #FFFFFF;
+>   --ipi-calendar-body-cell-preview-start-border: 1px dashed #F96138;
+>   --ipi-calendar-body-cell-preview-start-background-color: #FFD2C6;
+>   
+>   --ipi-calendar-body-cell-preview-start-color: #FFFFFF;
+>   --ipi-calendar-body-cell-in-preview-range-start-border: 0px;
+>   --ipi-calendar-body-cell-in-preview-range-end-border: 0px;
+>   
+>   --ipi-calendar-body-cell-disabled-background-color: #E0DFDE;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Carousel Component
+
+A dynamic, responsive carousel component designed to enhance user experience. It includes smooth scrolling, keyboard navigation, clickable navigation buttons, and a progress indicator.
+
+---
+
+## Usage
+>### `parent.component.ts`
+>
+>```typescript
+>import { Component } from '@angular/core';
+>import { IpiCarouselComponent } from '@apexara/ng-components/carousel';
+>
+>@Component({
+>  imports: [IpiCarouselComponent],
+>  selector: 'app-carousel-example',
+>  templateUrl: './carousel-example.component.html',
+>  styleUrls: ['./carousel-example.component.css']
+>})
+>export class CarouselExampleComponent {
+>   
+>}
+>```
+>
+>### `parent.component.html`
+>
+>```html
+><ipi-carousel>
+>  @for (let item of [1, 2, 3, 4, 5]; track $index) {
+>    <div>Item {{ item }}</div>
+>  }
+></ipi-carousel>```
+
+---
+
+### Features and Inputs
+
+#### **Dynamic Content**
+Wrap any HTML or Angular components within `<ipi-carousel>` to display them in the carousel.
+
+#### **Progress Bar**
+Automatically updates as the carousel scrolls.
+
+#### **Navigation Buttons**
+Includes "previous" and "next" buttons with accessible keyboard navigation.
+
+#### **Scroll Behavior**
+Supports smooth scrolling with `scroll-snap` for seamless transitions.
+
+#### **Custom CSS Variables**
+The following variables allow for customization of colors, dimensions, and other styles:
+
+---
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-carousel:
+>
+>```css
+>ipi-carousel {
+>    /* Carousel Background */
+>    --ipi-carousel-background-color: transparent;
+>
+>    --ipi-carousel-button-border-color: #FFFFFF;
+>    --ipi-carousel-button-border-hover-color: #FFFFFF;
+>
+>    --ipi-carousel-chevron-color: #FFFFFF;
+>    --ipi-carousel-chevron-hover-color: #FFFFFF;
+>
+>    /* Progress Bar */
+>    --ipi-carousel-scrollbar-color: #FFFFFF;
+>    --ipi-carousel-scrollbar-container-color: #020617;
+>
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Snackbar Service
+A services that provides a way to display messages on the screen.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>
+>import { 
+>   IpiSnackbarService,
+>   IpiSnackbarOptions,
+>   horizontalPosition,
+>   verticalPosition } 
+>from '@apexara/ng-components/snackbar';
+>
+>@Component({
+>  imports: [],
+>})
+>
+>export class SnackbarExample {
+>
+>   public message = 'Message to be displayed';
+>
+>   public options: IpiSnackbarOptions = {
+>     error: true,
+>     icon: 'example.svg',
+>     animationDuration: 20
+>   };
+>
+>    // Inject to the component from which you want to execute it
+>   constructor(public snackbarService: IpiSnackbarService) {
+>     // optionally setting the position
+>     this.snackbarService.setPosition({
+>       verticalPosition: verticalPosition.Bottom,
+>       horizontalPosition: horizontalPosition.Center
+>      });
+>   }
+>
+>}
+>```
+>**`parent.component.html`**
+>```html
+><example-component 
+>  (click)="this.snackbarService.open(message, options)">
+></example-component>
+>```
+>
+
+### Inputs
+
+>#### positionOptions
+>verticalPosition & horizontalPosition
+>Optional properties of SnackbarPosition interface that is used to set custom 
+>position of the snackbar
+
+>#### message
+>Message to be displayed
+
+>#### options
+>Options are of type IpiSnackbarOptions with the following properties:
+>    title (optional) – string – overrides the default 'Error' or 'Success' title with a custom static header
+>    animation-duration - number - used for how long the snackbar should be displayed
+>    icon (optional) - string - icon name that must be located inside assets/img/ (using ipi-img)
+>    error (optional) - boolean - used to distinguish error message from info.
+>    backgroundColor (optional) - string - sets the background color of the snackbar.
+>    placeholderTextColor (optional) - string; - sets title heading text of snackbar color.
+>    messageTextColor (optional) - string - sets snackbar message color.
+>    progressColor (optional) - string - sets color of animation showing the snackbar showing duration.
+>    xIconColor (optional) - string - sets the closing icon color of the snackbar.
+>
+>   Note: Default values are set as CSS Variables in the initial component, changing of colors happens as options passed to the open() method.
+
+### CSS Variables
+>
+>```css
+>ipi-snackbar {
+>    /* Colors, Fills, Strokes: */
+>    --ipi-snackbar-background-color: #14BD6C;
+>    --ipi-snackbar-error-background-color: #F96138;
+>
+>    --ipi-snackbar-placeholder-text-color: #FFFFFF;
+>    --ipi-snackbar-message-text-color: #FFFFFF;
+>
+>    --ipi-snackbar-progress-color: #FFFFFF;
+>
+>    /* Color of closing icon of the snackbar */
+>    --ipi-snackbar-x-icon-color: #FFFFFF;
+>
+>    --ipi-snackbar-animation-duration: 10s;
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Overlay Service
+ Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building block for other components. Dialogs, tooltips, menus, selects, etc. can all be built using overlays.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>
+>import { Component } from '@angular/core';
+>import { OverlayService } from '@apexara/ng-components/services';
+>
+>@Component({
+>  imports: [],
+>    template: `
+>        <button (click)="openOverlay()">Open Overlay</button>
+>    `,
+>})
+>
+>export class FloatingComponentExample {
+>
+>   constructor(private overlayService: OverlayService) {}
+>
+>    openOverlay() {
+>      // Create and open the overlay
+>
+>      // Add your custom content to the overlay
+>      const overlayContent = document.createElement('div');
+>      overlayContent.innerText = 'This is an overlay!';
+>      const overlayRef = this.overlayService.apendToOverlay(overlayContent, true);
+>
+>      // Close the overlay after 3 seconds
+>      setTimeout(() => {
+>        overlayRef.removeFromOverlay(overlayContent);
+>      }, 3000);
+>    }
+>}
+>```
+>
+>#### appendToOverlay(content: HTMLElement, blockable = false)
+>Adds an HTMLElement in the overlay.
+>
+>>#### removeFromOverlay(content: HTMLElement)
+>Remove an HTMLElement if its inside the overlay. 
+>Also if it is the last removed element inside the overlay clears all the focus logic and removes the 
+>whole overlay.
+>
+>#### blockable
+>When set to true, the `blockable` property triggers scroll block inside the overlay. This prevents 
+>scrolling of the underlying content while the overlay is open, ensuring that the user's focus 
+>remains within the overlay.
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Table Component
+A simple table that can project data sorted by columns x rows providing editing, sorting and filtering 
+of the data. 
+
+Two types of tables are available. One with local data and local sorting & filtering and a server side one.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { 
+>   IpiTableComponent,
+>   IpiTableColumn,
+>   IpiTableColumnType } 
+>from '@apexara/ng-components/table';
+>
+>@Component({
+>  imports: [ IpiTableComponent ]
+>})
+>
+>export class TableExampleComponent {
+>
+>  // Used for searching and filtering
+>  public tableFilter: string;
+>
+>  public tableData = [{
+>    id: 'D1954F',
+>    name: 'John Doe',
+>    credits: 333,
+>    cash: 113,
+>    admin: false,
+>    years: 19,
+>    date: new Date()
+>    listName: 'first list'
+>  },
+>  {
+>    id: 'A7D543',
+>    name: 'Alice Cooper',
+>    credits: 500,
+>    cash: 100,
+>    years: 33,
+>    admin: true,
+>    date: new Date()
+>    listName: 'second list'
+>  },
+>  {
+>    id: 'BB13DA',
+>    name: 'Will Smith',
+>    credits: 1000,
+>    cash: 250,
+>    admin: true,
+>    years: 33,
+>    date: new Date()
+>    listName: 'third list',
+>  }]
+>
+>  public tableColumns: IpiTableColumn[] = [
+>    { label: 'Id', value: 'id', width: '70px' },
+>    { label: 'Name', value: 'name', width: '70px' },
+>    { label: 'Date', value: 'date', type: IpiTableColumnType.Date, 
+>      dateFormat: 
+>        { 
+>          format: 'shortDate',
+>          locale: 'en-US',
+>          timezone: '+0100'
+>        },
+>      width: '60px' }
+>    { label: 'Years', value: 'years', type: IpiTableColumnType.Number, width: '60px'}
+>    { label: 'Credits', value: 'credits', type: IpiTableColumnType.Number width: '70px' },
+>    { label: 'Cash', value: 'cash', type: IpiTableColumnType.Number width: '70px' },
+>           /* We can use +, -, /, * operations on the value property if it's of type NumberMath */
+>    { label: 'Total cash', value: 'credits * 1.5 + cash', type: IpiTableColumnType.NumberMath width: '70px' },
+>    { label: 'Admin', value: 'admin', type: IpiTableColumnType.Chip width: '70px' },
+>    { label: 'List name', value: 'listName', width: '70px' },
+>    { label: 'Actions', type: IpiTableColumnType.Actions, width: '100px',
+>      singleActions: [
+>        label: 'Download',
+>        showOn: [
+>           { property: 'admin', values: [true] }
+>        ],
+>        icon: 'img/download.svg',
+>        execute: (row) = execute(row: any)
+>      ]
+>    }
+>  ]
+>   
+>  public tableChange(from: number, to: number, nextSortingColumn?: any, filter?: string): any {
+>    // Your server side data logic here
+>  }
+>
+>  public execute(row: any) {
+>    // bind any logic to customizable icon inside the table row
+>  }
+> 
+>}
+>```
+>**`parent.component.html`**
+>```html
+><ipi-table #serverSide
+>   [serverSide]="true"
+>   [data]="tableData" [columns]="tableColumns"
+>   [filter]="tableFilter" [pageable]="true" 
+>   [dataLength]="tableData.length"
+>   [isLoading]="true/false"
+>   (tableChange)="tableChange($event.from, $event.to, $event.sort, $event.filter)">
+></ipi-table>
+>
+><ipi-table #local
+>   [data]="localData" [columns]="tableColumns"
+>   [filter]="tableFilter" [pageable]="true">
+></ipi-table>
+>```
+
+### Inputs
+
+#### Virtual Scroll Example (Local Data)
+>```html
+><ipi-table
+  [data]="localData"
+  [columns]="tableColumns"
+  [filter]="tableFilter"
+  [pageable]="true"
+  [virtualScroll]="true"
+  [tableHeight]="600">
+></ipi-table>
+>```
+
+>#### virtualScroll
+>Enables virtual scrolling for local data tables. Renders only visible rows inside a virtual viewport for better performance with large datasets.
+>
+
+>#### tableHeight
+>Total table height in pixels (including header). The virtual viewport height is automatically calculated from this value. Default is `800`.
+
+>#### serverSide
+>When true it make the table emit events when a change happens with the following properties 
+>{from, to, sort, filter} which we can use to create a request and get data.
+>Also stops local filter and sorting logic from executing.
+
+>#### data
+>The data that the table initializes.
+> 
+
+>#### columns - IpiTableColumn Interface
+>The columns that will the table have and based on the columns the data will be visualized.
+>
+>The IpiTableColumn interface defines the structure of each column in the IPI Table component. Each column can have various properties to customize its behavior and appearance.
+>
+>
+>**label?: string**: The display label for the column header.
+>
+>**value?: string**: The key in the data object that corresponds to this column.
+>
+>**type?: IpiTableColumnType**: The type of data in the column, which can determine how it's rendered (e.g., date, number, chip, etc.).
+>
+>**width?: string**: The width of the column, defined as a CSS width value (e.g., '70px').
+>
+>**editable?: boolean**: Indicates whether the column can be edited by the user.
+>
+>**prefix?: string**: A string to be displayed before the column value.
+>
+>**suffix?: string**: A string to be displayed after the column value.
+>
+>**singleActions?: Action[]**: An array of actions available for a single row in this column.
+>
+>**multipleActions?: Action[]**: An array of actions available for multiple rows in this column.
+>
+>**dateFormat?: IpiDateFormatOptions**: Formatting options for date values in the column.
+>
+>**chipLabel?: { [key: string]: string }**: A mapping of labels for chip display in the column.
+>
+>**class?: string | { [key: string]: string }**: Custom CSS classes for styling the column.
+>
+
+>#### columnType - IpiTableColumnType
+>```typescript 
+>export enum IpiTableColumnType {
+>  Text,      // A standard text column
+>  Date,      // A column for displaying dates
+>  Currency,  // A column for displaying currencies
+>  Chip,      // A column for displaying chip components
+>  Checkbox,  // A column for displaying checkboxes
+>  Number,    // A column for displaying numbers
+>  NumberMath,  // A column for displaying combined properties' values numbers with additional addition, subtraction, multiplication, division logic.
+>  Actions,   // A column for action buttons
+>}
+>```
+>
+>Each column type is handled through specific templates:
+>
+>Text Column: Displays standard text, can be editable.
+>
+>Date Column: Formats and displays dates.
+>
+>Chip Column: Displays chips for categorical data.
+>
+>Checkbox Column: Displays checkboxes, currently read-only.
+>
+>Number Column: Displays numbers with optional prefix and suffix. This column type also supports calculations based on the numeric values.
+>
+>Actions Column: Displays action buttons with dynamic visibility based on context.
+>```typescript 
+>export interface Action {
+>  icon: string;    // Icon source. example: ('assets/icons/icon.svg')
+>  label: string;      // Label for icon. Tooltip pops on hover.
+>  class?: string,      // Custom class to add to the specific action.
+>  showOn?: ActionShowType,  // Array of different objects that represent a condition the row should meet in order to be shown
+>  disabled?: boolean,    // A column for displaying numbers
+>  NumberMath,  // A column for displaying combined properties' values numbers with additional addition, subtraction, multiplication, division logic.
+>  execute?: (row: any): void,   // A column for action buttons
+>}
+>```
+>### **Action ShowOn Examples with Passed Properties to a Column**
+>```typescript 
+>export type ActionShowType = Array<{ property: string; values: any[], exists?: boolean; }>
+>
+>```
+>
+>The `showOn` property allows actions to be conditionally displayed based on row values. It supports:
+>- **Single property conditions**: `{ property: 'status', values: ['pending'] }`
+>- **Multiple value conditions**: `{ property: 'status', values: ['completed', 'archived'] }`
+>- **Multiple property & values**: `{ property: 'admin', values: [true] }`, `{ property: 'status', values: ['approved', 'rejected'] }`
+>- **Check if exists conditions (values are no longer taken into consideration)**: `{ property: 'status', values: [], exists: true/false }`
+>
+>#### **Explicit Property Matching**
+>The action will be displayed **only if all conditions match**.
+>
+>```typescript
+>singleActions: [
+>  {
+>    label: 'Edit',
+>    icon: 'img/edit.svg',
+>    showOn: [
+>      { property: 'status', values: ['pending'] }, // Requires status === 'pending'
+>      { property: 'createdBy.role', values: ['Admin'] } // Requires createdBy.role === 'Admin'
+>    ],
+>    execute: (row) => console.log('Edit action for', row),
+>  }
+>]
+>```
+>
+>- **Visible if** `status === 'pending'` **and** `createdBy.role === 'Admin'`.
+>
+>
+>
+>#### **Multiple Possible Values for a Single Property**
+>The action will be displayed **if the property matches any of the specified values**.
+>
+>```typescript
+>singleActions: [
+>  {
+>    label: 'Delete',
+>    icon: 'img/delete.svg',
+>    showOn: [
+>      { property: 'status', values: ['completed', 'archived'] }, // Matches either 'completed' or 'archived'
+>    ],
+>    execute: (row) => console.log('Delete action for', row),
+>  }
+>]
+>```
+>
+>---
+>
+>### **How It Works**
+>- **All conditions inside `showOn` must be met for the action to appear**.
+>- **Supports deeply nested properties** like `createdBy.role`.
+>
+>---
+>
+
+>#### pageable
+>Whether or not the table has more than one page
+
+>#### sortable
+>Blocks local sorting when set to false
+
+>#### currentSortedColumn / used with serverSide /
+>Refference to the column that is used as a sorter needed for keeping track when changes occur (example
+>page change, new sorting column, sorting same column (reverse sorting), filtering)
+
+>#### isLoading / used with serverSide /
+>When true triggers an animation that blocks the table and shows a loading bar.
+
+>#### dataLength / used with serverSide /
+>The length of the data passed from parent element needed to display properply the pages and the results count.
+
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-table:
+>
+>```css
+>ipi-table {
+>    /* Colors, Fills, Strokes: */
+>    --ipi-table-background-color: #FFFFFF;
+>    --ipi-table-row-bottom-border-color: #E9E9E9;
+>    --ipi-table-first-row-text-color: #5D6068;
+>    --ipi-table-arranger-hover-color: #F96138;
+>    --ipi-table-loading-bar-color: #FF7F50;
+>
+>    /* Color of all icons on hover */
+>    --ipi-table-action-icon-hover-fill: #F96138;
+>    --ipi-table-action-icon-hover-stroke: #FFFFFF00;
+>    --ipi-table-action-hover-background-color: #F7F8FB;
+>
+>    /* Color of the single icons */
+>    --ipi-table-action-icon-fill: #5D6068;
+>    --ipi-table-action-icon-stroke: #FFFFFF00;
+>
+>   /* Secondary color of single icons */
+>    --ipi-table-action-secondary-icon-fill: #F96138;
+>    --ipi-table-action-secondary-icon-stroke: #FFFFFF00;
+>
+>   --ipi-table-action-secondary-icon-hover-fill: #5D6068;
+>   --ipi-table-action-secondary-icon-hover-stroke: #FFFFFF00;
+>
+>    /* Color of icon that opens the multiple actions */
+>    --ipi-table-action-more-icon-fill: #F96138;
+>    --ipi-table-action-more-icon-stroke: #FFFFFF00;
+>
+>    /* Color of the icons of multiple actions */
+>    --ipi-table-dropdown-action-icon-fill: #5D6068;
+>    --ipi-table-dropdown-action-icon-stroke: #FFFFFF00;
+>
+>    /* Background on dropdown if stacked actions are initialized */
+>    --ipi-table-more-actions-dropdown-background-color: #FFFFFF;
+>    --ipi-table-more-actions-dropdown-hover-background-color: #00000010;
+>
+>    /* Page picker styling */
+>    --ipi-table-page-picker-text-color: #FFFFFF;
+>    --ipi-table-page-picker-background: #F96138;
+>
+>    /* Chip columns color styling */
+>    --ipi-table-chip-color: #F96138;
+>    --ipi-table-chip-background-color: #FFF2EF;
+>
+>    --ipi-table-chip-color-secondary: #0B1222;
+>    --ipi-table-chip-background-color-secondary: #E2E2E2;
+>
+>/* Note: When you want to setup the color of your icon
+> you should experiment with both these variables or consider
+> using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Textarea Component
+A simple input textarea that handles formGroup control with validators.
+
+## Usage
+>**`parent.component.ts`**
+>```typescript
+>import { IpiTextAreaComponent, IpiTextAreaOptions }
+>from '@apexara/ng-components';
+>
+>@Component({
+>  imports: [ IpiTextAreaComponent ]
+>})
+>
+>export class TextAreaExample {
+>
+>  public formGroup = new FormGroup({
+>    textareaControl: ['', [Validators.required]],
+>   });
+>
+>  public textAreaOptions = {
+>    label: 'Your message inside the placeholder',
+>    icon: 'icon.svg',
+>    formGroup: formGroup,
+>    formControlName: 'textareaControl',
+>   errors: {
+>      required: 'Textarea is required',
+>    }
+>  }
+>
+>}
+>
+>```
+>**`parent.component.html`**
+>```html 
+>
+> <ipi-textarea 
+>   class="fluid"
+>   [options]="textAreaOptions">
+> </ipi-textarea>
+>
+> <!-- No form group -->
+><ipi-textarea 
+>  [options]="{ label: 'Placeholder' }"
+>  (textAreaChange)="textAreaChange($event)">
+></ipi-textarea>
+>
+>```
+>
+
+### Inputs
+
+>#### options
+>Options of type IpiTextAreaOptions. Only label is required.
+>{
+>    label - header label element for the current textarea
+>    placeholder - initial placeholder message
+>    icon - name of an icon that is inside in local assets/ path
+>    formGroup - way to add the textarea to reactive form
+>    formControlName - name of the control inside the formGroup
+>}
+
+>#### textAreaChange 
+>EventEmitter when there is a change in the input of the textarea.
+
+>#### class 'fluid'
+>Adds custom width and height (100% 100%) based on a parent component.
+
+### CSS Variables
+>Here are all the available CSS variables (and their default values) you can set when using the ipi-textarea:
+
+>```css
+>ipi-textarea {
+>    /* Colors, Fills, Strokes: */
+>    --ipi-textarea-header-color: #0B1222;
+>
+>    --ipi-textarea-text-color: #0B1222;
+>    --ipi-textarea-text-placeholder-color: #C6C6C6;
+>
+>    --ipi-textarea-background-color: transparent;
+>
+>    --ipi-textarea-icon-fill: #C6C6C6;
+>    
+>    /* Text area border styling */
+>    --ipi-textarea-border: 1px solid #E9E9E9;
+>    --ipi-textarea-border-radius: 4px;
+>
+>    --ipi-textarea-border-invalid: 1px solid #F96138;
+>
+>   --ipi-textarea-border-disabled: 1px dashed #F2F2F2;
+>
+>    /* Text area scroll styling */
+>    --ipi-textarea-scrollbar-color: #E2E2E2bb;
+>    --ipi-textarea-scrollbar-hover-color: #E2E2E2;
+>
+>    /* Text area's error text underneath input color */
+>    --ipi-textarea-footer-color: #F96138;
+>
+>/* Note: When you want to setup the color of your icon
+> you should experiment with both these variables or consider
+> using the one your icon is based on.  */
+>}
+>```
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------
+
+# IPI Tooltip Component
+Simple tooltip that pops up on hover on a given parent component implemented as a directive. Custom message can be passed and a position.
+
+## Usage
+Import the tooltip inside the component you want to use it and 
+place it as a directive to a component:
+
+>**`parent.component.ts`**
+>```typescript
+>import { IpiTooltipDirective, TooltipPosition }
+> from '@apexara/ng-components';
+>
+>@Component({
+>  imports: [ IpiTooltipDirective ]
+>})
+>
+>export class TooltipExampleComponent {}
+>
+>```
+>
+>**`parent.component.html`**
+>```html
+>
+><div
+>  ipiTooltip='tooltip text'
+>  [tooltipPosition]="TooltipPosition.Above">
+></div>
+>
+>```
+>
+
+### Inputs
+
+>#### tooltipPosition
+>Enum with the following options: Above, After, Before, Below. Used for positioning the tooltip based on parent's position.
+>Default is Before.
+
+[🔼 Back to top](#components)
+
+-----------------------------------------------------------------