Files

Component preview

<!-- Default -->
<fieldset class="form-group dso-files">
    <legend class="sr-only">Files - Default</legend>
    <div class="dso-label-container">
        <label for="input-file-default" class="control-label" aria-hidden="true">
            Files - Default
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-default-file-upload" />
            <label class="dso-secondary" for="input-file-default-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Primary -->
<fieldset class="form-group dso-files">
    <legend class="sr-only">Files - Primary</legend>
    <div class="dso-label-container">
        <label for="input-file-primary" class="control-label" aria-hidden="true">
            Files - Primary
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-primary-file-upload" />
            <label class="dso-primary" for="input-file-primary-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Required -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Required</legend>
    <div class="dso-label-container">
        <label for="input-file-required" class="control-label" aria-hidden="true">
            Files - Required
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-required-file-upload" />
            <label class="dso-secondary" for="input-file-required-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Invalid -->
<fieldset class="form-group dso-files dso-invalid dso-required">
    <legend class="sr-only">Files - Invalid</legend>
    <div class="dso-label-container">
        <label for="input-file-invalid" class="control-label" aria-hidden="true">
            Files - Invalid
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-invalid-file-upload" aria-describedby="errorTextId_input-file-invalid" aria-invalid="true" />
            <label class="dso-secondary" for="input-file-invalid-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

        <p class="dso-message" id="errorTextId_input-file-invalid">Voeg een document toe.</p>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Valid -->
<fieldset class="form-group dso-files dso-valid dso-required">
    <legend class="sr-only">Files - Valid</legend>
    <div class="dso-label-container">
        <label for="input-file-valid" class="control-label" aria-hidden="true">
            Files - Valid
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

            <li>
                <div class="dso-filename" id="input-file-valid-file-filename-0">
                    Bestandsnaam.pdf
                </div>

                <div class="dso-selectable dso-confidential">
                    <input type="checkbox" id="input-file-valid-input-confirm-0" name="input-file-valid-input-confirm-0" aria-describedby="input-file-valid-file-filename-0">
                    <label for="input-file-valid-input-confirm-0">
                        Vertrouwelijk
                    </label>

                </div>

                <button type="button" aria-describedby="input-file-valid-file-filename-0" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
            </li>

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-valid-file-upload" />
            <label class="dso-secondary" for="input-file-valid-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Disabled -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Disabled</legend>
    <div class="dso-label-container">
        <label for="input-file-disabled" class="control-label" aria-hidden="true">
            Files - Disabled
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-disabled-file-upload" disabled />
            <label class="dso-secondary" for="input-file-disabled-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Disabled Primary -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Disabled primary</legend>
    <div class="dso-label-container">
        <label for="input-file-disabled-primary" class="control-label" aria-hidden="true">
            Files - Disabled primary
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-disabled-primary-file-upload" disabled />
            <label class="dso-primary" for="input-file-disabled-primary-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Explanation -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Explanation</legend>
    <div class="dso-label-container">
        <label for="input-file-explanation" class="control-label" aria-hidden="true">
            Files - Explanation
        </label>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

        <div class="dso-info">

            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>

            <div class="dso-rich-content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-explanation-file-upload" />
            <label class="dso-secondary" for="input-file-explanation-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Confidential -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Confidential</legend>
    <div class="dso-label-container">
        <label for="input-file-confidential" class="control-label" aria-hidden="true">
            Files - Confidential
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

            <li>
                <div class="dso-filename" id="input-file-confidential-file-filename-0">
                    Bestandsnaam.pdf
                </div>

                <div class="dso-selectable dso-confidential">
                    <input type="checkbox" id="input-file-confidential-input-confirm-0" name="input-file-confidential-input-confirm-0" aria-describedby="input-file-confidential-file-filename-0">
                    <label for="input-file-confidential-input-confirm-0">
                        Vertrouwelijk
                    </label>

                </div>

                <button type="button" aria-describedby="input-file-confidential-file-filename-0" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
            </li>

            <li>
                <div class="dso-filename" id="input-file-confidential-file-filename-1">
                    Bestandsnaam.pdf
                </div>

                <div class="dso-selectable dso-confidential">
                    <input type="checkbox" id="input-file-confidential-input-confirm-1" name="input-file-confidential-input-confirm-1" aria-describedby="input-file-confidential-file-filename-1" checked>
                    <label for="input-file-confidential-input-confirm-1">
                        Vertrouwelijk
                    </label>

                </div>

                <dso-icon icon="status-warning"></dso-icon>

                <button type="button" aria-describedby="input-file-confidential-file-filename-1" class="dso-tertiary dso-remove"><span>Verwijder document</span></button>
            </li>

        </ul>

        <dso-alert status="warning">
            <div class="dso-rich-content">
                <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
                <ol>
                    <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
                    <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
                </ol>
                <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
            </div>
        </dso-alert>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-confidential-file-upload" />
            <label class="dso-secondary" for="input-file-confidential-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Input File Description -->
<fieldset class="form-group dso-files dso-required">
    <legend class="sr-only">Files - Description (Deprecated)</legend>
    <div class="dso-label-container">
        <label for="input-file-description" class="control-label" aria-hidden="true">
            Files - Description (Deprecated)
        </label>

    </div>
    <div class="dso-field-container">
        <ul class="dso-filelist">

        </ul>

        <!-- To use an input type="file" element -->
        <div class="dso-file-upload">
            <input type="file" id="input-file-description-file-upload" />
            <label class="dso-secondary" for="input-file-description-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  
  class="dso-tertiary"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

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

{% set errorTextId = 'errorTextId_' + localId %}
{% set infoTextId = 'infoTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<fieldset {{ className('form-group dso-files', [state, 'dso-' + state], [required, 'dso-required']) }}>
  <legend class="sr-only">{{ label }}</legend>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label" aria-hidden="true">
      {{ label }}
    </label>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    <ul class="dso-filelist">
      {% for file in files %}
        {% render '@file-item', {id: localId, filename: file.filename, pos: loop.index0, confidential: file.confidential} %}
      {% endfor %}
    </ul>
    {% if files %}
      {% if files | map('confidential') | includes(true) %}
        <dso-alert status="warning">
          <div class="dso-rich-content">
            <p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
            <ol>
              <li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
              <li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
            </ol>
            <p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
          </div>
        </dso-alert>
      {% endif %}
    {% endif %}

    <!-- To use an input type="file" element -->
    <div class="dso-file-upload">
      <input type="file" id="{{ localId }}-file-upload"
        {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
        {% if disabled %} disabled{% endif %}
        {% if state == "invalid" %} aria-invalid="true"{% endif %}
      />
      <label class="dso-{{ buttonClass }}" for="{{ localId }}-file-upload">
        <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
      </label>
    </div>
    {% if errorText %}
      {% render '@error-block', {errorText: errorText, id: errorTextId} %}
    {% endif %}
  </div>

  <!-- Or to trigger the upload using a button element (not recommended) -->
  <!--
    {% render '@button', {label: 'Document toevoegen', modifier: 'dso-tertiary', type: 'button', icon: 'plus'} %}
  -->
</fieldset>

/* Default */
__title: default
id: input-file-default
label: Files - Default
buttonClass: secondary

/* Input File Primary */
__title: primary
id: input-file-primary
label: Files - Primary
buttonClass: primary

/* Input File Required */
__title: required
id: input-file-required
label: Files - Required
buttonClass: secondary
required: true

/* Input File Invalid */
__title: invalid
id: input-file-invalid
label: Files - Invalid
buttonClass: secondary
required: true
state: invalid
errorText: Voeg een document toe.

/* Input File Valid */
__title: valid
id: input-file-valid
label: Files - Valid
buttonClass: secondary
required: true
state: valid
files:
  - filename: Bestandsnaam.pdf

/* Input File Disabled */
__title: disabled
id: input-file-disabled
label: Files - Disabled
buttonClass: secondary
required: true
disabled: true

/* Input File Disabled Primary */
__title: disabled primary
id: input-file-disabled-primary
label: Files - Disabled primary
buttonClass: primary
required: true
disabled: true

/* Input File Explanation */
__title: explanation
id: input-file-explanation
label: Files - Explanation
buttonClass: secondary
required: true
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: |
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

/* Input File Confidential */
__title: confidential
id: input-file-confidential
label: Files - Confidential
buttonClass: secondary
required: true
files:
  - filename: Bestandsnaam.pdf
  - filename: Bestandsnaam.pdf
    confidential: true

/* Input File Description */
__title: Description (deprecated)
id: input-file-description
label: Files - Description (Deprecated)
buttonClass: secondary
required: true
description: >-
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus
  dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper
  est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis
  sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent
  consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat
  sed tellus eu, faucibus fringilla lectus.