@apexara/ng-components 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,6 @@
 # ng-components
 
-This package provides custom Angular UI components, developed and maintained by IPI Soft LLC. <br>
+This package provides custom Angular UI components, developed and maintained by APEX Soft LLC. <br>
 Website: www.apexara.com 
 
 # Installation
@@ -11,38 +11,38 @@ 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>
+[🔽 Button](#apex-button-component) <br>
+[🔽 Checkbox](#apex-checkbox-component) <br>
+[🔽 Chip](#apex-checkbox-component) <br>
+[🔽 Dialog](#apex-dialog-component) <br>
+[🔽 Drawer](#apex-drawer-component) <br>
+[🔽 Expander](#apex-expander-component) <br>
+[🔽 Image](#apex-image-component) <br>
+[🔽 Input](#apex-input-component) <br>
+[🔽 Listbox](#apex-listbox-component) <br>
+[🔽 Radiobutton](#apex-radio-button-component) <br>
+[🔽 Select](#apex-select-component) <br>
+[🔽 Datepicker](#apex-datepicker-component) <br>
+[🔽 Carousel](#apex-carousel-component) <br>
+[🔽 Snackbar](#apex-snackbar-service) <br>
+[🔽 Table](#apex-table-component) <br>
+[🔽 Textarea](#apex-textarea-component) <br>
+[🔽 Tooltip](#apex-tooltip-component) <br>
 
 
 -----------------------------------------------------------------
 
-# IPI Button Component
+# APEX Button Component
 A simple button 
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiButtonComponent }
+>import { ApexButtonComponent }
 >from '@apexara/ng-components/button';
 >
 >@Component({
->  imports: [ IpiButtonComponent ]
+>  imports: [ ApexButtonComponent ]
 >})
 >
 >export class ButtonExampleComponent {
@@ -59,7 +59,7 @@ A simple button
 >```
 >**`parent.component.html`**
 >```html
-><ipi-button 
+><apex-button 
 >   [options]="{ 
 >     iconLeft: 'icon.svg',
 >     iconRight: 'icon.svg'
@@ -70,7 +70,7 @@ A simple button
 >   (focusChange)="handleFocusChange()"
 >   (clickChange)="handelClickChange()">
 >       Click here 
-></ipi-button>
+></apex-button>
 >```
 
 ### Inputs
@@ -82,34 +82,34 @@ A simple button
 >event emitter to handle clicks
 
 >#### focusChange
->event emitter to focus changes on the a tag inside the ipi-button
+>event emitter to focus changes on the a tag inside the apex-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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-button:
 >
 >```css
->ipi-button {
+>apex-button {
 >    /* Sizes: */
->    --ipi-button-border-radius: 4px;
+>    --apex-button-border-radius: 4px;
 >
 >    /* Focus outline */
->    --ipi-button-focus-outline: 2px solid #F96138;
+>    --apex-button-focus-outline: 2px solid #F96138;
 >
 >    /* Colors, Fills, Strokes: */
->    --ipi-button-disabled-background-color: #E7E7E7;
+>    --apex-button-disabled-background-color: #E7E7E7;
 >
->    --ipi-button-left-svg-fill: #FFFFFF;
->    --ipi-button-left-svg-stroke: #FFFFFF00;
+>    --apex-button-left-svg-fill: #FFFFFF;
+>    --apex-button-left-svg-stroke: #FFFFFF00;
 >
->    --ipi-button-right-svg-fill: #FFFFFF;
->    --ipi-button-right-svg-fill: #FFFFFF00;
+>    --apex-button-right-svg-fill: #FFFFFF;
+>    --apex-button-right-svg-fill: #FFFFFF00;
 >		
->    --ipi-button-text-color: #FFFFFF;
->    --ipi-button-border-color: none;
->    --ipi-button-background-color: #0B1222;
+>    --apex-button-text-color: #FFFFFF;
+>    --apex-button-border-color: none;
+>    --apex-button-background-color: #0B1222;
 >
 >/* Note: When you want to setup the color of your icon
 > you should experiment with both these variables or consider
@@ -121,18 +121,18 @@ A simple button
 
 -----------------------------------------------------------------
 
-# IPI Checkbox Component
+# APEX Checkbox Component
 A simple checkbox that can project content, be used with FormGroup and have a tooltip displayed 
-with a IPI Tooltip.
+with a APEX Tooltip.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiCheckboxComponent, IpiCheckboxOptions } 
+>import { ApexCheckboxComponent, ApexCheckboxOptions } 
 >from '@apexara/ng-components/checkbox';
 >
 >@Component({
->  imports: [ IpiCheckboxComponent ]    
+>  imports: [ ApexCheckboxComponent ]    
 >})
 >
 >export class CheckboxExampleComponent {
@@ -141,7 +141,7 @@ with a IPI Tooltip.
 >    checkboxControl: [false, [Validators.required]],
 >   });
 >
->  public checkboxOptions: IpiCheckboxOptions = {
+>  public checkboxOptions: ApexCheckboxOptions = {
 >    formGroup: this.formGroup,
 >    formControlName: 'checkboxControl',
 >  }
@@ -150,12 +150,12 @@ with a IPI Tooltip.
 >```
 >**`parent.component.html`**
 >```html
-><ipi-checkbox 
+><apex-checkbox 
 >  [checked]="true"
 >  [disabled]="false"
 >  [options]="checkboxOptions"
 >  [tooltip]="'example tooltip text'">
-></ipi-checkbox>
+></apex-checkbox>
 >
 >```
 ### Inputs
@@ -170,32 +170,32 @@ with a IPI Tooltip.
 >a text that if present triggers a tooltip component with it inside.
 
 >#### formGroup
->Refference to the FormGroup that the ipi-checkbox will handle
+>Refference to the FormGroup that the apex-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:
+>Here are all the CSS variables (and their default values) you can set when using apex-checkbox:
 >
 >```css
->ipi-checkbox {
+>apex-checkbox {
 >    /* Sizes */
->    --ipi-checkbox-font-size: 14px;
+>    --apex-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;
+>    --apex-checkbox-background-color: #F7F8FB;
+>    --apex-checkbox-wrapper-border-color: transparent;
+>    --apex-checkbox-arrow-color: #FFFFFF;
+>    --apex-checkbox-tooltip-icon-stroke: #FFFFFF;
 >
->    --ipi-checkbox-border-color: #E9E9E9; 
->    --ipi-checkbox-border-hover-color: #F96138;
->    --ipi-checkbox-outline-color: none;
+>    --apex-checkbox-border-color: #E9E9E9; 
+>    --apex-checkbox-border-hover-color: #F96138;
+>    --apex-checkbox-outline-color: none;
 >
 >    /* Other */
->    --ipi-checkbox-box-shadow-color: #F96138;
->    --ipi-checkbox-disabled-opacity: 0.5;
+>    --apex-checkbox-box-shadow-color: #F96138;
+>    --apex-checkbox-disabled-opacity: 0.5;
 >}
 >```
 
@@ -203,17 +203,17 @@ with a IPI Tooltip.
 
 -----------------------------------------------------------------
 
-# IPI Chip component
+# APEX Chip component
 A simple visual container for displaying a text, state, etc.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiChipComponent } 
+>import { ApexChipComponent } 
 >from '@apexara/ng-components/chip';
 >
 >@Component({
->  imports: [ IpiChipComponent ]
+>  imports: [ ApexChipComponent ]
 >})
 >
 >export class ChipExampleComponent { }
@@ -221,12 +221,12 @@ A simple visual container for displaying a text, state, etc.
 >```
 >**`parent.component.html`**
 >```html
-><ipi-chip 
+><apex-chip 
 >  class="with-close-icon"
 >  [closeIcon]="true"
 >  (closeChange)="chipClose()">
 >    With Close Icon
-></ipi-chip>
+></apex-chip>
 >```
 >
 
@@ -238,17 +238,17 @@ A simple visual container for displaying a text, state, etc.
 >event emitter to handle clicks
 
 ### CSS Variables
->Here all the available CSS variables (and their default values) you can set when using ipi-chip:
+>Here all the available CSS variables (and their default values) you can set when using apex-chip:
 >
 >```css
->ipi-chip {
+>apex-chip {
 >    /* Sizes: */
->    --ipi-chip-font-size: 12px;
+>    --apex-chip-font-size: 12px;
 >
 >    /* Colors, Fills, Strokes: */
->    --ipi-chip-color: #FFFFFF;
->    --ipi-chip-background-color: #0B1222;
->    --ipi-chip-icon-color: #FFFFFF;
+>    --apex-chip-color: #FFFFFF;
+>    --apex-chip-background-color: #0B1222;
+>    --apex-chip-icon-color: #FFFFFF;
 >}
 >```
 
@@ -256,18 +256,18 @@ A simple visual container for displaying a text, state, etc.
 
 -----------------------------------------------------------------
 
-# IPI Dialog Component
+# APEX 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 }
+>import { ApexDialogComponent }
 >from '@apexara/ng-components/dialog';
 >
 >@Component({
->  imports: [ IpiDialogComponent ]
+>  imports: [ ApexDialogComponent ]
 >})
 >
 >export class DialogExampleComponent { }
@@ -275,21 +275,21 @@ The styling is only for the Dialog itself, the close icon, the title and the des
 >**`parent.component.html`**
 >```html
 >@if (shouldRender) {
->    <ipi-dialog>
+>    <apex-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>
+>            <apex-input [options]="{ label: 'Name' }"></apex-input>
 >        </ng-template>
 >
 >        <ng-template #actions>
->            <ipi-button (clickChange)="shouldRender = false">
+>            <apex-button (clickChange)="shouldRender = false">
 >                Cancel
->            </ipi-button>
+>            </apex-button>
 >        </ng-template>
->    </ipi-dialog>
+>    </apex-dialog>
 >}
 >```
 
@@ -313,14 +313,14 @@ The styling is only for the Dialog itself, the close icon, the title and the des
 >**`parent.component.html`**
 >```html
 ><ng-template #content>
->    <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+>    <apex-input [options]="{ label: 'Name' }"></apex-input>
 ></ng-template>
 >```
 >
 >**`parent.component.css`**
 >```css
->ipi-input {
->    --ipi-input-error-color: red;
+>apex-input {
+>    --apex-input-error-color: red;
 >}
 >```
 
@@ -329,34 +329,34 @@ The styling is only for the Dialog itself, the close icon, the title and the des
 >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>
+>    <apex-button>Close</apex-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>
+>    <apex-button (clickChange)="shouldRender = false">Close</apex-button>
+>    <apex-button (clickChange)="triggerAction()">Trigger Action</apex-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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-dialog:
 >
 >```css
->ipi-dialog {
+>apex-dialog {
 >    /* Sizes: */
->    --ipi-dialog-max-width: 432px;
+>    --apex-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;
+>    --apex-dialog-backdrop-background: #0B1222;
+>    --apex-dialog-background: #FFFFFF;
+>    --apex-dialog-close-icon-color: #0B1222;
+>    --apex-dialog-close-icon-hover-color: #F96138;
+>    --apex-dialog-title-color: #0B1222;
+>    --apex-dialog-description-color: #5D6068;
 >}
 >```
 
@@ -364,18 +364,18 @@ The styling is only for the Dialog itself, the close icon, the title and the des
 
 -----------------------------------------------------------------
 
-# IPI Drawer Component
+# APEX 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 }
+>import { ApexDrawerComponent }
 >from '@apexara/ng-components/drawer';
 >
 >@Component({
->  imports: [ IpiDrawerComponent ]
+>  imports: [ ApexDrawerComponent ]
 >})
 >
 >export class DrawerExampleComponent { }
@@ -383,21 +383,21 @@ The styling is only for the Drawer itself, the title and the description. The co
 >**`parent.component.html`**
 >```html
 >@if (shouldRender) {
->    <ipi-drawer #drawer (clickChange)="shouldRender = false">
+>    <apex-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>
+>            <apex-input [options]="{ label: 'Name' }"></apex-input>
 >        </ng-template>
 >
 >        <ng-template #actions>
->            <ipi-button (clickChange)="drawer.close()">
+>            <apex-button (clickChange)="drawer.close()">
 >                Close
->            </ipi-button>
+>            </apex-button>
 >        </ng-template>
->    </ipi-drawer>
+>    </apex-drawer>
 >}
 >```
 
@@ -422,14 +422,14 @@ The styling is only for the Drawer itself, the title and the description. The co
 >**`parent.component.html`**
 >```html
 ><ng-template #content>
->    <ipi-input [options]="{ label: 'Name' }"></ipi-input>
+>    <apex-input [options]="{ label: 'Name' }"></apex-input>
 ></ng-template>
 >```
 >
 >**`parent.component.css`**
 >```css
->ipi-input {
->    --ipi-input-error-color: red;
+>apex-input {
+>    --apex-input-error-color: red;
 >}
 >```
 
@@ -438,33 +438,33 @@ The styling is only for the Drawer itself, the title and the description. The co
 >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>
+>    <apex-button>Close</apex-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>
+>    <apex-button (clickChange)="triggerAction1()">Trigger Action 1</apex-button>
+>    <apex-button (clickChange)="triggerAction2()">Trigger Action 2</apex-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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-drawer:
 >
 >```css
->ipi-drawer {
+>apex-drawer {
 >    /* Sizes: */
->    --ipi-drawer-width: 410px;
+>    --apex-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;
+>    --apex-drawer-backdrop-background: #0B1222;
+>    --apex-drawer-background: #FFFFFF;
+>    --apex-drawer-title-color: #0B1222;
+>    --apex-drawer-description-color: #5D6068;
+>    --apex-drawer-box-shadow: 0px 4px 8px 0px #D6D6D635;
 >}
 >```
 
@@ -472,25 +472,25 @@ The styling is only for the Drawer itself, the title and the description. The co
 
 -----------------------------------------------------------------
 
-# IPI Expander Component
+# APEX 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 } 
+>import { ApexExpanderComponent } 
 >from '@apexara/ng-components/expander';
 >
 >@Component({
->  imports: [ IpiExpanderComponent ]
+>  imports: [ ApexExpanderComponent ]
 >})
 >
 >export class ExpanderExampleComponent { }
 >```
 >**`parent.component.html`**
 >```html
-><ipi-expander [isOpen]="true">
+><apex-expander [isOpen]="true">
 >    <ng-container title>
 >        With Variables
 >    </ng-container>
@@ -498,7 +498,7 @@ by expanding horizontally.
 >    <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>
+><apex-expander>
 >
 >```
 
@@ -511,22 +511,22 @@ by expanding horizontally.
 >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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-expander:
 >```css
->ipi-expander {
+>apex-expander {
 >    /* Sizes: */
->    --ipi-expander-border: 0px;
+>    --apex-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;
+>    --apex-expander-background-color: #FFFFFF;
+>    --apex-expander-title-color: #0B1222;
+>    --apex-expander-content-color: #5D6068;
+>    --apex-expander-chevron-color: #5D6068;
+>    --apex-expander-chevron-open-color: #F96138;
 >
->    --ipi-expander-outline-color: none;
+>    --apex-expander-outline-color: none;
 >    /* Other */
->    --ipi-expander-box-shadow: 0px 4px 8px 0px rgba(214, 214, 214, 0.35);
+>    --apex-expander-box-shadow: 0px 4px 8px 0px rgba(214, 214, 214, 0.35);
 >}
 >```
 
@@ -534,17 +534,17 @@ by expanding horizontally.
 
 -----------------------------------------------------------------
 
-# IPI Image Component
+# APEX Image Component
 An image component that fetches an asset and displays it.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiIconComponent } 
+>import { ApexIconComponent } 
 >from '@apexara/ng-components/image';
 >
 >@Component({
->  imports: [ IpiIconComponent ]
+>  imports: [ ApexIconComponent ]
 >})
 >
 >export class IconExampleComponent { }
@@ -554,10 +554,10 @@ An image component that fetches an asset and displays it.
 >**`parent.component.html`**
 >```html
 >
-><ipi-img 
+><apex-img 
 >  [src]="assets/img/example.svg" 
 >  [ariaLabel]="Example aria label for icon.">
-></ipi-img>
+></apex-img>
 >
 >```
 
@@ -572,18 +572,18 @@ An image component that fetches an asset and displays it.
 
 -----------------------------------------------------------------
 
-# IPI Input Component
+# APEX 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 }
+>import { ApexInputComponent, ApexInputOptions }
 >from '@apexara/ng-components/input';
 >
 >@Component({
->  imports: [ IpiInputComponent ]
+>  imports: [ ApexInputComponent ]
 >})
 >
 >export class InputExampleComponent {
@@ -614,8 +614,8 @@ emits click events on customizable icons that can be used to handle input change
 >```
 >**`parent.component.html`**
 >```html
-><ipi-input [options]="inputOptions">
-></ipi-input>
+><apex-input [options]="inputOptions">
+></apex-input>
 >
 >```
 
@@ -643,7 +643,7 @@ emits click events on customizable icons that can be used to handle input change
 >suffixImg also emits event on clicks enabling additional logic to be added.
 
 >#### formGroup
->Refference to the FormGroup that the ipi-input will handle
+>Refference to the FormGroup that the apex-input will handle
 
 >#### formControlName
 >Refference to the name of the control that we will access in the FormGroup
@@ -653,39 +653,39 @@ emits click events on customizable icons that can be used to handle input change
 >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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-input:
 >```css
->ipi-input {
+>apex-input {
 >    /* Colors, Fills, Strokes: */
->    --ipi-input-header-color: #0B1222;
->    --ipi-input-placeholder-color: #0B1222;
->    --ipi-input-text-color: #0B1222;
+>    --apex-input-header-color: #0B1222;
+>    --apex-input-placeholder-color: #0B1222;
+>    --apex-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;
+>    --apex-input-error-color: #F96138;
+>    --apex-input-border-error-width: 1px;
 >
 >    /* Tooltip icon styling */
->    --ipi-input-tooltip-icon-fill: transparent;
->    --ipi-input-tooltip-icon-stroke: #C6C6C6;
+>    --apex-input-tooltip-icon-fill: transparent;
+>    --apex-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;
+>    --apex-input-success-color: #14BD6C;
+>    --apex-input-border-color: #E9E9E9;
+>    --apex-input-border-width: 1px;
+>    --apex-input-value-color: #0B1222;
 >
 >    /* Left icon fill & stroke : */
->    `--ipi-input-icon-left-fill: #FFFFFF;
->    `--ipi-input-icon-left-stroke: transparent;
+>    `--apex-input-icon-left-fill: #FFFFFF;
+>    `--apex-input-icon-left-stroke: transparent;
 >
 >    /* Right icon fill & stroke: */
->    --ipi-input-icon-right-fill: #FFFFFF;
->    --ipi-input-icon-right-stroke: transparent;
+>    --apex-input-icon-right-fill: #FFFFFF;
+>    --apex-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;
+>    `--apex-input-icon-info-fill: #FFFFFF;
+>    `--apex-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
@@ -697,17 +697,17 @@ emits click events on customizable icons that can be used to handle input change
 
 -----------------------------------------------------------------
 
-# IPI Listbox Component
-IPI Listbox provides selectable options in a list format.
+# APEX Listbox Component
+APEX Listbox provides selectable options in a list format.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiListboxComponent, IpiListboxOptions } 
+>import { ApexListboxComponent, ApexListboxOptions } 
 >from '@apexara/ng-components/listbox';
 >
 >@Component({
->  imports: [ IpiListboxComponent ]
+>  imports: [ ApexListboxComponent ]
 >})
 >
 >export class ListboxExampleComponent {
@@ -739,10 +739,10 @@ IPI Listbox provides selectable options in a list format.
 >**`parent.component.html`**
 >```html
 >
-><ipi-listbox 
+><apex-listbox 
 >  [options]="listboxOptions"
 >  (selectChange)="$event">
-></ipi-listbox>
+></apex-listbox>
 >
 >```
 
@@ -752,30 +752,30 @@ IPI Listbox provides selectable options in a list format.
 >Label above the listbox container.
 
 >#### formGroup
->Refference to the FormGroup that the ipi-listbox will handle a specific control
+>Refference to the FormGroup that the apex-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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-listbox:
 
 >```css
->ipi-listbox {
+>apex-listbox {
 >    /* Colors, Fills, Strokes: */
->    --ipi-listbox-label-color: default;
->    --ipi-listbox-background-color: #FFFFFF;
+>    --apex-listbox-label-color: default;
+>    --apex-listbox-background-color: #FFFFFF;
 >
->    --ipi-listbox-item-color: #00000099;
->    --ipi-listbox-item-selected-color: #F96138;
+>    --apex-listbox-item-color: #00000099;
+>    --apex-listbox-item-selected-color: #F96138;
 >
 >    /* Border */
->    --ipi-listbox-border-color: #F2F2F2;
->    --ipi-listbox-border-hovor-color: #4B5368;
+>    --apex-listbox-border-color: #F2F2F2;
+>    --apex-listbox-border-hovor-color: #4B5368;
 >
 >    /* Tooltip icon styling */
->    --ipi-listbox-tooltip-icon-fill: transparent;
->    --ipi-listbox-tooltip-icon-stroke: #C6C6C6;
+>    --apex-listbox-tooltip-icon-fill: transparent;
+>    --apex-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)
@@ -787,34 +787,34 @@ IPI Listbox provides selectable options in a list format.
 
 -----------------------------------------------------------------
 
-# IPI Radio-button Component
+# APEX Radio-button Component
 Simple styled radio-button that can accept a formGroup and a control.
 
 ## Usage
 >**`parent.component.html`**
 >```html
-><ipi-radio-button 
+><apex-radio-button 
 >   [options]="{ 
 >     data: [dataOptionOne, dataOptionTwo],
 >     inline: true
 >     formGroup: formGroup
 >     formControlName: formGroup.controls[controlName]
 >   }">
-></ipi-radio-button>
+></apex-radio-button>
 >
-><ipi-radio-button 
+><apex-radio-button 
 >   [options]="{
 >     checked: 1
 >     data: [dataOptionsOne, dataOptionTwo]
 >   }"
 >   (selectChange)="handleChange($event)">
-></ipi-radio-button>
+></apex-radio-button>
 >```
 
 ### Inputs
 
 >#### data 
->Array of elements of type IpiRadioData
+>Array of elements of type ApexRadioData
 
 >#### inline
 >Property that sets the flex-direction to row instead of column(default)
@@ -830,22 +830,22 @@ Simple styled radio-button that can accept a formGroup and a control.
 >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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-radio-button:
 
 >```css
->ipi-radio-button {
->    --ipi-radio-button-background-color: #FFFFFF;
+>apex-radio-button {
+>    --apex-radio-button-background-color: #FFFFFF;
 >
->    --ipi-radio-button-text-color: #5D6068;
+>    --apex-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;
+>    --apex-radio-button-unchecked-border-color: #E9E9E9;
+>    --apex-radio-button-checked-border-color: #F96138;
+>    --apex-radio-button-disabled-border-color: #E7E7E7;
 >
->    --ipi-radio-button-outline-color: none;
+>    --apex-radio-button-outline-color: none;
 >
->    --ipi-radio-button-tooltip-icon-fill: transparent;
->    --ipi-radio-button-tooltip-icon-stroke: #C6C6C6;
+>    --apex-radio-button-tooltip-icon-fill: transparent;
+>    --apex-radio-button-tooltip-icon-stroke: #C6C6C6;
 >}
 >```
 
@@ -853,16 +853,16 @@ Simple styled radio-button that can accept a formGroup and a control.
 
 -----------------------------------------------------------------
 
-# IPI Select Component
+# APEX Select Component
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiSelectComponent, IpiSelectOptions } 
+>import { ApexSelectComponent, ApexSelectOptions } 
 >from '@apexara/ng-components/select';
 >
 >@Component({
->  imports: [ IpiSelectComponent ],
+>  imports: [ ApexSelectComponent ],
 >})
 >
 >export class SelectExampleComponent {
@@ -875,7 +875,7 @@ Simple styled radio-button that can accept a formGroup and a control.
 >     // bind any logic to select change or helperText click
 >   }
 >
->  public selectOptions: IpiSelectOptions = {
+>  public selectOptions: ApexSelectOptions = {
 >    label: 'Example label',
 >    data: [
 >           { label: 'Any string', value: any },
@@ -900,74 +900,74 @@ Simple styled radio-button that can accept a formGroup and a control.
 >**`parent.component.html`**
 >```html 
 >
-><ipi-select 
+><apex-select 
 >  [options]='selectOptions'
 >  (selectChange)='execute()'
 >  (helperTextChange)='execute()'>
-><ipi-select>
+><apex-select>
 >```
 
 ### CSS Variables
->Here are all the available CSS variables (and their default values) you can set when using the ipi-select:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-select:
 >```css
->ipi-select {
+>apex-select {
 >    /* Dropdown styling */
->    --ipi-select-dropdown-box-shadow: none;
+>    --apex-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;
+>    --apex-select-input-text-color: #0B1222;
+>    --apex-select-input-text-selected-color: #F96138;
+>    --apex-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;
+>   --apex-select-chip-font-size: 10px;
+>   --apex-select-chip-color: #FFFFFF;
+>   --apex-select-chip-background-color: #0B1222;
+>   --apex-select-chip-icon-color; #FFFFFF;
 >
 >    /* tooltip icon styling */
->    --ipi-select-tooltip-icon-fill: transparent;
->    --ipi-input-tooltip-icon-stroke: #C6C6C6;
+>    --apex-select-tooltip-icon-fill: transparent;
+>    --apex-input-tooltip-icon-stroke: #C6C6C6;
 >
 >    /* Prefix icon styling */
->    --ipi-select-icon-prefix-fill: #C6C6C6;
->    --ipi-select-icon-prefix-stroke: transparent;
+>    --apex-select-icon-prefix-fill: #C6C6C6;
+>    --apex-select-icon-prefix-stroke: transparent;
 >
 >    /* Background color of the input element inside the select  */
->    --ipi-select-input-background-color: #FFFFFF00;
+>    --apex-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;
+>    --apex-select-input-border-color: #E9E9E9; 
+>    --apex-select-input-border-width: 1px;
 >
 >    /* Options divider color */
->    --ipi-select-options-divider-color: #E9E9E9;
->    --ipi-select-options-divider-height: 1px;
+>    --apex-select-options-divider-color: #E9E9E9;
+>    --apex-select-options-divider-height: 1px;
 >
 >    /* Border color on hover  */
->    --ipi-select-input-border-hover-color: #4B5368;
+>    --apex-select-input-border-hover-color: #4B5368;
 >
 >    /* Border color on disabled */
->    --ipi-select-input-border-disabled-color: #F2F2F2;
+>    --apex-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;
+>    --apex-select-invalid-color: #F96138;
+>    --apex-select-invalid-border-width: 1px;
 >
 >    /* Arrow: */
->    --ipi-select-arrow-color: #5D6068;
->    --ipi-select-arrow-checked-color: #F96138;
+>    --apex-select-arrow-color: #5D6068;
+>    --apex-select-arrow-checked-color: #F96138;
 >
 >    /* Header: */
->    --ipi-select-header-color: #0B1222;
->    --ipi-select-helper-text-color: #5D6068;
+>    --apex-select-header-color: #0B1222;
+>    --apex-select-helper-text-color: #5D6068;
 >
 >    /* if type table */
->    --ipi-select-input-table-color: #5D6068;
+>    --apex-select-input-table-color: #5D6068;
 >
 >    /* Dropdown: */
->    --ipi-select-dropdown-border-color: #E9E9E9;
->    --ipi-select-dropdown-background-color: #FFFFFF;
+>    --apex-select-dropdown-border-color: #E9E9E9;
+>    --apex-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
@@ -979,15 +979,15 @@ Simple styled radio-button that can accept a formGroup and a control.
 
 -----------------------------------------------------------------
 
-# IPI Datepicker Component
+# APEX Datepicker Component
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiDatepickerComponent, IpiDatepickerOptions } 
+>import { ApexDatepickerComponent, ApexDatepickerOptions } 
 >from '@apexara/ng-components/datepicker';
 >
 >@Component({
->  imports: [ IpiDatepickerComponent ],
+>  imports: [ ApexDatepickerComponent ],
 >})
 >
 >export class DatepickerExampleComponent {
@@ -1024,16 +1024,16 @@ Simple styled radio-button that can accept a formGroup and a control.
 >```
 >**`parent.component.html`**
 >```html 
-> <ipi-datepicker [options]="rangeDateOptions"></ipi-datepicker>
+> <apex-datepicker [options]="rangeDateOptions"></apex-datepicker>
 >
-> <ipi-datepicker [options]="singleDateOptions"></ipi-datepicker>
+> <apex-datepicker [options]="singleDateOptions"></apex-datepicker>
 >```
 
 ### Inputs
 >
 >
 >#### options
->Options are of type IpiDatepickerOptions with the following properties:
+>Options are of type ApexDatepickerOptions with the following properties:
 >
 >    label - string - used for how long the snackbar should be displayed
 >
@@ -1050,92 +1050,92 @@ Simple styled radio-button that can accept a formGroup and a control.
 >    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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-datepicker:
 >```css
->ipi-datepicker {
+>apex-datepicker {
 >
 >  /* Picker variables */
->   --ipi-datepicker-svg-background-color:#FF7955;
->   --ipi-datepicker-border: 1px solid #E9E9E9;
->   --ipi-datepicker-border-hover-color: #FF7955;
+>   --apex-datepicker-svg-background-color:#FF7955;
+>   --apex-datepicker-border: 1px solid #E9E9E9;
+>   --apex-datepicker-border-hover-color: #FF7955;
 >   
->   --ipi-datepicker-error-color: #F96138;
->   --ipi-datepicker-svg-fill-color #FFFFFF;
+>   --apex-datepicker-error-color: #F96138;
+>   --apex-datepicker-svg-fill-color #FFFFFF;
 >   
->   --ipi-datepicker-svg-background-hover-color: #F96138;
+>   --apex-datepicker-svg-background-hover-color: #F96138;
 >   
->   --ipi-datepicker-input-color: #0B1222;
+>   --apex-datepicker-input-color: #0B1222;
 >
->   --ipi-datepicker-header-text-color: #FF7955;
+>   --apex-datepicker-header-text-color: #FF7955;
 >
->   --ipi-calendar-background-color: #FFFFFF;
+>   --apex-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);
+>   --apex-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;
+>   --apex-calendar-header-active-date-view-focus-color: #FFFFFF;
 >   
->   --ipi-calendar-header-active-date-view-focus-background-color: #FF7955;
+>   --apex-calendar-header-active-date-view-focus-background-color: #FF7955;
 >   
->   --ipi-calendar-header-active-date-view-hover-color: #FFFFFF;
+>   --apex-calendar-header-active-date-view-hover-color: #FFFFFF;
 >   
->   --ipi-calendar-header-active-date-view-hover-background-color: #FF7955;
+>   --apex-calendar-header-active-date-view-hover-background-color: #FF7955;
 >
->   --ipi-calendar-header-chevron-hover-focus-color: #FFFFFF;
+>   --apex-calendar-header-chevron-hover-focus-color: #FFFFFF;
 >   
->   --ipi-calendar-header-chevron-hover-focus-background-color: #FF7955;
+>   --apex-calendar-header-chevron-hover-focus-background-color: #FF7955;
 >   
->   --ipi-calendar-header-chevron-disabled-color: #5D6068;
+>   --apex-calendar-header-chevron-disabled-color: #5D6068;
 >   
->   --ipi-calendar-month-view-table-header-color: #C6C6C6;
+>   --apex-calendar-month-view-table-header-color: #C6C6C6;
 >   
->   --ipi-calendar-month-view-table-header-border-bottom-color: #C6C6C6;
+>   --apex-calendar-month-view-table-header-border-bottom-color: #C6C6C6;
 >   
->   --ipi-calendar-multi-year-view-table-header-border-bottom-color: #C6C6C6;
+>   --apex-calendar-multi-year-view-table-header-border-bottom-color: #C6C6C6;
 >   
->   --ipi-calendar-year-view-table-header-border-bottom-color: #C6C6C6;
+>   --apex-calendar-year-view-table-header-border-bottom-color: #C6C6C6;
 >   
->   --ipi-calendar-body-cell-color: #0B1222;
+>   --apex-calendar-body-cell-color: #0B1222;
 >
->   --ipi-calendar-body-cell-background-color: none;
+>   --apex-calendar-body-cell-background-color: none;
 >
->   --ipi-calendar-body-cell-border: none;
+>   --apex-calendar-body-cell-border: none;
 >
->   --ipi-calendar-body-cell-hover-color: white;
+>   --apex-calendar-body-cell-hover-color: white;
 >
->   --ipi-calendar-body-cell-hover-background-color: #FFD2C6;
+>   --apex-calendar-body-cell-hover-background-color: #FFD2C6;
 >  
->   --ipi-calendar-body-today-cell-border: #FFD2C6;
+>   --apex-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;
+>   --apex-calendar-body-active-cell-background-color: #f9613880;
+>   --apex-calendar-body-cell-selected-color: #FFFFFF;
+>   --apex-calendar-body-cell-selected-background-color: #F96138;
+>   --apex-calendar-body-cell-in-range-background-color: #FFF2EF;
+>   --apex-calendar-body-cell-in-range-active-background-color: #FFD2C6;
 > 
->   --ipi-calendar-body-cell-in-preview-background-color: #F962381C;
+>   --apex-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;
+>   --apex-calendar-body-cell-in-preview-border: 1px dashed #F96138;
+>   --apex-calendar-body-cell-in-range-border: 1px solid #F96138;
+>   --apex-calendar-body-cell-range-start-border: 1px sold #F96138;
+>   --apex-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;
+>   --apex-calendar-body-cell-range-start-color: #FFFFFFF;
+>   --apex-calendar-body-cell-range-end-border: 1px sold #F96138;
+>   --apex-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;
+>   --apex-calendar-body-cell-range-end-color: #FFFFFFF;
+>   --apex-calendar-body-cell-active-in-range-start-end-background-color: #FFD2C6;
+>   --apex-calendar-body-cell-preview-end-border: 1px dashed #F96138;
+>   --apex-calendar-body-cell-preview-end-background-color: #FFD2C6;
+>   --apex-calendar-body-cell-preview-end-color: #FFFFFF;
+>   --apex-calendar-body-cell-preview-start-border: 1px dashed #F96138;
+>   --apex-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;
+>   --apex-calendar-body-cell-preview-start-color: #FFFFFF;
+>   --apex-calendar-body-cell-in-preview-range-start-border: 0px;
+>   --apex-calendar-body-cell-in-preview-range-end-border: 0px;
 >   
->   --ipi-calendar-body-cell-disabled-background-color: #E0DFDE;
+>   --apex-calendar-body-cell-disabled-background-color: #E0DFDE;
 >}
 >```
 
@@ -1143,7 +1143,7 @@ Simple styled radio-button that can accept a formGroup and a control.
 
 -----------------------------------------------------------------
 
-# IPI Carousel Component
+# APEX 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.
 
@@ -1154,10 +1154,10 @@ A dynamic, responsive carousel component designed to enhance user experience. It
 >
 >```typescript
 >import { Component } from '@angular/core';
->import { IpiCarouselComponent } from '@apexara/ng-components/carousel';
+>import { ApexCarouselComponent } from '@apexara/ng-components/carousel';
 >
 >@Component({
->  imports: [IpiCarouselComponent],
+>  imports: [ApexCarouselComponent],
 >  selector: 'app-carousel-example',
 >  templateUrl: './carousel-example.component.html',
 >  styleUrls: ['./carousel-example.component.css']
@@ -1170,18 +1170,18 @@ A dynamic, responsive carousel component designed to enhance user experience. It
 >### `parent.component.html`
 >
 >```html
-><ipi-carousel>
+><apex-carousel>
 >  @for (let item of [1, 2, 3, 4, 5]; track $index) {
 >    <div>Item {{ item }}</div>
 >  }
-></ipi-carousel>```
+></apex-carousel>```
 
 ---
 
 ### Features and Inputs
 
 #### **Dynamic Content**
-Wrap any HTML or Angular components within `<ipi-carousel>` to display them in the carousel.
+Wrap any HTML or Angular components within `<apex-carousel>` to display them in the carousel.
 
 #### **Progress Bar**
 Automatically updates as the carousel scrolls.
@@ -1198,22 +1198,22 @@ The following variables allow for customization of colors, dimensions, and other
 ---
 
 ### CSS Variables
->Here are all the available CSS variables (and their default values) you can set when using the ipi-carousel:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-carousel:
 >
 >```css
->ipi-carousel {
+>apex-carousel {
 >    /* Carousel Background */
->    --ipi-carousel-background-color: transparent;
+>    --apex-carousel-background-color: transparent;
 >
->    --ipi-carousel-button-border-color: #FFFFFF;
->    --ipi-carousel-button-border-hover-color: #FFFFFF;
+>    --apex-carousel-button-border-color: #FFFFFF;
+>    --apex-carousel-button-border-hover-color: #FFFFFF;
 >
->    --ipi-carousel-chevron-color: #FFFFFF;
->    --ipi-carousel-chevron-hover-color: #FFFFFF;
+>    --apex-carousel-chevron-color: #FFFFFF;
+>    --apex-carousel-chevron-hover-color: #FFFFFF;
 >
 >    /* Progress Bar */
->    --ipi-carousel-scrollbar-color: #FFFFFF;
->    --ipi-carousel-scrollbar-container-color: #020617;
+>    --apex-carousel-scrollbar-color: #FFFFFF;
+>    --apex-carousel-scrollbar-container-color: #020617;
 >
 >}
 >```
@@ -1222,7 +1222,7 @@ The following variables allow for customization of colors, dimensions, and other
 
 -----------------------------------------------------------------
 
-# IPI Snackbar Service
+# APEX Snackbar Service
 A services that provides a way to display messages on the screen.
 
 ## Usage
@@ -1230,8 +1230,8 @@ A services that provides a way to display messages on the screen.
 >```typescript
 >
 >import { 
->   IpiSnackbarService,
->   IpiSnackbarOptions,
+>   ApexSnackbarService,
+>   ApexSnackbarOptions,
 >   horizontalPosition,
 >   verticalPosition } 
 >from '@apexara/ng-components/snackbar';
@@ -1244,14 +1244,14 @@ A services that provides a way to display messages on the screen.
 >
 >   public message = 'Message to be displayed';
 >
->   public options: IpiSnackbarOptions = {
+>   public options: ApexSnackbarOptions = {
 >     error: true,
 >     icon: 'example.svg',
 >     animationDuration: 20
 >   };
 >
 >    // Inject to the component from which you want to execute it
->   constructor(public snackbarService: IpiSnackbarService) {
+>   constructor(public snackbarService: ApexSnackbarService) {
 >     // optionally setting the position
 >     this.snackbarService.setPosition({
 >       verticalPosition: verticalPosition.Bottom,
@@ -1280,10 +1280,10 @@ A services that provides a way to display messages on the screen.
 >Message to be displayed
 
 >#### options
->Options are of type IpiSnackbarOptions with the following properties:
+>Options are of type ApexSnackbarOptions 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)
+>    icon (optional) - string - icon name that must be located inside assets/img/ (using apex-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.
@@ -1296,20 +1296,20 @@ A services that provides a way to display messages on the screen.
 ### CSS Variables
 >
 >```css
->ipi-snackbar {
+>apex-snackbar {
 >    /* Colors, Fills, Strokes: */
->    --ipi-snackbar-background-color: #14BD6C;
->    --ipi-snackbar-error-background-color: #F96138;
+>    --apex-snackbar-background-color: #14BD6C;
+>    --apex-snackbar-error-background-color: #F96138;
 >
->    --ipi-snackbar-placeholder-text-color: #FFFFFF;
->    --ipi-snackbar-message-text-color: #FFFFFF;
+>    --apex-snackbar-placeholder-text-color: #FFFFFF;
+>    --apex-snackbar-message-text-color: #FFFFFF;
 >
->    --ipi-snackbar-progress-color: #FFFFFF;
+>    --apex-snackbar-progress-color: #FFFFFF;
 >
 >    /* Color of closing icon of the snackbar */
->    --ipi-snackbar-x-icon-color: #FFFFFF;
+>    --apex-snackbar-x-icon-color: #FFFFFF;
 >
->    --ipi-snackbar-animation-duration: 10s;
+>    --apex-snackbar-animation-duration: 10s;
 >}
 >```
 
@@ -1317,7 +1317,7 @@ A services that provides a way to display messages on the screen.
 
 -----------------------------------------------------------------
 
-# IPI Overlay Service
+# APEX 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
@@ -1371,7 +1371,7 @@ A services that provides a way to display messages on the screen.
 
 -----------------------------------------------------------------
 
-# IPI Table Component
+# APEX Table Component
 A simple table that can project data sorted by columns x rows providing editing, sorting and filtering 
 of the data. 
 
@@ -1381,13 +1381,13 @@ Two types of tables are available. One with local data and local sorting & filte
 >**`parent.component.ts`**
 >```typescript
 >import { 
->   IpiTableComponent,
->   IpiTableColumn,
->   IpiTableColumnType } 
+>   ApexTableComponent,
+>   ApexTableColumn,
+>   ApexTableColumnType } 
 >from '@apexara/ng-components/table';
 >
 >@Component({
->  imports: [ IpiTableComponent ]
+>  imports: [ ApexTableComponent ]
 >})
 >
 >export class TableExampleComponent {
@@ -1426,10 +1426,10 @@ Two types of tables are available. One with local data and local sorting & filte
 >    listName: 'third list',
 >  }]
 >
->  public tableColumns: IpiTableColumn[] = [
+>  public tableColumns: ApexTableColumn[] = [
 >    { label: 'Id', value: 'id', width: '70px' },
 >    { label: 'Name', value: 'name', width: '70px' },
->    { label: 'Date', value: 'date', type: IpiTableColumnType.Date, 
+>    { label: 'Date', value: 'date', type: ApexTableColumnType.Date, 
 >      dateFormat: 
 >        { 
 >          format: 'shortDate',
@@ -1437,14 +1437,14 @@ Two types of tables are available. One with local data and local sorting & filte
 >          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' },
+>    { label: 'Years', value: 'years', type: ApexTableColumnType.Number, width: '60px'}
+>    { label: 'Credits', value: 'credits', type: ApexTableColumnType.Number width: '70px' },
+>    { label: 'Cash', value: 'cash', type: ApexTableColumnType.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: 'Total cash', value: 'credits * 1.5 + cash', type: ApexTableColumnType.NumberMath width: '70px' },
+>    { label: 'Admin', value: 'admin', type: ApexTableColumnType.Chip width: '70px' },
 >    { label: 'List name', value: 'listName', width: '70px' },
->    { label: 'Actions', type: IpiTableColumnType.Actions, width: '100px',
+>    { label: 'Actions', type: ApexTableColumnType.Actions, width: '100px',
 >      singleActions: [
 >        label: 'Download',
 >        showOn: [
@@ -1468,33 +1468,33 @@ Two types of tables are available. One with local data and local sorting & filte
 >```
 >**`parent.component.html`**
 >```html
-><ipi-table #serverSide
+><apex-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>
+></apex-table>
 >
-><ipi-table #local
+><apex-table #local
 >   [data]="localData" [columns]="tableColumns"
 >   [filter]="tableFilter" [pageable]="true">
-></ipi-table>
+></apex-table>
 >```
 
 ### Inputs
 
 #### Virtual Scroll Example (Local Data)
 >```html
-><ipi-table
+><apex-table
   [data]="localData"
   [columns]="tableColumns"
   [filter]="tableFilter"
   [pageable]="true"
   [virtualScroll]="true"
   [tableHeight]="600">
-></ipi-table>
+></apex-table>
 >```
 
 >#### virtualScroll
@@ -1513,17 +1513,17 @@ Two types of tables are available. One with local data and local sorting & filte
 >The data that the table initializes.
 > 
 
->#### columns - IpiTableColumn Interface
+>#### columns - ApexTableColumn 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.
+>The ApexTableColumn interface defines the structure of each column in the APEX 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.).
+>**type?: ApexTableColumnType**: 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').
 >
@@ -1537,16 +1537,16 @@ Two types of tables are available. One with local data and local sorting & filte
 >
 >**multipleActions?: Action[]**: An array of actions available for multiple rows in this column.
 >
->**dateFormat?: IpiDateFormatOptions**: Formatting options for date values in the column.
+>**dateFormat?: ApexDateFormatOptions**: 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
+>#### columnType - ApexTableColumnType
 >```typescript 
->export enum IpiTableColumnType {
+>export enum ApexTableColumnType {
 >  Text,      // A standard text column
 >  Date,      // A column for displaying dates
 >  Currency,  // A column for displaying currencies
@@ -1658,55 +1658,55 @@ Two types of tables are available. One with local data and local sorting & filte
 
 
 ### CSS Variables
->Here are all the available CSS variables (and their default values) you can set when using the ipi-table:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-table:
 >
 >```css
->ipi-table {
+>apex-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;
+>    --apex-table-background-color: #FFFFFF;
+>    --apex-table-row-bottom-border-color: #E9E9E9;
+>    --apex-table-first-row-text-color: #5D6068;
+>    --apex-table-arranger-hover-color: #F96138;
+>    --apex-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;
+>    --apex-table-action-icon-hover-fill: #F96138;
+>    --apex-table-action-icon-hover-stroke: #FFFFFF00;
+>    --apex-table-action-hover-background-color: #F7F8FB;
 >
 >    /* Color of the single icons */
->    --ipi-table-action-icon-fill: #5D6068;
->    --ipi-table-action-icon-stroke: #FFFFFF00;
+>    --apex-table-action-icon-fill: #5D6068;
+>    --apex-table-action-icon-stroke: #FFFFFF00;
 >
 >   /* Secondary color of single icons */
->    --ipi-table-action-secondary-icon-fill: #F96138;
->    --ipi-table-action-secondary-icon-stroke: #FFFFFF00;
+>    --apex-table-action-secondary-icon-fill: #F96138;
+>    --apex-table-action-secondary-icon-stroke: #FFFFFF00;
 >
->   --ipi-table-action-secondary-icon-hover-fill: #5D6068;
->   --ipi-table-action-secondary-icon-hover-stroke: #FFFFFF00;
+>   --apex-table-action-secondary-icon-hover-fill: #5D6068;
+>   --apex-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;
+>    --apex-table-action-more-icon-fill: #F96138;
+>    --apex-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;
+>    --apex-table-dropdown-action-icon-fill: #5D6068;
+>    --apex-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;
+>    --apex-table-more-actions-dropdown-background-color: #FFFFFF;
+>    --apex-table-more-actions-dropdown-hover-background-color: #00000010;
 >
 >    /* Page picker styling */
->    --ipi-table-page-picker-text-color: #FFFFFF;
->    --ipi-table-page-picker-background: #F96138;
+>    --apex-table-page-picker-text-color: #FFFFFF;
+>    --apex-table-page-picker-background: #F96138;
 >
 >    /* Chip columns color styling */
->    --ipi-table-chip-color: #F96138;
->    --ipi-table-chip-background-color: #FFF2EF;
+>    --apex-table-chip-color: #F96138;
+>    --apex-table-chip-background-color: #FFF2EF;
 >
->    --ipi-table-chip-color-secondary: #0B1222;
->    --ipi-table-chip-background-color-secondary: #E2E2E2;
+>    --apex-table-chip-color-secondary: #0B1222;
+>    --apex-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
@@ -1718,17 +1718,17 @@ Two types of tables are available. One with local data and local sorting & filte
 
 -----------------------------------------------------------------
 
-# IPI Textarea Component
+# APEX Textarea Component
 A simple input textarea that handles formGroup control with validators.
 
 ## Usage
 >**`parent.component.ts`**
 >```typescript
->import { IpiTextAreaComponent, IpiTextAreaOptions }
+>import { ApexTextAreaComponent, ApexTextAreaOptions }
 >from '@apexara/ng-components';
 >
 >@Component({
->  imports: [ IpiTextAreaComponent ]
+>  imports: [ ApexTextAreaComponent ]
 >})
 >
 >export class TextAreaExample {
@@ -1753,16 +1753,16 @@ A simple input textarea that handles formGroup control with validators.
 >**`parent.component.html`**
 >```html 
 >
-> <ipi-textarea 
+> <apex-textarea 
 >   class="fluid"
 >   [options]="textAreaOptions">
-> </ipi-textarea>
+> </apex-textarea>
 >
 > <!-- No form group -->
-><ipi-textarea 
+><apex-textarea 
 >  [options]="{ label: 'Placeholder' }"
 >  (textAreaChange)="textAreaChange($event)">
-></ipi-textarea>
+></apex-textarea>
 >
 >```
 >
@@ -1770,7 +1770,7 @@ A simple input textarea that handles formGroup control with validators.
 ### Inputs
 
 >#### options
->Options of type IpiTextAreaOptions. Only label is required.
+>Options of type ApexTextAreaOptions. Only label is required.
 >{
 >    label - header label element for the current textarea
 >    placeholder - initial placeholder message
@@ -1786,34 +1786,34 @@ A simple input textarea that handles formGroup control with validators.
 >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:
+>Here are all the available CSS variables (and their default values) you can set when using the apex-textarea:
 
 >```css
->ipi-textarea {
+>apex-textarea {
 >    /* Colors, Fills, Strokes: */
->    --ipi-textarea-header-color: #0B1222;
+>    --apex-textarea-header-color: #0B1222;
 >
->    --ipi-textarea-text-color: #0B1222;
->    --ipi-textarea-text-placeholder-color: #C6C6C6;
+>    --apex-textarea-text-color: #0B1222;
+>    --apex-textarea-text-placeholder-color: #C6C6C6;
 >
->    --ipi-textarea-background-color: transparent;
+>    --apex-textarea-background-color: transparent;
 >
->    --ipi-textarea-icon-fill: #C6C6C6;
+>    --apex-textarea-icon-fill: #C6C6C6;
 >    
 >    /* Text area border styling */
->    --ipi-textarea-border: 1px solid #E9E9E9;
->    --ipi-textarea-border-radius: 4px;
+>    --apex-textarea-border: 1px solid #E9E9E9;
+>    --apex-textarea-border-radius: 4px;
 >
->    --ipi-textarea-border-invalid: 1px solid #F96138;
+>    --apex-textarea-border-invalid: 1px solid #F96138;
 >
->   --ipi-textarea-border-disabled: 1px dashed #F2F2F2;
+>   --apex-textarea-border-disabled: 1px dashed #F2F2F2;
 >
 >    /* Text area scroll styling */
->    --ipi-textarea-scrollbar-color: #E2E2E2bb;
->    --ipi-textarea-scrollbar-hover-color: #E2E2E2;
+>    --apex-textarea-scrollbar-color: #E2E2E2bb;
+>    --apex-textarea-scrollbar-hover-color: #E2E2E2;
 >
 >    /* Text area's error text underneath input color */
->    --ipi-textarea-footer-color: #F96138;
+>    --apex-textarea-footer-color: #F96138;
 >
 >/* Note: When you want to setup the color of your icon
 > you should experiment with both these variables or consider
@@ -1825,7 +1825,7 @@ A simple input textarea that handles formGroup control with validators.
 
 -----------------------------------------------------------------
 
-# IPI Tooltip Component
+# APEX 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
@@ -1834,11 +1834,11 @@ place it as a directive to a component:
 
 >**`parent.component.ts`**
 >```typescript
->import { IpiTooltipDirective, TooltipPosition }
+>import { ApexTooltipDirective, TooltipPosition }
 > from '@apexara/ng-components';
 >
 >@Component({
->  imports: [ IpiTooltipDirective ]
+>  imports: [ ApexTooltipDirective ]
 >})
 >
 >export class TooltipExampleComponent {}
@@ -1849,7 +1849,7 @@ place it as a directive to a component:
 >```html
 >
 ><div
->  ipiTooltip='tooltip text'
+>  apexTooltip='tooltip text'
 >  [tooltipPosition]="TooltipPosition.Above">
 ></div>
 >