selectify-1.0.3/templates/select--selectify-dropdown-checkbox.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-checkbox-widget"
     tabindex="0"
     role="combobox"
     aria-controls="edit-{{ clean_field_name }}-dropdown"
     aria-haspopup="listbox"
     aria-multiselectable="{{ is_multiple ? 'true' : 'false' }}"
     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 %}
        <span class="selectify-selected-one-option" data-value="{{ selected.value }}">
         {{ selected.label }}
        </span>
       {% 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">
      {% 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"
             {% if option.value != '_none' %}aria-selected="{{ option.selected ? 'true' : 'false' }}"{% endif %}>
          {% if option.value == '_none' %}
            <label class="selectify-placeholder-label">{{ option.label }}</label>
          {% else %}
          <input type="checkbox"
                 class="form-checkbox{% if enable_checkbox %} selectify-checkbox{% endif %}"
                 data-drupal-selector="edit-{{ clean_field_name }}-{{ option.value|selectify_clean_id }}"
                 id="edit-{{ clean_field_name }}-{{ option.value|selectify_clean_id }}"
                 value="{{ option.value }}"
                 {{ option.selected ? 'checked="checked"' }}
                 aria-hidden="true"
                 tabindex="-1">
          <label class="checkbox-label" for="edit-{{ clean_field_name }}-{{ option.value|selectify_clean_id }}">{{ option.label }}</label>
          {% endif %}
        </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 %}