Feld: Text-Feld

{% set id = id ??? html_id('field') %}
{% set type = type ??? 'unknown' %}
{% set stacked = stacked ?? true %}
{% set hidden = hidden ?? false %}
{% set repeatable = repeatable ?? false %}
{% set required = required ?? false %}
{% set controls = controls ?? false %}
{% set controls = control|default ? [control] : (controls is not list ? [controls] : controls) %}
{% set multiple = controls|length > 1 or groups|default or newGroup|default %}
{% set tag = multiple ? 'fieldset' : 'div' %}
{% set labelTag = multiple ? 'legend' : 'label' %}
{% set labelPosition = labelPosition ?? 'above' %}
{% set subfieldLabelPosition = subfieldLabelPosition ?? 'above' %}
{% set instructionsPosition = instructionsPosition ?? 'below' %}
{% set descriptionId = 'instructions' | namespaceInputId(id) %}
{% set errors = errors ?? [] %}
{% set errorsId = 'errors' | namespaceInputId(id) %}

{% set describedBy = html_classes({
  (descriptionId): instructions ?? false,
  (errorsId): errors|length > 0,
}) %}

<{{ tag }} {{ html_attributes({
  id: id,
  class: 'field',
  hidden: hidden,
}, attrs ?? {}) }}>
  {% if label|default %}
    <{{ labelTag }} {{ html_attributes({
      class: ['field__label', labelPosition == 'hidden' ? 'u-hidden-visually'],
      for: labelTag == 'label' ? 'control' | namespaceInputId(id),
    }) }}>
      {% include '@label' with {
        text: label,
        required: required,
      } only %}
    </{{ labelTag }}>
  {% endif %}

  {% if instructions|default and instructionsPosition == 'above' %}
    <div class="field__instructions" id="{{ descriptionId }}">
      {% include '@notice' with {
        type: 'instructions',
        text: instructions,
      } only %}
    </div>
  {% endif %}

  <div {{ html_attributes({
    id: errorsId,
    class: 'field__errors',
    hidden: errors|length == 0,
    'data-error-key': errorKey ?? false,
  }) }}>
    {% include '@notice' with {
      type: 'error',
      text: errors | join('<br>'),
    } only %}
  </div>

  {% for name, value in hiddenInputs|default %}
    {{ hiddenInput(name, value.value ?? value, value.attrs ?? {}) }}
  {% endfor %}

  {% if html|default %}
    {{ html | componentize }}
  {% endif %}

  {% if groups|default or newGroup|default %}
    <div class="field__groups">
      {% macro group(group, id, deletable = false, withBorder = true) %}
        {% set groupId = group.id | default(html_id('group')) | namespaceInputId(id) %}

        <div {{ html_attributes({
          id: groupId,
          class: {
            'field__group': true,
            'field__group--with-counter': deletable,
            'field__group--with-border': withBorder,
            'field__group--inline': not withBorder,
          },
        }) }}>
          {% if deletable %}
            <div class="field__group-delete">
              {% include '@icon-button' with {
                icon: 'cross',
                text: 'Delete row' | t('site'),
                attrs: {
                  'data-field-delete-group': true,
                },
              } only %}
            </div>
          {% endif %}

          {% for name, value in group.hiddenInputs|default([]) %}
            {{ hiddenInput(name, value.value ?? value, value.attrs ?? {}) }}
          {% endfor %}

          {% for row in group.fields %}
            {% set rowId = loop.index %}

            <div class="field__group-row">
              {% for subfield in row %}
                {% include '@field' with subfield | merge({
                  id: subfield.id | default("#{rowId}-#{loop.index}") | namespaceInputId(groupId),
                  attrs: {
                    class: 'field__group-field',
                  },
                }) only %}
              {% endfor %}
            </div>
          {% endfor %}
        </div>
      {% endmacro %}

      {% for group in groups %}
        {{ _self.group(group, id, repeatable, labelPosition != 'hidden') }}
      {% endfor %}
    </div>

    {% if newGroup|default %}
      <div class="field__add-group">
        {% include '@icon-button' with {
          icon: 'plus',
          text: newGroup.label,
          attrs: {
            'data-field-add-group': 'template' | namespaceInputId(id) | namespaceInputId(),
            'data-field-add-group-max': repeatable.max ?? null,
          },
        } only %}
      </div>

      <template id="{{ 'template' | namespaceInputId(id) }}">
        {{ _self.group(newGroup, id, repeatable, labelPosition != 'hidden') }}
      </template>
    {% endif %}
  {% elseif controls|default %}
    <div {{ html_attributes({
      class: {
        'field__controls': true,
        'field__controls--stacked': stacked,
        'field__controls--not-narrow': stacked is same as('not-narrow'),
      },
    }) }}>
      {% for control in controls %}
        <div class="field__control">
          {% if control.use|default %}
            {% include control.use with control | withoutKey('use') | merge({
              id: (multiple ? "control-#{loop.index}" : 'control') | namespaceInputId(id),
              describedBy: describedBy,
              required: control.required ?? required ?? false,
              invalid: invalid ?? errors|length > 0,
              name: control.name ?? name ?? false,
            }) only %}
          {% else %}
            {{ control.html | default('') | raw }}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="field__footer">
    {% if instructions|default and instructionsPosition == 'below' %}
      <div class="field__instructions" id="{{ descriptionId }}">
        {% include '@notice' with {
          type: 'instructions',
          text: instructions,
        } only %}
      </div>
    {% endif %}

    {% if action|default %}
      <div class="field__action">
        {% include '@icon-button' with action only %}
      </div>
    {% endif %}
  </div>
</{{ tag }}>