@rdkmaster/jigsaw-labs/component/combo-select/combo-select.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-combo-select"
     [class.jigsaw-combo-select-disabled]="disabled"
     (click)="$event.preventDefault();$event.stopPropagation();"
     jigsaw-float
     [jigsawFloatOpenTrigger]="openTrigger"
     [jigsawFloatCloseTrigger]="closeTrigger"
     [jigsawFloatTarget]="_$contentTemplateRef"
     [(jigsawFloatOpen)]="_$opened"
     (jigsawFloatOpenChange)="_$comboOpenChange($event)"
     [jigsawFloatOptions]="_$options">
    <div class="jigsaw-combo-select-selection">
        <div class="jigsaw-combo-select-selection-rendered">
            <jigsaw-tag *ngFor="let tagItem of value; trackBy: _$trackByFn"
                        [closable]='tagItem?.closable'
                        [showBorder]="showValueBorder"
                        (select)="_$tagClick(tagItem)"
                        (close)="_$removeTag(tagItem)">
                {{tagItem && tagItem[labelField] ? tagItem[labelField] : tagItem}}
            </jigsaw-tag>
            <jigsaw-input #editor *ngIf="searchable && !disabled" [(value)]="searchKeyword" [disabled]="searching"
                          width="100%" (valueChange)="_$handleSearchBoxChange()"
                          [clearable]="false" [placeholder]="value.length == 0 ? placeholder : ''">
            </jigsaw-input>
            <div class="jigsaw-combo-select-placeholder" *ngIf="placeholder && value.length == 0 && !searchable">
                {{placeholder}}
            </div>
        </div>
    </div>
    <i class="fa fa-times-circle jigsaw-combo-select-clear"
       *ngIf="clearable && value && value.length != 0" (click)="_$clearValue()"></i>
    <i class="fa fa-angle-down jigsaw-combo-select-arrow"></i>
</div>
<ng-content></ng-content>