@omnia/foundation/extensibility/typings/directives/CSOMPeoplePicker.html

Provide omnia foundation typings and tooling work on client side for omnia extension

<div class="omf-csom-peoplepicker" omfClick [omfClickOut]="scope.focusOutHandler">
    <div class="omf-csom-peoplepicker-textbox" omfClick [omfClickIn]="scope.focusInHandler" [ngClass]="{focus: scope.isFocus}">
        <div class="omf-csom-picker-values-container">
            <span class="omf-csom-peoplepicker-user" *ngFor="let principal of selected" title="{{principal.displayText}}">
                <span [ngClass]="{'notfound': principal.notFound}">{{principal.displayText}}</span><i class="fa fa-spinner fa-pulse" [omfShow]="scope.pickerType == 1 && !principal.isResolved"></i><button type="button" [omfHide]="principal.canNotRemove" class="omf-csom-peoplepicker-remove" (click)="!disabled && scope.removePrincipal(principal)">x</button>
            </span>
        </div>
        <div class="omf-csom-picker-input-container">
            <input  autocomplete="off"  type="text" [disabled]="disabled || scope.isDisableAdd()" class="omf-csom-peoplepicker-input" [(ngModel)]="scope.searchText" (keypress)="$event.which === 13 ? $event.preventDefault() : 0" (keyup)="scope.searchPeoplePicker($event)" />
        </div>
    </div>
    <div class="error-message" [omfShow]="scope.checkIfExistNotFoundUser()">
        {{'Components.CSOMPeoplePicker.notFoundUser' | omfLocalize}}
    </div>
    <div class="omf-csom-peoplepicker-result" [omfShow]="scope.showResult">
        <omf-spinner [spinning]="scope.isLoading">
            <div class="omf-csom-peoplepicker-resultset" *ngIf="scope.userResult != undefined && scope.userResult.length > 0">
                <div class="omf-csom-peoplepicker-resultitem" [ngClass]="{'omf-csom-peoplepicker-resultitem-selecting': i == scope.selectingIndex}" title="{{user.tooltip}}" *ngFor="let user of scope.userResult; let i = index" (click)="scope.addPrincipal(user)">
                    <span>{{user.displayText}}</span>
                </div>
            </div>
            <div class="omf-csom-peoplepicker-resultset" *ngIf="scope.securityGroupResult != undefined && scope.securityGroupResult.length > 0">
                <div class="omf-csom-peoplepicker-resultitem" [ngClass]="{'omf-csom-peoplepicker-resultitem-selecting': i + scope.userResult.length == scope.selectingIndex}" title="{{group.tooltip}}" *ngFor="let group of scope.securityGroupResult; let i = index" (click)="scope.addPrincipal(group)">
                    <span>{{group.displayText}}</span>
                </div>
            </div>
            <div class="omf-csom-peoplepicker-resultset" *ngIf="scope.spGroupResult != undefined && scope.spGroupResult.length > 0">
                <div class="omf-csom-peoplepicker-resultitem" [ngClass]="{'omf-csom-peoplepicker-resultitem-selecting': i + scope.userResult.length + scope.securityGroupResult.length == scope.selectingIndex}" title="{{group.tooltip}}" *ngFor="let group of scope.spGroupResult; let i = index" (click)="scope.addPrincipal(group)">
                    <span>{{group.displayText}}</span>
                </div>
            </div>
            <div class="omf-csom-peoplepicker-resulttext" *ngIf="scope.totalResult > 0">
                {{'Components.CSOMPeoplePicker.showing' | omfLocalize}} {{scope.totalResult}}
                <span *ngIf="scope.totalResult > 1">{{'Components.CSOMPeoplePicker.results' | omfLocalize}}</span>
                <span *ngIf="scope.totalResult <= 1">{{'Components.CSOMPeoplePicker.result' | omfLocalize}}</span>
            </div>
            <div class="omf-csom-peoplepicker-resulttext" *ngIf="scope.totalResult == 0">
                {{'Components.CSOMPeoplePicker.noResult' | omfLocalize}}
            </div>
        </omf-spinner>
    </div>
    <div class="omf-overlay-disabled"></div>
</div>