stack/src/components/fields/checkbox-select-field/checkbox-select-field.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "f-checkbox-select d-flex flex-column",
  3.   "u-posr",
  4.   props.variant in ["inline"] ? "--" ~ props.variant : "--default",
  5. ]|join(' ')|trim -%}
  7. {%- set attrs = [
  8.   'class="' ~ class_name ~ '"',
  9. ] -%}
  11. {%- if props.full_name is defined %}
  12.   {%- set attrs = attrs|merge(['data-name="' ~ props.full_name ~ '"']) -%}
  13. {%- endif -%}
  15. {%- set attrs = attrs|join(' ')|trim -%}
  17. {# Could be one liner, but filter 'filter' doesnt seem to work, sadly. Prefered solution ⬇️
  18. {% set selected_count = props.options|filter(option => option.checked == true) %}
  20. Twing seems to support filter 'filter' https://www.npmjs.com/package/gulp-twing
  21. https://nightlycommit.github.io/twing/language-reference/filters/filter.html #}
  23. {% set selected_count = 0 %}
  24. {% for choice in props.choices %}
  25.   {% if choice.checked == true %}
  26.     {% set selected_count = selected_count + 1 %}
  27.   {% endif %}
  28. {% endfor %}
  30. {% set clear_tag = {
  31.   title: selected_count,
  32.   name: "f-checkbox-select__clear u-cursor-pointer",
  33.   extra_class: selected_count > 0 ? "--active" : "",
  34.   size: "sm",
  35.   tag: "span",
  36.   icon: {
  37.     src: "@Images/svg/xmark.svg",
  38.     size: "sm"
  39.   },
  40. } %}
  42. <div {{ attrs|raw }}>
  43.   {% if props.label %}
  44.     {% include "@Components/fields/label-field/label-field.twig" with {props: {
  45.       title: props.label,
  46.       id: props.id,
  47.       required: props.required,
  48.     }} %}
  49.   {% endif %}
  51.   <header class="f-checkbox-select__header d-flex align-items-center u-posr px-1" title="{{ props.title }}">
  53.     <div class="f-checkbox-select__title flex-grow-1 u-color-primary-500 u-fz-sm u-posr u-top-0 u-left-0 overflow-hidden u-cursor-pointer">
  54.       <span class="u-posa u-left-0 u-top-50-p u-translate-middle-y text-nowrap">{{ props.title }}</span>
  55.     </div>
  57.     <div class="flex-shrink-0 d-flex gap-1 ms-auto align-items-center">
  58.       {% include "@Components/items/tag-item/tag-item.twig" with {props: clear_tag} %}
  60.       <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer">
  61.         {% include "@Components/icon/icon.twig" with {props: {
  62.           src: "@Images/svg/arrow-down.svg",
  63.           size: "lg",
  64.         }} %}
  65.       </div>
  66.     </div>
  68.   </header>
  70.   <div class="f-checkbox-select__body u-scrollbar u-posa" data-scrollbar-y>
  71.     <div class="f-checkbox-select__body-inner">
  73.       <div class="d-flex gap-2 flex-column pt-2 ps-1">
  74.         {% for choice in props.choices %}
  75.           {% include "@Components/fields/checkbox-field/checkbox-field.twig" with {props: choice|merge({
  76.             id: props.id ~ "-" ~ loop.index0,
  77.             name: props.full_name,
  78.             data: {
  79.               "filter-title": choice.label
  80.             }
  81.           })} %}
  82.         {% endfor %}
  83.       </div>
  85.     </div>
  86.   </div>
  89. </div>