@finastra/notifications NPM

Notifications

Usage

Import

npm i @finastra/notifications

In order to use the outlined versions of the Material Icons, for a better look, make sure to include

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />

import '@finastra/notifications';
import { UserNotification, UserNotificationType } from '@finastra/notifications/dist/src/notifications.models';

const notifications: UserNotification[] = [
  {
    id: '1',
    type: UserNotificationType.SUCCESS,
    state: 'new',
    message: 'New success message',
    source: 'all',
    createdOn: new Date('2023-04-05T12:58:32.710Z')
  },
  {
    id: '2',
    type: UserNotificationType.WARNING,
    state: 'read',
    message: 'New warning message',
    source: 'all',
    createdOn: new Date('2023-04-05T13:12:32.710Z')
  },
  { id: '3', type: UserNotificationType.ERROR, state: 'new', message: 'New error message', source: 'all' },
  { id: '4', type: UserNotificationType.INFO, state: 'read', message: 'New info message', source: 'all' },
  {
    id: '5',
    type: UserNotificationType.SUCCESS,
    state: 'new',
    message: 'complex notification and very loooooooooooooooooooooooooooooooooooooooooooooooooooong',
    source: 'all',
    link: 'https://google.com/tenants',
    createdOn: new Date('2023-04-05T16:19:25.442Z')
  }
];

...

<fds-notifications .notifications=${notifications}></fds-notifications>

Events

Event	Description
`markonenotificationread`	emitted as a `@CustomEvent` when one notification should be marked as read, with `event.detail.notificationId` set
`markallnotificationsread`	emitted as a `@CustomEvent` when all notifications should be marked as read
`deleteonenotification`	emitted as a `@CustomEvent` when one notification should be deleted, with `event.detail.notificationId`
`deleteallnotifications`	emitted as a `@CustomEvent` when all notifications should be deleted
`navigateto`	emitted as a `@CustomEvent` when one notification should redirect the user to an url, with `event.detail.path` set

API

Properties

Property	Attribute	Modifiers	Type	Default	Description
`newNotifications`		readonly	`number`
`notifications`	`notifications`		`Array`	[]	An array of @UserNotification items to populate the component
`tippyOptions`			`{ touch: boolean; theme: string; }`	{"touch":false,"theme":"finastra"}

Events

Event	Type	Description
`deleteallnotifications`		emitted as a
`deleteonenotification`	`CustomEvent<{ notificationId: string; }>`	emitted as a
`markallnotificationsread`		emitted as a
`markonenotificationread`	`CustomEvent<{ notificationId: string; }>`	emitted as a
`navigateto`	`CustomEvent<{ path: string; }>`	emitted as a

Finastra Design System Web Components notifications

@finastra/badge @finastra/button @finastra/divider @finastra/icon @finastra/icon-button @finastra/list @finastra/menu lit tippy.js tslib

@everything-registry/sub-chunk-323

1.8.1

10 months ago

1.8.0

12 months ago