open-index/open-npm huggingface dataset:
npm package: @finastra/angular-theme
Description: Angular Material implementation of the Finastra Design System
Latest version: 7.0.2

![](../../.github/assets/banner_angular-theme.png)

[![@finastra/angular-theme](https://img.shields.io/npm/v/@finastra/angular-theme?label=angular-theme&style=flat-square)](https://www.npmjs.com/package/@finastra/angular-theme)
[![stackblitz](https://img.shields.io/badge/stackblitz-ffdcbot-brightgreen?style=flat-square)](https://stackblitz.com/@ffdcbot)

The Finastra Angular Theme is the Angular implementation of the [Finastra Design System](https://design.fusionfabric.cloud). It features Finastra's branding of foundations (color, typography, icons, logo) and UI elements (buttons, checkbox, input...).

## 🤔 How to use it?

You can get started in 2 simple steps:

Install the dependencies

```Bash
npm install @finastra/angular-theme @angular/material
```

### With SASS

The most flexible way of using the angular-theme

```SCSS
@use '@finastra/angular-theme' as fds;
@use '@finastra/angular-theme/base';

@include fds.uxg-core();
@include fds.uxg-material-theme(fds.$light-theme);
```

### With CSS pre-built themes

Choose between `light`, `dark` or `all-theme`

```SCSS
@import '@finastra/angular-theme/prebuilt-theme/all-theme';
```

## 💌 Want to help?

Want to file a bug, contribute some code, or improve documentation?
Excellent! consider reading our [contribution guidelines](../../CONTRIBUTING.md)
npm package: @finastra/app-bar
Description: App Bar Web Component
Latest version: 1.8.1

# AppBar

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/app-bar?style=for-the-badge)](https://www.npmjs.com/package/@finastra/app-bar)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/app-bar?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/app-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-app-bar--default)

The app bar contains essential items related to your application. It is used for branding with the logo, title with the app name, navigation and actions.

Menu, navigation, content and actions are slots where you can put customized content based on what your application requires.

We recommend to use global navigation [templates](https://finastra.github.io/finastra-design-system/?path=/story/patterns-global-nav--default) if you need examples.

## Usage

### Import

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

```ts
import '@finastra/app-bar';
...
<fds-app-bar
    appName="Example"
    logo="https://upload.wikimedia.org/wikipedia/fr/2/2f/Finastra.png">
</fds-app-bar>
```

### API

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

| Property          | Attribute         | Type      | Default | Description                                  |
|-------------------|-------------------|-----------|---------|----------------------------------------------|
| `appName`         | `appName`         | `string`  | ""      | Application's name                           |
| `logoRedirectUri` | `logoRedirectUri` | `string`  | ""      | Set the logo redirect Uri                    |
| `prominent`       | `prominent`       | `boolean` | false   | Extend the app bar                           |
| `transparent`     | `transparent`     | `boolean` | false   | Give a transparent background to the app bar |

#### Events

| Event              | Description                          |
|--------------------|--------------------------------------|
| `MDCTopAppBar:nav` | Fired when clicking on burger button |

#### Slots

| Name             | Description                                      |
|------------------|--------------------------------------------------|
| `actions`        | Slot to add content in the right side of the app bar |
| `content`        | Slot to add content in the center of the app bar |
| `navigation`     | Slot to add content in the left of the app bar, just after the app name or in the second line in prominent app bar |
| `navigationIcon` | Slot to add a navigation icon (e.g. hamburger menu) |

#### CSS Custom Properties

| Property     | Description                                    |
|--------------|------------------------------------------------|
| `--fds-logo` | String representing an image encoded in base64 |
<!-- /DOC -->
npm package: @finastra/autocomplete
Description: Autocomplete Web Component
Latest version: 1.8.1

# Autocomplete

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/autocomplete?style=for-the-badge)](https://www.npmjs.com/package/@finastra/autocomplete)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/autocomplete?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/autocomplete)
[![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-autocomplete--default)

The autocomplete is a text input enhanced by a panel of suggested options.

It uses the [fds-search-input](https://finastra.github.io/finastra-design-system/?path=/story/forms-search-input--custom-icon) component, so it inherits all its properties.

## Usage

### Import

```
npm i @finastra/autocomplete
```

```ts
import '@finastra/autocomplete';
...
<fds-autocomplete name="World">
    <fds-list-item value="One">One</fds-list-item>
    <fds-list-item value="Two">Two</fds-list-item>
    <fds-list-item value="Three">Three</fds-list-item>
</fds-autocomplete>
```

### API

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

| Property              | Attribute             | Type      | Default |
|-----------------------|-----------------------|-----------|---------|
| `ariaDescribedBy`     | `aria-describedby`    | `string`  | ""      |
| `ariaLabel`           | `aria-label`          | `string`  | ""      |
| `ariaLabelledBy`      | `aria-labelledby`     | `string`  | ""      |
| `disabled`            | `disabled`            | `boolean` | false   |
| `icon`                | `icon`                | `string`  | ""      |
| `loading`             | `loading`             | `boolean` | false   |
| `minLengthToOpenMenu` | `minLengthToOpenMenu` | `number`  | 0       |
| `name`                | `name`                | `string`  | ""      |
| `placeholder`         | `placeholder`         | `string`  | ""      |
| `required`            | `required`            | `boolean` | false   |
| `showClearButton`     | `showClearButton`     | `boolean` | false   |
| `useInnerFilter`      | `useInnerFilter`      | `boolean` | true    |
| `validationMessage`   | `validationMessage`   | `string`  | ""      |
| `value`               | `value`               | `string`  | ""      |

#### Methods

| Method           | Type          |
|------------------|---------------|
| `blur`           | `(): void`    |
| `focus`          | `(): void`    |
| `reportValidity` | `(): boolean` |

#### Events

| Event   | Type                  |
|---------|-----------------------|
| `blur`  |                       |
| `focus` |                       |
| `input` | `CustomEvent<string>` |
<!-- /DOC -->
npm package: @finastra/avatar
Description: Avatar Web Component
Latest version: 1.8.1

# Avatar

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/avatar?style=for-the-badge)](https://www.npmjs.com/package/@finastra/avatar)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/avatar)
[![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-avatar--default)

This component is an IT representation of a user. It can be used to figures users or to enable an access to a [user profile menu](https://github.com/Finastra/finastra-design-system/blob/main/packages/fds-components-web/user-profile/README.md).

## Usage

### Import

```
npm i @finastra/avatar
```

```ts
import '@finastra/avatar';
...
<fds-avatar large name="Adnen Manai"></fds-avatar>
```

### API

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

| Property    | Attribute   | Type      | Default | Description                                      |
|-------------|-------------|-----------|---------|--------------------------------------------------|
| `dense`     | `dense`     | `boolean` | false   | Make the avatar smaller                          |
| `large`     | `large`     | `boolean` | false   | Make the avatar bigger                           |
| `name`      | `name`      | `string`  | ""      | Name of the avatar, used to generate the initials (Displayed on hover) |
| `primary`   | `primary`   | `boolean` | false   | Use theme's primary color as background          |
| `secondary` | `secondary` | `boolean` | false   | Use theme's secondary color as background        |
| `shortName` | `shortName` | `string`  | ""      | Use this property to override the initials       |

#### Methods

| Method               | Type                                             |
|----------------------|--------------------------------------------------|
| `transformName`      | `(fullName: string, dense?: boolean \| undefined): string` |
| `transformShortName` | `(shortName: string, dense?: boolean \| undefined): string` |

#### CSS Custom Properties

| Property                 | Type  | Default   | Description                        |
|--------------------------|-------|-----------|------------------------------------|
| `--fds-avatar-font-size` |       | "16px"    | Font size of the avatar            |
| `--fds-avatar-size`      |       | "48px"    | Size of the avatar                 |
| `--fds-primary`          | color | "#694ED6" | Color of the start of the gradient |
| `--fds-secondary`        | color | "#C137A2" | Color of the end of the gradient   |
<!-- /DOC -->
npm package: @finastra/badge
Description: Badge Web Component
Latest version: 1.8.1

# Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/badge?style=for-the-badge)](https://www.npmjs.com/package/@finastra/badge)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/badge?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/badge')
[![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-badge--default)

## Usage

### Import

```
npm i @finastra/badge
```

```ts
import '@finastra/badge';
...
<fds-badge value="123">
    <span> Success </span>
</fds-badge>
```

### API

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

| Property   | Attribute  | Type                                             | Default    | Description    |
|------------|------------|--------------------------------------------------|------------|----------------|
| `color`    | `color`    | `"primary"\|"secondary"\|"success"\|"error"\|"white"\|"outlined"` | "outlined" | Badge color    |
| `position` | `position` | `"topLeft"\|"topRight"\|"center"`                | "center"   | Badge position |
| `type`     | `type`     | `""\|"indicator"`                                | ""         | Badge type     |
| `value`    | `value`    | `string`                                         | ""         | Badge value    |

#### Slots

| Name      | Description          |
|-----------|----------------------|
| `default` | Content of the badge |
<!-- /DOC -->
npm package: @finastra/base-card
Description: Base Card Web Component
Latest version: 0.0.35

# Base Card

This component is a container for a card style.

## Usage

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/base-card?style=for-the-badge)](https://www.npmjs.com/package/@finastra/base-card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/base-card?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/base-card)
[![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-base-card--default)

## Installation
```
npm i @finastra/base-card
```

To use it, your component needs to extend `BaseCard` and implements the function `renderCardContent()` which returns the `TemplateResult` to display in the card.
npm package: @finastra/brand-card
Description: Brand Card Web Component
Latest version: 1.8.1

# Brand card

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/brand-card?style=for-the-badge)](https://www.npmjs.com/package/@finastra/brand-card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/brand-card?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/brand-card)
[![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-card-brand--default)

This component extends [@finastra/card](https://www.npmjs.com/package/@finastra/card).

This card is aimed to be used to display an application branding in an card list.

## Usage

### Import

```
npm i @finastra/brand-card
```

```ts
import '@finastra/brand-card';
...
<fds-brand-card label="App name"></fds-brand-card>
```

### API

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

| Property     | Attribute    | Type      | Default | Description                                      |
|--------------|--------------|-----------|---------|--------------------------------------------------|
| `dense`      | `dense`      | `boolean` | false   | Make the card smaller                            |
| `disabled`   | `disabled`   | `boolean` | false   | Disabled style of the card.                      |
| `extraDense` | `extraDense` | `boolean` | false   | Make the card extra small                        |
| `label`      | `label`      |           |         | App card label                                   |
| `large`      | `large`      | `boolean` | false   | Make the card bigger                             |
| `outlined`   | `outlined`   | `boolean` | false   | Change the card style to outlined, default style is elevated. |
| `secondary`  | `secondary`  | `boolean` | false   | Color and ribbon type                            |
| `selectable` | `selectable` | `boolean` | false   | Change the card style to an action card.         |
| `shortLabel` | `shortLabel` | `string`  | ""      | Optional app card displayed label                |

#### Methods

| Method           | Type                     |
|------------------|--------------------------|
| `formatItemName` | `(name: string): string` |

#### CSS Custom Properties

| Property          | Type  | Default   | Description                   |
|-------------------|-------|-----------|-------------------------------|
| `--fds-primary`   | color | "#694ED6" | Color of the default ribbon   |
| `--fds-secondary` | color | "#C137A2" | Color of the secondary ribbon |
<!-- /DOC -->
npm package: @finastra/breadcrumb
Description: Breadcrumb Web Component
Latest version: 1.8.1

# Breadcrumb

The Breadcrumb component is a navigational helper. It accepts a list of labels (strings) as an input and dispatches a `selected` event each time the user clicks on a label.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/breadcrumb?style=for-the-badge)](https://www.npmjs.com/package/@finastra/breadcrumb)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/breadcrumb?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/breadcrumb')
[![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-breadcrumb--default)

## Usage

### Import

```
npm i @finastra/breadcrumb
```

```ts
import '@finastra/breadcrumb';
...
<fds-breadcrumb items="[
    {
        label: 'Home',
        link: '#'
    },
    {
        label: 'Link 2',
        link: '#link-2'
    },
    {
        label: 'Link 3',
        link: '#link-2/link-3'
    }
]"></fds-breadcrumb>
```

### API

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

| Property | Attribute | Type    | Default | Description                |
|----------|-----------|---------|---------|----------------------------|
| `items`  | `items`   | `Array` | []      | A list of items to display |

#### Events

| Event      | Type                            |
|------------|---------------------------------|
| `selected` | `CustomEvent<{ item: Crumb; }>` |

#### CSS Custom Properties

| Property                         | Type  | Default | Description                                     |
|----------------------------------|-------|---------|-------------------------------------------------|
| `--fds-breadcrumb-divider`       |       | "'/'"   | Set the character used as divider between items |
| `--fds-breadcrumb-divider-color` | color | "auto"  | Set the character used as divider between items |
<!-- /DOC -->
npm package: @finastra/button-toggle
Description: ButtonToggle Web Component
Latest version: 0.0.39

# Button Toggle

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/button-toggle?style=for-the-badge)](https://www.npmjs.com/package/@finastra/button-toggle)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/button-toggle?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/button-toggle')
[![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-toggle-button-toggle--default)

Button toggles are on/off toggles with the appearance of a button.

We created two types of button toggle, a default usable with the `<fds-button-toggle>` selector and a filter usable with `<fds-button-toggle-filter>` selector.

## Usage

### Import

```
npm i @finastra/button-toggle
```

```ts
import '@finastra/button-toggle';
...
<fds-button-toggle label="toggle" icon="camera"></fds-button-toggle>
```

### Pure HTML pages

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://cdn.jsdelivr.net/npm/@finastra/button-toggle/dist/fds-button-toggle.js"></script>

<fds-button-toggle label="toggle" icon="camera"></fds-button-toggle>

 <fds-button-toggle-filter label="label" icon="event"></fds-button-toggle-filter>
```
npm package: @finastra/button-toggle-group
Description: ButtonToggleGroup Web Component
Latest version: 1.8.1

# Button Toggle Group

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/button-toggle-group?style=for-the-badge)](https://www.npmjs.com/package/@finastra/button-toggle-group)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/button-toggle-group?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/button-toggle-group')
[![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-toggle-button-toggle-group--default)

The `<fds-button-toggle-group>` is used to group `<fds-button-toggle>` or `<fds-button-toggle-filter>` items for performing certain actions.

## Usage

### Import

```
npm i @finastra/button-toggle-group
```

```ts
import '@finastra/button-toggle-group';
...
<fds-button-toggle-group style="padding-bottom: 16px">
    <fds-button-toggle icon="accessibility"></fds-button-toggle>
    <fds-button-toggle icon="exit_to_app"></fds-button-toggle>
    <fds-button-toggle icon="camera"></fds-button-toggle>
</fds-button-toggle-group>
```

### API

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

| Property        | Attribute        | Type             | Default | Description                             |
|-----------------|------------------|------------------|---------|-----------------------------------------|
| `dense`         | `dense`          | `boolean`        | false   | Make the button toggle smaller          |
| `selectedIndex` | `selected-index` | `number`         | 0       | Index of current selection, starts at 0 |
| `toggleButtons` |                  | `ButtonToggle[]` |         |                                         |
| `value`         |                  | `string`         | ""      | Current selected value                  |

#### Events

| Event    | Description                       |
|----------|-----------------------------------|
| `change` | Fired when selected value change. |
<!-- /DOC -->
npm package: @finastra/chip
Description: Chip Web Component
Latest version: 1.8.1

# Chip

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/chip?style=for-the-badge)](https://www.npmjs.com/package/@finastra/chip)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/chip?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/chip')
[![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-chip--default)

Chips allow users to enter information, make selections, filter content, or trigger actions.

## Usage

### Import

```
npm i @finastra/chip
```

```ts
import '@finastra/chip';
...
<fds-chip selected label="Munk"></fds-chip>
```

### API

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

| Property             | Attribute      | Type                        | Default | Description                                      |
|----------------------|----------------|-----------------------------|---------|--------------------------------------------------|
| `dense`              | `dense`        | `boolean`                   | false   | Make the chip smaller.                           |
| `disabled`           | `disabled`     | `boolean`                   | false   | Disable a chip.                                  |
| `icon`               | `icon`         | `string`                    | ""      | Material design icon name to display in the left side of the label |
| `label`              | `label`        | `string`                    | ""      | Chip label                                       |
| `large`              | `large`        | `boolean`                   | false   | Make the chip bigger.                            |
| `ripple`             |                | `Promise<Ripple \| null>`   |         |                                                  |
| `secondary`          | `secondary`    | `boolean`                   | false   | Use Secondary color.                             |
| `selected`           | `selected`     | `boolean`                   | false   | Select a chip                                    |
| `trailingIcon`       | `trailingIcon` | `string`                    | ""      | Material design trailing icon name to display in the right side of the label |
| `trailingIconAction` |                | `(() => void) \| undefined` |         | Override this callback with what you want to happen whenever there's a click on the trailing icon |
<!-- /DOC -->
npm package: @finastra/circular-progress
Description: CircularProgress Web Component
Latest version: 1.8.1

# CircularProgress

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/circular-progress?style=for-the-badge)](https://www.npmjs.com/package/@finastra/circular-progress)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/circular-progress?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/circular-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-circular-progress--default)

## Usage

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

### Import

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

```ts
import '@finastra/circular-progress';
...
<fds-circular-progress indeterminate="true"></fds-circular-progress>
```

### API

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

| Property        | Attribute       | Type          | Default                                          | Description                                      |
|-----------------|-----------------|---------------|--------------------------------------------------|--------------------------------------------------|
| `ariaLabel`     |                 | `string`      |                                                  |                                                  |
| `closed`        |                 | `boolean`     |                                                  |                                                  |
| `density`       |                 | `number`      |                                                  |                                                  |
| `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" | .                                                |
| `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/credit-card
Description: credit-card Web Component
Latest version: 1.8.1

# Credit-card

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/credit-card?style=for-the-badge)](https://www.npmjs.com/package/@finastra/credit-card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/credit-card?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/credit-card)
[![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-credit-card--default)


## Usage

### Import

```
npm i @finastra/credit-card
```

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

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

| Property       | Attribute       | Type     | Default          | Description                |
|----------------|-----------------|----------|------------------|----------------------------|
| `date`         | `date`          | `string` | "03/24"          | The card validity date     |
| `hiddenDigits` | `hidden-digits` | `string` | "**** **** ****" | Hidden digits format       |
| `lastDigits`   | `last-digits`   | `number` | 9067             | The disclosed card numbers |
| `name`         | `name`          | `string` | "Jane Cooper"    | The name of the card owner |
<!-- /DOC -->
npm package: @finastra/divider
Description: Divider Web Component
Latest version: 1.8.1

# Divider

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/divider?style=for-the-badge)](https://www.npmjs.com/package/@finastra/divider)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/divider?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/divider)
[![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-divider--default-story)

`fds-divider` brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

## Usage

### Import

```
npm i @finastra/divider
```

```ts
import '@finastra/divider';
...
<fds-divider inset="both"></fds-divider>
```

### API

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

| Property   | Attribute  | Type                                   | Default     | Description                                      |
|------------|------------|----------------------------------------|-------------|--------------------------------------------------|
| `inset`    | `inset`    | `"both"\|"left"\|"right"\|"undefined"` | "undefined" | Type of inset                                    |
| `vertical` | `vertical` | `boolean`                              | false       | Displays the divider vertically instead of horizontically |

#### CSS Custom Properties

| Property                     | Type  | Default   | Description                   |
|------------------------------|-------|-----------|-------------------------------|
| `--fds-divider-inset-margin` | text  | "80px"    | Border radius of the outline. |
| `--fds-primary`              | color | "#694ED6" | TextField color               |
<!-- /DOC -->
npm package: @finastra/fab
Description: Fab Web Component
Latest version: 1.8.1

# Fab

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/fab?style=for-the-badge)](https://www.npmjs.com/package/@finastra/fab)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/fab?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/fab')
[![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-fab--default)

## Usage

The FAB (aka Floating Action Button) is a button that appears in front of all screen content.

### Import

```
npm i @finastra/fab
```

```ts
import '@finastra/fab';
...
<fds-fab extended gradient label="Edit" icon="edit"></fds-fab>
```

### API

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

| Property             | Attribute  | Type                      | Default    | Description                |
|----------------------|------------|---------------------------|------------|----------------------------|
| `dense`              | `dense`    | `boolean`                 | false      | Make the fab smaller.      |
| `disabled`           |            | `boolean`                 |            |                            |
| `exited`             |            | `boolean`                 |            |                            |
| `extended`           | `extended` | `boolean`                 | false      | Make the fab extended.     |
| `gradient`           | `gradient` | `boolean`                 | false      | Apply gradient color.      |
| `icon`               | `icon`     | `string`                  | "add"      | Fab icon.                  |
| `label`              | `label`    | `string`                  | "Action"   | Label in the extended fab. |
| `mini`               |            | `boolean`                 |            |                            |
| `reducedTouchTarget` |            | `boolean`                 |            |                            |
| `ripple`             |            | `Promise<Ripple \| null>` |            |                            |
| `showIconAtEnd`      |            | `boolean`                 |            |                            |
| `styles`             |            | `CSSResult[]`             | ["styles"] |                            |

#### CSS Custom Properties

| Property          | Type  | Default   | Description      |
|-------------------|-------|-----------|------------------|
| `--fds-primary`   | color | "#694ED6" | Primary color.   |
| `--fds-secondary` | color | "#C137A2" | Secondary color. |
<!-- /DOC -->
npm package: @finastra/fds-theme
Description: ![](../../.github/assets/banner_web-theme.png)
Author: Talbot, Thomas
Latest version: 1.8.1

![](../../.github/assets/banner_web-theme.png)

The FINASTRA Theme is a SCSS implementation of the [FINASTRA Design System](https://design.fusionfabric.cloud). It features FINASTRA's branding of foundations (color, typography, spacing, elevation).

## Quick start 🤔

You can get started in 2 simple steps:

Install the dependency

```Bash
npm install @finastra/fds-theme
```

Use the theme in your app's main stylesheet to get the custom properties initialized, including Sass mixins for color, spacing, elevation and typography.

```SCSS
@use '@finastra/fds-theme/all-themes';
```

## Theming 🖌️

FDS theme supports both **light** and **dark** theme.

### SASS

If you are coding in **SASS** you have 3 different ways to load the theme of your preference

- By loading only **custom properties**

```SCSS
@use '@finastra/fds-theme/light';
//or
@use '@finastra/fds-theme/dark';
//or
@use '@finastra/fds-theme/all-themes';
```

- By using **mixins** directly inside your container

```SCSS
@use '@finastra/fds-theme' as fds;

  .my-container {
    @include fds.use-light-theme();
    //or
    @include fds.use-dark-theme();
    //or
    @include fds.use-all-themes();
  }
```

- Or by simply putting your **class name** in the **@use** rule

```SCSS
@use '@finastra/fds-theme/light' with ($class: 'light-theme');
//or
@use '@finastra/fds-theme/dark' with ($class: 'dark-theme');
//or
@use '@finastra/fds-theme/all-themes' with ($class: 'my-container');
```

> Note that you should use the same class name in your html

```HTML
<div class="light-theme"></div>
```

### Using a pre-built theme

You can use FDS theme without Sass by using a pre-built theme

```CSS
@import '@finastra/fds-theme/prebuilt/light';
/* or */
@import '@finastra/fds-theme/prebuilt/dark';
/* or */
@import '@finastra/fds-theme/prebuilt/all-themes';
```

## Usage

- [Color](https://finastra.github.io/finastra-design-system/?path=/docs/design-tokens-color--custom-properties)
- [Elevation](https://finastra.github.io/finastra-design-system/?path=/docs/design-tokens-elevation--helper-classes)
- [Spacing](https://finastra.github.io/finastra-design-system/?path=/docs/design-tokens-spacing--custom-properties)
- [Typography](https://finastra.github.io/finastra-design-system/?path=/docs/design-tokens-typography--custom-properties)

## Want to help? 🤗❤️

Want to file a bug, contribute some code, or improve documentation?
Excellent!

If it's your first time contributing, use the tag [![good first issue badge](https://img.shields.io/badge/-good%20first%20issue-blueviolet?style=flat-square)](https://github.com/finastra/finastra-design-system/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
npm package: @finastra/fds-tokens
Description: Hosting all the tokens that define the Finastra design system
Latest version: 1.8.1

![](../.github/assets/banner-tokens.jpg)

Welcome to the [Finastra design system](https://design.fusionfabric.cloud/) tokens repository. You will find here all the tokens that are used to create themes for various technologies.

# For CSS

We export tokens as custom properties to be consumed by any web project.

# For SASS

We export SASS variables to be consumed by SASS projects in mixins or functions.
npm package: @finastra/form
Description: Form Web Component
Latest version: 1.8.1

# Form

fds-form is a component used to collect user input from fds interactive controls such as : [fds-textfield](https://finastra.github.io/finastra-design-system/?path=/docs/forms-textfield--default), [fds-select](https://finastra.github.io/finastra-design-system/?path=/docs/forms-select--default), [fds-checkbox](https://finastra.github.io/finastra-design-system/?path=/docs/forms-checkbox--default) ...

The form fields that have constraints defined will be automatically validated when the fds form is submitted and a default error message will be shown for any invalid form field.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/form?style=for-the-badge)](https://www.npmjs.com/package/@finastra/form)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/form?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/form')
[![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-form--default)

## Usage

### Import

```
npm i @finastra/form
```

```ts
import '@finastra/form';
...
  <fds-form id="myForm">
      <fds-textfield required label="Name" placeholder="Name" validationMessage="required field"></fds-textfield>
      <fds-textarea
        required
        label="Bio"
        helper="You can @mention other users and organizations to link to them."
        charcounter="true"
        maxlength="18"
        validationMessage="required field"
        helperPersistent
      ></fds-textarea>

      <div class="actions">
        <fds-button type="submit" label="submit"></fds-button>
        <fds-outlined-button type="reset" label="reset"></fds-outlined-button>
      </div>
  </fds-form>
```

### API

<!-- DOC -->
#### Methods

| Method            | Type                           |
|-------------------|--------------------------------|
| `getFormData`     | `(): FormData`                 |
| `getFormElements` | `(): any[]`                    |
| `handleClick`     | `(event: MouseEvent): boolean` |
| `reportValidity`  | `(): boolean`                  |
| `reset`           | `(): void`                     |
| `submit`          | `(): boolean`                  |

#### Events

| Event        | Description                         |
|--------------|-------------------------------------|
| `formReset`  | Emitted when the form is reset.     |
| `formSubmit` | Emitted when the form is submitted. |
<!-- /DOC -->
npm package: @finastra/formfield
Description: Formfield Web Component
Latest version: 1.8.1

# Formfield

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/formfield?style=for-the-badge)](https://www.npmjs.com/package/@finastra/formfield)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/formfield?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/formfield')
[![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-formfield--default)

## Usage

A form field is a text caption for FDS input elements including [fds-checkbox](https://finastra.github.io/finastra-design-system/?path=/docs/forms-checkbox--default), [fds-radio](https://finastra.github.io/finastra-design-system/?path=/docs/forms-radio--default), and [fds-switch](https://finastra.github.io/finastra-design-system/?path=/docs/forms-switch--default).

It is equivalent to the native <label> element in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.

`fds-formfield` extends [Material web's mwc-formfield-base](https://github.com/material-components/material-web/tree/mwc/components/formfield).

### Import

```
npm i @finastra/formfield
```

```ts
import '@finastra/formfield';
import '@finastra/checkbox';
...
<fds-formfield label="Accept terms and conditions">
    <fds-checkbox checked></fds-checkbox>
</fds-formfield>
```

### API

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

| Property       | Attribute      | Type      | Default | Description                                      |
|----------------|----------------|-----------|---------|--------------------------------------------------|
| `alignEnd`     | `alignEnd`     | `boolean` | false   | Align the component at the end of the label..    |
| `label`        | `label`        | `string`  | ""      | The text to display for the label and sets a11y label on input. (visually overriden by slotted label). |
| `nowrap`       | `nowrap`       | `boolean` | false   | Prevents the label from wrapping and overflow text is ellipsed. |
| `spaceBetween` | `spaceBetween` | `boolean` | false   | Add space between the component and the label as the formfield grows. |

#### Methods

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

#### CSS Custom Properties

| Property           | Default   | Description  |
|--------------------|-----------|--------------|
| `--fds-label-font` | "#694ED6" | Switch color |
<!-- /DOC -->
npm package: @finastra/icon
Description: Icon Web Component
Latest version: 1.8.1

# Icon

Icon displays an icon with a chosen name from the [Material Icons](https://fonts.google.com/icons) font, or from any font that supports ligatures.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/icon?style=for-the-badge)](https://www.npmjs.com/package/@finastra/icon)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/icon?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/icon')
[![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-icon--default)

## Usage

### Import

```
npm i @finastra/icon
```

```ts
import '@finastra/icon';
...
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

<fds-icon>bolt</fds-icon>
```

### API

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

| Property      | Attribute     | Type          | Default    | Description                    |
|---------------|---------------|---------------|------------|--------------------------------|
| `dense`       | `dense`       | `boolean`     | false      | Dense size of the icon `18px`. |
| `disabled`    | `disabled`    | `boolean`     | false      |                                |
| `error`       | `error`       | `boolean`     | false      | Use error color.               |
| `extra_large` | `extra_large` | `boolean`     | false      | Dense size of the icon `48px`. |
| `gradient`    | `gradient`    | `boolean`     | false      | Use gradient color.            |
| `info`        | `info`        | `boolean`     | false      |                                |
| `large`       | `large`       | `boolean`     | false      | Large size of the icon `36px`. |
| `primary`     | `primary`     | `boolean`     | false      | Use primary color.             |
| `secondary`   | `secondary`   | `boolean`     | false      | Use secondary color.           |
| `styles`      |               | `CSSResult[]` | ["styles"] |                                |
| `success`     | `success`     | `boolean`     | false      | Use success color.             |
| `warning`     | `warning`     | `boolean`     | false      |                                |

#### Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `default` | The name of the icon to display (e.g. credit_card). See Material Icons for an index of all available icons. |

#### CSS Custom Properties

| Property          | Default | Description                       |
|-------------------|---------|-----------------------------------|
| `--fds-icon-size` | "24px"  | Size of the icon, default `24px`. |
<!-- /DOC -->
npm package: @finastra/icon-button
Description: Icon Button Web Component
Latest version: 1.8.1

# IconButton

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/icon-button?style=for-the-badge)](https://www.npmjs.com/package/@finastra/icon-button)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/icon-button?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/icon-button')
[![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-icon-button--default)

## Usage

Icon buttons allow users to take actions, and make choices, with a single tap.

### Import

```
npm i @finastra/icon-button
```

```ts
import '@finastra/icon-button';
...
<fds-icon-button icon="code"></fds-icon-button>
```

### API

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

| Property        | Attribute   | Type                      | Default | Description               |
|-----------------|-------------|---------------------------|---------|---------------------------|
| `ariaHasPopup`  |             | `AriaHasPopup`            |         |                           |
| `ariaLabel`     |             | `string`                  |         |                           |
| `buttonElement` |             | `HTMLElement`             |         |                           |
| `dense`         | `dense`     | `boolean`                 | false   | Make the button smaller.  |
| `disabled`      | `disabled`  | `boolean`                 | false   | Make the button disabled. |
| `icon`          | `icon`      | `string`                  | "code"  | Icon used in the button.  |
| `primary`       | `primary`   | `boolean`                 | false   | Use the primary color.    |
| `ripple`        |             | `Promise<Ripple \| null>` |         |                           |
| `secondary`     | `secondary` | `boolean`                 | false   | Use the secondary color.  |

#### Methods

| Method  | Type       |
|---------|------------|
| `blur`  | `(): void` |
| `focus` | `(): void` |
<!-- /DOC -->
npm package: @finastra/launchpad
Description: Launchpad Web Component
Latest version: 1.8.1

# Launchpad

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/launchpad?style=for-the-badge)](https://www.npmjs.com/package/@finastra/launchpad)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/launchpad?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/launchpad)
[![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-launchpad--default)

The `<fds-launchpad>` is the menu that is part of the [Global Navigation Patern](https://design.fusionfabric.cloud/patterns/global-navigation?tab=design) that allows a smooth navigation between products. The default pattern just needs `apps` that follow the format returned by the **UX App Discover** [API](https://developer.fusionfabric.cloud/api/ux-app-b2e-v1-5a288578-e832-11ea-adc1-0242ac120002/docs).

You can customize the **Tools** section using `brand-card` to add elements to it (c.f. [storybook](https://finastra.github.io/finastra-design-system/?path=/story/navigation-launchpad--with-tools))

## Usage

### Import

```
npm i @finastra/launchpad
```

```ts
import '@finastra/launchpad';
...
<fds-launchpad apps='[{
    "name": "App",
    "shortName": "App",
    "sso-initiation-urls": {
    "web": "https://app1.com"
    }}]'>
</fds-launchpad>
```

### API

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

| Property               | Attribute              | Type      | Default     | Description                                      |
|------------------------|------------------------|-----------|-------------|--------------------------------------------------|
| `appNameProperty`      | `appNameProperty`      | `string`  | "name"      | Name of application name property of type string that will be used by the product card. |
| `apps`                 | `apps`                 | `UxApp[]` | []          | List of ux-apps.                                 |
| `shortAppNameProperty` | `shortAppNameProperty` | `string`  | "shortName" | Name of the short application name property used by the product card. |
| `title`                | `title`                | `string`  | "Apps"      | Title used by the menu trigger.                  |

#### Events

| Event        | Type                           |
|--------------|--------------------------------|
| `launchpage` |                                |
| `selected`   | `CustomEvent<{ app: UxApp; }>` |
<!-- /DOC -->