property-info.component.html

<div class="property-info" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">

    <div mat-line class="title" [class.with-line-break]="!propCard">
        <span class="icon" *ngIf="propType" [matTooltip]="propType?.group + ': ' + propType?.label + ' (' + propDef.id.split('#')[1] + ')'"
            matTooltipPosition="above">
            <mat-icon class="type">{{propType?.icon}}</mat-icon>
        </span>
        <span class="label" [matTooltip]="propDef.comment" matTooltipPosition="above" matTooltipClass="multi-line-tooltip">
            <!-- display label if cardinality exists (in case the component is used in resource class view) -->
            <span *ngIf="propCard; else displayAllLabels">{{propDef.label ? propDef.label : propDef.id}}</span>
            <!-- otherwise display label in all languages (if defined) -->
            <ng-template #displayAllLabels>
                {{!propDef.labels.length ? propDef?.label : propDef.labels | appStringifyStringLiteral:'all'}}
            </ng-template>
        </span>
        <!-- property is linked to a class or to a list: display connected class or list -->
        <span class="attribute additional-info" *ngIf="propAttribute" [matTooltip]="propAttributeComment"
            matTooltipPosition="above" [innerHTML]="'&rarr;&nbsp;' + propAttribute">
        </span>
    </div>

    <div mat-line class="info additional-info" [class.flex]="propCard" [class.with-line-break]="!propCard">
        <span [matTooltip]="'id: ' + propDef.id" matTooltipPosition="above" matTooltipClass="wide-tooltip" class="mat-caption">
            {{propDef.id | split: '#':1}}
        </span>
        <span class="fill-remaining-space center">&nbsp;&middot;&nbsp;</span>
        <!-- in case of res class: display cardinality -->
        <span *ngIf="propCard">
            <mat-icon class="multiple">{{propInfo.multiple ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
            multiple
            <mat-icon class="required">{{propInfo.required ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
            required
        </span>
        <!-- in case of ontology property: display corresponding resource classes -->
        <span *ngIf="!propCard" class="white-space">
            <span *ngIf="resClasses.length; else notUsed">
                Property is used in:
                <!-- <span>{{ resClasses.join(", ") }}</span> -->
                <span *ngFor="let c of resClasses; let last = last">
                    <span [matTooltip]="c.comment" matTooltipPosition="above" class="link"
                        (click)="clickedOnClass.emit(c)">{{c.label}}</span>
                    <span *ngIf="!last">,&nbsp;</span>
                </span>
            </span>
            <ng-template #notUsed>
                <span class="not-used">This property is not used in a class</span>
            </ng-template>
        </span>
    </div>

    <div class="action-bubble" *ngIf="lastModificationDate && projectStatus && showActionBubble" [@simpleFadeAnimation]="'in'">
        <!-- property action in case of resource class' view has different buttons and actions -->
        <div class="button-container" *ngIf="propCard">
            <!-- TODO: edit cardinality is disabled for the moment. Will be activated as soon as we use DSP-API 13.9.1 -->
            <button mat-button [disabled]="true" [matTooltip]="'Edit property and cardinality'" matTooltipPosition="above">
                <mat-icon>tune</mat-icon>
            </button>
            <span matTooltipPosition="above"
                [matTooltip]="((!propCanBeDeleted) ?
                    (propCard.isInherited ?
                        'The property can\'t be removed because it is inherited from another class' :
                        'The property can\'t be removed because it is in use'
                    ) : 'Remove property from resource class')">
                <button mat-button [disabled]="!propCanBeDeleted" class="delete"
                    (click)="removePropertyFromClass.emit({iri: propDef.id, label: propDef.label})">
                    <mat-icon>backspace</mat-icon>
                </button>
            </span>
        </div>
        <!-- property action in case of properties' list view -->
        <div class="button-container" *ngIf="!propCard">
            <span matTooltipPosition="above"
                [matTooltip]="propDef.isEditable ? 'Edit property' : 'The property can\'t be edited; No further information available'">
                <button mat-button [disabled]="!propDef.isEditable" class="edit"
                    (click)="editResourceProperty.emit({propDef: propDef, propType: propType})">
                    <mat-icon>edit</mat-icon>
                </button>
            </span>
            <span matTooltipPosition="above"
                [matTooltip]="((resClasses.length > 0) ? 'The property can\'t be deleted because it is used in a class' : 'Delete property')">
                <button mat-button [disabled]="resClasses.length > 0" class="delete"
                    (click)="deleteResourceProperty.emit({iri: propDef.id, label: propDef.label})">
                    <mat-icon>delete</mat-icon>
                </button>
            </span>
        </div>
    </div>
</div>