input.twig

{#
  a-input
  Codepen: https://codepen.io/davidhellmann/pen/OOLmYq
  ------------------------------------------------------------
#}

{# -- Set Defaults -- #}
{% set defaults = {
  cn: 'a-input',
  modifiers: [],
  customClasses: [],
  data: {},
  vSpace: null,
  type: 'text',
  name: null,
  value: null,
  min: null,
  max: null,
  maxlength: null,
  readonly: null,
  pattern: null,
  required: null,
  disabled: null,
  multiple: null,
  step: null,
  info: null,
  label: null,
  id: null,
  placeholder: null,
  errors: null,
  rulesHtmlData: null,
  decimalCount: 2,
  inputAttributes: [],
  labelAttributes: [],
  errorAttributes: [],
  instructionAttributes: [],
} %}

{# -- Merge Default with Options -- #}
{% set opt = opt is defined ? defaults|merge(opt) : defaults %}

{# -- Macros -- #}
{% import '_macros/_macro-settings.twig' as module %}



{% set pattern = opt.pattern %}
{% if opt.type == 'email' %}
  {% set pattern = opt.pattern ?? "^[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$" %}
{% endif %}

{# -- Modul -- #}
{% if opt.type and opt.name and opt.label %}
   <div {{ module.settings(opt) }} {{ opt.rulesHtmlData ? opt.rulesHtmlData : '' }}>

    {# -- label -- #}
    {% include '_forms/label/_template.twig' with {
      opt: {
        customClasses: [opt.cn ~ '__label'],
        for: opt.id,
        text: opt.label,
        required: opt.required,
        labelAttributes: opt.labelAttributes,
      }
    } only %}

    {# -- instructions -- #}
    {% include '_forms/infoText/_template.twig' with {
      opt: {
        customClasses: [opt.cn ~ '__info'],
        text: opt.info,
        instructionAttributes: opt.instructionAttributes,
      }
    } only %}

    <input class="{{ opt.cn ~ '__input' }}"
           {% if opt.id %}id="{{ opt.id }}"{% endif %}
           {% if opt.type %}type="{{ opt.type }}"{% endif %}
           {% if opt.name %}name="{{ opt.name }}"{% endif %}
           {% if opt.value %}value="{{ opt.value }}"{% endif %}
           {% if opt.min %}min="{{ opt.min }}"{% endif %}
           {% if opt.max %}max="{{ opt.max }}"{% endif %}
           {% if opt.maxlength %}maxlength="{{ opt.maxlength }}"{% endif %}
           {% if opt.step %}step="{{ opt.step }}"{% endif %}
           {% if pattern %}pattern="{{ pattern }}"{% endif %}
           {% for key, value in opt.data %}
             data-{{ key }}="{{ value }}"
           {% endfor %}
           {% if opt.required %} required data-required="true"{% endif %}
           {{ opt.readonly ? ' readonly' }}
           {{ opt.multiple ? ' multiple' }}
           {{ opt.disabled ? ' disabled' }} placeholder="{{ opt.placeholder }}"
           {% for attribute in opt.inputAttributes %}
             {{ attribute.attribute }}="{{ attribute.value }}"
           {% endfor %}>

    {# -- error message -- #}
    {% if opt.errors %}
      {% include '_forms/formError/_template.twig' with {
        opt: {
          customClasses: [opt.cn ~ '__error'],
          text: opt.info,
          errorAttributes: opt.errorAttributes,
          errors: opt.errors,
        }
      } only %}
    {% endif %}
  </div>
{% endif %}