Shopping Cart

Component preview

<!-- Default -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
    </div>

</div>

<!-- Items Collapsed -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <dso-icon icon="chevron-down"></dso-icon>U heeft 2 activiteiten gekozen
        </button>

    </div>

</div>

<!-- Items Expanded -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <dso-icon icon="chevron-up"></dso-icon>U heeft 2 activiteiten gekozen
        </button>

        <ul class="dso-items">

            <li>

                Milieubelastende activiteit - Melding

                <button type="button" class="dso-tertiary dso-edit-cart-item"><span class="sr-only">Naam bewerken</span>
                    <dso-icon icon="pencil"></dso-icon>
                </button>

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

            </li>

            <li>

                Milieubelastende activiteit - Melding
                <span class="dso-additive">2</span>

                <button type="button" class="dso-tertiary dso-edit-cart-item"><span class="sr-only">Naam bewerken</span>
                    <dso-icon icon="pencil"></dso-icon>
                </button>

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

            </li>

        </ul>

    </div>

</div>

<!-- Items Edit -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <dso-icon icon="chevron-up"></dso-icon>U heeft 2 activiteiten gekozen
        </button>

        <ul class="dso-items">

            <li>

                Milieubelastende activiteit - Melding

                <button type="button" class="dso-tertiary dso-edit-cart-item"><span class="sr-only">Naam bewerken</span>
                    <dso-icon icon="pencil"></dso-icon>
                </button>

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

            </li>

            <li>

                Milieubelastende activiteit - Melding

                <div class="dso-edit-additive">
                    <label for="additive-items-edit-1">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-items-edit-1" value="2" />
                </div>

            </li>

        </ul>

    </div>

</div>

<!-- Subitems -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <dso-icon icon="chevron-up"></dso-icon>U heeft 3 activiteiten gekozen
        </button>

        <ul class="dso-items">

            <li>

                Milieubelastende activiteit - Melding

                <button type="button" class="dso-tertiary dso-edit-cart-item"><span class="sr-only">Naam bewerken</span>
                    <dso-icon icon="pencil"></dso-icon>
                </button>

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

                <ul class="dso-subitems">

                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

            <li>

                Milieubelastende activiteit - Melding

                <div class="dso-edit-additive">
                    <label for="additive-subitems-1">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-subitems-1" value="Wasstraat om de hoek van garagebedrijf Jansen" />
                </div>

                <ul class="dso-subitems">

                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

            <li>

                Milieubelastende activiteit gereguleerd in het omgevingsplan - Informatie (Rijk)

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

                <ul class="dso-subitems">

                    <li>

                        Koelwater, niet afkomstig van een milieubelastende activiteit die is aangewezen in hoofdstuk 3 van het Besluit activiteiten, lozen in het riool of op of in de bodem.
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div>

<!-- Subitems Hidden Summary -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <ul class="dso-items">

            <li>

                Milieubelastende activiteit - Melding

                <button type="button" class="dso-tertiary dso-edit-cart-item"><span class="sr-only">Naam bewerken</span>
                    <dso-icon icon="pencil"></dso-icon>
                </button>

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

                <ul class="dso-subitems">

                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

            <li>

                Milieubelastende activiteit - Melding

                <div class="dso-edit-additive">
                    <label for="additive-subitems-hidden-summary-1">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-subitems-hidden-summary-1" value="Wasstraat om de hoek van garagebedrijf Jansen" />
                </div>

                <ul class="dso-subitems">

                    <li>

                        Wasstraat of wasplaats
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div>

<!-- Subitems With Warning -->
<h2>Mijn activiteiten</h2>

<div class="dso-shopping-cart">
    <div class="dso-contents">
        <button type="button" class="dso-status">
            <dso-icon icon="chevron-up"></dso-icon>U heeft 3 activiteiten gekozen
        </button>

        <ul class="dso-items">

            <li>

                Tankstation starten of veranderen

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

                <ul class="dso-subitems">

                    <li>

                        Tanken van diesel, benzine en andere vloeibare brandstof
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                    <li>

                        Tanken en opslaan van LPG
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

            <li>
                <dso-icon icon="status-warning"></dso-icon><span class="sr-only">waarschuwing</span>
                Opslaan van vloeistoffen in een opslagtank

                <button type="button" class="dso-delete">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="trash"></dso-icon>
                </button>

                <ul class="dso-subitems">

                    <li>
                        <dso-icon icon="status-warning"></dso-icon><span class="sr-only">waarschuwing</span>
                        Opslaan van vloeistoffen in een ondergrondse opslagtank
                        <button type="button" class="dso-delete">
                            <span class="sr-only">Verwijder</span>
                            <dso-icon icon="trash"></dso-icon>
                        </button>
                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div>

{% if shoppingcartTitleTag == 'h2' %}
  <h2>{{ shoppingcartTitle }}</h2>
{% else %}
  <h3>{{ shoppingcartTitle }}</h3>
{% endif %}

<div class="dso-shopping-cart">
  <div class="dso-contents">
    {%- if items.length > 0 %}
      {%- if not hideSummary %}
      <button type="button" class="dso-status">
        {%- if not collapsed -%}
          <dso-icon icon="chevron-up"></dso-icon>
        {%- else -%}
          <dso-icon icon="chevron-down"></dso-icon>
        {%- endif -%}
        U heeft {{ items | countSubitems }} activiteit{% if ((items | countSubitems) > 1) %}en{% endif %} gekozen
      </button>
      {% endif -%}
      {% if not collapsed %}
        <ul class="dso-items">
          {% for item in items %}
            <li>
              {% if (item.subitems | hasWarning) %}<dso-icon icon="status-warning"></dso-icon><span class="sr-only">waarschuwing</span>{% endif %}
              {{ item.label }}{% if not item.readonly and not item.edit and item.additive %}
                <span class="dso-additive">{{ item.additive }}</span>
              {%- endif %}
              {% if not item.readonly %}
                {% if item.edit %}
                  <div class="dso-edit-additive">
                    <label for="additive-{{ _self.name }}-{{ loop.index0 }}">Bewerk toevoeging</label>
                    <input type="text" class="dso-edit-name" id="additive-{{ _self.name }}-{{ loop.index0 }}" value="{{ item.additive }}" />
                  </div>
                {% endif %}

                {% if not item.edit %}
                  {% render '@button', {type: 'button', modifier: 'dso-tertiary dso-edit-cart-item', label: 'Naam bewerken', icon: 'pencil', iconOnly: true} %}
                {% endif %}
              {% endif %}
              {% if not item.edit %}
                <button type="button" class="dso-delete">
                  <span class="sr-only">Verwijder</span>
                  <dso-icon icon="trash"></dso-icon>
                </button>
              {% endif %}
              {% if item.subitems.length %}
                <ul class="dso-subitems">
                  {% for subitem in item.subitems %}
                    <li>
                      {% if subitem.warning %}<dso-icon icon="status-warning"></dso-icon><span class="sr-only">waarschuwing</span>{% endif %}
                      {{ subitem.label }}
                      <button type="button" class="dso-delete">
                        <span class="sr-only">Verwijder</span>
                        <dso-icon icon="trash"></dso-icon>
                      </button>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    {% else %}
      <p class="dso-empty">U heeft nog geen activiteiten gekozen</p>
    {% endif -%}
  </div>

  {% if items.length > 0 and (items | hasWarning) and open %}
    <p class="dso-warning">
      <strong>Let op:</strong> Voor de werkzaamheden met een <dso-icon icon="status-warning"></dso-icon> zijn geen maatregelen opgenomen in dit overzicht met maatregelen. Dit betekent niet dat er geen voorschriften en maatregelen van toepassing zijn.
    </p>
  {% endif %}
</div>

/* Default */
__title: default
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items: []

/* Items Collapsed */
__title: items collapsed
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2
collapsed: true

/* Items Expanded */
__title: items expanded
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2

/* Items Edit */
__title: edit items
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Milieubelastende activiteit - Melding
  - label: Milieubelastende activiteit - Melding
    additive: 2
    edit: true

/* Subitems */
__title: subitems
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Milieubelastende activiteit - Melding
    subitems:
      - label: Wasstraat of wasplaats
  - label: Milieubelastende activiteit - Melding
    additive: Wasstraat om de hoek van garagebedrijf Jansen
    edit: true
    subitems:
      - label: Wasstraat of wasplaats
  - label: >-
      Milieubelastende activiteit gereguleerd in het omgevingsplan - Informatie
      (Rijk)
    readonly: true
    subitems:
      - label: >-
          Koelwater, niet afkomstig van een milieubelastende activiteit die is
          aangewezen in hoofdstuk 3 van het Besluit activiteiten, lozen in het
          riool of op of in de bodem.

/* Subitems Hidden Summary */
__title: subitems with hidden summary
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Milieubelastende activiteit - Melding
    subitems:
      - label: Wasstraat of wasplaats
  - label: Milieubelastende activiteit - Melding
    additive: Wasstraat om de hoek van garagebedrijf Jansen
    edit: true
    subitems:
      - label: Wasstraat of wasplaats
hideSummary: true

/* Subitems With Warning */
__title: subitems with warning
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h2
items:
  - label: Tankstation starten of veranderen
    readonly: true
    subitems:
      - label: Tanken van diesel, benzine en andere vloeibare brandstof
      - label: Tanken en opslaan van LPG
  - label: Opslaan van vloeistoffen in een opslagtank
    readonly: true
    subitems:
      - label: Opslaan van vloeistoffen in een ondergrondse opslagtank
        warning: true