seeds_ui-1.0.x-dev/templates/seeds-widgets-paragraph-formatter--accordion.html.twig

{#
/**
 * @file
 * Seeds Widgets Paragraph Formatter: Accordion
 *
 * This template renders paragraphs in accordion layout.
 *
 * Available variables:
 * - items: List of all the field items.
 * - widget_type: The type of widget to render.
 * - settings: All formatter settings.
 * - attributes: HTML attributes.
 * - label: The label for the field.
 */
#}

{%
  set classes = [
    'seeds-widgets-formatter',
    'accordion',
  ]
%}
{% set icon_style = icon_style|default('plus') %}
{% set icon_color = icon_color|default('#10244C') %}
{% set raduis = raduis|default(4) %}

<div{{ attributes.addClass(classes) }}>
  <div class="seeds-ui-accordion">
    {% for item in items %}
      <div x-data="{ expanded: false }" class="accordion-item" :class="{ 'active': expanded }" data-key="item-{{ loop.index0 }}" style="border-radius:{{raduis}}px">
        {% if item['#paragraph'].field_seeds_widget_title.value %}
          <div @click="expanded = ! expanded" class="accordion-header">
            <div class="accordion-title grow">{{ item['#paragraph'].field_seeds_widget_title.value }}</div>
            <div class="accordion-icon">
              {% if icon_style == 'plus' %}
                <svg class="accordion-plus-icon" width="24" height="24" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g id="Plus">
                    <rect id="Rectangle 412" x="10" y="3" width="2" height="16" rx="1" fill="{{ icon_color }}"/>
                    <rect id="Rectangle 413" x="3" y="12" width="2" height="16" rx="1" transform="rotate(-90 3 12)" fill="{{ icon_color }}"/>
                  </g>
                </svg>
              {% endif %}
              {% if icon_style == 'arrow' %}
                <svg class="accordion-arrow-icon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g id="arrow-down">
                    <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M3.46967 7.46967C3.76256 7.17678 4.23744 7.17678 4.53033 7.46967L12 14.9393L19.4697 7.46967C19.7626 7.17678 20.2374 7.17678 20.5303 7.46967C20.8232 7.76256 20.8232 8.23744 20.5303 8.53033L12.5303 16.5303C12.2374 16.8232 11.7626 16.8232 11.4697 16.5303L3.46967 8.53033C3.17678 8.23744 3.17678 7.76256 3.46967 7.46967Z" fill="{{ icon_color }}"/>
                  </g>
                </svg>
              {% endif %}
            </div>
          </div>
        {% endif %}
        {% if item.content %}
          <div >
            <div class="accordion-content" x-show="expanded" x-collapse>
              {{ item.content }}
            </div>
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>