ng-components

This package provides custom Angular UI components, developed and maintained by APEX Soft LLC. Website: www.apexara.com

Installation

npm install @apexara/ng-components

Components

🔽 Button 🔽 Checkbox 🔽 Chip 🔽 Dialog 🔽 Drawer 🔽 Expander 🔽 Image 🔽 Input 🔽 Listbox 🔽 Radiobutton 🔽 Select 🔽 Datepicker 🔽 Carousel 🔽 Snackbar 🔽 Table 🔽 Textarea 🔽 Tooltip 🔽 More Options

APEX Button Component

A simple button

Usage

parent.component.ts

import { ApexButtonComponent }
from '@apexara/ng-components/button';

@Component({
 imports: [ ApexButtonComponent ]
})

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

<apex-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 
</apex-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 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 apex-button:

apex-button {
   /* Sizes: */
   --apex-button-border-radius: 4px;

   /* Focus outline */
   --apex-button-focus-outline: 2px solid #F96138;

   /* Colors, Fills, Strokes: */
   --apex-button-disabled-background-color: #E7E7E7;

   --apex-button-left-svg-fill: #FFFFFF;
   --apex-button-left-svg-stroke: #FFFFFF00;

   --apex-button-right-svg-fill: #FFFFFF;
   --apex-button-right-svg-fill: #FFFFFF00;
  	
   --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
using the one your icon is based on.  */
}

🔼 Back to top

APEX Checkbox Component

A simple checkbox that can project content, be used with FormGroup and have a tooltip displayed with a APEX Tooltip.

Usage

parent.component.ts

import { ApexCheckboxComponent, ApexCheckboxOptions } 
from '@apexara/ng-components/checkbox';

@Component({
 imports: [ ApexCheckboxComponent ]    
})

export class CheckboxExampleComponent {

 public formGroup = new FormGroup({
   checkboxControl: [false, [Validators.required]],
  });

 public checkboxOptions: ApexCheckboxOptions = {
   formGroup: this.formGroup,
   formControlName: 'checkboxControl',
 }

 public checkboxWithErrorOptions: ApexCheckboxOptions = {
   formGroup: this.formGroup,
   formControlName: 'checkboxControl',
   errors: {
     required: 'You must accept the terms and conditions',
   },
 }

}

parent.component.html

<apex-checkbox
 [checked]="true"
 [disabled]="false"
 [options]="checkboxOptions"
 [tooltip]="'example tooltip text'">
</apex-checkbox>

<!-- With error validation -->
<apex-checkbox [options]="checkboxWithErrorOptions">
 I accept the terms and conditions
</apex-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.

options - ApexCheckboxOptions

formGroup?: FormGroup: Reference to the FormGroup that the apex-checkbox will handle.

formControlName?: string: Reference to the name of the control that we will access in the FormGroup.

errors?: ApexCheckboxErrors: A map of validation error keys to error message strings. When the control is touched and invalid, the first matching error message is displayed below the checkbox.

errors: {
 required: 'This field is required',
}

CSS Variables

Here are all the CSS variables (and their default values) you can set when using apex-checkbox:

apex-checkbox {
   /* Sizes */
   --apex-checkbox-font-size: 14px;

   /* Colors, Fills, Strokes: */
   --apex-checkbox-background-color: #F7F8FB;
   --apex-checkbox-wrapper-border-color: transparent;
   --apex-checkbox-arrow-color: #FFFFFF;
   --apex-checkbox-tooltip-icon-stroke: #FFFFFF;
   --apex-checkbox-error-color: #F96138;

   --apex-checkbox-border-color: #E9E9E9;
   --apex-checkbox-border-hover-color: #F96138;
   --apex-checkbox-outline-color: none;

   /* Other */
   --apex-checkbox-box-shadow-color: #F96138;
   --apex-checkbox-disabled-opacity: 0.5;
}

🔼 Back to top

APEX Chip component

A simple visual container for displaying a text, state, etc. Supports optional left and right icons and an optional close button.

Usage

parent.component.ts

import { ApexChipComponent, ApexChipOptions }
from '@apexara/ng-components/chip';

@Component({
 imports: [ ApexChipComponent ]
})

export class ChipExampleComponent {

 public chipOptions: ApexChipOptions = {
   iconLeft: 'icon.svg',
   iconRight: 'arrow.svg',
 };

 public chipClose(): void {
   // handle close
 }

}

parent.component.html

<!-- Basic chip -->
<apex-chip>Default</apex-chip>

<!-- With close icon -->
<apex-chip
 [closeIcon]="true"
 (closeChange)="chipClose()">
   Closeable
</apex-chip>

<!-- With left icon -->
<apex-chip [options]="{ iconLeft: 'icon.svg' }">With Left Icon</apex-chip>

<!-- With right icon -->
<apex-chip [options]="{ iconRight: 'arrow.svg' }">With Right Icon</apex-chip>

<!-- With both icons and close -->
<apex-chip
 [options]="chipOptions"
 [closeIcon]="true"
 (closeChange)="chipClose()">
   Full Featured
</apex-chip>

ApexChipOptions

interface ApexChipOptions {
 iconLeft?: string;   // SVG filename relative to assets/img/
 iconRight?: string;  // SVG filename relative to assets/img/
}

Inputs

options

ApexChipOptions object to configure optional left and right icons. Icon files are resolved from the assets/img/ directory.

closeIcon

boolean that triggers an X icon that has the closeChange event emitter attached.

Outputs

closeChange

event emitter triggered when the close icon is clicked.

Layout Order

When all features are enabled, the chip renders in this order:

[ left icon ] [ text ] [ right icon ] [ close X ]

CSS Variables

Here all the available CSS variables (and their default values) you can set when using apex-chip:

apex-chip {
   /* Sizes: */
   --apex-chip-font-size: 12px;
   --apex-chip-icon-size: 16px;
   --apex-chip-icon-spacing: 6px;

   /* Colors, Fills, Strokes: */
   --apex-chip-color: #FFFFFF;
   --apex-chip-background-color: #0B1222;
   --apex-chip-icon-color: #FFFFFF;
   --apex-chip-left-icon-fill: #FFFFFF;
   --apex-chip-left-icon-stroke: #ffffff00;
   --apex-chip-right-icon-fill: #FFFFFF;
   --apex-chip-right-icon-stroke: #ffffff00;
}

🔼 Back to top

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

import { ApexDialogComponent }
from '@apexara/ng-components/dialog';

@Component({
 imports: [ ApexDialogComponent ]
})

export class DialogExampleComponent { }

parent.component.html

@if (shouldRender) {
   <apex-dialog>
       <ng-template #title>Title Here</ng-template>

       <ng-template #description>Description Here</ng-template>

       <ng-template #content>
           <apex-input [options]="{ label: 'Name' }"></apex-input>
       </ng-template>

       <ng-template #actions>
           <apex-button (clickChange)="shouldRender = false">
               Cancel
           </apex-button>
       </ng-template>
   </apex-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

<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

<ng-template #content>
   <apex-input [options]="{ label: 'Name' }"></apex-input>
</ng-template>

parent.component.css

apex-input {
   --apex-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

<ng-template #actions>
   <apex-button>Close</apex-button>
</ng-template>

parent.component.html Or with multiple actions:

<ng-template #actions>
   <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 apex-dialog:

apex-dialog {
   /* Sizes: */
   --apex-dialog-max-width: 432px;

   /* Colors, Fills, Strokes: */
   --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;
}

🔼 Back to top

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

import { ApexDrawerComponent }
from '@apexara/ng-components/drawer';

@Component({
 imports: [ ApexDrawerComponent ]
})

export class DrawerExampleComponent { }

parent.component.html

@if (shouldRender) {
   <apex-drawer #drawer (clickChange)="shouldRender = false">
       <ng-template #title>Title Here</ng-template>

       <ng-template #description>Description Here</ng-template>

       <ng-template #content>
           <apex-input [options]="{ label: 'Name' }"></apex-input>
       </ng-template>

       <ng-template #actions>
           <apex-button (clickChange)="drawer.close()">
               Close
           </apex-button>
       </ng-template>
   </apex-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

<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

<ng-template #content>
   <apex-input [options]="{ label: 'Name' }"></apex-input>
</ng-template>

parent.component.css

apex-input {
   --apex-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

<ng-template #actions>
   <apex-button>Close</apex-button>
</ng-template>

parent.component.html Or with multiple actions:

<ng-template #actions>
   <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 apex-drawer:

apex-drawer {
   /* Sizes: */
   --apex-drawer-width: 410px;

   /* Colors, Fills, Strokes: */
   --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;
}

🔼 Back to top

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

import { ApexExpanderComponent } 
from '@apexara/ng-components/expander';

@Component({
 imports: [ ApexExpanderComponent ]
})

export class ExpanderExampleComponent { }

parent.component.html

<apex-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>
<apex-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 apex-expander:

apex-expander {
   /* Sizes: */
   --apex-expander-border: 0px;

   /* Colors, Fills, Strokes: */
   --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;

   --apex-expander-outline-color: none;
   /* Other */
   --apex-expander-box-shadow: 0px 4px 8px 0px rgba(214, 214, 214, 0.35);
}

🔼 Back to top

APEX Image Component

An image component that fetches an asset and displays it.

Usage

parent.component.ts

import { ApexIconComponent } 
from '@apexara/ng-components/image';

@Component({
 imports: [ ApexIconComponent ]
})

export class IconExampleComponent { }

parent.component.html

<apex-img 
 [src]="assets/img/example.svg" 
 [ariaLabel]="Example aria label for icon.">
</apex-img>

Inputs

src

A url path to the desired img.

ariaLabel

a string value that adds accessible name to the image.

🔼 Back to top

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

import { ApexInputComponent, ApexInputOptions }
from '@apexara/ng-components/input';

@Component({
 imports: [ ApexInputComponent ]
})

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

<apex-input [options]="inputOptions">
</apex-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 apex-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 apex-input:

apex-input {
   /* Colors, Fills, Strokes: */
   --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 */
   --apex-input-error-color: #F96138;
   --apex-input-border-error-width: 1px;

   /* Tooltip icon styling */
   --apex-input-tooltip-icon-fill: transparent;
   --apex-input-tooltip-icon-stroke: #C6C6C6;

   /* on all validators passed we make the text with this color  */
   --apex-input-success-color: #14BD6C;
   --apex-input-border-color: #E9E9E9;
   --apex-input-border-width: 1px;
   --apex-input-value-color: #0B1222;

   /* Left icon fill & stroke : */
   `--apex-input-icon-left-fill: #FFFFFF;
   `--apex-input-icon-left-stroke: transparent;

   /* Right icon fill & stroke: */
   --apex-input-icon-right-fill: #FFFFFF;
   --apex-input-icon-right-stroke: transparent;

   /* Info icon (the one ot top with the label) fill & stroke */
   `--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
using the one your icon is based on.  */
}

🔼 Back to top

APEX Listbox Component

APEX Listbox provides selectable options in a list format.

Usage

parent.component.ts

import { ApexListboxComponent, ApexListboxOptions } 
from '@apexara/ng-components/listbox';

@Component({
 imports: [ ApexListboxComponent ]
})

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

<apex-listbox 
 [options]="listboxOptions"
 (selectChange)="$event">
</apex-listbox>

Inputs

label

Label above the listbox container.

formGroup

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 apex-listbox:

apex-listbox {
   /* Colors, Fills, Strokes: */
   --apex-listbox-label-color: default;
   --apex-listbox-background-color: #FFFFFF;

   --apex-listbox-item-color: #00000099;
   --apex-listbox-item-selected-color: #F96138;

   /* Border */
   --apex-listbox-border-color: #F2F2F2;
   --apex-listbox-border-hovor-color: #4B5368;

   /* Tooltip icon styling */
   --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)
or consider using the one your icon is based on.  */
}

🔼 Back to top

APEX Radio-button Component

Simple styled radio-button that can accept a formGroup and a control.

Usage

parent.component.html

<apex-radio-button 
  [options]="{ 
    data: [dataOptionOne, dataOptionTwo],
    inline: true
    formGroup: formGroup
    formControlName: formGroup.controls[controlName]
  }">
</apex-radio-button>

<apex-radio-button 
  [options]="{
    checked: 1
    data: [dataOptionsOne, dataOptionTwo]
  }"
  (selectChange)="handleChange($event)">
</apex-radio-button>

Inputs

data

Array of elements of type ApexRadioData

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 apex-radio-button:

apex-radio-button {
   --apex-radio-button-background-color: #FFFFFF;

   --apex-radio-button-text-color: #5D6068;

   --apex-radio-button-unchecked-border-color: #E9E9E9;
   --apex-radio-button-checked-border-color: #F96138;
   --apex-radio-button-disabled-border-color: #E7E7E7;

   --apex-radio-button-outline-color: none;

   --apex-radio-button-tooltip-icon-fill: transparent;
   --apex-radio-button-tooltip-icon-stroke: #C6C6C6;
}

🔼 Back to top

APEX Select Component

Usage

parent.component.ts

import { ApexSelectComponent, ApexSelectOptions } 
from '@apexara/ng-components/select';

@Component({
 imports: [ ApexSelectComponent ],
})

export class SelectExampleComponent {

  public selectForm = this.formBuilder.group({
   selectControl: [[], [Validators.required]],
  });

  public execute() {
    // bind any logic to select change or helperText click
  }

 public selectOptions: ApexSelectOptions = {
   label: 'Example label',
   data: [
          { label: 'Any string', value: any, icon: 'icon.svg' },
          { label: '', value: any, icon: 'write.svg' },
          { 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

<apex-select 
 [options]='selectOptions'
 (selectChange)='execute()'
 (helperTextChange)='execute()'>
<apex-select>

In-dropdown search

Set searchInDropdown: true to move the search input inside the dropdown (instead of the trigger). Intended for multi-select. The trigger then shows chips (or a counter when counterAsValue: true) and the arrow only, and the search input auto-focuses when the dropdown opens.

public selectOptions: ApexSelectOptions = {
 label: 'Property Type',
 data: [
   { label: 'SFR', value: 'sfr' },
   { label: 'Duplex', value: 'duplex' },
   { label: 'Condo', value: 'condo' },
 ],
 multiple: true,
 searchInDropdown: true,
 counterAsValue: true,
 placeholder: 'Select property types',
 formGroup: this.selectForm,
 formControlName: 'selectControl',
};

Grouped options with categories

Pass a groups array to render category headers above each section. groups supersedes data when both are present. Grouped mode requires searchInDropdown: true and uses native scroll (not virtual scroll), so it is intended for bounded lists that fit comfortably within --apex-select-dropdown-body-max-height. Search filters inside each category and empty categories disappear.

public selectOptions: ApexSelectOptions = {
 label: 'Property Type',
 data: [], // ignored when groups is present
 groups: [
   {
     label: 'Residential',
     data: [
       { label: 'SFR', value: 'sfr' },
       { label: 'SFR w/ ADU', value: 'sfr-adu' },
       { label: 'Duplex', value: 'duplex' },
     ],
   },
   {
     label: 'Commercial',
     data: [
       { label: 'Medical', value: 'medical' },
       { label: 'Mixed Use', value: 'mixed-use' },
     ],
   },
 ],
 multiple: true,
 searchInDropdown: true,
 counterAsValue: true,
 formGroup: this.selectForm,
 formControlName: 'selectControl',
};

CSS Variables

Here are all the available CSS variables (and their default values) you can set when using the apex-select:

apex-select {
   /* Dropdown styling */
   --apex-select-dropdown-box-shadow: none;

   /* Input styling */
   --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) */
  --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 */
   --apex-select-tooltip-icon-fill: transparent;
   --apex-input-tooltip-icon-stroke: #C6C6C6;

   /* Prefix icon styling */
   --apex-select-icon-prefix-fill: #C6C6C6;
   --apex-select-icon-prefix-stroke: transparent;

   /* Background color of the input element inside the select  */
   --apex-select-input-background-color: #FFFFFF00;

   /* Border color of the input element inside the select  */
   --apex-select-input-border-color: #E9E9E9; 
   --apex-select-input-border-width: 1px;

   /* Options divider color */
   --apex-select-options-divider-color: #E9E9E9;
   --apex-select-options-divider-height: 1px;

   /* Border color on hover  */
   --apex-select-input-border-hover-color: #4B5368;

   /* Border color on disabled */
   --apex-select-input-border-disabled-color: #F2F2F2;

   /* Border and text color for when Select is invalid */
   --apex-select-invalid-color: #F96138;
   --apex-select-invalid-border-width: 1px;

   /* Arrow: */
   --apex-select-arrow-color: #5D6068;
   --apex-select-arrow-checked-color: #F96138;

   /* Header: */
   --apex-select-header-color: #0B1222;
   --apex-select-helper-text-color: #5D6068;

   /* if type table */
   --apex-select-input-table-color: #5D6068;

   /* Dropdown: */
   --apex-select-dropdown-border-color: #E9E9E9;
   --apex-select-dropdown-background-color: #FFFFFF;

   /* In-dropdown search row (searchInDropdown: true) */
   --apex-select-dropdown-search-border-color: #E9E9E9;
   --apex-select-dropdown-search-icon-color: #5D6068;

   /* Dropdown body scroll area (grouped mode) */
   --apex-select-dropdown-body-max-height: 320px;

   /* Group header (grouped mode) */
   --apex-select-group-header-color: #9A9A9A;

   /* Option icons (per-item icons in dropdown): */
   --apex-select-option-icon-size: 20px;
   --apex-select-option-icon-spacing: 10px;
   --apex-select-option-icon-fill: #5D6068;
   --apex-select-option-icon-stroke: #ffffff00;
   --apex-select-option-icon-selected-fill: #F96138;
   --apex-select-option-icon-selected-stroke: #ffffff00;

/* 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

APEX Datepicker Component

Usage

parent.component.ts

import { ApexDatepickerComponent, ApexDatepickerOptions } 
from '@apexara/ng-components/datepicker';

@Component({
 imports: [ ApexDatepickerComponent ],
})

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

<apex-datepicker [options]="rangeDateOptions"></apex-datepicker>

<apex-datepicker [options]="singleDateOptions"></apex-datepicker>

Inputs

options

Options are of type ApexDatepickerOptions 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 apex-datepicker:

apex-datepicker {

 /* Picker variables */
  --apex-datepicker-svg-background-color:#FF7955;
  --apex-datepicker-border: 1px solid #E9E9E9;
  --apex-datepicker-border-hover-color: #FF7955;
  
  --apex-datepicker-error-color: #F96138;
  --apex-datepicker-svg-fill-color #FFFFFF;
  
  --apex-datepicker-svg-background-hover-color: #F96138;
  
  --apex-datepicker-input-color: #0B1222;

  --apex-datepicker-header-text-color: #FF7955;

  --apex-calendar-background-color: #FFFFFF;

  --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);

  --apex-calendar-header-active-date-view-focus-color: #FFFFFF;
  
  --apex-calendar-header-active-date-view-focus-background-color: #FF7955;
  
  --apex-calendar-header-active-date-view-hover-color: #FFFFFF;
  
  --apex-calendar-header-active-date-view-hover-background-color: #FF7955;

  --apex-calendar-header-chevron-hover-focus-color: #FFFFFF;
  
  --apex-calendar-header-chevron-hover-focus-background-color: #FF7955;
  
  --apex-calendar-header-chevron-disabled-color: #5D6068;
  
  --apex-calendar-month-view-table-header-color: #C6C6C6;
  
  --apex-calendar-month-view-table-header-border-bottom-color: #C6C6C6;
  
  --apex-calendar-multi-year-view-table-header-border-bottom-color: #C6C6C6;
  
  --apex-calendar-year-view-table-header-border-bottom-color: #C6C6C6;
  
  --apex-calendar-body-cell-color: #0B1222;

  --apex-calendar-body-cell-background-color: none;

  --apex-calendar-body-cell-border: none;

  --apex-calendar-body-cell-hover-color: white;

  --apex-calendar-body-cell-hover-background-color: #FFD2C6;
 
  --apex-calendar-body-today-cell-border: #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;

  --apex-calendar-body-cell-in-preview-background-color: #F962381C;
  
  --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;
  
  --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;
  
  --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;
  
  --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;
  
  --apex-calendar-body-cell-disabled-background-color: #E0DFDE;
}

🔼 Back to top

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.

Usage

parent.component.ts

import { Component } from '@angular/core';
import { ApexCarouselComponent } from '@apexara/ng-components/carousel';

@Component({
 imports: [ApexCarouselComponent],
 selector: 'app-carousel-example',
 templateUrl: './carousel-example.component.html',
 styleUrls: ['./carousel-example.component.css']
})
export class CarouselExampleComponent {
  
}

parent.component.html

<apex-carousel>
 @for (let item of [1, 2, 3, 4, 5]; track $index) {
   <div>Item {{ item }}</div>
 }
</apex-carousel>```

Features and Inputs

Dynamic Content

Wrap any HTML or Angular components within <apex-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 apex-carousel:

apex-carousel {
   /* Carousel Background */
   --apex-carousel-background-color: transparent;

   --apex-carousel-button-border-color: #FFFFFF;
   --apex-carousel-button-border-hover-color: #FFFFFF;

   --apex-carousel-chevron-color: #FFFFFF;
   --apex-carousel-chevron-hover-color: #FFFFFF;

   /* Progress Bar */
   --apex-carousel-scrollbar-color: #FFFFFF;
   --apex-carousel-scrollbar-container-color: #020617;

}

🔼 Back to top

APEX Snackbar Service

A services that provides a way to display messages on the screen.

Usage

parent.component.ts

import { 
  ApexSnackbarService,
  ApexSnackbarOptions,
  horizontalPosition,
  verticalPosition } 
from '@apexara/ng-components/snackbar';

@Component({
 imports: [],
})

export class SnackbarExample {

  public message = 'Message to be displayed';

  public options: ApexSnackbarOptions = {
    error: true,
    icon: 'example.svg',
    animationDuration: 20
  };

   // Inject to the component from which you want to execute it
  constructor(public snackbarService: ApexSnackbarService) {
    // optionally setting the position
    this.snackbarService.setPosition({
      verticalPosition: verticalPosition.Bottom,
      horizontalPosition: horizontalPosition.Center
     });
  }

}

parent.component.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 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 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. 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

apex-snackbar {
   /* Colors, Fills, Strokes: */
   --apex-snackbar-background-color: #14BD6C;
   --apex-snackbar-error-background-color: #F96138;

   --apex-snackbar-placeholder-text-color: #FFFFFF;
   --apex-snackbar-message-text-color: #FFFFFF;

   --apex-snackbar-progress-color: #FFFFFF;

   /* Color of closing icon of the snackbar */
   --apex-snackbar-x-icon-color: #FFFFFF;

   --apex-snackbar-animation-duration: 10s;
}

🔼 Back to top

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

parent.component.ts

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

APEX 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

import { 
  ApexTableComponent,
  ApexTableColumn,
  ApexTableColumnType } 
from '@apexara/ng-components/table';

@Component({
 imports: [ ApexTableComponent ]
})

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: ApexTableColumn[] = [
   { label: 'Id', value: 'id', width: '70px' },
   { label: 'Name', value: 'name', width: '70px' },
   { label: 'Date', value: 'date', type: ApexTableColumnType.Date, 
     dateFormat: 
       { 
         format: 'shortDate',
         locale: 'en-US',
         timezone: '+0100'
       },
     width: '60px' }
   { 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: ApexTableColumnType.NumberMath width: '70px' },
   { label: 'Admin', value: 'admin', type: ApexTableColumnType.Chip width: '70px' },
   { label: 'List name', value: 'listName', width: '70px' },
   { label: 'Actions', type: ApexTableColumnType.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

<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)">
</apex-table>

<apex-table #local
  [data]="localData" [columns]="tableColumns"
  [filter]="tableFilter" [pageable]="true">
</apex-table>

Inputs

Virtual Scroll Example (Local Data)

<apex-table

[data]="localData" [columns]="tableColumns" [filter]="tableFilter" [pageable]="true" [virtualScroll]="true" [tableHeight]="600">

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 - ApexTableColumn Interface

The columns that will the table have and based on the columns the data will be visualized.

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?: 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').

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?: 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.

change?: string: Row property path for a percentage change value. When set, an inline chip appears next to the cell value showing the change (e.g., "+6.2%") — green for positive, red for negative. Works with Text, Number, Currency, and NumberMath column types.

listOptions?: ApexTableListOptions: Groups list column display options into a single object.

• label?: string — the property name on each array item to use as the display label (e.g., 'name').
• max?: number — the maximum number of items to show before the overflow badge. Default is 3.

cellOptions?: ApexTableCellOptions: Groups cell-level display options (icon, icon position, color) into a single object.

export interface ApexTableCellOptions {
 icon?: string | { [key: string]: string };       // static icon or value-to-icon map
 iconPosition?: 'left' | 'right';                 // default: 'left'
 iconColor?: { [key: string]: string };            // value-to-color map for icon fill/stroke
 textColor?: { [key: string]: string };            // value-to-color map for text color (Text columns)
 chipColor?: { [key: string]: string };            // value-to-color map for chip text color (Chip columns)
 chipBackgroundColor?: { [key: string]: string };  // value-to-color map for chip background (Chip columns)
}

Icon with color example — use cellOptions to set icon and text color per value:

{
 label: 'Trend', value: 'trend', width: '120px',
 cellOptions: {
   icon: { 'Up': 'arrow-up.svg', 'Down': 'arrow-down.svg', 'Neutral': 'neutral.svg' },
   iconColor: { 'Up': '#26D280', 'Down': '#FF4242', 'Neutral': '#FFA753' },
   textColor: { 'Up': '#26D280', 'Down': '#FF4242', 'Neutral': '#FFA753' }
 }
}

Chip column styling example — use cellOptions to set chip colors per value without predefined CSS classes:

{
 label: 'Status', value: 'status', type: ApexTableColumnType.Chip,
 chipLabel: { 'active': 'Active', 'pending': 'Pending', 'inactive': 'Inactive' },
 cellOptions: {
   chipColor: { 'active': '#00B67A', 'pending': '#FFA753', 'inactive': '#FF4242' },
   chipBackgroundColor: { 'active': '#E6F9F0', 'pending': '#FFF8EF', 'inactive': '#FFF2EF' }
 }
}

columnType - ApexTableColumnType

export enum ApexTableColumnType {
 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
 List,        // A column for displaying arrays with overflow badge
 Status,      // A column for displaying multi-step progress indicators
}

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.

List Column: Displays an array of objects as a formatted text string joined by " / " (e.g., "Miami / Orlando / Tampa"). When the array exceeds listOptions.max items, an overflow badge (+N) appears. Hovering the badge shows a tooltip with all remaining items.

Status Column: Displays a horizontal sequence of labeled steps, each underlined by a colored bar. Steps up to and including the row's current status show their configured color; later steps show a muted gray bar. Useful for deal pipelines, order progress, approval flows, etc.

List Column Usage

// Data
public tableData = [
 {
   id: 1,
   locations: [
     { name: 'Miami' },
     { name: 'Orlando' },
     { name: 'Tampa' },
     { name: 'Jacksonville' },
     { name: 'Tallahassee' }
   ]
 }
];

// Column config
public tableColumns: ApexTableColumn[] = [
 {
   label: 'Locations',
   value: 'locations',
   type: ApexTableColumnType.List,
   listOptions: {
     label: 'name',     // which property on each item to display
     max: 3,            // show first 3, then "+2" badge
   },
   width: '200px'
 }
];

This renders: Miami / Orlando / Tampa +2

Hovering +2 shows a tooltip with:

• Jacksonville
• Tallahassee

List Column CSS Variables

| Variable | Default | Description | |---|---|---| | --apex-table-list-overflow-background | transparent | Overflow badge background | | --apex-table-list-overflow-color | #FFA753 | Overflow badge text color | | --apex-table-list-overflow-border-color | #FFEFE1 | Overflow badge border color |

Status Column Usage

export interface ApexTableStatusStep {
 label: string;                          // Display label for the step
 value: string | number | boolean;       // Identifier matched against the row's status value (strict equality)
 color: string;                          // Bar color when this step is reached
}

The row's status value (resolved from column.value) is matched against each step's value. All steps up to and including the matched one are considered completed and show their configured color. Remaining steps show the muted incomplete color. If the value doesn't match any step → every step renders as incomplete.

// Data
public tableData = [
 { id: 1, offerStatus: 'listed' },
 { id: 2, offerStatus: 'sold' },
 { id: 3, offerStatus: 'offerAccepted' }
];

// Column config
public tableColumns: ApexTableColumn[] = [
 {
   label: 'Offer Status',
   value: 'offerStatus',
   type: ApexTableColumnType.Status,
   width: '320px',
   statusSteps: [
     { label: 'Listed',           value: 'listed',          color: '#FBD84A' },
     { label: 'Receiving Offers', value: 'receivingOffers', color: '#4AC0E0' },
     { label: 'Offer Accepted',   value: 'offerAccepted',   color: '#26D280' },
     { label: 'Sold',             value: 'sold',            color: '#FFA753' }
   ]
 }
];

Status Column CSS Variables

| Variable | Default | Description | |---|---|---| | --apex-table-status-gap | 8px | Gap between steps | | --apex-table-status-bar-height | 3px | Height of the underline bar | | --apex-table-status-incomplete-color | #E5E7EB | Bar color for not-yet-reached steps | | --apex-table-status-label-color | #888B95 | Label color for not-yet-reached steps | | --apex-table-status-label-completed-color | #191B22 | Label color for reached steps |

Cell Icons

Cell icons allow you to display an icon next to the text in a cell. The icon can be static or mapped per value, making it useful for status indicators, engagement levels, etc.

// Column with value-mapped icons and colors
public columns: ApexTableColumn[] = [
 {
   label: 'Engagement',
   value: 'engagement',
   width: '120px',
   cellOptions: {
     icon: {
       'High': 'arrow-up.svg',
       'Medium': 'arrow-up-right.svg',
       'Low': 'arrow-down.svg'
     },
     color: {
       'High': '#26D280',
       'Medium': '#FFA753',
       'Low': '#FF4242'
     }
   }
 }
];

This renders an arrow icon + colored text per value:

• High: green arrow up + green text
• Medium: orange diagonal arrow + orange text
• Low: red arrow down + red text

Use iconPosition: 'right' inside cellOptions to place the icon after the text.

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

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.

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.

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.

stickyHeader

When true, the table header row sticks to the top of the viewport when the user scrolls down the page. The header gets a background color only when it's actually stuck (scrolled past).

editMode

When true, enables edit/selection mode. A checkbox column appears on the right side of each row allowing row selection. Supports shift+click for range selection. A "Select all" / "Deselect" text button appears in the header.

selectionChange

EventEmitter that fires with an array of selected row objects whenever the selection changes in edit mode. Use this to wire up any external actions (delete, export, move, etc.) on the selected rows.

editModeChange

EventEmitter that fires with a boolean whenever editMode changes. Useful for external components that need to react to the table entering or exiting edit mode.

CSS Variables

Here are all the available CSS variables (and their default values) you can set when using the apex-table:

apex-table {
   /* Colors, Fills, Strokes: */
   --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 */
   --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 */
   --apex-table-action-icon-fill: #5D6068;
   --apex-table-action-icon-stroke: #FFFFFF00;

  /* Secondary color of single icons */
   --apex-table-action-secondary-icon-fill: #F96138;
   --apex-table-action-secondary-icon-stroke: #FFFFFF00;

  --apex-table-action-secondary-icon-hover-fill: #5D6068;
  --apex-table-action-secondary-icon-hover-stroke: #FFFFFF00;

   /* Default color of the more actions (three dots) icon */
   --apex-table-action-more-icon-default-fill: #5D6068;
   --apex-table-action-more-icon-default-stroke: #FFFFFF00;

   /* Color of the more actions icon on hover / when opened */
   --apex-table-action-more-icon-fill: #F96138;
   --apex-table-action-more-icon-stroke: #FFFFFF00;

   /* Color of the icons of multiple actions */
   --apex-table-dropdown-action-icon-fill: #5D6068;
   --apex-table-dropdown-action-icon-stroke: #FFFFFF00;

   /* Background on dropdown if stacked actions are initialized */
   --apex-table-more-actions-dropdown-background-color: #FFFFFF;
   --apex-table-more-actions-dropdown-hover-background-color: #00000010;

   /* Page picker styling */
   --apex-table-page-picker-text-color: #FFFFFF;
   --apex-table-page-picker-background: #F96138;

   /* Chip columns color styling (used by class="primary" / class="secondary") */
   --apex-table-chip-color: #F96138;
   --apex-table-chip-background-color: #FFF2EF;

   --apex-table-chip-color-secondary: #0B1222;
   --apex-table-chip-background-color-secondary: #E2E2E2;

   /* Chip colors can also be set per-value via cellOptions.color / cellOptions.backgroundColor */

   /* Cell icon color (set per-value via cellOptions.iconColor, applies to both fill and stroke SVGs) */
   --apex-table-cell-icon-fill: unset;
   --apex-table-cell-icon-stroke: unset;

   /* Sticky header background when stuck */
   --apex-table-header-background-color: #FFFFFF;

   /* Edit mode - selected row highlight */
   --apex-table-selected-row-background-color: #FFF7F5;

   /* Edit mode - "Select all" / "Deselect" button */
   --apex-table-select-all-color: #F96138;
   --apex-table-select-all-hover-color: #E0562F;
   --apex-table-select-all-background-color: transparent;
   --apex-table-select-all-font-size: 12px;
   --apex-table-select-all-font-weight: 600;

/* 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

APEX Textarea Component

A simple input textarea that handles formGroup control with validators.

Usage

parent.component.ts

import { ApexTextAreaComponent, ApexTextAreaOptions }
from '@apexara/ng-components';

@Component({
 imports: [ ApexTextAreaComponent ]
})

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',
   }