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

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

<omf-spinner [spinning]="scope.isGettingTermInfo">
    <div class="omf-csom-taxonomypicker" omfClick [omfClickOut]="scope.focusOutHandler">
        <div class="omf-csom-taxonomypicker-textbox" omfClick [omfClickIn]="scope.focusInHandler" [ngClass]="{focus: scope.isFocus}">
            <div class="omf-csom-picker-values-container">
                <span class="omf-csom-taxonomypicker-selected" *ngFor="let term of selected" title="{{term.name}}">
                    {{term.name}}
                    <span class="omf-csom-taxonomypicker-remove" (click)="!disabled && scope.removeTerm(term.id)">
                        <i class="fa fa-times-circle" aria-hidden="true"></i>
                    </span>
                </span>
                <div class="omf-csom-picker-input-container">
                    <input autocomplete="off" [disabled]="disabled" type="text" [omfHide]="scope.isDisableAdd()" class="omf-csom-taxonomypicker-input" [(ngModel)]="scope.searchText" (keypress)="$event.which === 13 ? $event.preventDefault() : 0" (keyup)="scope.searchTerm($event)" />
                </div>
            </div>
            <a (click)="!disabled && scope.showPickerDialog($event)" class="omf-taxonomy-icon"><i class="fa" [ngClass]="{'fa-tags': isMulti, 'fa-tag': !isMulti}"></i></a>
        </div>
        <omf-spinner [spinning]="scope.isLoading">
            <div class="omf-csom-taxonomypicker-result" [omfShow]="scope.showResult">
                <div class="omf-csom-taxonomypicker-resultset" *ngIf="scope.searchResult != undefined && scope.searchResult.length > 0">
                    <div class="omf-csom-taxonomypicker-resultitem" [ngClass]="{'omf-csom-taxonomypicker-resultitem-selecting': i == scope.selectingIndex}" title="{{term.name}}" *ngFor="let term of scope.searchResult; let i = index" (click)="scope.selectTerm(term)">
                        <span>{{term.displayName}}</span>
                    </div>
                </div>
                <div class="omf-csom-taxonomypicker-resulttext" [omfShow]="scope.totalResult > 0">
                    {{'Components.CSOMTaxonomyPicker.Showing' | omfLocalize}} {{scope.totalResult}}
                    <span *ngIf="scope.totalResult > 1">{{'Components.CSOMTaxonomyPicker.Results' | omfLocalize}}</span>
                    <span *ngIf="scope.totalResult <= 1">{{'Components.CSOMTaxonomyPicker.Result' | omfLocalize}}</span>
                </div>
                <div class="omf-csom-taxonomypicker-resulttext" [omfShow]="scope.totalResult == 0">
                    <span>{{'Components.CSOMTaxonomyPicker.NoResult' | omfLocalize}}</span>
                    <omf-spinner [spinning]="scope.isAdding" [spinSize]="'md'">
                        <span class="omf-taxonomy-addnew" [omfShow]="!scope.isSuggestingSelectedTerm && scope.isCreateTermInSuggestion">
                            <a href="javascript:void(0)" (click)="scope.addTerm()">{{'Components.CSOMTaxonomyPicker.AddTermSuggestion' | omfLocalize}}</a>
                        </span>
                    </omf-spinner>
                </div>
            </div>
        </omf-spinner>
        <div class="omf-overlay-disabled"></div>
    </div>
</omf-spinner>