display-edit.component.html

<div class="grid-container">
    <div class="value-component"
        (mouseenter)="mouseEnter()"
        (mouseleave)="mouseLeave()"
        [ngClass]='backgroundColor'>
        <span [ngSwitch]="valueTypeOrClass">
            <!-- display value is cast as 'any' because the compiler cannot infer the value type expected by the child component -->
            <app-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)"></app-text-value-as-string>
            <app-text-value-as-html class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsHtml'" [mode]="mode" [displayValue]="$any(displayValue)"></app-text-value-as-html>
            <app-text-value-as-xml class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsXml'" [mode]="mode" [displayValue]="$any(displayValue)"
                                   (internalLinkClicked)="standoffLinkClicked($event)" (internalLinkHovered)="standoffLinkHovered($event)"></app-text-value-as-xml>
            <app-int-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-int-value>
            <app-boolean-value class="parent-value-component" #displayVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-boolean-value>
            <app-uri-value class="parent-value-component" #displayVal *ngSwitchCase="constants.UriValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-uri-value>
            <app-decimal-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DecimalValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-decimal-value>
            <app-color-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ColorValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-color-value>
            <app-interval-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntervalValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-interval-value>
            <app-time-value class="parent-value-component" #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-time-value>
            <app-geoname-value class="parent-value-component" #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]="$any(displayValue)"></app-geoname-value>
            <app-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="$any(displayValue)"
                        [parentResource]="parentResource" [propIri]="displayValue.property" (referredResourceClicked)="referredResourceClicked.emit($event)" (referredResourceHovered)="referredResourceHovered.emit($event)"></app-link-value>
            <app-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)" [displayOptions]="dateDisplayOptions" [labels]="showDateLabels" [ontologyDateFormat]="dateFormat"></app-date-value>
            <app-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="$any(displayValue)"
                        [propertyDef]="$any(parentResource.entityInfo.properties[displayValue.property])"></app-list-value>
            <span *ngSwitchDefault>{{displayValue.strval}}</span>
        </span>
        <div class="action-bubble" *ngIf="showActionBubble && !editModeActive" [@simpleFadeAnimation]="'in'">
            <div class="button-container">
                <button mat-button
                        class="edit"
                        [matTooltip]="'edit'"
                        *ngIf="!readOnlyValue && canModify && !editModeActive"
                        (click)="activateEditMode()">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-button
                        class="info"
                        matTooltip="{{getTooltipText()}}"
                        matTooltipClass="info-tooltip">
                        <mat-icon>info</mat-icon>
                </button>
                <button mat-button
                        class="comment-toggle"
                        title="toggle comment"
                        *ngIf="shouldShowCommentToggle"
                        (click)="toggleComment()">
                    <mat-icon>comment</mat-icon>
                </button>
                <span [matTooltip]="(canDelete ? 'delete' : 'This value cannot be deleted because at least one value is required')">
                    <button mat-button
                        class="delete"
                        *ngIf="!readOnlyValue && canModify && !editModeActive"
                        [disabled]="!canDelete"
                        (click)="openDialog()">
                        <mat-icon>delete</mat-icon>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div class="crud-buttons" *ngIf="!readOnlyValue">
        <button mat-icon-button
            *ngIf="editModeActive"
            class="value-action save"
            title="save"
            [disabled]="!displayValueComponent.form.valid"
            (click)="saveEditValue()">
            <mat-icon>save</mat-icon>
        </button>
        <button mat-icon-button
            *ngIf="editModeActive"
            class="value-action cancel"
            title="cancel"
            (click)="cancelEditValue()">
            <mat-icon>undo</mat-icon>
        </button>
    </div>
</div>