list-item-form.component.html

<!-- add new node item -->
<div class="new-list-item medium-field" *ngIf="parentIri && projectIri">
    <dsp-string-literal-input class="list-item-label" [placeholder]="placeholder" [value]="[]"
        (dataChanged)="handleData($event)" [language]="language" (enter)="createChildNode()">
    </dsp-string-literal-input>
    <button *ngIf="!loading" mat-icon-button matSuffix [disabled]="!labels && !labels?.length" class="add-node-btn"
        (click)="createChildNode()">
        <mat-icon>
            add
        </mat-icon>
    </button>
    <dsp-progress-indicator [status]="0" *ngIf="loading" class="progress-indicator"></dsp-progress-indicator>
</div>

<!-- node item -->
<div class="list-item medium-field"
    *ngIf="!(parentIri && projectIri) && labels"
    (mouseenter)="mouseEnter()"
    (mouseleave)="mouseLeave()">
    <dsp-string-literal-input class="list-item-label"
        [placeholder]="labels | dspStringifyStringLiteral:'all' | dspTruncate: 128" [value]="labels" [readonly]="true"
        (dataChanged)="handleData($event)" [language]="language">
    </dsp-string-literal-input>
    <div class="action-bubble" *ngIf="showActionBubble" [@simpleFadeAnimation]="'in'">
        <div class="button-container">
            <button mat-button
                    class="edit"
                    title="edit"
                    (click)="$event.stopPropagation(); openDialog('editListNode', labels[0].value, iri)">
                <mat-icon>edit</mat-icon>
            </button>
            <button mat-button
                    class="delete"
                    title="delete"
                    (click)="$event.stopPropagation(); openDialog('deleteListNode', labels[0].value, iri)">
                <mat-icon>delete</mat-icon>
            </button>
        </div>
    </div>
</div>