bootstrap_italia-8.x-0.x-dev/components/components-2/dropdown/dropdown.html.twig

{#
/**
 * @file
 * Template for dropdown component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/dropdown/
 * Latest revision: v2.8.7
 *
 * Parameters:
 * - label (string) (default: '')
 * - tag (string) (default: 'button')
 *   - options ["button", "a", "span"]
 * - id (string) (default: 'dropdown-random')
 *   - Mandatory id
 * - outline (boolean) (default: false)
 *   - Enable outline
 * - variant (string) (default: 'dropdown')
 *   - options ["primary", "secondary", "success", "danger", "warning", "white", "dark" ]
 * - dropdown_dark (boolean) (default: false)
 *   - Enable dark mode
 * - size (string) (default: '')
 *   - options ["xs", "sm", "lg"]
 * - disabled (boolean) (default: false)
 *   - Enable disabled feature
 * - assistive_text (string) (default: '')
 * - direction (string) (default: 'down')
 *   - options ["up", "end", "down", "start"]
 * - icon_before (string) (default: '')
 *   - options ["it-icon-name"]
 * - icon_before_rounded (boolean) (default: false)
 * - icon_color (string) (default: '')
 * - hide_block_after (boolean) (default: false)
 *   - If enabled hide block after
 * - button_classes (array) (default: '')
 * - button_attributes (obj attribute) (default: '')
 *   - Object with extra attributes
 * - dropdown_classes (array) (default: '')
 * - dropdown_attributes (obj attribute) (default: '')
 *   - Object with extra attributes
 * - label_classes (array) (default: '')
 *
 * Examples:
    {% embed '@bi-bcl/dropdown/dropdown.html.twig' with {
      variables: value,
    } %}
      {% block dropdownContent %}
        {% include '@bi-bcl/list/menu-recursive.html.twig' with {
          menu_name: menu_name,
          items: items,
          attributes: attributes,
          wrapper_component: true
        } %}
      {% endblock %}
    {% endembed %}
 *
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _label = label|default('') %}
  {% set _tag = tag|default('button') %}
  {% set _id = id|default(random()) %}
  {% set _outline = outline ?? false %}
  {% set _variant = variant|default('dropdown') %}
  {% set _dropdown_dark = dropdown_dark ?? false %}
  {% set _size = size|default('') %}
  {% set _disabled = disabled ?? false %}
  {% set _assistive_text = assistive_text|default('') %}
  {% set _direction = direction|default('down') %}
  {% set _icon_before = icon_before|default('') %}
  {% set _icon_before_rounded = icon_before_rounded ?? false %}
  {% set _icon_color = icon_color|default('') %}
  {% set _hide_block_after = hide_block_after ?? false %}
  {% set _button_classes = button_classes|default('') %}
  {% set _button_attributes = button_attributes|default('') %}
  {% set _dropdown_classes = dropdown_classes|default('') %}
  {% set _dropdown_attributes = dropdown_attributes|default('') %}
  {% set _label_classes = label_classes|default('') %}

  {# Set options #}
  {% set _classes = [
    'dropdown-toggle',
    _icon_before_rounded ? 'btn-icon'
  ] %}

  {% if _button_classes is not empty %}
    {% set _classes = _classes|merge(button_classes) %}
  {% endif %}

  {% if _button_attributes is empty %}
    {% set button_attributes = create_attribute() %}
  {% endif %}
  {% set button_attributes = button_attributes
    .setAttribute('data-bs-toggle', 'dropdown')
    .setAttribute('aria-haspopup', 'true')
    .setAttribute('aria-expanded', 'false')
  %}

  {# Dropdown tooltip settings #}
  {% if _icon_color is empty %}
    {% set _icon_color = _variant == 'light' or _variant == 'white' or _variant == 'dropdown' ? 'primary' : 'white' %}
  {% endif %}
  {% set _id = 'dropdown-'~_id %}

  {% if _dropdown_attributes is empty %}
    {% set dropdown_attributes = create_attribute() %}
  {% endif %}
  {% set dropdown_attributes = dropdown_attributes.addClass('dropdown-menu') %}
  {% if _dropdown_classes is not empty %}
    {% set dropdown_attributes = dropdown_attributes.addClass(_dropdown_classes) %}
  {% endif %}

  {% if _dropdown_dark %}
    {% set dropdown_attributes = dropdown_attributes.addClass('dark') %}
  {% endif %}

  {% set dropdown_attributes = dropdown_attributes.setAttribute('aria-labelledby', _id) %}

  {# Component #}
  {% if _direction != 'down' %}
    <div class="dropdown drop{{ _direction }}">
  {% endif %}

    {% embed '@bi-bcl/button/button.html.twig' with {
      label: _label,
      tag: _tag,
      url: '#',
      id: _id,
      type: 'button',
      outline: _outline,
      variant: _variant,
      size: _size,
      disabled: _disabled,
      assistive_text: _assistive_text,
      button_classes: _classes,
      button_attributes: button_attributes,
      label_classes: _label_classes
    } %}

      {% block before %}
        {% if _icon_before is not empty and _direction != 'start' %}
          {% if _icon_before_rounded %}
            <span class="rounded-icon">
          {% endif %}
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: _icon_before,
              size: _size,
              color: _icon_before_rounded ? 'primary' : _icon_color,
              icon_classes: [ _tag == 'a' ? 'me-lg-1' ],
            } %}
          {% if _icon_before_rounded %}
            </span>
          {% endif %}
        {% endif %}

        {% if _direction == 'start' %}
          {% include '@bi-bcl/icon/icon.html.twig' with {
            name: 'it-expand',
            size: _size,
            color: _icon_color,
            icon_classes: ['icon-expand']
          } %}
        {% endif %}

      {% endblock %}

      {% block after %}
        {% if not _hide_block_after %}
          {% include '@bi-bcl/icon/icon.html.twig' with {
            name: 'it-expand',
            size: _size,
            color: _icon_color,
            icon_classes: ['icon-expand']
          } %}
        {% endif %}
      {% endblock %}
    {% endembed %}

    <div{{ dropdown_attributes }}>
      {% block dropdownContent %}{% endblock %}
    </div>

  {% if _direction != 'down' %}
    </div>
  {% endif %}
{% endapply %}