open-index/open-npm huggingface dataset:
npm package: @forter/accordion
Description: accordion from Forter Components
Author: Forter Developers
Latest version: 1.5.0

# fc-accordion

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

## Usage

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

<fc-accordion>
   <fc-accordion-category label="galaxy">
     S10
     S20
   </fc-accordion-category>
   <fc-accordion-category label="iphone">
     X
     XS
   </fc-accordion-category>
</fc-accordion>
```
  * ## Examples

```html
<!-- section example open -->
<fc-accordion>
   <fc-accordion-section open>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="2" total="4" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Integration Overview</span>
     </section>
     <div part="content">
       <fc-card>
         Accordion Content
       </fc-card>
       <fc-card>
         Accordion Content
       </fc-card>
     </div>
   </fc-accordion-section>
</fc-accordion>

<!-- section example -->
<fc-accordion>
   <fc-accordion-section>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="12" total="16" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Phase 1</span>
     </section>
     <div part="content">
       <fc-card>
         Accordion Content
       </fc-card>
       <fc-card>
         Accordion Content
       </fc-card>
     </div>
   </fc-accordion-section>
</fc-accordion>

<!-- disabled section example -->
<fc-accordion>
   <fc-accordion-section disabled>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="0" total="4" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Phase 2</span>
     </section>
     <div part="content">
     </div>
   </fc-accordion-section>
</fc-accordion>
```

## CSS Custom Properties

| Property                                       | Description                                      |
|------------------------------------------------|--------------------------------------------------|
| `--fc-accordion-section-background-color`      | header background color. example: `var(--pink-1)` |
| `--fc-accordion-section-border-color`          | border color. example: `var(--cyan-2)`           |
| `--fc-accordion-section-border-radius`         | border-radius. example: `10px`                   |
| `--fc-accordion-section-disabled-color`        | disabled font color. example: `var(--red-1)`     |
| `--fc-accordion-section-font-color`            | header font color. example: `var(--indigo-9)`    |
| `--fc-accordion-section-icon-color`            | arrow icon color. example: `var(--indigo-7)`     |
| `--fc-accordion-section-open-background-color` | open background color. example: `var(--indigo-1)` |
| `--fc-accordion-section-padding`               | section padding. example: `10px`                 |
npm package: @forter/avatar
Description: Avatar from Forter Components
Author: Forter Developers
Latest version: 4.1.0

# fc-avatar

Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

## Usage

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

<fc-avatar>
</fc-avatar>
```

## Examples

```html
<!-- Avatar Badge -->
<fc-avatar>
   <fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button>
</fc-avatar>
```

## Properties

| Property      | Attribute     | Type      | Default       | Description                                      |
|---------------|---------------|-----------|---------------|--------------------------------------------------|
| `abbr`        | `abbr`        | `string`  |               | two chars in the generated avatar.               |
| `alt`         | `alt`         | `string`  | "User Avatar" | alternative text for accessibility. example: `with` |
| `showRawText` | `showRawText` | `boolean` |               |                                                  |
| `src`         | `src`         | `string`  |               | URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` |

## Slots

| Name | Description           |
|------|-----------------------|
|      | avatar badge element. |

## CSS Custom Properties

| Property                             | Description                                      |
|--------------------------------------|--------------------------------------------------|
| `--fc-avatar-background-color`       | the color. default: `transparent`, example: `gold` |
| `--fc-avatar-font-size`              | abbr font size. default: `3em`, example: `18px`  |
| `--fc-avatar-hover-background-color` | the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)` |
| `--fc-avatar-size`                   | height and width. default: `48px`, example: `96px` |
npm package: @forter/card-list
Description: card-list from Forter Components
Author: Forter Developers
Latest version: 2.0.0

# fc-card-list

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

## Usage

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

<fc-card-list>
</fc-card-list>
```

## Properties

| Property               | Attribute | Type                                             | Description                                      |
|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `ROW_INTENTS`          |           | `{}`                                             |                                                  |
| `columns`              | `columns` | `any[]`                                          | Columns titles                                   |
| `getRowClass`          |           | `(rowClass: any, intent: any) => any`            |                                                  |
| `getSortedRows`        |           | `() => any`                                      |                                                  |
| `renderColumnsHeaders` |           | `() => TemplateResult`                           |                                                  |
| `renderData`           |           | `(intent: any, data: any) => TemplateResult`     |                                                  |
| `renderDataCell`       |           | `({ label, customRenderer }: { label: any; customRenderer: any; }) => any` |                                                  |
| `renderRows`           |           | `() => TemplateResult`                           |                                                  |
| `rows`                 | `rows`    | `any`                                            | Example: {<br />intent: 'disabled',<br />data: [{label: '1'}, {label: '2'}]<br />} |
| `sortBy`               | `sortBy`  | `any[]`                                          | This is an option to sort rows by a specific key of the rows data.<br />After providing this object the card-list will sort rows depending on it.<br />columnIndex is the index of column you wish to compare. I.e. if we have following columns list (['order', 'name', 'level'])<br />and we want to order by 'order' columns, columnIndex should be 0 (as its the first column on the list).<br />sortKey should be the key in the row's data we want to sort by. I.e. if a row's data is:<br />data: [{label: '1', value: 1}, {label: '2', value: 2}]<br />we can either sort by 'label' or by 'value'. The sortFunction should be accordingly to the key's type (number, string..) as in next example:<br />{<br />  columnIndex: 0,<br />  sortKey: 'value',<br />  sortFunction: (a,b) => {return a-b}<br />} |

## CSS Custom Properties

| Property                        | Description                     |
|---------------------------------|---------------------------------|
| `--fc-card-list-disabled-color` | disabled color. example: `gray` |
npm package: @forter/chart
Description: chart from Forter Components
Author: Forter Developers
Latest version: 6.5.1

# fc-chart

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

## Usage

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

<fc-chart
  config={"xAxisType":"SINGLE_TIME_FIELD","series":[{"seriesType":"LINE","label":"AGGS.APPROVED.LABEL","aggregation":{"key":"APPROVED","filters":{},"dimensions":[{"key":"TRANS_TIME","label":"DIMENSION.TRANS_TIME.LABEL"}],"data":[{"dimensions":["2021/07/02"],"value":10,"formattedValue":10,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/05"],"value":11,"formattedValue":11,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/11"],"value":10,"formattedValue":10,"aggregationLabel":"Approved Tx"},{"dimensions":["2021/07/18"],"value":12,"formattedValue":12,"aggregationLabel":"Approved Tx"}]}}]}
>
</fc-chart>
```

## Properties

| Property                         | Attribute                        | Type      | Default |
|----------------------------------|----------------------------------|-----------|---------|
| `config`                         | `config`                         | `{}`      | {}      |
| `configHash`                     | `configHash`                     | `string`  |         |
| `currentBuilder`                 |                                  | `any`     |         |
| `disabled`                       | `disabled`                       | `boolean` | false   |
| `isLegendBoxOpen`                | `isLegendBoxOpen`                | `boolean` | true    |
| `isLegendExpandIndicatorVisible` | `isLegendExpandIndicatorVisible` | `boolean` | true    |
| `isLegendHidden`                 | `isLegendHidden`                 | `boolean` | false   |
| `loading`                        | `loading`                        | `boolean` | false   |
| `previewMode`                    | `preview-mode`                   | `boolean` | false   |
| `type`                           | `type`                           | `string`  | "line"  |

## CSS Custom Properties

| Property                    | Description                     |
|-----------------------------|---------------------------------|
| `--fc-chart-disabled-color` | disabled color. example: `gray` |
npm package: @forter/checkbox-search
Description: checkbox-search from Forter Components
Author: Forter Developers
Latest version: 1.3.6

# fc-searchable-checkbox-list

An element by Forter
<!-- Author: danirter <93980096+danirter@users.noreply.github.com> -->

## Usage

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

<fc-checkbox-search limitItems="3" placeholder="Search in 300 sites" .searchabledata="${[{'key': 'Forter', 'value': 10}, {'key': 'Forterinio', 'value': 30}, {'key': 'ForterDeluxe', 'value': 110}, {'key': 'ForterDev', 'value': 100}]}">
</fc-checkbox-search>
```

## Properties

| Property         | Attribute        | Type                                 | Default |
|------------------|------------------|--------------------------------------|---------|
| `defaultValues`  | `defaultValues`  | `any[]`                              |         |
| `disabled`       | `disabled`       | `any`                                |         |
| `filteredItems`  | `filteredItems`  | `any`                                |         |
| `limitItems`     | `limitItems`     | `number`                             | 10      |
| `loading`        | `loading`        | `TemplateResult \| TemplateResult[]` |         |
| `memory`         | `memory`         | `any`                                |         |
| `placeholder`    | `placeholder`    | `any`                                |         |
| `searchPhrase`   | `searchPhrase`   | `string`                             | ""      |
| `searchabledata` | `searchabledata` | `any`                                |         |
| `selectedItems`  | `selectedItems`  | `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/checkbox-search-dropdown
Description: checkbox-search-dropdown from Forter Components
Author: Forter Developers
Latest version: 1.1.5

# fc-checkbox-search-dropdown

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

## Usage

```html
<script>
   import '@forter/checkbox-search-dropdown';
</script>

<fc-checkbox-search-dropdown>
</fc-checkbox-search-dropdown>
```

## Properties

| Property        | Attribute       | Type      | Default                                        | Description                |
|-----------------|-----------------|-----------|------------------------------------------------|----------------------------|
| `defaultValues` | `defaultValues` | `any[]`   |                                                |                            |
| `disabled`      | `disabled`      | `boolean` | false                                          | If the element is disabled |
| `isListOpen`    | `isListOpen`    | `boolean` | false                                          |                            |
| `selectedItems` | `selectedItems` | `any[]`   |                                                |                            |
| `selectionText` | `selectionText` | `string`  | "Multiple selection applied, choose from list" |                            |
| `values`        | `values`        | `any[]`   |                                                |                            |

## CSS Custom Properties

| Property                                       | Description                     |
|------------------------------------------------|---------------------------------|
| `--fc-checkbox-search-dropdown-disabled-color` | disabled color. example: `gray` |
npm package: @forter/chips
Description: chips from Forter Components
Author: Forter Developers
Latest version: 1.3.9

# fc-chips

An element for wrapping collections of chips
<!-- Author: Yuval Krinberg <yuval.krinberg@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-chips--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%2Fchips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/chips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/chips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/chips)

## Usage

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

<fc-chips>
     <fc-chip closeable chip-id="approve" intent="success" filter="true">Approved</fc-chip>
     <fc-chip closeable chip-id="pending" intent="primary" filter="true">Pending</fc-chip>
     <fc-chip closeable chip-id="nr" intent="cancel" filter="true">Not Reviewed</fc-chip>
     <fc-chip closeable chip-id="selected" selected="true"><fc-icon icon="edit"></fc-icon>Selected</fc-chip>
</fc-chips>
```

## Properties

| Property     | Attribute    | Type                              | Default | Description                             |
|--------------|--------------|-----------------------------------|---------|-----------------------------------------|
| `menu`       | `menu`       | `boolean`                         |         | whether or not to display the chip menu |
| `searchtext` | `searchtext` | `string`                          | ""      | filter chips in the menu                |
| `type`       | `type`       | `"normal" \| "stacked" \| "more"` |         | what way to display the chips           |
| `values`     | `values`     | `any[]`                           |         | what way to display the chips           |

## Events

| Event    | Description                      |
|----------|----------------------------------|
| `change` | when the chips are added/removed |

## CSS Custom Properties

| Property               | Description                                |
|------------------------|--------------------------------------------|
| `--fc-chips-flex-wrap` | chips container flex-wrap. example: `wrap` |
| `--fc-chips-gap`       | chips gap. example: `5px`                  |
npm package: @forter/collapse
Description: Collapse from Forter Components
Author: Forter Developers
Latest version: 4.0.7

# fc-collapse

Provides a collapsable container
<!-- Author: Benny Powers <benny.powers@forter.com> -->

## Usage

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

<fc-collapse>
<fc-button slot="toggle" \@click="${toggle}">Toggle</fc-button>
    <ul>
      <li>Vertically</li>
      <li>Collapsed</li>
      <li>Content</li>
    </ul>
</fc-collapse>
```

## Properties

| Property     | Attribute    | Type          | Default | Description                        |
|--------------|--------------|---------------|---------|------------------------------------|
| `container`  |              | `HTMLElement` |         | The container element              |
| `contents`   |              | `HTMLElement` |         | The contents element               |
| `horizontal` | `horizontal` | `boolean`     | false   | If the collapse opens horizontally |
| `opened`     | `opened`     | `void`        |         |                                    |

## Slots

| Name | Description         |
|------|---------------------|
|      | collapsible content |

## CSS Custom Properties

| Property                           | Description                                      |
|------------------------------------|--------------------------------------------------|
| `--fc-collapse-animation-timing`   | animation timing for the collapse. default: `0.3s` |
| `--fc-collapse-container-overflow` | container's overflow. default: `hidden`          |
npm package: @forter/confirm
Description: confirm from Forter Components
Author: Forter Developers
Latest version: 1.3.0

# fc-confirm

An element by Forter
<!-- Author: Michael Gehtman <michael.gehtman@forter.com> -->

## Usage

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

<fc-confirm opened>
  Are you sure you want to continue?
</fc-confirm>
```

## Examples

```html
<!-- confirm-button-text -->

<fc-confirm opened title="example" confirm-button-text="Foo">confirm text is changed!</fc-confirm>

<!-- cancel-button-text -->

<fc-confirm opened title="example" cancel-button-text="Foo">cancel text is changed</fc-confirm>

<!-- hide-confirm-button -->

<fc-confirm opened title="example" hide-confirm-button>confirm text is changed!</fc-confirm>

<!-- hide-cancel-button -->

<fc-confirm opened title="example" hide-cancel-button>confirm text is changed!</fc-confirm>

<!-- confirm -->

<p> Open: </p>
<fc-button
  onclick="
  FC.confirm({
    title: 'Example',
    content: 'Are you a Forker?',
    confirmButtonText: 'Yes',
    cancelButtonText: 'No'
  })
.then((confirmed)=> confirmed ?
    FC.toast.success({ message: 'You answered yes!'}) :
    FC.toast.danger({ message: 'You answered no!'})
)"
>
Click me!
</fc-button>
<fc-confirm></fc-confirm>
```

## Properties

| Property            | Attribute             | Type      | Default   | Description                                  |
|---------------------|-----------------------|-----------|-----------|----------------------------------------------|
| `cancelButtonText`  | `cancel-button-text`  | `string`  | "Cancel"  | the text displayed inside the cancel modal   |
| `confirmButtonText` | `confirm-button-text` | `string`  | "Confirm" | the text displayed inside the confirm button |
| `height`            | `height`              | `string`  | null      | Optional height for the modal                |
| `hideCancelButton`  | `hide-cancel-button`  | `string`  | false     | Hides the cancel button if ture              |
| `hideConfirmButton` | `hide-confirm-button` | `string`  | false     | Hides the confirm button if ture             |
| `opened`            | `opened`              | `boolean` | false     | whether the confirm is open                  |
| `title`             | `title`               | `string`  | null      | the text displayed inside the confirm button |

## Events

| Event        | Description                               |
|--------------|-------------------------------------------|
| `on-cancel`  | when the cancel/close button was clicked  |
| `on-confirm` | when the confirm button was clicked       |
| `on-opened`  | when opening a confirm you get this event |

## CSS Custom Properties

| Property              | Description |
|-----------------------|-------------|
| `--fc-confirm-height` | height      |
| `--fc-confirm-width`  | width       |
npm package: @forter/create
Description: Creates github actions flows and linters
Author: Yonatan Gelberd
Latest version: 2.0.0


# Forter create 

Forter create gives set of  github actions (such as auto merge, cintinues integration, etc.) and linting rules which  you can install and start using. 
  
## Installing
  To use forter-create, install package globally:
> npm i -g @forter/create

## Usage

After installing package globally, run following in existing project:
  

> forter-create


You will see following:

> ? Select generator  
> ❯ ◯ GitHub Actions    
>   ◯ Linters

After selecting which generator you want to install you will be asked which sub groups you want to install in each generator (i.e. ESLint sub group in Linters generator).
npm package: @forter/date-picker
Description: date-picker from Forter Components
Author: Forter Developers
Latest version: 1.6.1

# fc-date-picker

An element by Forter
<!-- Author: dondrich <david.ondrich@forter.com> -->

## Usage

```html
<script>
   import '@forter/date-picker';
</script>

<fc-date-picker>
</fc-date-picker>
```

## Examples
```html
<!-- Timestamp Int Dates -->
<fc-date-picker .dates="${[1588305600000]}">
</fc-date-picker>

<!-- Timestamp Preset Dates -->
<fc-date-picker .dates="${['1588305600000']}">
</fc-date-picker>
```

## Properties

| Property        | Attribute       | Type                                | Default      | Description                                      |
|-----------------|-----------------|-------------------------------------|--------------|--------------------------------------------------|
| `dates`         | `dates`         | `any[]`                             |              | Dates picked. example: [1626886021472]           |
| `disabled`      | `disabled`      | `"" \| "disabled"`                  |              |                                                  |
| `format`        | `format`        | `string`                            | "MM-DD-YYYY" | Date Format. default: `MM-DD-YYYY`, example: `DD MMM YYYY HH:mm` |
| `invalid`       | `invalid`       | `boolean`                           | false        | Whether the input is invalid                     |
| `pickerOptions` | `pickerOptions` | `any`                               | {}           | Options for calendar to override the defaults    |
| `required`      | `required`      | `boolean`                           | false        | If the input is required                         |
| `right`         | `right`         | `"right-opening" \| "left-opening"` |              |                                                  |
| `valid`         | `valid`         | `boolean`                           | false        | Whether the input is valid                       |
| `value`         | `value`         | `string`                            |              | Date Format. example: `1588305600000`            |

## CSS Custom Properties

| Property                        | Description                         |
|---------------------------------|-------------------------------------|
| `--fc-date-picker-border-color` | input border color. example: `pink` |
| `--fc-date-picker-color`        | text color. example: `pink`         |
npm package: @forter/directives
Description: lit-html directives for Forter Components
Author: Forter Developers
Latest version: 3.2.2

<div style="color:black;background-color:cornsilk;border-bottom:4px solid orange;padding:14px 20px">⚠️ Forter Web Components are in development. APIs are subject to change without notice. ⚠️</div>

# `@forter/directives`
npm package: @forter/drawer-item
Description: drawer-item from Forter Components
Author: Forter Developers
Latest version: 1.4.47

# fc-drawer-item

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

## Usage

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

<fc-drawer-item name="Partner" description="Portfolio fraud management for PSPs and partners" icon="partner">
</fc-drawer-item>
```

## Properties

| Property      | Attribute     | Type                     | Default | Description                                      |
|---------------|---------------|--------------------------|---------|--------------------------------------------------|
| `description` | `description` | `string`                 | ""      | The text at the body of the card                 |
| `icon`        | `icon`        | `string`                 | ""      | The icon of the card. example: `decision-dashboard`, default: `decision-dashboard` |
| `isFocus`     | `is-focus`    | `boolean`                | false   |                                                  |
| `name`        | `name`        | `string`                 | ""      | The text at the header of the card               |
| `selected`    | `selected`    | `TemplateResult \| null` |         |                                                  |

## CSS Custom Properties

| Property                            | Description                                      |
|-------------------------------------|--------------------------------------------------|
| `--fc-drawer-item-background-color` | Background color. default: `#fff`, example: `#bfb5f3` |
npm package: @forter/empty
Description: empty from Forter Components
Author: Forter Developers
Latest version: 1.1.1

# fc-empty

An element to present the user message when there is nothing to show :)
<!-- Author: Lirown <lgoldenberg@forter.com> -->

## Usage


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

<fc-empty>
</fc-empty>
```

## Properties

| Property      | Attribute     | Type                                             | Description                                      |
|---------------|---------------|--------------------------------------------------|--------------------------------------------------|
| `description` | `description` | `string`                                         | The element text for no data senario, example: `No Orders!` |
| `intent`      | `intent`      | `"apply" \| "warn" \| "success" \| "danger" \| "cancel" \| "primary" \| "secondary"` | intent color to emphasize the type of alert      |

## CSS Custom Properties

| Property                    | Description                     |
|-----------------------------|---------------------------------|
| `--fc-empty-color`          | color.                          |
| `--fc-empty-disabled-color` | disabled color. example: `gray` |
npm package: @forter/environment-card
Description: environment-card from Forter Components
Author: Forter Developers
Latest version: 1.1.1

# fc-environment-card

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

## Usage

```html
<script>
   import '@forter/environment-card';
</script>

<fc-environment-card>
</fc-environment-card>
```
npm package: @forter/environment-selector
Description: environment-selector from Forter Components
Author: Forter Developers
Latest version: 1.1.1

# fc-environment-selector

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

## Usage

```html
<script>
   import '@forter/environment-selector';
</script>

<fc-environment-selector>
</fc-environment-selector>
```
npm package: @forter/eslint-config
Description: Forter Components JavaScript Code Standards
Author: Yonatan Gelberd
Latest version: 1.4.6

# Linting ESLint
> Use [ESLint](https://eslint.org/) to lint your es6 code.

## 👨‍🏭Installation

- Install `@forter/eslint`
```bash
npm i @forter/eslint-config --save-dev
```

- Adjust your package.json with the following
  ```js
  {
    "scripts": {
      "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
      "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore"
    },
    "eslintConfig": {
      "extends": [
        "@forter/eslint-config"
      ]
    }
  }
  ```

## 👩‍🚀 What you get

Extends [`eslint-config-google`](https://github.com/google/eslint-config-google).

This will install [`@forter/eslint-config`](https://github.com/forter/web-components/blob/master/lib/eslint-config/index.js), a config based on google but allows for some specialities needed for Web Components.

- Apply linting to js and html files
- Apply linting for best practices
- Allow dynamic module imports
- Allow imports in test/demos from devDependencies
- Allow underscore dangle
- Do not prefer default exports
- Do not prefer no file extension

## 👨‍💻 Usage

Run:

- `npm run lint:eslint` to check if any file is not correctly formatted
- `npm run format:eslint` to auto format your files

```html
<script>
  export default {
    mounted() {
      const editLink = document.querySelector('.edit-link a');
      if (editLink) {
        const url = editLink.href;
        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/eslint-config/README.md';
      }
    }
  }
</script>
```
npm package: @forter/filter
Description: filter from Forter Components
Author: Forter Developers
Latest version: 1.8.3

# fc-filter

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

## Usage

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

<fc-filter>
</fc-filter>
```

## Examples

```html
<!-- TEXT -->
<fc-filter type="text"></fc-filter>

<!-- NUMBER -->
<fc-filter type="number"></fc-filter>

<!-- VALUES -->
<fc-filter type="values"></fc-filter>
```

## Properties

| Property   | Attribute  | Type      | Default | Description                                      |
|------------|------------|-----------|---------|--------------------------------------------------|
| `apply`    | `apply`    | `boolean` | false   |                                                  |
| `column`   | `column`   | `{}`      | {}      |                                                  |
| `dismiss`  | `dismiss`  | `boolean` | false   | Used from outside to tell the component that the popover it's<br />in has closed and that it should remove the changes |
| `flat`     | `flat`     | `boolean` | false   |                                                  |
| `renderer` | `renderer` | `any`     |         |                                                  |
| `reset`    | `reset`    | `boolean` | false   | Used from outside when a clear filter is selected, to tell<br />the component to clear itself up |
| `type`     | `type`     | `string`  | "text"  | The type                                         |

## Events

| Event           |
|-----------------|
| `column-filter` |

## CSS Custom Properties

| Property                     | Description                     |
|------------------------------|---------------------------------|
| `--fc-filter-disabled-color` | disabled color. example: `gray` |
npm package: @forter/first-loader
Description: first-loader from Forter Components
Author: Forter Developers
Latest version: 3.1.0

# fc-first-loader

Loader for an entire app

## Usage

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

<fc-first-loader></fc-first-loader>
```

## Properties

| Property | Attribute | Type     | Default  | Description                      |
|----------|-----------|----------|----------|----------------------------------|
| `icon`   | `icon`    | `string` | "forter" | Element's icon. example: `admin` |

## CSS Custom Properties

| Property                             | Description       |
|--------------------------------------|-------------------|
| `--fc-first-loader-background-color` | background colour |
npm package: @forter/highlight
Description: highlight from Forter Components
Author: Forter Developers
Latest version: 1.3.0

# fc-highlight

Display themed syntax highlighted code (JSON, HTML, CSS etc)
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

## Usage

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

<fc-highlight>
   {
     "b": 1,
     "c": null,
     "d": "a",
     "e": true
   }
</fc-highlight>
```

## Examples

```html
<!-- json -->
<fc-highlight>
   {"a": {"b": 1, "c": null, "d": "a", "e": false, "f": true, "h": 0 }}
</fc-highlight>

<!-- html -->
<fc-highlight>
   <div class="hero">
     <div class="hero"></div>
     <div class="hero"></div>
    </div>
</fc-highlight>

<!-- css -->
<fc-highlight>
   .super-class {
     font-size: 15px;
    }
</fc-highlight>

<!-- javascript -->
<fc-highlight>
   import html from 'lit-html
</fc-highlight>

<!-- yaml -->
<fc-highlight>
   includes:
    - goldi
    - ori
</fc-highlight>

<!-- bash -->
<fc-highlight>
   export TEST="123"
</fc-highlight>
```

## Properties

| Property        | Attribute  | Type                                             | Description                            |
|-----------------|------------|--------------------------------------------------|----------------------------------------|
| `codeInnerNode` |            | `any`                                            | inner code element                     |
| `codeNode`      |            | `any`                                            | code element                           |
| `content`       | `content`  | `string`                                         | code language to highlight             |
| `language`      | `language` | `"html" \| "bash" \| "javascript" \| "json" \| "css" \| "yaml"` | language of code language to highlight |

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | content to highlight. like `{"a": {"b": 1, "c": null, "d": "a", "e": false, "f": true, "h": 0 }}` |

## CSS Custom Properties

| Property                     | Description                                      |
|------------------------------|--------------------------------------------------|
| `--fc-highlight-attr-color`  | attr color. example: `var(--fc-yellow-900)`, default: `var(--fc-orange-900)` |
| `--fc-highlight-null-color`  | null color. example: `var(--fc-yellow-900)`, default: `var(--fc-red-600)` |
| `--fc-highlight-tag-color`   | tag color. example: `var(--fc-yellow-900)`, default: `var(--fc-green-900)` |
| `--fc-highlight-value-color` | value color. example: `var(--fc-yellow-900)`, default: `var(--cyan-9)` |
npm package: @forter/hotkey
Description: hotkey from Forter Components
Author: Forter Developers
Latest version: 1.4.4

# fc-hotkey

An element to simply add keyboard shortcuts to buttons and inputs :)
<!-- Author: Lirown <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-hotkey--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%2Fhotkey) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/hotkey/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/hotkey) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/hotkey/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/hotkey) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/hotkey/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/hotkey)

## Usage

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

<fc-hotkey keys="ctrl+z">
   <fc-button onclick="alert('here')"> Hotkey </fc-button>
</fc-hotkey>
```


## Examples

```html
<!-- focus -->
<fc-hotkey keys="ctrl+z">
   <fc-input></fc-input>
</fc-hotkey>

<!-- keypress -->
<fc-hotkey onkeypress="alert('keypress hotkey');" keys="ctrl+z">
    Hotkeys without slotted
</fc-hotkey>
```

<!-- parent -->
<fc-hotkey keys="ctrl+c">
   <fc-button onclick="alert('parent');">
     <fc-hotkey keys="ctrl+p" parent="true"></fc-hotkey>
     parent
   </fc-button>
</fc-hotkey>

## Properties

| Property      | Attribute     | Type                                        | Description                                      |
|---------------|---------------|---------------------------------------------|--------------------------------------------------|
| `description` | `description` | `string`                                    | Text of the shortcut for the hotkeys modal       |
| `keys`        | `keys`        | `"ctrl+c" \| "ctrl+shift+c" \| "esc,space"` | key combination that will activate button click or input focus. |
| `parent`      | `parent`      | `boolean`                                   | Indicate if parent shoulbe be clicked instead slotted |

## Events

| Event      |
|------------|
| `keypress` |

## CSS Custom Properties

| Property                 | Description |
|--------------------------|-------------|
| `--fc-hotkey-text-color` | color.      |
npm package: @forter/hotkeys-map
Description: hotkeys-map from Forter Components
Author: Forter Developers
Latest version: 1.4.0

# fc-hotkeys-map

An element to display all different shortcuts in the screen
<!-- Author: oweingart <oweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/hotkeys-map';
</script>

<fc-hotkeys-map>
<fc-hotkey keys="ctrl+a+1" description="Popup alert with ctrl+a+1" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+a');">button with ctrl+a+1 hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+b" description="Popup alert with ctrl+b" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+b');">button with ctrl+b hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+c" description="Popup alert with ctrl+c" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+c');">button with ctrl+c hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+d" description="Popup alert with ctrl+d" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+d');">button with ctrl+d hotkey</fc-button>
</fc-hotkey>
</fc-hotkeys-map>
```

## Examples

```html
<!-- Open with button -->
<div>
<fc-hotkeys-map>
   <fc-button onclick="this.parentElement.opened = true;">Show shortcut</fc-button>
</fc-hotkeys-map>
<fc-hotkey keys="ctrl+a" description="Popup alert with ctrl+a" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+a');">button with ctrl+a hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+b" description="Popup alert with ctrl+b" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+b');">button with ctrl+b hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+c" description="Popup alert with ctrl+c" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+c');">button with ctrl+c hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+d" description="Popup alert with ctrl+d" style="margin-bottom: 20px">
    <fc-button onclick="alert('button with ctrl+d');">button with ctrl+d hotkey</fc-button>
</fc-hotkey>
</div>
```

## Properties

| Property        | Attribute | Type      | Default | Description                                      |
|-----------------|-----------|-----------|---------|--------------------------------------------------|
| `columns`       | `columns` | `number`  | 1       | Number of columns in the modal                   |
| `currentHotKey` |           | `any`     |         |                                                  |
| `keys`          | `keys`    | `string`  |         | Key to open the menu for shortcuts example: `ctrl+m` |
| `opened`        | `opened`  | `boolean` |         | If the modal is opened                           |
npm package: @forter/html-viewer
Description: html-viewer from Forter Components
Author: Forter Developers
Latest version: 1.2.7

# fc-html-viewer

Display themed syntax highlighted HTML.
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

⚠️⚠️ This component is deprecated and might be unstable. please use [fc-highlight](https://www.npmjs.com/package/@forter/highlight). ⚠️⚠️

## Usage

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

<fc-html-viewer>
   <fc-avatar attr="test"></fc-avatar>
</fc-html-viewer>
```

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | markup of HTML to prettify. example: `<fc-avatar abbr="test"></fc-avatar>` |

## CSS Custom Properties

| Property                       | Description                                      |
|--------------------------------|--------------------------------------------------|
| `--fc-html-viewer-attr-color`  | attr color. example: `var(--yellow-9)`, default: `var(--orange-9)` |
| `--fc-html-viewer-null-color`  | null color. example: `var(--yellow-9)`, default: `var(--red-9)` |
| `--fc-html-viewer-tag-color`   | tag color. example: `var(--yellow-9)`, default: `var(--green-9)` |
| `--fc-html-viewer-value-color` | value color. example: `var(--yellow-9)`, default: `var(--cyan-9)` |
npm package: @forter/join-us
Description: join-us from Forter Components
Author: Forter Developers
Latest version: 1.2.6

# fc-join-us

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

## Usage

```html
<script>
   import '@forter/join-us';
</script>

<fc-join-us>
</fc-join-us>
```

## Properties

| Property   | Attribute  | Type      | Default               | Description      |
|------------|------------|-----------|-----------------------|------------------|
| `from`     | `from`     | `string`  | "Asia/Jerusalem"      | Location of User |
| `open`     | `open`     | `boolean` | true                  | Redirect link    |
| `redirect` | `redirect` | `string`  | "https://forter.dev/" | Redirect link    |

## CSS Custom Properties

| Property                      | Description                     |
|-------------------------------|---------------------------------|
| `--fc-join-us-disabled-color` | disabled color. example: `gray` |
npm package: @forter/json-viewer
Description: json-viewer from Forter Components
Author: Forter Developers
Latest version: 2.1.7

# fc-json-viewer

Display themed syntax highlighted JSON.
<!-- Author: Benny Powers <benny.powers@forter.com> -->


⚠️⚠️ This component is deprecated and might be unstable. please use [fc-highlight](https://www.npmjs.com/package/@forter/highlight). ⚠️⚠️

## Usage
```html
<script>
  import '@forter/json-viewer';
</script>

<fc-json-viewer>
   {"foo": "foo", "bar": 10, "baz": null, "biff": false}
</fc-json-viewer>
```

## Properties

| Property    | Attribute   | Type  | Description                                      |
|-------------|-------------|-------|--------------------------------------------------|
| `object`    | `object`    | `any` | object to display. example: `{"ori": { "goldi": 1, "gilad":2 } }` |
| `whitelist` | `whitelist` | `any` | list of keys to show. example: `["foo"]`         |

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | markup of JSON to prettify. example: `{"foo": "foo", "bar": 10, "baz": null, "biff": false}` |

## CSS Custom Properties

| Property                         | Description                                      |
|----------------------------------|--------------------------------------------------|
| `--fc-json-viewer-boolean-color` | boolean color. example: `var(--yellow-9)`, default: `var(--cyan-9)` |
| `--fc-json-viewer-key-color`     | key color. example: `var(--yellow-9)`, default: `var(--orange-9)` |
| `--fc-json-viewer-null-color`    | null color. example: `var(--yellow-9)`, default: `var(--red-9)` |
| `--fc-json-viewer-number-color`  | number color. example: `var(--yellow-9)`, default: `var(--green-9)` |
| `--fc-json-viewer-string-color`  | string color. example: `var(--yellow-9)`, default: `var(--cyan-9)` |
npm package: @forter/kpi-v2
Description: kpi-v2 from Forter Components
Author: Forter Developers
Latest version: 1.2.1

# fc-kpi-v2

An element by Forter
<!-- Author: Tomer Vainstein <tomer.vainstein@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/experimental-kpi-v2--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%2Fkpi-v2) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/kpi-v2/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/kpi-v2) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/kpi-v2/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/kpi-v2) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/kpi-v2/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/kpi-v2)

## Usage

```html
<script>
   import '@forter/kpi-v2';
</script>

<fc-kpi-v2>
</fc-kpi-v2>
```

## Properties

| Property       | Attribute      | Type                   | Description                                      |
|----------------|----------------|------------------------|--------------------------------------------------|
| `config`       | `config`       | `{}`                   | Widget configuration object                      |
| `icon`         |                | `"" \| TemplateResult` |                                                  |
| `isBarType`    |                | `TemplateResult`       |                                                  |
| `switchArrow`  | `switchArrow`  | `boolean`              | Reversing the state of the period over period arrow (trend) |
| `switchColors` | `switchColors` | `boolean`              | Reversing the state of the period over period color (trend) |

## Events

| Event       |
|-------------|
| `linkClick` |
npm package: @forter/lint-staged-config
Description: lint staged config
Author: Forter Developers
Latest version: 1.1.2

# Linting lint-staged 
> Use [lint-staged](https://github.com/okonet/lint-staged) to make sure your code you enter pass linters.

## 👨‍🏭Installing

- Install `@forter/lint-staged-config`
  ```bash
  npm add --save-dev @forter/lint-staged-config
  ```
- Then add `.lintstagedrc.js` like so
> ```js
> module.exports = {
>   ...require("@forter/lint-staged-config"),
> };
> ```
If you've installed `@forter/lint-staged-config` locally within your project, just set your `lint-staged` config to:

## 👩‍🚀  What you get

This will install [`@forter/lint-staged-config`](https://github.com/forter/web-components/blob/master/lib/lint-staged-config/index.js), a config based on forter will run different checks on different files commit 


## 👨‍💻 Usage

If you don't want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.lintstagedrc.js`:

```json
"@forter/lint-staged-config"
```

An example configuration repository is available [here](https://github.com/azz/lint-staged-config).

> Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.lintstagedrc.js` file and export the modifications, e.g:
>
> ```js
> module.exports = {
>   ...require("@forter/lint-staged-config"),
> };
> ```