# Selection-Expansion-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-expansion-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-expansion-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/selection-expansion-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/selection-expansion-panel/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-455663
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/selection-expansion-panel

## Elemente

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

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Das Selection-Expansion-Panel umschliesst ein [Checkbox-Panel](https://digital.sbb.ch/de/design-system/lyne/components/checkbox-panel/) oder [Radio-Button-Panel](https://digital.sbb.ch/de/design-system/lyne/components/radio-button-panel/) und zeigt zusätzlichen Inhalt zum Panel an.

### Wann soll die Komponente eingesetzt werden?
* Wenn zu einer Option zusätzlicher Inhalt angezeigt werden soll, z.B. Sub-Optionen oder Informationen.

### Regeln.
* Der Inhalt öffnet sich, sobald das Panel gewählt wird. Alternativ wird er immer angezeigt.
* Ein Klick auf den Inhaltsbereich ändert die Auswahl nicht.
* Selection-Expansion-Panels werden nur innerhalb einer [Checkbox-Group](https://digital.sbb.ch/de/design-system/lyne/components/checkbox-group/) oder [Radio-Button-Group](https://digital.sbb.ch/de/design-system/lyne/components/radio-button-group/) eingesetzt.
* Eine Option mit eigener Aktion kombiniert das Selection-Expansion-Panel mit dem [Selection-Action-Panel](https://digital.sbb.ch/de/design-system/lyne/components/selection-action-panel/).

## Implementation (Web Components, Englisch)

The `<sbb-selection-expansion-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) that can toggle a content section.

The content section can be opened by checking `<sbb-checkbox-panel>` or selecting the `<sbb-radio-button-panel>`.
Additionally, clicking on all the upper area sets the checked state and therefore opens the content;
clicking on the content area does not toggle anything.

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-expansion-panel>
    <sbb-radio-button-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <span slot="suffix">
        <sbb-icon></sbb-icon>
        <span class="sbb-text-xs sbb-text--bold">CHF</span>
        <span class="sbb-text-m sbb-text--bold">40.00</span>
      </span>
    </sbb-radio-button-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-radio-button-group>
```

#### With `<sbb-checkbox-group>`

```html
<sbb-checkbox-group>
  <sbb-selection-expansion-panel>
    <sbb-checkbox-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <span slot="suffix">
        <sbb-icon name="cross-small"></sbb-icon>
        <span class="sbb-text-xs sbb-text--bold">CHF</span>
        <span class="sbb-text-m sbb-text--bold">40.00</span>
      </span>
    </sbb-checkbox-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-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)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/selection-expansion-panel/api.md