open-index/open-npm huggingface dataset:
npm package: @forter/list-item
Description: list-item from Forter Components
Author: Forter Developers
Latest version: 1.2.0

# fc-list-item

Simple list which is presented as key value table.
<!-- Author: Ori Weingart <oriweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/list';
</script>

<fc-list-item>
   <fc-icon icon="ecommerce"></fc-icon>
   <label> Ecommerce </label>
   <section>Forter protects all of your online transactions from fraud </section>
</fc-list-item>
```

## CSS Custom Properties

| Property                           | Description                                      |
|------------------------------------|--------------------------------------------------|
| `--fc-list-item-border`            | border. default: `1px solid var(--fc-gray-300)`, example: `3px solid gold` |
| `--fc-list-item-border-radius`     | border radius. default: `5px`, example: `30px`   |
| `--fc-list-item-grid-gap`          | grid gap between all slotted elements. default: `5px`, example: `10px` |
| `--fc-list-item-icon-padding-top`  | icon's padding top. default: `5px`, example: `10px` |
| `--fc-list-item-label-font-size`   | label's font size. default: `17px`, example: `22px` |
| `--fc-list-item-label-font-weight` | label's font weight. default: `bold`, example: `normal` |
| `--fc-list-item-max-width`         | max width. default: `250px`, example: `400px`    |
| `--fc-list-item-padding`           | inner padding. default: `10px`, example: `20px`  |
| `--fc-list-item-section-font-size` | section's font size. default: `14px`, example: `8px` |
npm package: @forter/loading
Description: loading from Forter Components
Author: Forter Developers
Latest version: 1.3.0

# fc-loading

An element by Forter

## Usage

```html
<script>
   import '@forter/loading';
</script>

<fc-loading>
</fc-loading>
```

## Examples

```html
<!-- IE -->
<fc-loading ie>
</fc-loading>
```

## Properties

| Property | Attribute | Type                                             | Default   | Description                                      |
|----------|-----------|--------------------------------------------------|-----------|--------------------------------------------------|
| `intent` | `intent`  | `"apply" \| "warn" \| "success" \| "danger" \| "cancel" \| "primary" \| "secondary"` | "default" | intent color to emphasize the type of alert      |
| `round`  | `round`   | `boolean`                                        | false     | A flavour where the dots are positioned in a circle and not the default row. |
| `size`   | `size`    | `"small" \| "medium" \| "large"`                 |           | indicate the number of dots in the loading       |

## CSS Custom Properties

| Property                       | Description                                    |
|--------------------------------|------------------------------------------------|
| `--fc-loading-color`           | color.                                         |
| `--fc-loading-round-size`      | the size of the round flavor. example: `200px` |
| `--fc-loading-secondary-color` | secondary color. example: `gray`               |
npm package: @forter/pagination
Description: pagination from Forter Components
Author: Forter Developers
Latest version: 1.3.2

# fc-pagination

An element by Forter
<!-- Author: Harel Gendler <arelg@forter.com> -->

## Usage

```html
<script>
   import '@forter/pagination';
</script>

<fc-pagination>
</fc-pagination>
```

## Properties

| Property          | Attribute         | Type                   | Default | Description                           |
|-------------------|-------------------|------------------------|---------|---------------------------------------|
| `backDisabled`    |                   | `boolean`              |         |                                       |
| `isNext`          |                   | `true`                 |         |                                       |
| `nextDisabled`    |                   | `boolean`              |         |                                       |
| `page`            | `page`            | `number`               | 0       | Number of the current page            |
| `pageSize`        | `pageSize`        | `number`               | 10      | Number of elements displayed per page |
| `pageSizeOptions` | `pageSizeOptions` | `"" \| TemplateResult` |         |                                       |
| `totalSize`       | `totalSize`       | `number`               | 30052   | Number of total elements              |
npm package: @forter/popover-item
Description: popover-item from Forter Components
Author: Forter Developers
Latest version: 1.2.0

# fc-popover-item

An element by Forter
<!-- Author: oweingart <oweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/popover-item';
</script>

<fc-popover-item>
     <fc-icon icon="loyalty"></fc-icon>
     <section> protects your loyalty program accounts from unauthorized access or attempts to steal their points </section>
</fc-popover-item>
```

## Properties

| Property   | Attribute  | Type      | Default | Description                |
|------------|------------|-----------|---------|----------------------------|
| `disabled` | `disabled` | `boolean` | false   | If the element is disabled |

## CSS Custom Properties

| Property                                      | Description                                      |
|-----------------------------------------------|--------------------------------------------------|
| `--fc-popover-item-background-color`          | background-color, default: transparent.          |
| `--fc-popover-item-border-radius`             | border-radius, default: 10px.                    |
| `--fc-popover-item-cursor`                    | cursor, default: pointer.                        |
| `--fc-popover-item-disabled-background-color` | background-color when disabled, default: var(--fc-gray-100). |
| `--fc-popover-item-disabled-cursor`           | cursor when disabled, default: no-drop.          |
| `--fc-popover-item-hover-background-color`    | background-color on hover and focus, default: var(--fc-gray-100). |
| `--fc-popover-item-padding`                   | padding, default: 10px.                          |
npm package: @forter/popup-menu
Description: popup-menu from Forter Components
Author: Forter Developers
Latest version: 2.0.1

# fc-popup-menu

An element by Forter
<!-- Author: yonatan-gelbard <yonatan.gelbard@forter.com> -->

## Usage

```html
<script>
   import '@forter/popup-menu';
</script>

<fc-popup-menu>
</fc-popup-menu>
```

## Properties

| Property                   | Attribute                  | Type      | Default         |
|----------------------------|----------------------------|-----------|-----------------|
| `config`                   | `config`                   | `{}`      | {}              |
| `deleteText`               | `deleteText`               | `string`  | "Delete"        |
| `hasShadow`                | `hasShadow`                | `boolean` | true            |
| `menuItemsTitle`           | `menuItemsTitle`           | `string`  | "quick actions" |
| `outlinedButton`           | `outlinedButton`           | `boolean` | false           |
| `shouldDisplayMenu`        | `shouldDisplayMenu`        | `boolean` | true            |
| `shouldPopupOpenFromRight` | `shouldPopupOpenFromRight` | `boolean` | false           |
| `showAlertsButton`         | `showAlertsButton`         | `boolean` | false           |
| `showDeleteOption`         | `showDeleteOption`         | `boolean` | false           |
| `showDownloadButton`       | `showDownloadButton`       | `boolean` | false           |
| `showMenuButton`           | `showMenuButton`           | `boolean` | false           |

## Events

| Event    |
|----------|
| `action` |

## CSS Custom Properties

| Property                         | Description                     |
|----------------------------------|---------------------------------|
| `--fc-popup-menu-disabled-color` | disabled color. example: `gray` |
npm package: @forter/progress-circle
Description: Progress Circle from Forter Components
Author: Forter Developers
Latest version: 4.1.16

# fc-progress-circle

show progress by nice border around the circle depends on you score.
<!-- Author: Gilad Feder <gilad.feder@forter.com> -->


## Usage

```html
<script>
  import '@forter/progress-circle';
</script>

<fc-progress-circle>
</fc-progress-circle>

```

## Properties

| Property     | Attribute    | Type                                             | Default | Description                                 |
|--------------|--------------|--------------------------------------------------|---------|---------------------------------------------|
| `intent`     | `intent`     | `"primary" \| "secondary" \| "success" \| "apply" \| "danger" \| "warn"` |         | The button's intent. See Intents in README. |
| `percentage` | `percentage` | `number`                                         | 100     | score as number. example: 95                |
| `size`       | `size`       | `"small" \| "medium" \| "large"`                 |         | Pre-Defined size                            |

## CSS Custom Properties

| Property                          | Description                                      |
|-----------------------------------|--------------------------------------------------|
| `--fc-progress-circle-color`      | the color. default: `var(--violet)`, example: `gold` |
| `--fc-progress-circle-content`    | content inside circle. example: `'100'`          |
| `--fc-progress-circle-font-color` | content font color                               |
| `--fc-progress-circle-size`       | height and width. default: `88px`, example: `66px` |
npm package: @forter/rate
Description: rate from Forter Components
Author: Forter Developers
Latest version: 1.4.1

# fc-rate

An element to give score to between 1 to 5 to something ;)
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-rate--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Frate) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/rate/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/rate) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/rate/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/rate) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/rate/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/rate)

## Usage

```html
<script>
   import '@forter/rate';
</script>

<fc-rate></fc-rate>
```

## Examples

```html
<!-- intent -->
<fc-rate value="5"></fc-rate>

```

## Properties

| Property   | Attribute  | Type                                             | Default | Description                                 |
|------------|------------|--------------------------------------------------|---------|---------------------------------------------|
| `disabled` | `disabled` | `"" \| "disabled "`                              |         |                                             |
| `intent`   | `intent`   | `"primary" \| "secondary" \| "success" \| "apply" \| "danger" \| "warn"` |         | The button's intent. See Intents in README. |
| `value`    | `value`    | `"1" \| "2" \| "3" \| "4" \| "5"`                | ""      | Rate value                                  |

## Events

| Event    | Description                                      |
|----------|--------------------------------------------------|
| `change` | when choosing another value. method: `change`, example: `{ "value": 1}` |

## CSS Custom Properties

| Property                   | Description                                      |
|----------------------------|--------------------------------------------------|
| `--fc-rate-checked-color`  | checked color. default: `var(--fc-yellow-500)` example: `var(--fc-green-500)` |
| `--fc-rate-color`          | color default: `var(--fc-gray-500)` example: `var(--fc-gray-900)` |
| `--fc-rate-cursor`         | cursor. example: `search` ,default: `pointer`    |
| `--fc-rate-disabled-color` | disabled color. default: `var(--fc-gray-200)` example: `var(--fc-purple-200)` |
| `--fc-rate-item-size`      | size of item. default: `18px` example: `25px`    |
| `--fc-rate-margin`         | padding. default: `0 1.05em`                     |
npm package: @forter/searchable-checkbox-list
Description: searchable-checkbox-list from Forter Components
Author: Forter Developers
Latest version: 1.0.3

# fc-searchable-checkbox-list

An element by Forter
<!-- Author: danirter <93980096+danirter@users.noreply.github.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-searchable-checkbox-list--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fsearchable-checkbox-list) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/searchable-checkbox-list/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/searchable-checkbox-list) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/searchable-checkbox-list/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/searchable-checkbox-list) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/searchable-checkbox-list/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/searchable-checkbox-list)

## Usage

```html
<script>
   import '@forter/searchable-checkbox-list';
</script>

<fc-searchable-checkbox-list placeholder="Search in 300 sites" .searchabledata="${['Forter', 'Forterinio', 'ForterDeluxe', 'ForterDev']}">
</fc-searchable-checkbox-list>
```

## Properties

| Property         | Attribute        | Type                                 |
|------------------|------------------|--------------------------------------|
| `disabled`       | `disabled`       | `boolean`                            |
| `filteredItems`  | `filteredItems`  | `any[]`                              |
| `loading`        | `loading`        | `TemplateResult \| TemplateResult[]` |
| `placeholder`    | `placeholder`    | `string`                             |
| `searchabledata` | `searchabledata` | `any[]`                              |

## Events

| Event      | Description                         |
|------------|-------------------------------------|
| `change`   | triggers upon change in input value |
| `selected` | returns selected items              |

## CSS Custom Properties

| Property                                       | Description                     |
|------------------------------------------------|---------------------------------|
| `--fc-searchable-checkbox-list-disabled-color` | disabled color. example: `gray` |
npm package: @forter/side-menu
Description: side-menu from Forter Components
Author: Forter Developers
Latest version: 2.0.5

# fc-side-menu

An element by Forter
<!-- Author: Omer Anati <omer.anati@forter.com> -->

## Usage

```html
<script>
   import '@forter/side-menu';
</script>

<fc-side-menu renderers={} items=[{"label":"Probabilistic Linking","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]}]>
</fc-side-menu>
```

## Properties

| Property    | Attribute   | Type         | Default | Description                                      |
|-------------|-------------|--------------|---------|--------------------------------------------------|
| `fetching`  | `fetching`  | `"" \| "-1"` |         |                                                  |
| `items`     | `items`     | `any[]`      |         | Side menu items                                  |
| `loading`   | `loading`   | `any`        |         |                                                  |
| `renderers` | `renderers` | `any`        | {}      | Object of functions that let users draw different things inside the chips |
| `search`    | `search`    | `string`     | ""      |                                                  |

## Events

| Event    |
|----------|
| `change` |

## CSS Custom Properties

| Property                                        | Description                 |
|-------------------------------------------------|-----------------------------|
| `--fc-side-menu-category-chip-background-color` | chip color. example: `pink` |
| `--fc-side-menu-width`                          | width. example: `400px`     |
npm package: @forter/simple-chart
Description: simple-chart from Forter Components
Author: Forter Developers
Latest version: 1.0.3

# fc-simple-chart

An element by Forter
<!-- Author: Tomer Vainstein <tomer.vainstein@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/experimental-simple-chart--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fsimple-chart) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/simple-chart/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/simple-chart) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/simple-chart/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/simple-chart) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/simple-chart/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/simple-chart)

## Usage

```html
<script>
   import '@forter/simple-chart';
</script>

<fc-simple-chart data=[{"dataLabel":"Data Overtime","labels":["07 Jan 2023","08 Jan 2023","09 Jan 2023","10 Jan 2023","11 Jan 2023","12 Jan 2023","13 Jan 2023"],"data":["21559.00","23703.00","19262.00","17870.00","18619.00","16565.00","16621.00"]},{"dataLabel":"Data Overtime (Previous)","labels":["08 Dec 2022","09 Dec 2022","10 Dec 2022","11 Dec 2022","12 Dec 2022","13 Dec 2022","14 Dec 2022"],"data":["37697.00","40348.00","46923.00","64907.00","32150.00","31274.00","31211.00"]}]>
</fc-simple-chart>
```

## Properties

| Property     | Attribute    | Type                            | Default  | Description                                      |
|--------------|--------------|---------------------------------|----------|--------------------------------------------------|
| `colors`     | `colors`     | `any[]`                         |          | Array of HEX colors for the main and preceding datasets. |
| `data`       | `data`       | `any[]`                         |          | An array of datasets to be plotted in the chart. |
| `options`    | `options`    | `{}`                            | null     | Options to extend or override the internal chart options. |
| `tooltipPos` | `tooltipPos` | `"center" \| "left" \| "right"` | "center" | Sets the position of the tooltip along the data point. |
| `type`       | `type`       | `"line" \| "bar"`               | "line"   | Sets the type of the chart.                      |
npm package: @forter/skeleton
Description: Skeleton Loader from Forter Components
Author: Forter Developers
Latest version: 3.4.1

# fc-skeleton

Placeholder for waiting for content to be loaded.

## Usage
```html
<script>
   import '@forter/skeleton';
</script>

<fc-skeleton>
</fc-skeleton>
```

## Properties

| Property      | Attribute     | Type                                             | Default | Description                                  |
|---------------|---------------|--------------------------------------------------|---------|----------------------------------------------|
| `columns`     | `columns`     | `number`                                         | 2       | Numbers of columns to display in table type. |
| `duplication` | `duplication` | `number`                                         | 2       | Numbers of cards to duplicate.               |
| `type`        | `type`        | `"line" \| "circle" \| "block" \| "card" \| "line-chart" \| "pie-chart" \| "bar-chart"` | "line"  | Skeleton loader type.                        |

## CSS Custom Properties

| Property                                 | Description                                      |
|------------------------------------------|--------------------------------------------------|
| `--fc-skeleton-animation-duration`       | skeleton animation duration in seconds. default: `10s` |
| `--fc-skeleton-base-color`               | skeleton base color. default: `#f6f7f8`          |
| `--fc-skeleton-block-height`             | block skeleton's height. default: `80px`         |
| `--fc-skeleton-border-radius`            | line border radius. default: `2px`               |
| `--fc-skeleton-line-height`              | line skeleton's height. default: `10px`          |
| `--fc-skeleton-margin-bottom`            | line margin bottom. default: `12px`              |
| `--fc-skeleton-margin-top`               | line margin top. default: `5px`                  |
| `--fc-skeleton-pulse-color`              | skeleton pulse color. default: `#edeef1`         |
| `--fc-skeleton-table-body-base-color`    | table skeleton's body base color. default: `var(--fc-gray-200)` |
| `--fc-skeleton-table-header-base-color`  | table skeleton's header base color. default: `var(--fc-gray-300)` |
| `--fc-skeleton-table-header-height`      | table skeleton's header height. default: `50px`  |
| `--fc-skeleton-table-header-pulse-color` | table skeleton's header pulse color. default: `var(--fc-gray-400)` |
npm package: @forter/sortable
Description: sortable from Forter Components
Author: Forter Developers
Latest version: 1.1.0

# fc-sortable

An element by Forter
<!-- Author: Gilad Feder <gilad.feder@forter.com> -->

## Usage

```html
<script>
   import '@forter/sortable';
</script>

<fc-sortable .items="${[1,2,3,4]}">
   <fc-card size="small" class="draggable"> Sort1 </fc-card>
   <fc-card size="small" class="draggable"> Sort2 </fc-card>
   <fc-card size="small" class="draggable"> Sort3 </fc-card>
   <fc-card size="small" class="draggable"> Sort4 </fc-card>
</fc-sortable>
```

## Properties

| Property   | Attribute  | Type      | Description                |
|------------|------------|-----------|----------------------------|
| `disabled` | `disabled` | `boolean` | If the element is disabled |
| `filter`   | `filter`   | `string`  | item class to hide         |
| `items`    | `items`    | `any[]`   | If the element is disabled |
| `sortBy`   | `sortBy`   | `string`  | item class to hide         |

## Events

| Event     |
|-----------|
| `reorder` |

## CSS Custom Properties

| Property                       | Description                     |
|--------------------------------|---------------------------------|
| `--fc-sortable-disabled-color` | disabled color. example: `gray` |
npm package: @forter/text-highlight
Description: text-highlight from Forter Components
Author: Forter Developers
Latest version: 1.0.2

# fc-text-highlight

An element by Forter
<!-- Author: Omer Anati <omer.anati@forter.com> -->

## Usage

```html
<script>
   import '@forter/text-highlight';
</script>

<fc-text-highlight text="omerikikoo" highlight="ik">
</fc-text-highlight>
```

## Properties

| Property    | Attribute   | Type     | Default | Description           |
|-------------|-------------|----------|---------|-----------------------|
| `highlight` | `highlight` | `string` | ""      | The text to highlight |
| `text`      | `text`      | `string` | ""      | The text to display   |

## CSS Custom Properties

| Property                                        | Description            |
|-------------------------------------------------|------------------------|
| `--fc-text-highlight-font-color`                | color.                 |
| `--fc-text-highlight-font-weight`               | font weight.           |
| `--fc-text-highlight-letter-spacing`            | letter spacing.        |
| `--fc-text-highlight-unhighlighted-font-color`  | highlight font color.  |
| `--fc-text-highlight-unhighlighted-font-weight` | highlight font weight. |