bootstrap_italia-8.x-0.x-dev/components/components-2/form/input--number.html.twig

{#
/**
 * @file
 * Template for number input component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/form/input-numerico/
 * Latest revision: v2.8.7
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * Examples:
 * @see template_preprocess_input()
 *
 * @ingroup themeable
 */
#}
{% apply spaceless %}
  {# Set defaults #}

  {# Set options #}
  {% if attributes.value is empty or not attributes.value %}
    {% set default_value = attributes.min ? attributes.min.__toString() : '0' %}
    {% set attributes = attributes
      .setAttribute('value', default_value)
    %}
  {% endif %}
  {% set attributes = attributes
    .addClass(['form-control'])
    .setAttribute('data-bs-input', true)
    .setAttribute('value', attributes.value ?: '0')
  %}
  {% set wrapper_classes = [
    'input-number',
    'input-group'
  ] %}
  {% if attributes.hasClass('input-number-currency') %}
    {% set wrapper_classes = wrapper_classes|merge(['input-number-currency']) %}
    {% set attributes = attributes.removeClass('input-number-currency') %}
    {% set input_prefix = '€' %}
  {% endif %}
  {% if attributes.hasClass('input-number-percentage') %}
    {% set wrapper_classes = wrapper_classes|merge(['input-number-percentage']) %}
    {% set attributes = attributes.removeClass('input-number-percentage') %}
    {% set input_prefix = '%' %}
  {% endif %}
  {% if attributes.hasClass('input-number-adaptive') %}
    {% set wrapper_classes = wrapper_classes|merge(['input-number-adaptive']) %}
    {% set attributes = attributes.removeClass('input-number-adaptive') %}
  {% endif %}

  {# Component #}
  <div class="{{ wrapper_classes|join(' ') }}">
    {% if input_prefix %}
      <span class="input-group-text fw-semibold">{{ input_prefix }}</span>
    {% endif %}
    <input{{ attributes }}>
    <span class="input-group-text align-buttons flex-column">
      <button class="input-number-add">
        <span class="visually-hidden">{{ 'Increase value'|t }}</span>
      </button>
      <button class="input-number-sub">
        <span class="visually-hidden">{{ 'Decrease value'|t }}</span>
      </button>
    </span>
  </div>
  {{ children }}
{% endapply %}