selectify-1.0.3/templates/select--selectify-dual.html.twig

{#
/**
 * @file
 * Theme override for a select element.
 *
 * Available variables:
 * - attributes: HTML attributes for the <select> tag.
 * - options: The <option> element children.
 *
 * @see template_preprocess_select()
 */
#}
{% apply spaceless %}
{% set wrapper_id = "wrapper-" ~ attributes.id %}
{% set clean_field_name = field_name|replace({'_': '-', '[]': ''}) %}
{% set show_none = true %}
{% if not is_views %}
  {% if (max_selected > 1) and (not is_required) %}
    {% set show_none = false %}
  {% endif %}
{% endif %}
{# Combine default Drupal classes with Selectify classes #}
{% set all_classes = [
  'wrapper-selectify',
  wrapper_id,
  'views-exposed-form__item',
  'js-form-item',
  'form-item',
  'js-form-type-select',
  'form-type--select'
] %}
{# Add extra Views-specific classes if this is an exposed filter #}
{% if is_views %}
  {% set all_classes = all_classes|merge([
    'views-exposed-form__item--preceding-actions',
    'js-form-item-status',
    'form-item--status'
  ]) %}
{% endif %}
{# Merge with existing Drupal classes from `attributes.class` #}
{% set all_classes = all_classes|merge(attributes.class|default([])) %}
<div id="{{ wrapper_id }}" class="{{ all_classes|join(' ') }}">
  <div class="selectify selectify-select selectify-select-dual-list selectify-dual-widget"
     tabindex="0"
     role="group"
     aria-labelledby="edit-{{ clean_field_name }}--label"
     data-target-id="{{ unique_id }}"
     {% if max_selected %}data-max-selections="{{ max_selected }}"{% endif %}
     data-drupal-selector="edit-{{ clean_field_name }}"
     data-field-name="{{ clean_field_name }}"
     data-multiple="{{ is_multiple ? 'true' : 'false' }}"
     data-tracking="selectify-widget"
     {% if has_description %}aria-describedby="edit-{{ clean_field_name }}--description"{% endif %}
     {% if not has_label %}
       aria-label="{{ aria_label }}"
     {% endif %}
     {% if not is_views %}
       data-placeholder="{{ placeholder|default('') }}"
       aria-required="{{ is_required ? 'true' : 'false' }}"
     {% endif %}>

    <div class="dual-container">
    <a href="#edit-{{ clean_field_name }}-selected" class="visually-hidden-focusable skip-to-selected">
      {{ 'Skip to selected options'|t }}
    </a>
    <div id="edit-{{ clean_field_name }}-available"
         class="selectify-available-display-dual dual-available"
         role="listbox"
         aria-label="{{ 'Available options'|t }}"
         {% if is_multiple %}aria-multiselectable="true"{% endif %}>
      <div class="options-inner">
      {% for option in options %}
        {% if option.value != '_none' or show_none %}
          <div class="selectify-available-one-option dual-available-option dual-item{% if option.value == '_none' %} selectify-placeholder-option{% endif %}"
               role="{% if option.value == '_none' %}presentation{% else %}option{% endif %}"
               id="option-{{ clean_field_name }}-{{ option.value|selectify_clean_id }}"
               data-value="{{ option.value }}"
               tabindex="-1">
            <span class="option-label{% if option.value == '_none' %} selectify-placeholder-label{% endif %}">{{ option.label }}</span>
            {% if option.value != '_none' %}
            <span class="dual-available-arrow">
            {% include '@selectify/partials/svg/_arrow_circle_right.html.twig' %}
            </span>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
      </div>
    </div>
    <div id="edit-{{ clean_field_name }}-selected"
         class="selectify-selected-display-dual dual-selected"
         role="listbox"
         aria-label="{{ 'Selected options'|t }}"
         {% if is_multiple %}aria-multiselectable="true"{% endif %}>
      {% set selected_options = (options is iterable ? options|filter(o => o.selected) : []) %}
      {% if selected_options|length > 0 %}
      <div class="selectify-selected-options dual-inner">
        {% for selected in selected_options %}

        <div class="selectify-selected-one-option dual-item" data-value="{{ selected.value }}">
          <label class="option-label">{{ selected.label }}</label>
          <span class="dual-selected-arrow">
          {% include '@selectify/partials/svg/_arrow_circle_left.html.twig' %}
          </span>
        </div>
       {% endfor %}
      </div>
      {% endif %}
    </div>
    </div>
    <div class="selectify-select-footer dual-footer">
      <button type="button" class="selectify-clear-all dual-clear-all">
        <span class="icon">
          {% include '@selectify/partials/svg/_clear_all.html.twig' %}
        </span>
        <span class="clear-label">{{ 'Clear All'|t }}</span>
      </button>
    </div>
    {% if max_selected is not null and max_selected is defined and max_selected is not empty %}
    <div class="selectify-max-selection-message hide" role="alert">
      {{ 'You can only select up to @count options.'|t({'@count': max_selected}) }}
    </div>
    {% endif %}
    <div class="visually-hidden" role="status" aria-live="polite" aria-atomic="true">
      <!-- JavaScript will update this with selection count -->
    </div>
  </div>
  <!-- Hidden select for form submission -->
  <select {{ attributes.addClass('selectify-visually-hidden') }} aria-hidden="true" tabindex="-1"{% if is_multiple %} size="{{ views_attributes['size'] }}"{% endif %}>
    {% for option in options %}
      {% if option.value != '_none' or show_none %}
        <option value="{{ option.value }}" {{ option.selected ? 'selected="selected"' }}>{{ option.label }}</option>
      {% endif %}
    {% endfor %}
  </select>
</div>
{% endapply %}