npm package: @forter/group
Description: group from Forter Components
Author: Forter Developers
Latest version: 1.2.6

# fc-group

An element by Forter
<!-- Author: Leonid Haimov <leonid.haimov@forter.com> -->

## Usage

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

<fc-group gap="10">
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
  <fc-card slot="items">5</fc-card>
  <fc-card slot="items">6</fc-card>
  <fc-card slot="items">7</fc-card>
  <fc-card slot="items">8</fc-card>
  <fc-card slot="items">9</fc-card>
</fc-group>
```

## Examples
```html
<!-- one item -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
</fc-group>
<!-- two items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
</fc-group>
<!-- three items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
</fc-group>
<!-- four items -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
</fc-group>
<!-- popup component -->
<fc-group>
  <div slot="title">Ori's favorite song</div>
  <div slot="right-title">0/6</div>
  <div slot="popup">Hello, good bye!</div>
  <fc-card slot="items">1</fc-card>
  <fc-card slot="items">2</fc-card>
  <fc-card slot="items">3</fc-card>
  <fc-card slot="items">4</fc-card>
</fc-group>
```

## Properties

| Property                | Attribute       | Type     | Default | Description                                      |
|-------------------------|-----------------|----------|---------|--------------------------------------------------|
| `currentPage`           | `currentPage`   | `number` | 0       | Current page                                     |
| `fcGroupItemsContainer` |                 | `any`    |         |                                                  |
| `gap`                   | `gap`           | `number` | 10      | Gap between items                                |
| `groupItemsContainer`   |                 | `any`    |         |                                                  |
| `groupItemsSlot`        |                 | `any`    |         |                                                  |
| `items`                 | `items`         | `any[]`  |         | Calculated items                                 |
| `lastPage`              | `lastPage`      | `number` | 0       | Last page                                        |
| `overflowContainer`     |                 | `any`    |         |                                                  |
| `paddingOffset`         | `paddingOffset` | `number` | 10      | Increases the padding of the overflow element, and offsets it back to the place where it should be<br />mainly used to show shadows on the overflow element. |
| `pagesInfo`             |                 | `any`    |         |                                                  |
| `popupSlot`             |                 | `any`    |         |                                                  |
| `sliderContainer`       |                 | `any`    |         |                                                  |

## Events

| Event        | Description                                 |
|--------------|---------------------------------------------|
| `pageupdate` | Custom event fired when the page is changed |

## CSS Custom Properties

| Property                                  |
|-------------------------------------------|
| `--fc-group-page-button-background-color` |
| `--fc-group-page-button-color`            |
| `--fc-group-popup-background-color`       |
| `--fc-group-popup-border-radius`          |
| `--fc-group-popup-box-shadow`             |
| `--fc-group-popup-color`                  |
| `--fc-group-popup-font`                   |
| `--fc-group-popup-padding`                |
| `--header-font`                           |
| `--header-text-color`                     |