selectify-1.0.3/templates/select--selectify-dropdown-searchable.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-dropdowns selectify-dropdown-searchable-widget"
     tabindex="0"
     role="combobox"
     aria-controls="edit-{{ clean_field_name }}-dropdown"
     aria-haspopup="listbox"
     aria-autocomplete="list"
     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 is_views %}
       data-drupal-selector="{{ views_attributes['data-drupal-selector'] }}"
       class="{{ views_attributes['class'] }}"
       {% if views_attributes['aria-invalid'] in ['true', 'false', 'grammar', 'spelling'] %}
         aria-invalid="{{ views_attributes['aria-invalid'] }}"
       {% endif %}
     {% else %}
       data-placeholder="{{ placeholder|default('') }}"
       aria-required="{{ is_required ? 'true' : 'false' }}"
     {% endif %}>

    <div class="selectify-selected-display">
      {% set selected_options = (options is iterable ? options|filter(o => o.selected) : []) %}
      {% if selected_options|length > 0 %}
      <div class="selectify-selected-options">
        {% for selected in selected_options %}
        <div class="selectify-selected-one-option" data-value="{{ selected.value }}">
          <span>{{ selected.label }}</span>
          <button class="remove-tag" type="button" aria-label="{{ 'Remove @label'|t({'@label': selected.label}) }}">
            {% include '@selectify/partials/svg/_delete.html.twig' %}
          </button>
        </div>
       {% endfor %}
      </div>
      {% endif %}
      <span class="selectify-dorpdown-arrow">
        {% include '@selectify/partials/svg/_expand_circle_down.html.twig' %}
      </span>
    </div>
    <div id="edit-{{ clean_field_name }}-dropdown" class="selectify-available-display" role="listbox" aria-hidden="true"{% if is_multiple %} aria-multiselectable="true"{% endif %}>
      <div class="options-inner">
        <div class="search-input">
          <label for="search-{{ clean_field_name }}" class="visually-hidden">
            {{ 'Search options'|t }}
          </label>
          {% include '@selectify/partials/svg/_manage_search.html.twig' %}
          <input type="text"
                 class="multi-search-input"
                 id="search-{{ clean_field_name }}"
                 placeholder="{{ 'Search options'|t }}"
                 aria-label="{{ 'Search options'|t }}"
                 aria-autocomplete="list"
                 aria-controls="edit-{{ clean_field_name }}-dropdown"
                 role="searchbox" />
        </div>
        {% for option in options %}
        {% if option.value != '_none' or show_none %}
          <div class="selectify-available-one-option{% 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>
          </div>
        {% endif %}
      {% endfor %}
        <div class="selectify-select-footer">
          <button type="button" class="selectify-clear-all">
            <span class="icon">
              {% include '@selectify/partials/svg/_clear_all.html.twig' %}
            </span>
            <span class="clear-label">{{ 'Clear All'|t }}</span>
          </button>
        </div>
      </div>
    </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 %}