add-metadata.component.html

<div>
    <!-- The input search -->
    <div style="margin-bottom: 20px;">
        <vitamui-common-banner [searchbarPlaceholder]="'USER_ACTION.ADD_METADATA.SEARCH_PLACEHOLDER' | translate"
                             (search)="onSearchSubmit($event)" ></vitamui-common-banner>
    </div>

    <!-- The selected items -->
    <div *ngIf="addedItems?.length > 0" class ="pastis-container-selected-items">
        <div style="display: inline-flex" *ngFor="let item of addedItems;let i =index">
            <div  class="selected-items-box">
                <span style="padding: 12px;">
                    <i *ngIf="isElementComplex(item)" class="vitamui-icon vitamui-icon-arborescence"></i>
                    <span class="item-text">{{onResolveName(item)}}</span>
                </span>
                <mat-divider vertical class="selected-items-separator"></mat-divider>
                <span class="selected-items-close" (click)="onRemoveSelectedElement(item)">&times;</span>
            </div>
        </div>
    </div>

    <!-- The list of items to be selected-->
       <mat-list  *ngIf="allowedChildren?.length; else noItemsLeftToAdd" class="list-box-head">
        <span class="list-box-content-title">
          <span class="paragraph-metadata-subtitle"
          [ngStyle]="{'margin-top': atLeastOneIsSelected ? '40px' : '0px'}">{{'USER_ACTION.ADD_METADATA.METADATA_ADD' | translate}}</span>
          <i class="vitamui-icon vitamui-icon-chevron-down" style="margin-left: 20px; font-weight: bold;"></i>
        </span>
        <i class="vita"></i>
        <mat-divider class="pastis-popup-separator"></mat-divider>
        <mat-selection-list [disableRipple]="true" [ngModel]="addedItems"
            (ngModelChange)="selectSedaElement($event)" class="list-box">
            <mat-list *ngFor="let element of allowedChildren | filterByName:filterName:sedaLanguage;"
                             class="list-item">
                            <span class="list-box-content">
                                <i id ="pastis-ico-complex-element" *ngIf="isElementComplex(element.Name)" class="vitamui-icon vitamui-icon-complex-element-1-1">
                                  <span class="path1"></span><span class="path2"></span>
                                  <span class="path3"></span><span class="path4"></span>
                                  <span class="path5"></span>
                                </i>

                                <span
                                class="text normal"
                                tooltip={{getDefinition(element.Name)}}
                                 placement="right"
                                 show-delay="0"
                                 tooltip-class="pastis-tooltip-class">{{onResolveName(element.Name)}}</span>
                            </span>
                             <span class="ajouter" (click)="onAddSelectedElement(element.Name)">{{'USER_ACTION.ADD_METADATA.BOUTON_AJOUTER' | translate}}</span>
                             <mat-divider class="pastis-popup-separator"></mat-divider>

            </mat-list>
        </mat-selection-list>
    </mat-list>

    <ng-template #noItemsLeftToAdd>
        <p class="paragraph-metadata-subtitle" style="margin-top: 40px;">{{'USER_ACTION.ADD_METADATA.MESSAGE_PLUS_METADONNEE' | translate}}</p>
    </ng-template>

</div>