<p-overlayPanel [appendTo]="'body'" [hideTransitionOptions]="'0s'" styleClass="no-offset">
    <div class="properties-container" #propertiesContainer
         (mouseenter)="onPanelEnter()" (mouseleave)="onIconOrPanelLeave(row)">
        <ul class="sdi-menu-list">
            <li *ngFor="let incompliantConstraint of incompliantConstraints.second" [class.items-separator]="incompliantConstraint.isSeparator"
                (click)="onConstraintClick(incompliantConstraint)">
                <div *ngIf="!incompliantConstraint.isSeparator; else separator" class="overflow-ellipsis">
                    <i class="fa fa-exclamation-circle name-prefix"
                       [ngClass]="incompliantConstraint.complianceStatus === 'InCompliant' ? 'warning-msg' : 'error-msg'"
                       [title]="incompliantConstraint.complianceStatus === 'InCompliant' ? optionalConstraintTitle : requiredConstraintTitle">
                    </i>

                    <span title="{{incompliantConstraint.constraint.displayName}}">
                        {{incompliantConstraint.constraint.displayName || incompliantConstraint.constraint.constrainedPropertyName}}
                    </span>

                    <i *ngIf="incompliantConstraint.inCompliantReason" class="fa fa-question-circle-o sdi-tip-icon"
                       title="{{incompliantConstraint.inCompliantReason}}">
                    </i>
                </div>

                <ng-template #separator>
                    <div class="options-group-header labeled overflow-ellipsis">
                        {{incompliantConstraint.label}}
                    </div>
                </ng-template>
            </li>
        </ul>
    </div>
</p-overlayPanel>