ng-components

This package provides custom Angular UI components, developed and maintained by IPI Soft LLC. Website: www.ipi-soft.com

Installation

npm install @ipi-soft/ng-components

Components

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

IPI Button Component

A simple button

Usage

parent.component.ts

import { IpiButtonComponent }
from '@ipi-soft/ng-components/button';

@Component({
 imports: [ IpiButtonComponent ]
})

export class ButtonExampleComponent {

 public handleClickChange(): void {
   // click change login on button emit
 }
}

parent.component.html

<ipi-button 
  [options]="{ 
    iconLeft: 'icon.svg',
    iconRight: 'icon.svg'
  }"
  [link]="routerLink"
  [state]="routerLink state"
  (clickChange)="handelClickChange()">
      Click here 
</ipi-button>

Inputs

options

two icons inside the button can be passed optionally on the left or right side ot the text.

clickChange

event emitter to handle clicks

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:

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

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

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

   --ipi-button-right-svg-fill: #FFFFFF;
   --ipi-button-right-svg-fill: #FFFFFF00;
  	
   --ipi-button-text-color: #FFFFFF;
   --ipi-button-border-color: none;
   --ipi-button-background-color: #0B1222;

/* Note: When you want to setup the color of your icon
you should experiment with both these variables or consider
using the one your icon is based on.  */
}

🔼 Back to top

IPI Checkbox Component

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

Usage

parent.component.ts

import { IpiCheckboxComponent, IpiCheckboxOptions } 
from '@ipi-soft/ng-components/checkbox';

@Component({
 imports: [ IpiCheckboxComponent ]    
})

export class CheckboxExampleComponent {

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

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

}

parent.component.html

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

Inputs

checked

Sets the checked attribute of the checkbox input by default.

disabled

Can be used to disabled the input and to prevent a user from interacting with it.

tooltip

a text that if present triggers a tooltip component with it inside.

formGroup

Refference to the FormGroup that the ipi-checkbox will handle

formControlName

Refference to the name of the control that we will access in the FormGroup

CSS Variables

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

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

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

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

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

🔼 Back to top

IPI Chip component

A simple visual container for displaying a text, state, etc.

Usage

parent.component.ts

import { IpiChipComponent } 
from '@ipi-soft/ng-components/chip';

@Component({
 imports: [ IpiChipComponent ]
})

export class ChipExampleComponent { }

parent.component.html

<ipi-chip 
 class="with-close-icon"
 [closeIcon]="true"
 (closeChange)="chipClose()">
   With Close Icon
</ipi-chip>

Inputs

closeIcon

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

closeChange

event emitter to handle clicks

CSS Variables

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

ipi-chip {
   /* Sizes: */
   --ipi-chip-font-size: 12px;

   /* Colors, Fills, Strokes: */
   --ipi-chip-color: #FFFFFF;
   --ipi-chip-background-color: #0B1222;
   --ipi-chip-icon-color: #FFFFFF;
}

🔼 Back to top

IPI Dialog Component

Simple Dialog component with the option to project everything necessary - close icon, title, description, other content, actions. The styling is only for the Dialog itself, the close icon, the title and the description. The content and the actions can be anything so their styling is up to the parent component

Usage

parent.component.ts

import { IpiDialogComponent }
from '@ipi-soft/ng-components/dialog';

@Component({
 imports: [ IpiDialogComponent ]
})

export class DialogExampleComponent { }

parent.component.html

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

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

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

       <ng-template #actions>
           <ipi-button (clickChange)="shouldRender = false">
               Cancel
           </ipi-button>
       </ng-template>
   </ipi-dialog>
}

Inputs

Dialog Close Icon

Shows a close icon. All you need is to pass [closeIcon]="true" and a function that closes the dialog. In example

Dialog Title

The title is projected with the Select=['title']. All you need is an HTML element with 'title' set. In example

Dialog Description

The description is projected with the Select=['description']. All you need is an HTML element with 'description' set. In example

<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>
   <ipi-input [options]="{ label: 'Name' }"></ipi-input>
</ng-template>

parent.component.css

ipi-input {
   --ipi-input-error-color: red;
}

Dialog Actions

parent.component.html The Actions are projected with the Select=['actions']. All you need is an HTML element with 'actions' set. In example

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

parent.component.html Or with multiple actions:

<ng-template #actions>
   <ipi-button (clickChange)="shouldRender = false">Close</ipi-button>
   <ipi-button (clickChange)="triggerAction()">Trigger Action</ipi-button>
</ng-template>

Again, the styling of the buttons in this case should happen in the Parent component. You can group them in a div with 'display: flex'

CSS Variables

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

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

   /* Colors, Fills, Strokes: */
   --ipi-dialog-backdrop-background: #0B1222;
   --ipi-dialog-background: #FFFFFF;
   --ipi-dialog-close-icon-color: #0B1222;
   --ipi-dialog-close-icon-hover-color: #F96138;
   --ipi-dialog-title-color: #0B1222;
   --ipi-dialog-description-color: #5D6068;
}

🔼 Back to top

IPI Drawer Component

Simple Drawer component with the option to project everything necessary - title, description, content, actions. The styling is only for the Drawer itself, the title and the description. The content and the actions can be anything so their styling is up to the parent component

Usage

parent.component.ts

import { IpiDrawerComponent }
from '@ipi-soft/ng-components/drawer';

@Component({
 imports: [ IpiDrawerComponent ]
})

export class DrawerExampleComponent { }

parent.component.html

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

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

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

       <ng-template #actions>
           <ipi-button (clickChange)="drawer.close()">
               Close
           </ipi-button>
       </ng-template>
   </ipi-drawer>
}

Inputs

closeChange

This function should close the drawer. It is called by drawer.close() and is used for the closing transition. It must be provided if drawer.close() is used.

Drawer Title

The title is projected with the Select=['title']. All you need is an HTML element with 'title' set. In example

Drawer Description

The description is projected with the Select=['description']. All you need is an HTML element with 'description' set. In example

<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>
   <ipi-input [options]="{ label: 'Name' }"></ipi-input>
</ng-template>

parent.component.css

ipi-input {
   --ipi-input-error-color: red;
}

Drawer Actions

parent.component.html The Actions are projected with the Select=['actions']. All you need is an HTML element with 'actions' set. In example

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

parent.component.html Or with multiple actions:

<ng-template #actions>
   <ipi-button (clickChange)="triggerAction1()">Trigger Action 1</ipi-button>
   <ipi-button (clickChange)="triggerAction2()">Trigger Action 2</ipi-button>
</ng-template>

Again, the styling of the buttons in this case should happen in the Parent component. You can group them in a div with 'display: flex'

CSS Variables

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

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

   /* Colors, Fills, Strokes: */
   --ipi-drawer-backdrop-background: #0B1222;
   --ipi-drawer-background: #FFFFFF;
   --ipi-drawer-title-color: #0B1222;
   --ipi-drawer-description-color: #5D6068;
   --ipi-drawer-box-shadow: 0px 4px 8px 0px #D6D6D635;
}

🔼 Back to top

IPI Expander Component

A simple component that has a title and and expanding option that displays additional text by expanding horizontally.

Usage

parent.component.ts

import { IpiExpanderComponent } 
from '@ipi-soft/ng-components/expander';

@Component({
 imports: [ IpiExpanderComponent ]
})

export class ExpanderExampleComponent { }

parent.component.html

<ipi-expander [isOpen]="true">
   <ng-container title>
       With Variables
   </ng-container>

   <ng-container content>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </ng-container>
<ipi-expander>

Inputs

isOpen -> boolean (false)

Set this to "true", to make the expander open by default.

maxHeight -> number | null (null)

Set this to stop the content's height from going above a certain number (px).

CSS Variables

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

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

   /* Colors, Fills, Strokes: */
   --ipi-expander-background-color: #FFFFFF;
   --ipi-expander-title-color: #0B1222;
   --ipi-expander-content-color: #5D6068;
   --ipi-expander-chevron-color: #5D6068;
   --ipi-expander-chevron-open-color: #F96138;

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

🔼 Back to top

IPI Image Component

An image component that fetches an asset and displays it.

Usage

parent.component.ts

import { IpiIconComponent } 
from '@ipi-soft/ng-components/image';

@Component({
 imports: [ IpiIconComponent ]
})

export class IconExampleComponent { }

parent.component.html

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

Inputs

src

A url path to the desired img.

ariaLabel

a string value that adds accessible name to the image.

🔼 Back to top

IPI Input Component

A Simple input field that handles formGroup, outputs validation errors, has helper messages and infos, emits click events on customizable icons that can be used to handle input changes.

Usage

parent.component.ts

import { IpiInputComponent, IpiInputOptions }
from '@ipi-soft/ng-components/input';

@Component({
 imports: [ IpiInputComponent ]
})

export class InputExampleComponent {

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

 public inputOptions = {
  label: 'Sample label',
  type: 'text',
  placeholder: 'sample placeholder',
  info: 'Sample info message on hover',
  infoImg: 'icon.svg',
  helperText: 'Sample helperText',
  helperRoute: '/forgot-password',
  prefixImg: 'email.svg',
  suffixImg: 'password-hide.svg'
  formGroup: this.formGroup,
  formControlName: 'inputControl',
  errors: {
      required: 'error message to display',
      }
 }

}

parent.component.html

<ipi-input [options]="inputOptions">
</ipi-input>

Inputs

label

Label above the input field.

type

You can pass the default input type attribute. Default is 'text'.

info && infoImg

Info is used together with infoImg to display and icon next to the label that on hover triggers a tooltip with the info string.

placeholder

Replaces the input placeholder.

helperText && helperRoute

Positioned above the input on the right side ot the label & info can be used to navigate to a given route.

prefixImg && suffixImg

Two images for the beggining and end of the input field. suffixImg also emits event on clicks enabling additional logic to be added.

formGroup

Refference to the FormGroup that the ipi-input will handle

formControlName

Refference to the name of the control that we will access in the FormGroup

errors

An object with properties which keys are refferences to Form ValidationErrors and a message to display if the input Control has the error.

CSS Variables

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

ipi-input {
   /* Colors, Fills, Strokes: */
   --ipi-input-header-color: #0B1222;
   --ipi-input-placeholder-color: #0B1222;
   --ipi-input-text-color: #0B1222;

   /* when there are validator errors we make the text pop-up underneath and change its color */
   --ipi-input-error-color: #F96138;
   --ipi-input-border-error-width: 1px;

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

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

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

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

   /* Info icon (the one ot top with the label) fill & stroke */
   `--ipi-input-icon-info-fill: #FFFFFF;
   `--ipi-input-icon-info-stroke: transparent;

/* Note: When you want to setup the color of your icon
you should experiment with both these variables or consider
using the one your icon is based on.  */
}

🔼 Back to top

IPI Listbox Component

IPI Listbox provides selectable options in a list format.

Usage

parent.component.ts

import { IpiListboxComponent, IpiListboxOptions } 
from '@ipi-soft/ng-components/listbox';

@Component({
 imports: [ IpiListboxComponent ]
})

export class ListboxExampleComponent {

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

 public listboxOptions = {
  label: 'Sample label',
  tooltip: 'Optional tooltip for listbox.'
  data: [
    { label: 'Option 1', value: 1 },
    { label: 'Option 2', value: 2 },
    { label: 'Option 3', value: 3 },
    { label: 'Option 4', value: 4 },
    { label: 'Option 5', value: 5 },
  ],
  formGroup: this.formGroup,
  formControlName: 'listboxControl',
 }

 public selectChange(event) {
   // handle change selection if you are not using a form control.
 }
}

parent.component.html

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

Inputs

label

Label above the listbox container.

formGroup

Refference to the FormGroup that the ipi-listbox will handle a specific control

formControlName

Refference to the name of the control that we will access in the FormGroup

CSS Variables

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

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

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

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

   /* Tooltip icon styling */
   --ipi-listbox-tooltip-icon-fill: transparent;
   --ipi-listbox-tooltip-icon-stroke: #C6C6C6;

/* Note: When you want to setup the color of the icon you
should experiment with both these variables >(fill&stroke)
or consider using the one your icon is based on.  */
}

🔼 Back to top

IPI Radio-button Component

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

Usage

parent.component.html

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

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

Inputs

data

Array of elements of type IpiSelectData

inline

Property that sets the flex-direction to row instead of column(default)

checked

Number refference to the index of the element inside the Array of data that we want to be checked by default. Note: for FormGroup use default value inside the FormControl building.

formGroup

Refference to the FormGroup that the radio-button will handle

formControlName

Refference to the name of the control that we will access in the FormGroup

CSS Variables

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

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

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

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

   --ipi-radio-button-outline-color: none;
}

🔼 Back to top

IPI Select Component

Usage

parent.component.ts

import { IpiSelectComponent, IpiSelectOptions } 
from '@ipi-soft/ng-components/select';

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

export class SelectExampleComponent {

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

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

 public selectOptions: IpiSelectOptions = {
   label: 'Example label',
   data: [
          { label: 'Any string', value: any },
          { label: '', value: any },
          { label: '', value: any },
   ],
   tooltip: 'tooltip text',
   placeholder: 'Placeholder value',
   helperText: 'Forgot password?',
   prefixImg: 'example.svg',
   formGroup: this.selectForm,
   formControlName: 'selectControl',
   errors: {
     required: 'Select is required'
   }
 }
}

parent.component.html

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

CSS Variables

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

ipi-select {
   /* Dropdown styling */
   --ipi-select-dropdown-box-shadow: none;
   --ipi-select-dropdown-max-height: 240px;

   /* Input styling */
   --ipi-select-input-text-color: #0B1222;
   --ipi-select-input-text-selected-color: #F96138;
   --ipi-select-input-placeholder-color: #0B1222;

   /* tooltip icon styling */
   --ipi-select-tooltip-icon-fill: transparent;
   --ipi-input-tooltip-icon-stroke: #C6C6C6;

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

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

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

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

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

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

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

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

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

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

/* Note: When you want to setup the color of your icon
you should experiment with both these variables or consider
using the one your icon is based on.  */
}

🔼 Back to top

IPI Datepicker Component

Usage

parent.component.ts

import { IpiDatepickerComponent, IpiDatepickerOptions } 
from '@ipi-soft/ng-components/datepicker';

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

export class DatepickerExampleComponent {

  public datePickerForm = this.formBuilder.group({
    singleDate: ['', [Validators.required]],
    fromRange: ['', [Validators.required]],
    toRange: ['', [Validators.required]],
  });

  this.singleDateOptions = { 
    label: 'Pick a single date.',
    formGroup: this.formGroup,
    formControlName: 'singleDate',
    errors: {
      required: 'This is a required field.'
    },
    min: new Date(2000, 1, 1),
    max: new Date(2025, 1, 1),
  }

  this.rangeDateOptions = {
     label: 'Pick a range dates.',
     formGroup: this.formGroup,
     formControlName: new RangeFormControls('fromRange', 'toRange'),
     errors: {
       required: 'This is a required field',
     },
     min: new Date(2000, 1, 1),
     max: new Date(2025, 1, 1),
  };

}

parent.component.html

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

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

Inputs

options

Options are of type IpiDatepickerOptions with the following properties:

label - string - used for how long the snackbar should be displayed

formGroup - Refference to the FormGroup that the datepicker will handle

formControlName - either a string or instance of class RangeFormControls

min - a Minimal value for Date to be selectable.

max - a Maximum value for Date to be selectable.

errors - An object with properties which keys are refferences to Form ValidationErrors and a message to display if the input Control has the error.

CSS Variables

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

ipi-datepicker {

 /* Picker variables */
  --ipi-datepicker-svg-background-color:#FF7955;
  --ipi-datepicker-border: 1px solid #E9E9E9;
  --ipi-datepicker-border-hover-color: #FF7955;
  
  --ipi-datepicker-error-color: #F96138;
  --ipi-datepicker-svg-fill-color #FFFFFF;
  
  --ipi-datepicker-svg-background-hover-color: #F96138;
  
  --ipi-datpeicker-calendar-background-color: #FFFFFF;
  --ipi-datepicker-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-datepicker-input-color: #0B1222;
  
  --ipi-datepicker-calendar-header-text-color: #FF7955;
  
  --ipi-datepicker-calendar-background-color: #FFFFFF;
  
  --ipi-datepicker-calendar-header-current-view-focus-color: #FFFFFF;
  
  --ipi-datepicker-calendar-header-current-view-focus-background-color: #FF7955;
  
  --ipi-datepicker-calendar-header-current-view-hover-color: #FFFFFF;
  
  --ipi-datepicker-calendar-header-current-view-hover-background-color: #FF7955;
  
  --ipi-datepicker-calendar-header-chevron-hover-focus-color: #FFFFFF;
  
  --ipi-datepicker-calendar-header-chevron-hover-focus-background-color: #FF7955;
  
  --ipi-datepicker-calendar-header-chevron-disabled-color: #5D6068;
  
  --ipi-datepicker-calendar-month-view-table-header-color: #C6C6C6;
  
  --ipi-datepicker-calendar-month-view-table-header-border-bottom-color: #C6C6C6;
  
  --ipi-datepicker-calendar-multi-year-view-table-header-border-bottom-color: #C6C6C6;
  
  --ipi-datepicker-calendar-year-view-table-header-border-bottom-color: #C6C6C6;
  
  --ipi-datepicker-calendar-body-cell-color: #0B1222;

  --ipi-datepicker-calendar-body-cell-background-color: none;

  --ipi-datepicker-calendar-body-cell-border: none;

  --ipi-datepicker-calendar-body-cell-hover-color: white;

  --ipi-datepicker-calendar-body-cell-hover-background-color: #FFD2C6;
 
  --ipi-datepicker-calendar-body-today-cell-border: #FFD2C6;

  --ipi-datepicker-calendar-body-active-cell-background-color: #f9613880;
  --ipi-datepicker-calendar-body-cell-selected-color: #FFFFFF;
  --ipi-datepicker-calendar-body-cell-selected-background-color: #F96138;
  --ipi-datepicker-calendar-body-cell-in-range-background-color: #FFF2EF;
  --ipi-datepicker-calendar-body-cell-in-range-active-background-color: #FFD2C6;

  --ipi-datepicker-calendar-body-cell-in-preview-background-color: #F962381C;
  
  --ipi-datepicker-calendar-body-cell-in-preview-border: 1px dashed #F96138;
  --ipi-datepicker-calendar-body-cell-in-range-border: 1px solid #F96138;
  --ipi-datepicker-calendar-body-cell-range-start-border: 1px sold #F96138;
  --ipi-datepicker-calendar-body-cell-range-start-background-color: #F96138;
  
  --ipi-datepicker-calendar-body-cell-range-start-color: #FFFFFFF;
  --ipi-datepicker-calendar-body-cell-range-end-border: 1px sold #F96138;
  --ipi-datepicker-calendar-body-cell-range-end-background-color: #F96138;
  
  --ipi-datepicker-calendar-body-cell-range-end-color: #FFFFFFF;
  --ipi-datepicker-calendar-body-cell-active-in-range-start-end-background-color: #FFD2C6;
  --ipi-datepicker-calendar-body-cell-preview-end-border: 1px dashed #F96138;
  --ipi-datepicker-calendar-body-cell-preview-end-background-color: #FFD2C6;
  --ipi-datepicker-calendar-body-cell-preview-end-color: #FFFFFF;
  --ipi-datepicker-calendar-body-cell-preview-start-border: 1px dashed #F96138;
  --ipi-datepicker-calendar-body-cell-preview-start-background-color: #FFD2C6;
  
  --ipi-datepicker-calendar-body-cell-preview-start-color: #FFFFFF;
  --ipi-datepicker-calendar-body-cell-in-preview-range-start-border: 0px;
  --ipi-datepicker-calendar-body-cell-in-preview-range-end-border: 0px;
  
  --ipi-datepicker-calendar-body-cell-disabled-background-color: #E0DFDE;
}

🔼 Back to top

IPI Snackbar Service

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

Usage

parent.component.ts

import { 
  IpiSnackbarService,
  IpiSnackbarOptions,
  horizontalPosition,
  verticalPosition } 
from '@ipi-soft/ng-components/snackbar';

@Component({
 imports: [],
})

export class SnackbarExample {

  public message = 'Message to be displayed';

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

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

}

parent.component.html

<example-component 
 (click)="this.snackbarService.open(message, options)">
</example-component>

Inputs

positionOptions

verticalPosition & horizontalPosition Optional properties of SnackbarPosition interface that is used to set custom position of the snackbar

message

Message to be displayed

options

Options are of type IpiSnackbarOptions with the following properties: animation-duration - number - used for how long the snackbar should be displayed icon (optional) - string - icon name that must be located inside assets/img/ (using ipi-img) error (optional) - boolean - used to distinguish error message from info.

CSS Variables

Note: The snackbars are initialized inside the body of the html outside of any routes. Changing colors should happen form a global css stylesheet.

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

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

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

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

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

🔼 Back to top

IPI Overlay Service

Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building block for other components. Dialogs, tooltips, menus, selects, etc. can all be built using overlays.

Usage

parent.component.ts

import { Component } from '@angular/core';
import { OverlayService } from '@ipi-soft/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

IPI Table Component

A simple table that can project data sorted by columns x rows providing editing, sorting and filtering of the data.

Two types of tables are available. One with local data and local sorting & filtering and a server side one.

Usage

parent.component.ts

import { 
  IpiTableComponent,
  IpiTableColumn,
  IpiTableColumnType } 
from '@ipi-soft/ng-components/table';

@Component({
 imports: [ IpiTableComponent ]
})

export class TableExampleComponent {

 // Used for searching and filtering
 public tableFilter: string;

 public tableData = [{
   id: 'D1954F',
   name: 'John Doe',
   credits: 333,
   cash: 113,
   admin: false,
   years: 19,
   date: new Date()
   listName: 'first list'
 },
 {
   id: 'A7D543',
   name: 'Alice Cooper',
   credits: 500,
   cash: 100,
   years: 33,
   admin: true,
   date: new Date()
   listName: 'second list'
 },
 {
   id: 'BB13DA',
   name: 'Will Smith',
   credits: 1000,
   cash: 250,
   admin: true,
   years: 33,
   date: new Date()
   listName: 'third list',
 }]

 public tableColumns: IpiTableColumn[] = [
   { label: 'Id', value: 'id', width: '70px' },
   { label: 'Name', value: 'name', width: '70px' },
   { label: 'Date', value: 'date', type: IpiTableColumnType.Date, 
     dateFormat: 
       { 
         format: 'shortDate',
         locale: 'en-US',
         timezone: '+0100'
       },
     width: '60px' }
   { label: 'Years', value: 'years', type: IpiTableColumnType.Number, width: '60px'}
   { label: 'Credits', value: 'credits', type: IpiTableColumnType.Number width: '70px' },
   { label: 'Cash', value: 'cash', type: IpiTableColumnType.Number width: '70px' },
          /* We can use +, -, /, * operations on the value property if it's of type NumberMath */
   { label: 'Total cash', value: 'credits * 1.5 + cash', type: IpiTableColumnType.NumberMath width: '70px' },
   { label: 'Admin', value: 'admin', type: IpiTableColumnType.Chip width: '70px' },
   { label: 'List name', value: 'listName', width: '70px' },
   { label: 'Actions', value: '', type: IpiTableColumnType.Actions, width: '100px',
     singleActions: [
       label: 'Download',
       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

<ipi-table #serverSide
  [serverSide]="true"
  [data]="tableData" [columns]="tableColumns"
  [filter]="tableFilter" [pageable]="true" 
  [dataLength]="tableData.length"
  [isLoading]="true/false"
  (tableChange)="tableChange($event.from, $event.to, $event.sort, $event.filter)">
</ipi-table>

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

Inputs

serverSide

When true it make the table emit events when a change happens with the following properties {from, to, sort, filter} which we can use to create a request and get data. Also stops local filter and sorting logic from executing.

data

The data that the table initializes.

columns - IpiTableColumn Interface

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

The IpiTableColumn interface defines the structure of each column in the IPI Table component. Each column can have various properties to customize its behavior and appearance.

label?: string: The display label for the column header.

value?: string: The key in the data object that corresponds to this column.

type?: IpiTableColumnType: The type of data in the column, which can determine how it's rendered (e.g., date, number, chip, etc.).

width?: string: The width of the column, defined as a CSS width value (e.g., '70px').

editable?: boolean: Indicates whether the column can be edited by the user.

prefix?: string: A string to be displayed before the column value.

suffix?: string: A string to be displayed after the column value.

singleActions?: Action[]: An array of actions available for a single row in this column.

multipleActions?: Action[]: An array of actions available for multiple rows in this column.

dateFormat?: IpiDateFormatOptions: Formatting options for date values in the column.

chipLabel?: { [key: string]: string }: A mapping of labels for chip display in the column.

class?: string | { [key: string]: string }: Custom CSS classes for styling the column.

columnType - IpiTableColumnType

export enum IpiTableColumnType {
 Text,      // A standard text column
 Date,      // A column for displaying dates
 Chip,      // A column for displaying chip components
 Checkbox,  // A column for displaying checkboxes
 Number,    // A column for displaying numbers
 NumberMath,  // A column for displaying combined properties' values numbers with additional addition, subtraction, multiplication, division logic.
 Actions,   // A column for action buttons
}

Each column type is handled through specific templates:

Text Column: Displays standard text, can be editable.

Date Column: Formats and displays dates.

Chip Column: Displays chips for categorical data.

Checkbox Column: Displays checkboxes, currently read-only.

Number Column: Displays numbers with optional prefix and suffix. This column type also supports calculations based on the numeric values.

Actions Column: Displays action buttons with dynamic visibility based on context.

pageable

Whether or not the table has more than one page

sortable

Blocks local sorting when set to false

currentSortedColumn / used with serverSide /

Refference to the column that is used as a sorter needed for keeping track when changes occur (example page change, new sorting column, sorting same column (reverse sorting), filtering)

isLoading / used with serverSide /

When true triggers an animation that blocks the table and shows a loading bar.

dataLength / used with serverSide /

The length of the data passed from parent element needed to display properply the pages and the results count.

CSS Variables

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

ipi-table {
   /* Colors, Fills, Strokes: */
   --ipi-table-background-color: #FFFFFF;
   --ipi-table-row-bottom-border-color: #E9E9E9;
   --ipi-table-first-row-text-color: #5D6068;
   --ipi-table-arranger-hover-color: #F96138;
   --ipi-table-loading-bar-color: #FF7F50;

   /* Color of all icons on hover */
   --ipi-table-action-icon-hover-fill: #F96138;
   --ipi-table-action-icon-hover-stroke: #FFFFFF00;
   --ipi-table-action-hover-background-color: #F7F8FB;

   /* Color of the single icons */
   --ipi-table-action-icon-fill: #5D6068;
   --ipi-table-action-icon-stroke: #FFFFFF00;

   /* Color of icon that opens the multiple actions */
   --ipi-table-action-more-icon-fill: #F96138;
   --ipi-table-action-more-icon-stroke: #FFFFFF00;

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

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

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

   /* Chip columns color styling */
   --ipi-table-chip-color: #F96138;
   --ipi-table-chip-background-color: #FFF2EF;

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

/* Note: When you want to setup the color of your icon
you should experiment with both these variables or consider
using the one your icon is based on.  */
}

🔼 Back to top

IPI Textarea Component

A simple input textarea that handles formGroup control with validators.

Usage

parent.component.ts

import { IpiTextAreaComponent, IpiTextAreaOptions }
from '@ipi-soft/ng-components';

@Component({
 imports: [ IpiTextAreaComponent ]
})

export class TextAreaExample {

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

 public textAreaOptions = {
   label: 'Your message inside the placeholder',
   icon: 'icon.svg',
   formGroup: formGroup,
   formControlName: 'textareaControl',
  errors: {
     required: 'Textarea is required',
   }
 }

}

parent.component.html

<ipi-textarea 
  class="fluid"
  [options]="textAreaOptions">
</ipi-textarea>

<!-- No form group -->
<ipi-textarea 
 [options]="{ label: 'Placeholder' }"
 (textAreaChange)="textAreaChange($event)">
</ipi-textarea>

Inputs

options

Options of type IpiTextAreaOptions. Only label is required. { label - initial placeholder message icon - name of an icon that is inside in local assets/ path formGroup - way to add the textarea to reactive form formControlName - name of the control inside the formGroup }

textAreaChange

EventEmitter when there is a change in the input of the textarea.

class 'fluid'

Adds custom width and height (100% 100%) based on a parent component.

CSS Variables

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

ipi-textarea {
   /* Colors, Fills, Strokes: */
   --ipi-textarea-text-color: #0B1222;
   --ipi-textarea-text-placeholder-color: #C6C6C6;

   --ipi-textarea-background-color: transparent;

   --ipi-textarea-icon-fill: #C6C6C6;
   
   /* Text area border styling */
   --ipi-textarea-border-color: #E9E9E9;
   --ipi-taxtarea-border-width: 1px;

   --ipi-textarea-invalid-border-color: #F96138;
   --ipi-textarea-invalid-border-width: 1px;

   --ipi-textarea-disabled-border-color: #F2F2F2;

   /* Text area scroll styling */
   --ipi-textarea-scrollbar-color: #E2E2E2bb;
   --ipi-textarea-scrollbar-hover-color: #E2E2E2;

   /* Text area's error text underneath input color */
   --ipi-textarea-footer-color: #F96138;

/* Note: When you want to setup the color of your icon
you should experiment with both these variables or consider
using the one your icon is based on.  */
}

🔼 Back to top

IPI Tooltip Component

Simple tooltip that pops up on hover on a given parent component implemented as a directive. Custom message can be passed and a position.

Usage

Import the tooltip inside the component you want to use it and place it as a directive to a component:

parent.component.ts

import { IpiTooltipDirective, TooltipPosition }
from '@ipi-soft/ng-components';

@Component({
 imports: [ IpiTooltipDirective ]
})

export class TooltipExampleComponent {}

parent.component.html

<div
 ipiTooltip='tooltip text'
 [tooltipPosition]="TooltipPosition.Above">
</div>

Inputs

tooltipPosition

Enum with the following options: Above, After, Before, Below. Used for positioning the tooltip based on parent's position. Default is Before.

🔼 Back to top