open-index/open-npm huggingface dataset:
npm package: @finastra/linear-progress
Description: LinearProgress Web Component
Latest version: 1.8.1

# LinearProgress

Progress indicators express an ongoing process.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/linear-progress?style=for-the-badge)](https://www.npmjs.com/package/@finastra/linear-progress)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/linear-progress?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/linear-progress')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/data-display-progress-indicator-linear-progress--default)

## Usage

For usage please see [mwc-linear-progress](https://github.com/material-components/material-web/tree/main/packages/linear-progress)

### Import

```
npm i @finastra/linear-progress
```

```ts
import '@finastra/linear-progress';
...
<fds-linear-progress indeterminate></fds-linear-progress>
```

### API

<!-- DOC -->
#### Properties

| Property        | Attribute       | Type          | Default                                          | Description                                      |
|-----------------|-----------------|---------------|--------------------------------------------------|--------------------------------------------------|
| `ariaLabel`     |                 | `string`      |                                                  |                                                  |
| `buffer`        |                 | `number`      |                                                  |                                                  |
| `closed`        |                 | `boolean`     |                                                  |                                                  |
| `indeterminate` | `indeterminate` | `boolean`     | false                                            | Sets the linear-progress into its indeterminate state. |
| `progress`      | `progress`      | `number`      | "0] - Sets the primary progress bar's value. Value should be between [0, 1" | .                                                |
| `reverse`       |                 | `boolean`     |                                                  |                                                  |
| `styles`        |                 | `CSSResult[]` | ["styles"]                                       |                                                  |

#### Methods

| Method  | Type       |
|---------|------------|
| `close` | `(): void` |
| `open`  | `(): void` |

#### CSS Custom Properties

| Property            | Type  | Default                    | Description                                |
|---------------------|-------|----------------------------|--------------------------------------------|
| `--fds-primary`     | color | "#694ED6"                  | Sets the color of primary progress bar.    |
| `--primary-lighter` | color | "rgba(105, 78, 214, 0.08)" | Sets the color of the buffer progress bar. |
<!-- /DOC -->
npm package: @finastra/logger
Description: NestJS module to log in specific formats :
Latest version: 0.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Logger module

NestJS module to log in specific formats :

- Azure Monitor (previously OMS)

## Use it

Import the logger module in your main module

`app.module.ts`

```typescript
@Module({
  imports: [
    LoggerModule,
    ...
  ],
})
export class AppModule {}
```

Define which module to use in the bootstrapping of your app :

`main.ts`

```typescript
const omsLogger = new OMSLogger();
const app = await NestFactory.create(AppModule, {
  logger: omsLogger,
});
app.useLogger(omsLogger);
app.useGlobalInterceptors(new HttpLoggingInterceptor());
```

### GraphQL

If you're using GraphQL in your application, there's another interceptor for you :

```typescript
app.useGlobalInterceptors(new GraphQLLoggingInterceptor());
```
npm package: @finastra/logo
Description: Logo Web Component
Latest version: 1.8.1

# Logo

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/logo?style=for-the-badge)](https://www.npmjs.com/package/@finastra/logo)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/logo?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/logo)
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/graphic-elements-logo--default)

The `<fds-logo>` component displays an image encoded in Base64 from the `--fds-logo` CSS variable.

## Usage

### Import

```
npm i @finastra/logo
```

```ts
import '@finastra/logo';
...
<fds-logo dense></fds-logo>
```

## CSS API

Here is the list of CSS custom properties, aka CSS Variables:

| Name              | Description                                    |
| ----------------- | ---------------------------------------------- |
| --fds-logo        | String representing an image encoded in base64 |
| --fds-logo-width  | Width of the logo                              |
| --fds-logo-height | Height of the logo                             |

> `--fds-logo` variable expects the following format: `url(BASE64_ENCODED_IMAGE)`

Example:

```
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjUgMjAwIj4KPHZpZXcgaWQ9ImZsYW1lIiB2aWV3Qm94PSIwIDAgMTYwIDIwMCIvPgo8dmlldyBpZD0ibmFtZSIgdmlld0JveD0iMjQwIDc4IDE4NSAxMjIiIC8+CjxwYXRoIGQ9Ik0zOTQuNSA3OHYyOC44SDQyNXYxNS42aC0zMC41VjE1OGMwIDMuNi4xIDcuMi41IDEwLjMuOCA1LjMgNCAxMC41IDguNCAxMi41IDUuNyAyLjYgOS43IDIuMSAyMS42IDEuN2wtMi45IDE3LjJjLS44LjQtNCAuMy03IC4zLTcgMC0zMy40IDIuNS0zOC44LTI0LjctLjktNC43LS43LTkuNS0uNy0xNi45di0zNS44SDM2MmwuMi0xNS45aDEzLjRWNzh6bS01MS43IDI4Ljd2OTEuNUgzMjR2LTkxLjV6bTAtMjguN3YxNi4zaC0xOVY3OHptLTgzLjYgMTAyLjJoNDguMmwtMTggMThIMjQwVjc4aDE5LjJ6Ii8+CjxwYXRoIGZpbGw9IiMwMGU4ZmYiIGQ9Ik00MCAxMjBsMjAtNjBsOTAgOTBsLTMwIDUwbC00MC00MGgtMjAiLz4KPHBhdGggZmlsbD0iIzI4MzE5OCIgZD0iTTgwIDE2MHYtODBsNDAtNDB2ODBNMCAxNjBsNDAgNDBsMjAtNDBsLTIwLTQwaC0yMCIvPgo8cGF0aCBmaWxsPSIjMzI0ZmZmIiBkPSJNNDAgMTIwdi04MGw0MC00MHY4ME0xMjAgMjAwdi04MGw0MC00MHY4ME0wIDE2MHYtODBsNDAgNDAiLz4KPHBhdGggZmlsbD0iIzBmZiIgZD0iTTQwIDIwMHYtODBsNDAgNDAiLz4KPC9zdmc+Cg==)
```

<br/>

### API

<!-- DOC -->
#### Attributes

| Attribute | Type      | Default | Description            |
|-----------|-----------|---------|------------------------|
| `dense`   | `boolean` | false   | Logo in a smaller size |

#### CSS Custom Properties

| Property            | Default | Description                                    |
|---------------------|---------|------------------------------------------------|
| `--fds-logo`        |         | String representing an image encoded in base64 |
| `--fds-logo-height` | "60px"  |                                                |
| `--fds-logo-width`  | "122px" |                                                |
<!-- /DOC -->
npm package: @finastra/menu-trigger
Description: MenuTrigger Web Component
Latest version: 1.8.1

# MenuTrigger

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/menu-trigger?style=for-the-badge)](https://www.npmjs.com/package/@finastra/menu-trigger)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/menu-trigger?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/menu-trigger)
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/actions-menu-trigger--default)

The `<fds-menu-trigger>` is a toggle button used for menu.

## Usage

### Import

```
npm i @finastra/menu-trigger
```

```ts
import '@finastra/menu-trigger';
...
<fds-menu-trigger label="Develop"></fds-menu-trigger>
```

### API

<!-- DOC -->
#### Properties

| Property       | Attribute   | Type                              | Default  | Description                                      |
|----------------|-------------|-----------------------------------|----------|--------------------------------------------------|
| `dense`        |             | `boolean`                         |          | Use the smaller button size                      |
| `disabled`     |             | `boolean`                         |          | Is the button disabled or not                    |
| `fullwidth`    |             | `boolean`                         |          | Use the full width of its parent                 |
| `icon`         |             | `string`                          | "apps"   | The name of the icon displayed before the label<br />Use trailingIcon to true to display this icon after the label |
| `label`        |             | `string`                          | "Launch" | The label displayed inside the button            |
| `large`        |             | `boolean`                         |          | Use the larger button size                       |
| `on`           | `on`        | `boolean`                         | false    | Whether the toggle is activated.                 |
| `secondary`    | `secondary` | `boolean`                         | false    | Whether the toggle button should be using secondary. |
| `trailingIcon` |             | `boolean`                         |          | Display the icon after the label instead of before |
| `type`         |             | `"button" \| "reset" \| "submit"` |          |                                                  |

#### Methods

| Method   | Type       |
|----------|------------|
| `toggle` | `(): void` |
<!-- /DOC -->
npm package: @finastra/nestjs-logger
Description: <h1>  NestJS Logger module <img src="https://nestjs.com/img/logo-small.svg" height="20" alt="Nest Logo" /> </h1>
Latest version: 0.4.2

<h1> 
NestJS Logger module
<img src="https://nestjs.com/img/logo-small.svg" height="20" alt="Nest Logo" />
</h1>

NestJS module to log in specific formats :

- Azure Monitor (previously OMS)

## Use it

Import the logger module in your main module

`app.module.ts`

```typescript
@Module({
  imports: [
    LoggerModule,
    ...
  ],
})
export class AppModule {}
```

Define which module to use in the bootstrapping of your app :

`main.ts`

```typescript
const omsLogger = new OMSLogger();
const app = await NestFactory.create(AppModule, {
  logger: ['warn', 'log', 'error'],
});
app.useLogger(omsLogger);
app.useGlobalInterceptors(new HttpLoggingInterceptor());
```

### GraphQL

If you're using GraphQL in your application, there's another interceptor for you :

```typescript
app.useGlobalInterceptors(new GraphQLLoggingInterceptor());
```
npm package: @finastra/sidenav
Description: Sidenav Web Component
Latest version: 1.8.1

# Sidenav

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/sidenav?style=for-the-badge)](https://www.npmjs.com/package/@finastra/sidenav)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/sidenav?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/sidenav')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/navigation-sidenav--default)

Simple wrapper for [Material's Drawer web component](https://material-components.github.io/material-web/demos/drawer/).

## Usage

### Import

```
npm i @finastra/sidenav
```

```ts
import '@finastra/sidenav';
...
<fds-sidenav type="">
   <div slot="sidenavContent">
    Sidenav content
  </div>
  <div slot="navigation">
    Navigation content
  </div>
  <div slot="appContent">
    App Content
  </div>
</fds-sidenav>
```

### API

<!-- DOC -->
#### Properties

| Property | Attribute | Type                         | Default |
|----------|-----------|------------------------------|---------|
| `type`   | `type`    | `""\|"dismissible"\|"modal"` | ""      |

#### Methods

| Method                | Type       |
|-----------------------|------------|
| `registerEventLister` | `(): void` |

#### Slots

| Name             | Description            |
|------------------|------------------------|
| `appContent`     | Content of the app     |
| `navigation`     | Navigational elements  |
| `sidenavContent` | Content of the sidenav |
<!-- /DOC -->
npm package: @finastra/skeleton
Description: Skeleton Web Component
Latest version: 1.8.1

# Skeleton

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/skeleton?style=for-the-badge)](https://www.npmjs.com/package/@finastra/skeleton)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/skeleton?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/skeleton')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/components-skeleton--default)
Skeleton componet used to indicate content and ui loading that will appear after its loaded. It helps to decrease perceived duration time

## Usage

### Import

```
npm i @finastra/skeleton
```

```ts
import '@finastra/skeleton';
...
<fds-skeleton></fds-skeleton>
```

### API

<!-- DOC -->
#### Properties

| Property   | Attribute | Type                               | Default | Description                 |
|------------|-----------|------------------------------------|---------|-----------------------------|
| `height`   | `height`  | `string`                           |         | Height of the skeleton      |
| `override` |           |                                    |         |                             |
| `size`     | `size`    | `h1\|h2\|h3\|h4\|h5\|h6\|small\|p` | "p"     | Define the size of skeleton |
| `type`     | `type`    | `circle\|text\|rectangle`          | "text"  | Define the type of skeleton |
| `width`    | `width`   | `string`                           |         | Width of the skeleton       |

#### Methods

| Method         | Type                                             |
|----------------|--------------------------------------------------|
| `updateHeight` | `(): void`                                       |
| `updateWidth`  | `(): void`                                       |
| `willUpdate`   | `(_changedProperties: Map<string \| number \| symbol, unknown> \| PropertyValueMap<any>): void` |

#### CSS Custom Properties

| Property                           | Default                        | Description                       |
|------------------------------------|--------------------------------|-----------------------------------|
| `--fds-skeleton-background`        | "var(--fds-surface-selected)"  | Background color of the skeleton. |
| `--fds-skeleton-height`            | "162px"                        | Width of the skeleton             |
| `--fds-skeleton-placeholder-color` | "var(--fds-on-surface-medium)" | Color of placeholder.             |
| `--fds-skeleton-width`             | "162px"                        | Height of the skeleton            |
<!-- /DOC -->
npm package: @finastra/sparkline
Description: sparkline Web Component
Latest version: 1.8.1

# Sparkline

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/sparkline?style=for-the-badge)](https://www.npmjs.com/package/@finastra/sparkline)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/sparkline?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/sparkline)
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/components-sparkline--default)


## Usage

A `Sparkline` is like a tiny line-chart to visualize trends at a glance.

### Import

```
npm i @finastra/sparkline
```

```ts
import '@finastra/sparkline';
...
<fds-sparkline></fds-sparkline>
```

### API
<!-- DOC -->
#### Attributes

| Attribute | Type      | Default | Description          |
|-----------|-----------|---------|----------------------|
| `error`   | `boolean` | false   | Set color to error   |
| `success` | `boolean` | false   | Set color to success |

#### Properties

| Property | Attribute | Type    | Default | Description         |
|----------|-----------|---------|---------|---------------------|
| `data`   | `data`    | `Array` | []      | An array of numbers |
<!-- /DOC -->
npm package: @finastra/ssr-pages
Description: Builder of html pages for the purpose of SSR (Server-side rendering).
Latest version: 0.1.6

# SSR Pages builder

Builder of html pages for the purpose of SSR (Server-side rendering).

## Use it

```typescript
import { SSRPages } from '@finastra/ssr-pages';

const ssrPagesService = new SSRPages();
const msgPageOpts = {
  title: 'SSR example',
  subtitle: `This is an example of a server-side rendered content`,
  description: 'Built with @finastra/ssr-pages library',
  svg: 'exit' as const,
  redirect: {
    auto: false,
    link: '/user',
    label: 'Check your user',
  },
};
const html = ssrPagesService.build(msgPageOpts);
```

And use the generated html as you see fit ;)

<br/>
<br/>
<br/>

## NestJS

To use it in NestJS, simply create an injectable service that extends the SSRPage class.

```typescript
import { SSRPages } from '@finastra/ssr-pages';
import { Injectable } from '@nestjs/common';

@Injectable()
export class SSRPagesService extends SSRPages {
  constructor() {
    super();
  }
}
```

Inject it in a controller, and use it in an endpoint to return the templated html !

```typescript

constructor(private ssrPagesService: SSRPagesService) {}

@Get('/ssr')
  async ssr(): Promise<string> {
    const msgPageOpts = {
      title: 'SSR example',
      subtitle: `This is an example of a server-side rendered content`,
      description: 'Built with our @finastra/ssr-pages library',
      svg: 'exit' as const,
      redirect: {
        auto: false,
        link: '/user',
        label: 'Check your user',
      },
    };
    return this.ssrPagesService.build(msgPageOpts);
  }
```
npm package: @finastra/switch
Description: Switch Web Component
Latest version: 1.8.1

# Switch

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/switch?style=for-the-badge)](https://www.npmjs.com/package/@finastra/switch)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/switch?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/switch')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/forms-switch--default)

`fds-switch` toggles the state of a single setting on or off.

It extends [Material web's mwc-switch-base](https://github.com/material-components/material-web/tree/main/packages/switch)

## Usage

### Import

```
npm i @finastra/switch
```

```ts
import '@finastra/switch';
...
<fds-switch selected></fds-switch>
```

### API

<!-- DOC -->
#### Properties

| Property         | Attribute  | Modifiers | Type                      | Default    | Description                                      |
|------------------|------------|-----------|---------------------------|------------|--------------------------------------------------|
| `ariaLabel`      |            |           | `string`                  |            |                                                  |
| `ariaLabelledBy` |            |           | `string`                  |            |                                                  |
| `disabled`       | `disabled` |           | `boolean`                 | false      | Indicates whether or not the switch is disabled. |
| `name`           |            |           | `string`                  |            |                                                  |
| `processing`     |            |           | `boolean`                 |            | Indicates whether or not the switch is processing and showing a loading<br />indicator. A disabled switch cannot be processing. |
| `ripple`         |            | readonly  | `Promise<Ripple \| null>` |            | Implement ripple getter for Ripple integration with mwc-formfield |
| `selected`       | `selected` |           | `boolean`                 | false      | If true, the switch is on. If false, the switch is off. |
| `styles`         |            |           | `CSSResult[]`             | ["styles"] |                                                  |
| `value`          |            |           | `string`                  |            |                                                  |

#### Methods

| Method  | Type       |
|---------|------------|
| `click` | `(): void` |

#### CSS Custom Properties

| Property              | Type  | Default   | Description         |
|-----------------------|-------|-----------|---------------------|
| `--fds-primary`       | color | "#694ED6" | Switch color        |
| `--fds-track-opacity` | color | 0.54      | Track color opacity |
<!-- /DOC -->
npm package: @finastra/tab
Description: Tab Web Component
Latest version: 0.0.39

# Tab
[![See it on NPM!](https://img.shields.io/npm/v/@finastra/tab?style=for-the-badge)](https://www.npmjs.com/package/@finastra/tab)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/tab?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/tab')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/navigation-tabs--default)


Tabs organize content across different screens, data sets, and other interactions.\
This component is meant to be used inside [fds-tab-bar](https://finastra.github.io/finastra-design-system/?path=/story/navigation-tabs-tab-bar--default).

## Usage

### Import

```
npm i @finastra/tab
```

```ts
import '@finastra/tab';
...
<fds-tab label="Active"></fds-tab>
```

### Pure HTML pages

```html
<script src="https://cdn.jsdelivr.net/npm/@finastra/tab/dist/tab.js"></script>

<fds-tab label="Active"></fds-tab>
```
npm package: @finastra/tab-bar
Description: TabBar Web Component
Latest version: 0.0.39

# TabBar

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/tab-bar?style=for-the-badge)](https://www.npmjs.com/package/@finastra/tab-bar)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/tab-bar?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/tab-bar')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/navigation-tabs-tab-bar--default)


Tabs organize content across different screens, data sets, and other interactions.

The `fds-tab-bar` extends [Material web's mwc-tab-bar-base](https://github.com/material-components/material-web/tree/master/packages/tab-bar).

## Usage

### Import

```
npm i @finastra/tab-bar
```

```ts
import '@finastra/tab-bar';
import '@finastra/tab';
...
<fds-tab-bar seperator>
    <fds-tab label="Active"></fds-tab>
    <fds-tab label="Disabled" disabled></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
</fds-tab-bar>
```

### Pure HTML pages

```html
<script src="https://cdn.jsdelivr.net/npm/@finastra/tab/dist/tab.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finastra/tab-bar/dist/tab-bar.js"></script>

<fds-tab-bar seperator>
    <fds-tab label="Active"></fds-tab>
    <fds-tab label="Disabled" disabled></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
</fds-tab-bar>
```
npm package: @finastra/tabs
Description: Tabs Web Component
Latest version: 1.8.1

# Tabs

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/tabs?style=for-the-badge)](https://www.npmjs.com/package/@finastra/tabs)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/tabs?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/tabs')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/navigation-tabs--default)

## Usage

### Import

```
npm i @finastra/tabs
```

```ts
import '@finastra/tabs';
...
<fds-tab-group>
    <fds-tab-item label="Tab 1">Content tab 1</fds-tab-item>
    <fds-tab-item label="Tab 2">Content tab 2</fds-tab-item>
</fds-tab-group>
```

### API

<!-- DOC -->

#### Properties

| Property            | Attribute           | Type      | Default | Description                                                                       |
| ------------------- | ------------------- | --------- | ------- | --------------------------------------------------------------------------------- |
| `headerDisplayType` | `headerDisplayType` | `string`  | ""      | Display type for tab button: Accepts one of values : `classic \| segmented \| ''` |
| `headerPosition`    | `headerPosition`    | `string`  | "start" | Position of header. Accepts one of values : `start \| center \| end`              |
| `override`          |                     |           |         |                                                                                   |
| `selectedIndex`     | `selectedIndex`     | `number`  | 0       | Index of tab that is active.                                                      |
| `separator`         | `separator`         | `boolean` | false   | Add dividers between tabs                                                         |

#### Methods

| Method             | Type       |
| ------------------ | ---------- |
| `observeChildList` | `(): void` |
| `updateTabInfo`    | `(): void` |

#### Events

| Event                 | Type                              |
| --------------------- | --------------------------------- |
| `selectedIndexChange` | `CustomEvent<{ index: number; }>` |

# fds-tab-item

#### Properties

| Property | Attribute | Type     | Default |
| -------- | --------- | -------- | ------- |
| `label`  | `label`   | `string` | ""      |

<!-- /DOC -->
npm package: @finastra/user-profile
Description: UserProfile Web Component
Latest version: 1.8.1

# User Profile

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/user-profile?style=for-the-badge)](https://www.npmjs.com/package/@finastra/user-profile)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/user-profile?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/user-profile)
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/navigation-user-profile--default)

The user profile web component shows detailed information about a user.
It is customizable enough to allow you to add more user information or even actions if needed.

## Usage

### Import

```
npm i @finastra/user-profile
```

```ts
import '@finastra/user-profile';
...
<fds-user-profile userName="Adnen Manai">
    <div slot="userInfo">adnen.manai@finastra.com</div>
    <div slot="actions">
      Actions go here
    </div>
</fds-user-profile>
```

### API

<!-- DOC -->
#### Properties

| Property    | Attribute   | Type      | Default | Description                                      |
|-------------|-------------|-----------|---------|--------------------------------------------------|
| `dense`     | `dense`     | `boolean` | false   | Align the default avatar with user info          |
| `divider`   |             | `boolean` | true    |                                                  |
| `shortName` | `shortName` | `string`  | ""      | Use this property to override the initials       |
| `userName`  | `userName`  | `string`  | ""      | Name of the avatar, used to generate the initials (Displayed on hover) |

#### Slots

| Name       | Description                     |
|------------|---------------------------------|
| `actions`  | Actions that a user can perform |
| `userInfo` | The user info                   |
<!-- /DOC -->
npm package: @finastra/wizard-page
Description: WizardPage Web Component
Latest version: 0.0.39

# WizardPage

The wizard page is used in a context of the wizard pattern. For usage please see [fds-wizard](https://finastra.github.io/finastra-design-system/?path=/story/patterns-wizard--default)
[![See it on NPM!](https://img.shields.io/npm/v/@finastra/wizard-page?style=for-the-badge)](https://www.npmjs.com/package/@finastra/wizard-page)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/wizard-page?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/wizard-page')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/forms-wizardpage--default)

## Usage

### Import

```
npm i @finastra/wizard @finastra/wizard-page
```

```ts
import '@finastra/wizard-page';
...
<fds-wizard-page title="page title"></fds-wizard-page>
```

### Pure HTML pages

```html
<script src="https://cdn.jsdelivr.net/npm/@finastra/wizard-page/dist/wizard-page.js"></script>

<fds-wizard-page title="page title"></fds-wizard-page>
```
npm package: @finaswap/core
Description: Core contracts for the FinaSwap protocol
Latest version: 1.0.5

# FinaSwap

https://finaswap.com/

## Deployed Contracts

https://dev.finaswap.com/finaswap/contracts

## Docs

[Development](docs/DEVELOPMENT.md)

[Deployment](docs/DEPLOYMENT.md)

[History](docs/HISTORY.md)

## Security

[Security Policy](SECURITY.md)

## License

[MIT](LICENSE.txt)
npm package: @finaswap/sdk
Description: 🛠 An SDK for building applications on top of FinaSwap.
Latest version: 1.1.7

# Finaswap SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

This modifies uniswap-sdk's UniswapV2Factory address. The new address for sushiswap is  `0xC0AEe478e3658e2610c5F7A4A2E1777cE9e4f2Ac`.

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/finaswap/finaswap-sdk.git
```

Move into the finaswap-sdk working directory

```sh
cd finaswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @finbertmds/css-in-js
Description: Toolset to transpile and use CSS on runtime
Author: Rocket.Chat
Latest version: 0.31.25

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/css-in-js`

> Toolset to transpile and use CSS on runtime

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/css-in-js/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/css-in-js/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/css-in-js?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/css-in-js?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/css-in-js?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@rocket.chat/css-in-js` as a dependency:

```sh
npm i @rocket.chat/css-in-js

# or, if you are using yarn:

yarn add @rocket.chat/css-in-js
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @finbertmds/css-supports
Description: Memoized and SSR-compatible facade of CSS.supports API
Author: Rocket.Chat
Latest version: 0.31.25

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/css-supports`

> Memoized and SSR-compatible facade of CSS.supports API

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/css-supports/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/css-supports/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/css-supports?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/css-supports?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/css-supports?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@rocket.chat/css-supports` as a dependency:

```sh
npm i @rocket.chat/css-supports

# or, if you are using yarn:

yarn add @rocket.chat/css-supports
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @finbertmds/emitter
Description: Event Emitter by Rocket.Chat
Author: Rocket.Chat
Latest version: 0.31.25

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/emitter`

> Event Emitter by Rocket.Chat

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/emitter/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/emitter/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/emitter?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/emitter?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/emitter?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@rocket.chat/emitter` as a dependency:

```sh
npm i @rocket.chat/emitter

# or, if you are using yarn:

yarn add @rocket.chat/emitter
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @finbertmds/fuselage-hooks
Description: React hooks for Fuselage, Rocket.Chat's design system and UI toolkit
Author: Rocket.Chat
Latest version: 0.35.0

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/fuselage-hooks`

> React hooks for Fuselage, Rocket.Chat's design system and UI toolkit

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage-hooks/peer/react?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-hooks?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage-hooks?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-hooks?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @rocket.chat/emitter @rocket.chat/fuselage-tokens react

# or, if you are using yarn:

yarn add @rocket.chat/emitter @rocket.chat/fuselage-tokens react
```

Add `@rocket.chat/fuselage-hooks` as a dependency:

```sh
npm i @rocket.chat/fuselage-hooks

# or, if you are using yarn:

yarn add @rocket.chat/fuselage-hooks
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @finbertmds/fuselage-polyfills
Description: A bundle of useful poly/ponyfills used by fuselage
Author: Rocket.Chat
Latest version: 0.31.25

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/fuselage-polyfills`

> A bundle of useful poly/ponyfills used by fuselage

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-polyfills?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage-polyfills?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-polyfills?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@rocket.chat/fuselage-polyfills` as a dependency:

```sh
npm i @rocket.chat/fuselage-polyfills

# or, if you are using yarn:

yarn add @rocket.chat/fuselage-polyfills
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->
npm package: @finbertmds/fuselage-toastbar
Description: Fuselage ToastBar component
Author: Rocket.Chat
Latest version: 0.35.0

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/fuselage-toastbar`

> Fuselage ToastBar component

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage-toastbar/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/fuselage/fuselage-toastbar) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-toastbar?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage-toastbar?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-toastbar?style=flat-square)

<!--/header-->

## Install

<!--install-->

Firstly, install the peer dependencies (prerequisites):

```sh
npm i @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/styled react react-dom

# or, if you are using yarn:

yarn add @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/styled react react-dom
```

Add `@rocket.chat/fuselage-toastbar` as a dependency:

```sh
npm i @rocket.chat/fuselage-toastbar

# or, if you are using yarn:

yarn add @rocket.chat/fuselage-toastbar
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->

### Running tests

Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:

<!--yarn(test)-->

```sh
yarn test
```

<!--/yarn(test)-->
npm package: @finbertmds/fuselage-tokens
Description: Design tokens for Fuselage, Rocket.Chat's design system
Author: Rocket.Chat
Latest version: 0.33.2

<!--header-->

<p align="center">
  <a href="https://rocket.chat" title="Rocket.Chat">
    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
  </a>
</p>

# `@rocket.chat/fuselage-tokens`

> Design tokens for Fuselage, Rocket.Chat's design system

---

[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens/v/next) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-tokens?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage-tokens?style=flat-square)

![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-tokens?style=flat-square)

<!--/header-->

## Install

<!--install-->

Add `@rocket.chat/fuselage-tokens` as a dependency:

```sh
npm i @rocket.chat/fuselage-tokens

# or, if you are using yarn:

yarn add @rocket.chat/fuselage-tokens
```

<!--/install-->

## Contributing

<!--contributing(msg)-->

Contributions, issues, and feature requests are welcome!<br />
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).

<!--/contributing(msg)-->

### Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

<!--yarn(build)-->

```sh
yarn build
```

<!--/yarn(build)-->

### Linting

To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
Before commiting, check if your code fits our style by running:

<!--yarn(lint)-->

```sh
yarn lint
```

<!--/yarn(lint)-->

Some linter warnings and errors can be automatically fixed:

<!--yarn(lint-and-fix)-->

```sh
yarn lint-and-fix
```

<!--/yarn(lint-and-fix)-->