bootstrap_italia-8.x-0.x-dev/components/field/field-reference--format-label--component-badge.html.twig
components/field/field-reference--format-label--component-badge.html.twig
{#
/**
* @file
* Default theme implementation for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
* - field_container_vertical_padding: Automatic vertical padding.
* - field_container_vertical_margin: Automatic vertical margin.
* - field_label_tag: choose title tag, default('div').
* - field_view_mode: View mode.
*
* - background (string) (default: 'primary')
* - options ["primary", "secondary", "success", "danger", "warning", "white", "dark" ]
* - text_color (string) (default: '')
* - options ["primary", "secondary", "success", "danger", "warning", "muted",
* "white", "dark"]
* - assistive_text (string) (default: '')
* - Optional assistive text for badge label
* - rounded_pill (boolean) (default: false)
* - Rounded effect
* - outline (boolean) (default: false)
* - Enable outiline background color
*
* @see template_preprocess_field()
*
* @ingroup themeable
*
* Examples:
{% include '@bi-field/field-reference--format-label--component-badge.html.twig' with {
background: 'primary',
rounded_pill: true,
outline: false,
} %}
*/
#}
{% apply spaceless %}
{% set _background = background|default('primary') %}
{% set _text_color = text_color|default('') %}
{% set _assistive_text = assistive_text|default('') %}
{% set _rounded_pill = rounded_pill ?? false %}
{% set _outline = outline ?? false %}
{% set container_classes = [
'field',
'field--type-' ~ field_type|clean_class,
'field--name-' ~ field_name|clean_class,
'field--entity-' ~ entity_type|clean_class,
multiple ? 'field-multiple',
'field--label-' ~ label_display|clean_class,
field_container_vertical_padding is not empty and field_view_mode == 'full' ? field_container_vertical_padding,
field_container_vertical_margin is not empty and field_view_mode == 'full' ? field_container_vertical_margin,
] %}
{% set container_with_label_classes = [
label_display == 'inline' ? 'd-flex'
]|merge(container_classes) %}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes.addClass(container_classes|merge(['d-flex','flex-wrap'])) }}>
{% for item in items %}
<div{{ item.attributes.addClass('pb-2') }}>
{%- set item_badge -%}
{% include '@bi-bcl/badge/badge.html.twig' with {
label: item.content['#type'] == 'link' ? item.content['#title'] : item.content['#plain_text'],
background: _background,
text_color: _text_color,
assistive_text: _assistive_text,
rounded_pill: _rounded_pill,
outline: _outline,
badge_classes: ['me-2'],
} %}
{% endset %}
{% if item.content['#type'] == 'link' %}
{% if item.content['#options'].attributes is iterable %}
{{ link(item_badge, item.content['#url'], item.content['#options'].attributes) }}
{% else %}
{{ link(item_badge, item.content['#url']) }}
{% endif %}
{% else %}
{{ item_badge }}
{% endif %}
</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes.addClass(container_classes) }}>
{%- set item_badge -%}
{% include '@bi-bcl/badge/badge.html.twig' with {
label: item.content['#type'] == 'link' ? item.content['#title'] : item.content['#plain_text'],
background: _background,
text_color: _text_color,
assistive_text: _assistive_text,
rounded_pill: _rounded_pill,
outline: _outline,
badge_classes: ['me-2'],
} %}
{% endset %}
{% if item.content['#type'] == 'link' %}
{% if item.content['#options'].attributes is iterable %}
{{ link(item_badge, item.content['#url'], item.content['#options'].attributes) }}
{% else %}
{{ link(item_badge, item.content['#url']) }}
{% endif %}
{% else %}
{{ item_badge }}
{% endif %}
</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(container_with_label_classes) }}>
{% block label %}
{% include '@bi-field/_partial.field-label.html.twig' %}
{% endblock %}
{% if multiple %}
<div class="d-flex flex-wrap">
{% endif %}
{% for item in items %}
<div{{ item.attributes.addClass('pb-2') }}>
{%- set item_badge -%}
{% include '@bi-bcl/badge/badge.html.twig' with {
label: item.content['#type'] == 'link' ? item.content['#title'] : item.content['#plain_text'],
background: _background,
text_color: _text_color,
assistive_text: _assistive_text,
rounded_pill: _rounded_pill,
outline: _outline,
badge_classes: ['me-2'],
} %}
{% endset %}
{% if item.content['#type'] == 'link' %}
{% if item.content['#options'].attributes is iterable %}
{{ link(item_badge, item.content['#url'], item.content['#options'].attributes) }}
{% else %}
{{ link(item_badge, item.content['#url']) }}
{% endif %}
{% else %}
{{ item_badge }}
{% endif %}
</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>{# End main container. #}
{% endif %}
{% endapply %}
