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

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

<div class="omf-dropdownlist" omfClick [omfClickOut]="clickoutHandler">
    <div class="input-group omf-dropdownlist-input-group">
        <input type="text" class="form-control omf-dropdownlist-textbox" placeholder="{{placeholder | omfLocalize}}" [(ngModel)]="textboxValue" [omfFocus]="onFocus" [ngClass]="{'has-selected-item' : selectedItemValue != null}" (keyup)="filteringItems()" [disabled]="disabledProp">
        <span class="omf-dropdownlist-deselect" (click)="deselect()" [omfHide]="textboxValue === '' || disabledProp"><span>&times;</span></span>
        <span class="input-group-btn">
            <button class="btn btn-default omf-dropdownlist-button" [ngClass]="{'loading' : isLoading == true}" type="button" [omfButtonIndicator]="isLoading" (click)="toggleDropdown()" *ngIf="!disabledProp"><i class="fa fa-caret-down"></i></button>
            <button class="btn btn-default omf-dropdownlist-button" type="button" *ngIf="disabledProp"><i class="fa fa-caret-down"></i></button>
        </span>
    </div>
    <div class="omf-dropdownlist-choices" [omfHide]="!dropdownVisible">
        <div tabindex="0" class="omf-dropdownlist-choice" *ngFor="let item of items" [omfHide]="!filterMatch(textboxValue, item)" (keydown)="onKeydown($event, item)" (click)="select(item)">
            <span [omfInnerHtml]="hightlight(getDisplayedTitle(item), textboxValue)" *ngIf="allowMultipleValues || !selectedItem"></span>
            <span *ngIf="!allowMultipleValues && selectedItem">{{getDisplayedTitle(item)}}</span>
        </div>
    </div>
    <div *ngIf="allowMultipleValues" class="omf-dropdownlist-selected-items" [omfShow]="selectedItemValue.length > 0">
        <span class="omf-dropdownlist-selected-item" *ngFor="let item of selectedItem">
            <span [omfInnerHtml]="getDisplayedTitle(item)"></span>
            <a class="omf-dropdownlist-item-deselect" (click)="deselect(item)" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </a>
        </span>
    </div>
</div>