Fijn

Configuration group component: Notes 

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Selecteer een definitieve configuratie</label>
    <p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>

    <div class="m-configuration w-100 is-invalid overflow-hidden">

        <div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">

            <div class="m-configuration__info d-flex align-items-center flex-grow-1">

                <img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
                <div class="flex-grow-1">
                    <strong>De Klamp Schets 1</strong>
                    <div class="text-muted">Totaal opties: € 15.317,65</div>
                    <div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
                </div>

            </div>
            <div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
                <div class="a-circle -view -sm -hover -border -pointer cursor-default">
                    <i class="icon-view"></i>

                </div>

                <div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
                    <i class="icon-vertical-dots"></i>

                </div>

                <div class="popover-content">

                    <div class='m-popoverMenu'>
                        <div class='dropdown-item'>Dearchiveren</div>
                    </div>

                </div>

            </div>
        </div>

        <div class="m-configuration__bottom ">

            <ul class="list-group -collapse">

                <li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                    <div class="w-100 position-relative">
                        <div class="m-addItem   -noBox d-flex align-items-center absolute cursor-pointer user-select-none">

                            <div class="a-circle -avatar -hover -border -pointer cursor-default">
                                <i class="icon-plus"></i>

                            </div>

                            <div class="ml-2">
                                <span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
                            </div>

                        </div>
                    </div>
                </li>

                <li>
                    <div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup22063" aria-expanded="false" aria-controls="collapseListGroup22063">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                        <strong class="ml-2">Documenten</strong>

                        <div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
                            <i class="icon-documents"></i>
                            <span class="ml-1">3</span>
                        </div>

                    </div>
                    <ul class="collapse  list-group" id="collapseListGroup22063">

                        <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                            <a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                            <div class="d-flex align-items-center">

                                <button type="button" class="btn btn-sm btn-primary -iconRight">

                                    Genereer

                                </button>

                            </div>
                        </li>
                        <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                            <a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                            <div class="d-flex align-items-center">

                                <span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
                                    <circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
                                    <circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
                                        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
                                        <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
                                    </circle>
                                </svg>

                            </div>
                        </li>
                        <li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
                            <a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
                            <div class="d-flex align-items-center">

                                <a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
                                    <i class="icon-view"></i>

                                </a>

                                <div class="a-circle -download -sm -hover -border -pointer cursor-default">
                                    <i class="icon-download-alt"></i>

                                </div>

                                <div class="a-circle -sm -hover -border -pointer cursor-default">
                                    <i class="icon-bin"></i>

                                </div>

                            </div>
                        </li>

                    </ul>
                </li>

            </ul>

            <ul class="list-group -collapse">

                <li>
                    <div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup33659" aria-expanded="false" aria-controls="collapseListGroup33659">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                        <strong class="ml-2">Notities</strong>

                        <div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
                            <i class="icon-edit-alt"></i>
                            <span class="ml-1">1</span>
                        </div>

                    </div>
                    <ul class="collapse  list-group" id="collapseListGroup33659">

                        <li class="list-group-item p-3 p-md-4 -notes">
                            <div class="m-comment js-comment -paragraph -addField d-flex flex-column position-relative w-100">

                                <span class="mb-2">

                                    <p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text" contenteditable></p>
                                    <div class="popover-content">
                                        <div class="m-teamSelect js-teamSelect">
                                            <i class="m-teamSelect__noresults">No matching results</i>
                                            <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

                                                <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                                                    <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk
                                </span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
                        </li>

                        <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                            <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
                        </li>

                    </ul>
        </div>
    </div>

    </span>

    <div class="d-flex justify-content-end w-100 mt-3">

        <button type="button" class="btn btn-sm btn-outline-dark -iconRight">

            Plaatsen

        </button>

    </div>

</div>
</li>

</ul>
</li>

</ul>

</div>
</div>

</div>
 
<div class="form-group d-flex flex-wrap">
    {% if table == false %}<label class="flex-grow-1">{{label}}</label>{% endif %}
    {% if text %}<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>{% endif %}
    {% if (planner == true) and (title1=="") and (title2=="") %}
        {% set title1="Adviesgesprek 1" %}
        {% set title2="Adviesgesprek 2" %}
    {% endif %}
    {% render '@configuration', {radio:radio, notes:notes, table:table, planner:planner, title:title1, buttons:buttons, documentation_checklist:documentation_checklist, invalid:invalid, valid:valid, disabled:disabled, checked:checked, badge:badge, tabs:tabs}, true %}
    {% if table == false and planner == true %}{% render '@configuration', {radio:radio, notes:notes, planner:planner, title:title2, buttons:buttons, invalid:invalid, valid:valid, disabled:disabled, badge:badge}, true %}{% endif %}
    {% if add %}{% render '@add-item--no-box' %}{% endif %}
    {% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
 
{
  "label": "Selecteer een definitieve configuratie",
  "invalid": true,
  "valid": false,
  "feedback_message": "This field is invalid",
  "show_feedback": false,
  "radio": false,
  "table": false,
  "planner": false,
  "buttons": false,
  "documentation_checklist": false,
  "disabled": false,
  "checked": false,
  "text": true,
  "title1": "De Klamp Schets 1",
  "title2": "De Klamp Schets 1",
  "add": false,
  "badge": false,
  "notes": true,
  "tabs": false
}

Disabled

When the configuration group is disabled, the configuration should not be editable. Therefor the edit button should change to a view button. Change .icon-edit-alt to .icon-view.