# Selection-Action-Panel

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Form
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/selection-action-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-action-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/selection-action-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/selection-action-panel/api)
- GitHub: https://github.com/sbb-design-systems/lyne-components

## Elemente

- `sbb-selection-action-panel`: It displays a panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.

## Verwandte Komponenten

- Ähnlich: [Selection-Expansion-Panel](https://digital.sbb.ch/de/design-system/lyne/components/selection-expansion-panel/index.md)

## Übersicht

### Was macht die Komponente?
Das Selection-Action-Panel verbindet ein Checkbox-Panel oder ein Radio-Button-Panel mit einer Aktion, z.B. einem Button. So können Nutzende eine Option auswählen und direkt eine zugehörige Aktion auslösen.

### Wann soll die Komponente eingesetzt werden?
* Wenn zu einer Option eine eigene Aktion gehört, z.B. Details anzeigen oder die Option bearbeiten.
* Wenn Optionen und Aktionen in einer Liste zusammen dargestellt werden sollen.

### Regeln.
* Selection-Action-Panels werden innerhalb einer Checkbox-Group oder Radio-Button-Group eingesetzt.
* Pro Panel gibt es genau eine Aktion. Sie muss sich klar von der Auswahl der Option unterscheiden.
* Die Aktion soll verständlich beschriftet sein. Bei einem Button nur mit Icon braucht es eine Beschriftung für Screenreader.
* Sollen zusätzliche Inhalte aufklappen, wird das Selection-Action-Panel mit dem Selection-Expansion-Panel kombiniert.

## Implementation (Web Components, Englisch)

The `<sbb-selection-action-panel>` component wraps either a [sbb-checkbox-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-checkbox-panel--docs)
or a [sbb-radio-button-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-panel--docs) and an action element (e.g. an `<sbb-secondary-button>` or a native `button`).

```html
<sbb-selection-action-panel>
  <sbb-radio-button-panel>
    Value
    <span slot="subtext">Subtext</span>
  </sbb-radio-button-panel>

  
  <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  
  <button class="sbb-action">...</button>
</sbb-selection-action-panel>
```

### With expansion panel

It is possible to combine the usage of the `<sbb-selection-action-panel>` and the [sbb-selection-expansion-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-expansion-panel--docs).

```html
<sbb-selection-expansion-panel>
  <sbb-selection-action-panel>
    <sbb-radio-button-panel color="milk" borderless>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>

    <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  </sbb-selection-action-panel>

  
  <div slot="content">Inner Content</div>
</sbb-selection-expansion-panel>
```

### In a group

The selection panel can also be used inside a [sbb-radio-button-group](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-group--docs)
or a [sbb-checkbox-group](https://lyne-elements.app.sbb.ch/?path=/docs/elements-checkbox-group--docs).

With `<sbb-radio-button-group>`:

```html
<sbb-radio-button-group>
  <sbb-selection-action-panel>
    <sbb-radio-button-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-panel>
  ...
</sbb-radio-button-group>
```

With `<sbb-checkbox-group>`:

```html
<sbb-checkbox-group>
  <sbb-selection-action-panel>
    <sbb-checkbox-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-checkbox-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-panel>
  ...
</sbb-checkbox-group>
```

### Style

The component inherits its style from the slotted panel component (`<sbb-checkbox-panel>` or `<sbb-radio-button-panel>`).

## API (Web Components, Englisch)

#### class: `SbbSelectionActionPanelElement`, `sbb-selection-action-panel`

##### Properties

| Name    | Attribute | Privacy | Type                                                            | Default | Description              |
| ------- | --------- | ------- | --------------------------------------------------------------- | ------- | ------------------------ |
| `group` | -         | public  | `SbbRadioButtonGroupElement \| SbbCheckboxGroupElement \| null` |         | Group element if present |
| `panel` | -         | public  | `SbbCheckboxPanelElement \| SbbRadioButtonPanelElement \| null` |         | Input panel element      |

##### Slots

| Name    | Description                                                                                                |
| ------- | ---------------------------------------------------------------------------------------------------------- |
|         | Use this slot to render a `sbb-checkbox-panel` or `sbb-radio-button-panel` element and the action element. |
| `badge` | Use this slot to render a `sbb-card-badge` component.                                                      |