Group Files

Component preview

<!-- Default -->
<fieldset class="form-group dso-files">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Default</legend>
    <div class="dso-label-container">
        <label for="group-file-default" class="control-label" aria-hidden="true">
            Group 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="group-file-default-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Required -->
<fieldset class="form-group dso-files dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Required</legend>
    <div class="dso-label-container">
        <label for="group-file-required" class="control-label" aria-hidden="true">
            Group 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="group-file-required-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Invalid -->
<fieldset class="form-group dso-files dso-invalid dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Invalid</legend>
    <div class="dso-label-container">
        <label for="group-file-invalid" class="control-label" aria-hidden="true">
            Group 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="group-file-invalid-file-upload" />
            <label class="btn btn-default" for="group-file-invalid-file-upload">
                <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
            </label>
        </div>

        <p class="dso-message">Voeg een document toe.</p>

    </div>

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

  -->
</fieldset>

<!-- Group File Valid -->
<fieldset class="form-group dso-files dso-valid dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Valid</legend>
    <div class="dso-label-container">
        <label for="group-file-valid" class="control-label" aria-hidden="true">
            Group files - Valid
        </label>

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

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

                <button type="button" aria-describedby="group-file-valid-file-filename-0" class="btn btn-link 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="group-file-valid-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Disabled -->
<fieldset class="form-group dso-files dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Disabled</legend>
    <div class="dso-label-container">
        <label for="group-file-disabled" class="control-label" aria-hidden="true">
            Group 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="group-file-disabled-file-upload" disabled />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Explanation -->
<fieldset class="form-group dso-files dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Explanation</legend>
    <div class="dso-label-container">
        <label for="group-file-explanation" class="control-label" aria-hidden="true">
            Group 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="group-file-explanation-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Confidential -->
<fieldset class="form-group dso-files dso-required">
    <div class="dso-description dso-rich-content">

    </div>
    <legend class="sr-only">Group files - Confidential</legend>
    <div class="dso-label-container">
        <label for="group-file-confidential" class="control-label" aria-hidden="true">
            Group files - Confidential
        </label>

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

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

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

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

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

                <button type="button" aria-describedby="group-file-confidential-file-filename-1" class="btn btn-link 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="group-file-confidential-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

<!-- Group File Description -->
<fieldset class="form-group dso-files dso-required">
    <div class="dso-description dso-rich-content">
        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.
    </div>
    <legend class="sr-only">Group files - Description (Deprecated)</legend>
    <div class="dso-label-container">
        <label for="group-file-description" class="control-label" aria-hidden="true">
            Group 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="group-file-description-file-upload" />
            <label class="btn btn-default" for="group-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="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
</fieldset>

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

<fieldset {{ className('form-group dso-files', [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-description dso-rich-content">
    {{ description }}
  </div>
  <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" {% if disabled %} disabled{% endif %} />
      <label class="btn btn-default" for="{{ localId }}-file-upload">
        <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
      </label>
    </div>
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
  </div>

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

/* Default */
__title: default
id: group-file-default
label: Group files - Default

/* Group File Required */
__title: required
id: group-file-required
label: Group files - Required
required: true

/* Group File Invalid */
__title: invalid
id: group-file-invalid
label: Group files - Invalid
required: true
state: invalid
errorText: Voeg een document toe.

/* Group File Valid */
__title: valid
id: group-file-valid
label: Group files - Valid
required: true
state: valid
files:
  - filename: Bestandsnaam.pdf

/* Group File Disabled */
__title: disabled
id: group-file-disabled
label: Group files - Disabled
required: true
disabled: true

/* Group File Explanation */
__title: explanation
id: group-file-explanation
label: Group files - Explanation
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>

/* Group File Confidential */
__title: confidential
id: group-file-confidential
label: Group files - Confidential
required: true
files:
  - filename: Bestandsnaam.pdf
  - filename: Bestandsnaam.pdf
    confidential: true

/* Group File Description */
__title: Description (deprecated)
id: group-file-description
label: Group files - Description (Deprecated)
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.