Fijn

Teamlist group component: Add Single 

<div class="form-group d-flex flex-wrap align-items-center mb-1 -sideBySide position-relative">
    <label class="mb-0">Eigenaar</label>

    <div class="m-clearHover rounded d-flex align-items-center">

        <div class="m-addItem   -noBox d-flex align-items-center position-relative user-select-none">

            <div class="a-statusCircle">
                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                </svg>
            </div>
            <span class="pl-2 cursor-pointer" data-toggle-prev>Eigenaar toevoegen</span>

        </div>

    </div>

</div>
 
<div class="form-group d-flex flex-wrap {% if add_single %}align-items-center mb-1 -sideBySide{% endif %} position-relative">
    <label class="{% if add_single %}mb-0{% if info %} d-flex align-items-center{% endif %}{% else %}flex-grow-1{% endif %}">{{label}}{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
    {% if add_single %}
        <div class="m-clearHover{% if selected %} -selected{% endif %} rounded d-flex align-items-center">
            {% if selected %}
                {% render '@avatar--full-name', {initials: "JT", text: "Jappy Toering"}, true %}
                <div class="pl-2 cursor-pointer m-clearHover__cross"><i class="icon-cross"></i></div>
            {% else %}
                {% render '@add-item--no-box', {text:"Eigenaar toevoegen", team:true}, true %}
            {% endif %}
        </div>
    {% else %}
        {% render '@teamlist', {add_button:add_button, vertical:vertical}, true %}
    {% endif %}
</div>
 
{
  "label": "Eigenaar",
  "add_button": false,
  "vertical": false,
  "add_single": true,
  "selected": false
}

Teamlist

The teamlist is configured to have a maximum of 4 avatars. Every teammember after these 4 avatars should be added to the popover of the circle that contains the number of teammembers added to this popover. The number of teammembers displayed in the teamlist can be easily increased.

Information about the add team members button

It is important to notice that the add button contains the data-custom-class="-teamSelect" attribute, to apply the correct styling to the popover.