Multiselect

// src/components/elements/multiselect/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/multiselect
additionalProperties: false
properties:
  label:
    type: object
    properties:
      title:
        type: string
      id:
        type: string
  select_all_option:
    type: string
    format: html
  options:
    type: array
    items:
      type: string
      format: html
  error:
    type: string
  class:
    type: string
required:
  - label
  - options

// src/components/elements/multiselect/mocks.yaml

label:
  title: Thema
  id: topic-fieldset-id
options:
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#checkbox'
    label:
      title: Topic 1
      attributes:
        for: input1
    children:
      attributes:
        id: input1
        name: input1
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#checkbox'
    label:
      title: Topic 2
      attributes:
        for: input2
    children:
      attributes:
        id: input2
        name: input2
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#checkbox'
    label:
      title: Topic 3
      attributes:
        for: input3
    children:
      attributes:
        id: input3
        name: input3

// src/components/elements/multiselect/multiselect.html.twig

<fieldset class="MultiSelect js-MultiSelect{% if class %} {{ class }}{% endif %}">
  <legend id="{{ label.id }}" class="MultiSelect-label u-typo-copy-small">{{ label.title }}</legend>
  <button type="button" aria-labelledby="{{ label.id }}" class="MultiSelect-summary u-typo-copy js-MultiSelect-summary" data-placeholder="Alle"></button>
  <div class="MultiSelect-dropdown js-MultiSelect-dropdown">
    <div class="MultiSelect-items">
      {% for option in options %}
        {{ option|raw }}
      {% endfor %}
      <span class="js-Multiselect-resetButton MultiSelect-resetButton u-hiddenVisually">
        {% include "@elements/icon/icon.html.twig" with {
          name: "cross",
          class: "MultiSelect-resetButtonIcon"
        } only %}
        Zurücksetzen
      </span>
    </div>
  </div>
  <div class="MultiSelect-error u-typo-copy-small-bold" role="alert">{{ error }}</div>
  {#
    To hide the dropbox as fast as possible if javascript is enabled in the browser
    <script> tag should be placed inside <fieldset> since the whole <fieldset> element will be placed in the grid and
    if <script> is outside of <fieldset> it will be count as a separated grid child element
  #}
  <script>
    document.querySelector('.js-MultiSelect-summary[aria-labelledby="{{ label.id }}"] + .js-MultiSelect-dropdown').classList.add("u-hiddenVisually");
    document.querySelector('.js-MultiSelect-summary[aria-labelledby="{{ label.id }}"]').setAttribute("aria-expanded", "false");
  </script>
</fieldset>