dsfr_paragraph-2.1.x-dev/templates/layout-paragraphs-builder-component-menu.html.twig

{{ attach_library('dsfr_paragraph/component_list') }}

{% macro type( type, svg_icons ) %}
  {% set svg_path = type.id|replace({'dsfr_': ''}) %}
  <a{{ type.link_attributes.setAttribute('href', type.url) }}>
    {% if type.image %}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  style="fill: var(--background-action-high-blue-france); width:24px; height: 24px; margin-right: 7px">
        <path d="{{ svg_icons[svg_path] }}"/>
      </svg>
    {% endif %}
    {{ type.label }}
  </a>    
{% endmacro %}

{% macro type_lpb( type, svg_icons ) %}
  <div class="lpb-component-list__item type-{{type.id}}">{{ _self.type( type, svg_icons ) }}</div>
{% endmacro %}

{% macro components( types, svg_icons, component_filter = [], other = [] ) %}
  <div class="lpb-component-list__group">
    {% if types.layout %}
    <div class="lpb-component-list__group--layout">
    {% endif %}
    {% for type in types.layout %}
      <div class="lpb-component-list__item type-{{type.id}} is-layout">{{ _self.type( type, svg_icons ) }}</div>
    {% endfor %}
    {% if types.layout %}
    </div>
    {% endif %}
    {% if types.content %}
    <div class="lpb-component-list__group--content">
    {% endif %}
    {% for type in types.content %}

      {% if other|length > 0 and type.id not in other %}
        {{ _self.type_lpb( type, svg_icons ) }} 
      {% elseif type.id in component_filter %}
        {{ _self.type_lpb( type, svg_icons ) }}
      {% endif %}

    {% endfor %}
    {% if types.content %}
    </div>
    {% endif %}
  </div>
{% endmacro %}


{% set svg_default = 'M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H20C20.5523 5 21 5.44772 21 6V10.1707C21 10.4953 20.8424 10.7997 20.5774 10.9872C20.3123 11.1746 19.9728 11.2217 19.6668 11.1135C19.4595 11.0403 19.2355 11 19 11C17.8954 11 17 11.8954 17 13C17 14.1046 17.8954 15 19 15C19.2355 15 19.4595 14.9597 19.6668 14.8865C19.9728 14.7783 20.3123 14.8254 20.5774 15.0128C20.8424 15.2003 21 15.5047 21 15.8293V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H19V17C16.7909 17 15 15.2091 15 13C15 10.7909 16.7909 9 19 9V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z' %}
{% set svg_icons = {
    'default': svg_default,
    'accordions': 'M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM4 10V19H20V10H4ZM4 8H20V5H4V8Z',
    'alert': 'M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.4091 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72191 12.7772 2.84815 12.865 3.00017ZM4.20471 19.0002H19.7932L11.9989 5.50017L4.20471 19.0002ZM10.9989 16.0002H12.9989V18.0002H10.9989V16.0002ZM10.9989 9.00017H12.9989V14.0002H10.9989V9.00017Z',
    'badges': 'M13 0v9h8L11 24v-9H4l9-15Zm-2 7.22L7.532 13H13v4.394L17.263 11H11V7.22Z',
    'block': svg_default,
    'callout': 'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 11v2h-2v-2h2Zm0-8v6h-2V7h2Z',
    'ckeditor': 'M20 2C20.5523 2 21 2.44772 21 3V6.757L19 8.757V4H5V20H19V17.242L21 15.242V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20ZM21.7782 8.80761L23.1924 10.2218L15.4142 18L13.9979 17.9979L14 16.5858L21.7782 8.80761ZM13 12V14H8V12H13ZM16 8V10H8V8H16Z',
    'code': 'M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18Zm-1 2H4v14h16V5Zm-5.116 2-3.64 10H9.116l3.64-10h2.128Zm1.58 1.464L20 12l-3.536 3.536-1.414-1.415L17.172 12 15.05 9.879l1.414-1.415Zm-8.928 0L8.95 9.88 6.828 12l2.122 2.121-1.414 1.415L4 12l3.536-3.536Z',
    'highlight': 'M5 3v18H3V3h2Zm10 13v2H7v-2h8Zm6-5v2H7v-2h14Zm0-5v2H7V6h14Z',
    'image': 'M15 8V4H5V20H19V8H15ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM11 9.5C11 10.3284 10.3284 11 9.5 11C8.67157 11 8 10.3284 8 9.5C8 8.67157 8.67157 8 9.5 8C10.3284 8 11 8.67157 11 9.5ZM17.5 17L13.5 10L8 17H17.5Z',
    'link': 'M13.0605 8.11073L14.4747 9.52494C17.2084 12.2586 17.2084 16.6908 14.4747 19.4244L14.1211 19.778C11.3875 22.5117 6.95531 22.5117 4.22164 19.778C1.48797 17.0443 1.48797 12.6122 4.22164 9.87849L5.63585 11.2927C3.68323 13.2453 3.68323 16.4112 5.63585 18.3638C7.58847 20.3164 10.7543 20.3164 12.7069 18.3638L13.0605 18.0102C15.0131 16.0576 15.0131 12.8918 13.0605 10.9392L11.6463 9.52494L13.0605 8.11073ZM19.778 14.1211L18.3638 12.7069C20.3164 10.7543 20.3164 7.58847 18.3638 5.63585C16.4112 3.68323 13.2453 3.68323 11.2927 5.63585L10.9392 5.98941C8.98653 7.94203 8.98653 11.1079 10.9392 13.0605L12.3534 14.4747L10.9392 15.8889L9.52494 14.4747C6.79127 11.741 6.79127 7.30886 9.52494 4.57519L9.87849 4.22164C12.6122 1.48797 17.0443 1.48797 19.778 4.22164C22.5117 6.95531 22.5117 11.3875 19.778 14.1211Z',
    'quote': 'M14 3a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8h4Zm0 2h-4a6 6 0 0 0-6 6c0 3.61 2.462 5.966 8 8.48V17h2a6 6 0 1 0 0-12Zm-2 2.5-2.506 3.75L12 15H9.295L6.75 11.25 9.295 7.5H12Zm4.5 0-2.506 3.75L16.5 15h-2.705l-2.545-3.75 2.545-3.75H16.5Z',
    'tabs': 'M6 7V4C6 3.44772 6.44772 3 7 3H13.4142L15.4142 5H21C21.5523 5 22 5.44772 22 6V16C22 16.5523 21.5523 17 21 17H18V20C18 20.5523 17.5523 21 17 21H3C2.44772 21 2 20.5523 2 20V8C2 7.44772 2.44772 7 3 7H6ZM6 9H4V19H16V17H6V9ZM8 5V15H20V7H14.5858L12.5858 5H8Z',
    'tags': 'M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z',
    'title': 'M17 11V4H19V21H17V13H7V21H5V4H7V11H17Z',
    'tooltip': 'M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-1-5h2v2h-2v-2Zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355Z'
} %}


{% set edition = ['dsfr_accordions', 'dsfr_ckeditor', 'dsfr_highlight', 'dsfr_image', 'dsfr_link','dsfr_tabs', 'dsfr_title', 'dsfr_quote'] %}
{% set information = ['dsfr_alert', 'dsfr_badges', 'dsfr_callout', 'dsfr_tooltip'] %}

{% set other = [] %}
{% set other = other|merge(edition) %}
{% set other = other|merge(information) %}

{% set all_types = types.layout|merge(types.content) %}


{{ status_messages }}
<div{{attributes}}>
	<h4 class="visually-hidden">{{ 'Add Item'|t }}</h4>
	{% if all_types|length > 1 %}
		<div class="lpb-component-list__search">
			<input class="lpb-component-list-search-input fr-input" type="text" placeholder="{{ 'Filtrer les items...'|t }}"/>
		</div>

		<div id="dsfr-components-accordions-group" class="fr-accordions-group">
			<section class="fr-accordion">
				<h3 class="fr-accordion__title">
					<button class="fr-accordion__btn" aria-expanded="true" aria-controls="accordion-dsfr-paragraph-layout-100">{{ 'Content edition'|t }}</button>
				</h3>
				<div class="fr-collapse" id="accordion-dsfr-paragraph-layout-100">{{ _self.components( types, svg_icons, edition ) }}</div>
			</section>
			<section class="fr-accordion">
				<h3 class="fr-accordion__title">
					<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-dsfr-paragraph-layout-300">{{ 'Information and alert'|t }}</button>
				</h3>
				<div class="fr-collapse" id="accordion-dsfr-paragraph-layout-300">{{ _self.components( types, svg_icons, information) }}</div>
			</section>
			<section class="fr-accordion">
				<h3 class="fr-accordion__title">
					<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-dsfr-paragraph-layout-500">{{ 'Others'|t }}</button>
				</h3>
				<div class="fr-collapse" id="accordion-dsfr-paragraph-layout-500">{{ _self.components( types, svg_icons, [], other ) }}</div>
			</section>
		</div>

    <div id="dsfr-components-all" class="fr-hidden">
      <div class="lpb-component-list__group">
        {% if types.layout %}
        <div class="lpb-component-list__group--layout">
        {% endif %}
        {% for type in types.layout %}
          <div class="lpb-component-list__item lreal-pb-component-list__item type-{{type.id}} is-layout">{{ _self.type( type, svg_icons ) }}</div>
        {% endfor %}
        {% if types.layout %}
        </div>
        {% endif %}
        {% if types.content %}
        <div class="lpb-component-list__group--content">
        {% endif %}
        {% for type in types.content %}
          <div class="lpb-component-list__item real-lpb-component-list__item type-{{type.id}}">{{ _self.type( type, svg_icons ) }}</div>
        {% endfor %}
        {% if types.content %}
        </div>
        {% endif %}
      </div>
    </div>

	{% else %}
		<div class="lpb-component-list__empty-message">
			{{ empty_message }}
		</div>
	{% endif %}
</div>