stack/src/components/fields/text-field/text-field.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "f-text",
  3.   "d-flex flex-column gap-1 u-posr",
  4.   props.extra_class ? props.extra_class : null,
  5.   props.icon_before ? "--icon-before" : null,
  6.   props.icon_after ? "--icon-after" : null,
  7.   props.type == "password" ? "--password" : null,
  8. ]|join(' ')|trim -%}
  10. {%- set attrs = [
  11.   'class="' ~ class_name ~ '"',
  12. ] -%}
  14. {%- set attrs = attrs|join(' ')|trim -%}
  16. {# Input attrs #}
  18. {%- set class_name_input = [
  19.   "f-base",
  20.   "f-text__input",
  21. ]|join(' ')|trim -%}
  23. {%- set attrs_input = [
  24.   'class="' ~ class_name_input ~ '"',
  25. ] -%}
  27. {%- set input_type = props.type in ["email", "password", "url", "text", "tel", "search", "number"] ? props.type : "text" -%}
  29. {%- set attrs_input = attrs_input|merge(['type="' ~ input_type ~ '"']) -%}
  31. {%- if props.id is defined %}
  32.   {%- set attrs_input = attrs_input|merge(['id="' ~ props.id ~ '"']) -%}
  33. {%- endif -%}
  35. {%- if props.placeholder %}
  36.   {%- set attrs_input = attrs_input|merge(['placeholder="' ~ props.placeholder ~ '"']) -%}
  37. {%- endif -%}
  39. {%- if props.value is defined %}
  40.   {%- set attrs_input = attrs_input|merge(['value="' ~ props.value ~ '"']) -%}
  41. {%- endif -%}
  43. {%- if props.full_name is defined %}
  44.   {% set attrs_input = attrs_input|merge(['name=' ~ props.full_name ~ '']) %}
  45. {%- endif -%}
  47. {%- if props.maxlength is defined %}
  48.   {%- set attrs_input = attrs_input|merge(['maxlength="' ~ props.maxlength ~ '"']) -%}
  49. {%- endif -%}
  51. {% if props.pattern is defined %}
  52.   {%- set attrs_input = attrs_input|merge(['pattern="' ~ props.pattern ~ '"']) -%}
  53. {% endif %}
  55. {% if props.validity.pattern_mismatch %}
  56.   {%- set attrs_input = attrs_input|merge(['data-validity-pattern-mismatch="' ~ props.validity.pattern_mismatch ~ '"']) -%}
  57. {% endif %}
  59. {% if props.validity.value_missing %}
  60.   {%- set attrs_input = attrs_input|merge(['data-validity-value-missing="' ~ props.validity.value_missing ~ '"']) -%}
  61. {% endif %}
  63. {% if props.step and input_type == 'number' %}
  64.   {%- set attrs_input = attrs_input|merge(['step="' ~ props.step ~ '"']) -%}
  65. {% endif %}
  67. {%- if props.required == true %}
  68.   {%- set attrs_input = attrs_input|merge(['required']) -%}
  69. {%- endif -%}
  71. {%- if props.disabled == true %}
  72.   {%- set attrs_input = attrs_input|merge(['disabled']) -%}
  73. {%- endif -%}
  75. {%- if props.readonly == true %}
  76.   {%- set attrs_input = attrs_input|merge(['readonly']) -%}
  77. {%- endif -%}
  79. {%- if props.autocomplete is defined %}
  80.   {%- set attrs_input = attrs_input|merge(['autocomplete="' ~ (props.autocomplete == true ? 'on' : 'off') ~ '"']) -%}
  81. {%- endif -%}
  83. {%- set attrs_input = attrs_input|join(' ')|trim -%}
  85. <div {{ attrs|raw }}>
  87.   {% if props.label %}
  88.     {% include "@Components/fields/label-field/label-field.twig" with {props: {
  89.       title: props.label,
  90.       id: props.id,
  91.       required: props.required,
  92.     }} %}
  93.   {% endif %}
  95.   <div class="f-text__wrap d-flex align-items-center u-posr">
  97.     {% if props.icon_before %}
  98.       <span class="f-text__icon --before">
  99.         {% include "@Components/icon/icon.twig" with {props: {
  100.           src: props.icon_before.src,
  101.           color: props.icon_before.color,
  102.         }} %}
  103.       </span>
  105.     {% endif %}
  107.     <input {{ attrs_input|raw }}>
  109.     {% if input_type != "password" and props.icon_after %}
  110.       <span class="f-text__icon --after">
  111.         {% include "@Components/icon/icon.twig" with {props: {
  112.           src: props.icon_after.src,
  113.           color: props.icon_after.color,
  114.         }} %}
  115.       </span>
  116.     {% endif %}
  118.     {% if input_type == "password" %}
  119.       <div class="f-text__toggle u-posa u-translate-middle-y u-top-50-p justify-content-center align-center d-grid u-cursor-pointer">
  120.         {% include "@Components/icon/icon.twig" with {props: {
  121.           src: "@Images/svg/eye-outline.svg",
  122.           extra_class: "f-text__toggle-icon --on",
  123.         }} %}
  124.         {% include "@Components/icon/icon.twig" with {props: {
  125.           src: "@Images/svg/eye-off-outline.svg",
  126.           extra_class: "f-text__toggle-icon --off",
  127.         }} %}
  128.       </div>
  129.     {% endif %}
  130.   </div>
  132.   {% include "@Components/fields/error-field/error-field.twig" with {props: {}} %}
  134. </div>