pm-controls/source/app/controls/components/boxes/combo-box/combo-box.html

ProModel Controls

<div class="combo-box-container {{CompatibilityService.LegacyFlex}}">
    <div class="combo-box-area {{CompatibilityService.LegacyFlexElement}}" [style.width]="Width">
        <div class="combo-box-panel {{ComboBoxPanelClass}} {{ComboBoxModeClass}} {{CompatibilityService.LegacyCustomClass('legacy-combo-box-panel')}}"
             [class.combo-box-panel-disabled]="IsDisabled">
            <pm-busy-indicator-circular *ngIf="IsBusy">
            </pm-busy-indicator-circular>
            <div *ngIf="AllSelected == false" class="combo-box-selection-container">
                <pm-combo-selected-item 
                    *ngFor="let item of SelectedItems" 
                    [Item]="item"
                    [ShowRemoveItem]="ShowRemoveItem"
                    [DisplayMemberPath]="DisplayMemberPath"
                    (OnDelete)="RemoveSelectedItem($event)">
                </pm-combo-selected-item>
            </div>
            <div *ngIf="AllSelected == true" class="combo-box-selection-container">
                <pm-combo-selected-item 
                    [Item]="'All'"
                    [ShowRemoveItem]="ShowRemoveItem"
                    (OnDelete)="RemoveAllItem($event)">
                </pm-combo-selected-item>
            </div>
            <pm-text-box [style.display]="IsReadOnly?'none':undefined"
                         TextBoxClass="text-box-complete"
                         [Text]="Text"
                         [Watermark]="WatermarkDisplay"                         
                         [IsDisabled]="IsDisabled"
                         [IsReadOnly]="IsReadOnly"
                         class="combo-box-panel-input"
                         (KeyUp)="onKeyUp($event)"
                         (KeyDown)="onKeyDown($event)"
                         (FocusChange)="onFocusChange($event)"
                         (TextChange)="onTextChange($event)">
            </pm-text-box>
        </div>
        <pm-button-icon MaxHeight="28px"
                        class="{{CompatibilityService.LegacyCustomClass('legacy-combo-box-button')}}"
                        [IsDisabled]="IsDisabled"
                        [ButtonClass]="ComboBoxButtonClass"
                        (click)="onDropDownClick($event)">
            <pm-icon-down-arrow></pm-icon-down-arrow>
        </pm-button-icon>
    </div>
    <pm-drop-down [IsDropDownOpen]="IsDropDownOpen" Width="{{DropDownWidth}}">
        <div class="dropdown-top-border"></div>
        <div *ngIf="ShowClearButton == true" 
             (click)="OnClickClear()" 
             class="clear-button layout-flex">
             <pm-icon-times-circle [style.padding-right.px]="5"></pm-icon-times-circle> Clear Selection
        </div>
        <ng-content></ng-content>
        <div class="combo-box-drop-down">
            <pm-virtual-panel 
                #virtualPanel
                ControlHeight="300px"
                [ItemsSource]="filteredItemSource"
                [ItemHeight]="ItemHeight"
                [HighlightedItem]="HighlightedItem"
                [DisplayMemberPath]="DisplayMemberPath"
                [ShowHighlight]="ShowHighlight"
                [SelectedItems]="SelectedItems"
                (ItemSelected)="SelectItem($event)"
                [ItemClass]="ComboBoxItemClass"
                [(Text)]="Text"
                [ItemTemplate]="ItemTemplate || defaultTemplate"
                [ItemHighlightClass]="'combo-box-item-highlight'"
                [ItemSelectedClass]="ComboBoxListItemSelectedClass">
            </pm-virtual-panel>
        </div>
    </pm-drop-down>
</div>

<ng-template #defaultTemplate let-item>
    <div class="combo-box-item-template" [innerHTML]="getItemDisplay(item) | highlight : Text"></div>
</ng-template>