Idle

Detects user inactivity by listening for mouse, keyboard, scroll, and resize events. Emits events so the app can warn that the user will be logged out soon by displaying a warning dialog.

Code

Framework

HTML

React

Angular

Default

Show sign-out warning

Toggle dark mode

<certara-idle></certara-idle>

import { CertaraIdle } from '@certara/certara-ui-react';

<CertaraIdle />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-idle></certara-idle>

Alert heading slot

Your session is ending Show sign-out warning

Toggle dark mode

<certara-idle>
  <span slot="alert-heading">Your session is ending</span>
</certara-idle>

import { CertaraIdle } from '@certara/certara-ui-react';

<CertaraIdle>
  <span slot="alert-heading">Your session is ending</span>
</CertaraIdle>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-idle>
  <span slot="alert-heading">Your session is ending</span>
</certara-idle>

Alert body slot

Save your work before continuing. Show sign-out warning

Toggle dark mode

<certara-idle>
  <span slot="alert-body">Save your work before continuing.</span>
</certara-idle>

import { CertaraIdle } from '@certara/certara-ui-react';

<CertaraIdle>
  <span slot="alert-body">Save your work before continuing.</span>
</CertaraIdle>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-idle>
  <span slot="alert-body">Save your work before continuing.</span>
</certara-idle>

certara-idle

Properties

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	If true, the idle component will be disabled

heartbeatInterval

Attribute	heartbeat-interval
Type	number
Default	10000
Required	false
Description	The number of milliseconds to wait before the certaraHeartbeat event is emitted

Events

Name	Description	Bubbles
certaraHeartbeat	Event emitted each time the heartbeat interval elapses	true

Methods

Name	Signature	Description
setActive	() => Promise<void>
setInactive	() => Promise<void>

Slots

Name	Description
alert-body	The body to display in the modal
alert-heading	The heading to display in the modal