Input Number

<!-- Default -->
<div class="dso-input-number">

    <label for="default" class="control-label">
        Default
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span><svg class="di di-minus-square">
            <use href="../../dso-icons.svg#minus-square" />
        </svg></button>

    <input type="number" id="default" readonly tabindex="-1" class="dso-input-step-counter" value="99">
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span><svg class="di di-plus-square">
            <use href="../../dso-icons.svg#plus-square" />
        </svg></button>

</div>

<!-- Input Stepper Inactive -->
<div class="dso-input-number">

    <label for="inactive" class="control-label">
        Inactive input stepper
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span><svg class="di di-minus-square">
            <use href="../../dso-icons.svg#minus-square" />
        </svg></button>

    <input type="number" id="inactive" readonly tabindex="-1" class="dso-input-step-counter" value="99">
    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span><svg class="di di-plus-square">
            <use href="../../dso-icons.svg#plus-square" />
        </svg></button>

</div>

<!-- Input Stepper Minimum Limit -->
<div class="dso-input-number">

    <label for="minimum-limit" class="control-label">
        Input stepper with minimum limit
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span><svg class="di di-minus-square">
            <use href="../../dso-icons.svg#minus-square" />
        </svg></button>

    <input type="number" id="minimum-limit" readonly tabindex="-1" min="0" class="dso-input-step-counter" value="0">
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span><svg class="di di-plus-square">
            <use href="../../dso-icons.svg#plus-square" />
        </svg></button>

</div>

<!-- Input Stepper Maximum Limit -->
<div class="dso-input-number">

    <label for="maximum-limit" class="control-label">
        Input stepper with maximum limit
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span><svg class="di di-minus-square">
            <use href="../../dso-icons.svg#minus-square" />
        </svg></button>

    <input type="number" id="maximum-limit" readonly tabindex="-1" max="99" class="dso-input-step-counter" value="99">
    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span><svg class="di di-plus-square">
            <use href="../../dso-icons.svg#plus-square" />
        </svg></button>

</div>

<!-- No Label -->
<div class="dso-input-number">

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span><svg class="di di-minus-square">
            <use href="../../dso-icons.svg#minus-square" />
        </svg></button>

    <input type="number" id="no-label" readonly tabindex="-1" class="dso-input-step-counter" value="99">
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span><svg class="di di-plus-square">
            <use href="../../dso-icons.svg#plus-square" />
        </svg></button>

</div>

{% set localId = generateLocalId(prefix, id) %}

<div class="dso-input-number">
  {% if label %}
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
  {% endif %} 
  {% render '@button', {type: 'button', modifier: 'link', label: minusButtonLabel, icon: 'minus-square', iconOnly: 'true', disabled: minusButtonInactive} %}
  <input type="number" 
          id="{{ id }}" 
          readonly
          tabindex="-1"
          {% if min %} min="{{ min }}"{% endif %}
          {% if max %} max="{{ max }}"{% endif %}
          class="dso-input-step-counter" 
          value="{{ count }}">
  {% render '@button', {type: 'button', modifier: 'link', label: plusButtonLabel, icon: 'plus-square', iconOnly: 'true', disabled: plusButtonInactive} %}
</div>

/* Default */
__title: default
label: Default
id: default
type: stepper
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen

/* Input Stepper Inactive */
__title: Inactive
label: Inactive input stepper
id: inactive
type: stepper
count: 99
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen (disabled)
minusButtonInactive: true
plusButtonInactive: true

/* Input Stepper Minimum Limit */
__title: Minimum limit (optional)
label: Input stepper with minimum limit
id: minimum-limit
type: stepper
count: 0
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen
min: '0'
minusButtonInactive: true

/* Input Stepper Maximum Limit */
__title: Maximum limit (optional)
label: Input stepper with maximum limit
id: maximum-limit
type: stepper
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen (disabled)
max: '99'
plusButtonInactive: true

/* No Label */
__title: no label
label: null
id: no-label
type: stepper
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen