unicorn-components/src/components/forms/select/select.component.html

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

<div (clickOutside)="onClickOutside()">
    <uni-input iconRight="arrow_drop_down" [placeholder]="placeholder" [name]="name" [icon]="icon" [label]="label" [clear]="clear"
        (uniFocus)="onFocus($event)" (uniBlur)="onBlur($event)" [(model)]="searchModel" [readonly]="!filterable" (modelChange)="onFilter($event)"
        [chips]="chips ? optionsSelected : null" (deleteChip)="onSelect(optionsSelected[$event])">
    </uni-input>

    <ul class="uni-select__options nospacing" *ngIf="areOptionsVisible">
        <li *ngIf="multiple && !searchModel" class="uni-select__option" (click)="onSelectAll()" (mousedown)="onSelectingOption(true)" (mouseup)="onSelectingOption(false)">
            Select all
        </li>
        <li *ngIf="multiple && !searchModel" class="uni-select__option" (click)="onSelect(null)" (mousedown)="onSelectingOption(true)" (mouseup)="onSelectingOption(false)">
            Select none
        </li>

        <uni-separator *ngIf="multiple && !searchModel"></uni-separator>

        <li class="uni-select__option" *ngFor="let option of optionsFiltered; let i = index;" [class.uni-select__option--selected]="isOptionSelected(option)" [class.uni-select__option--pointed]="isOptionPointed(i)"
            (click)="onSelect(option)" (mouseover)="onHoverOption(i)" (mousedown)="onSelectingOption(true)" (mouseup)="onSelectingOption(false)">

            <uni-icon *ngIf="multiple" class="uni-select__option-icon" [icon]="isOptionSelected(option) ? 'check_box' : 'check_box_outline_blank'">
            </uni-icon>
            <span [innerHtml]="(option.label | highlight:searchModel) || '(Unlabeled)'"></span>
        </li>
    </ul>
</div>