igniteui-angular-sovn/src/lib/simple-combo/simple-combo.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<igx-input-group #inputGroup [displayDensity]="displayDensity" [suppressInputAutofocus]="true" [type]="type">

    <ng-container ngProjectAs="[igxLabel]">
        <ng-content select="[igxLabel]"></ng-content>
    </ng-container>

    <ng-container ngProjectAs="igx-prefix">
        <ng-content select="igx-prefix"></ng-content>
    </ng-container>

    <ng-container ngProjectAs="igx-hint, [igxHint]">
        <ng-content select="igx-hint, [igxHint]"></ng-content>
    </ng-container>

    <input #comboInput igxInput [value]="value" role="combobox"
        aria-haspopup="listbox" aria-autocomplete="list" aria-readonly="false"
        [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
        [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
        [attr.placeholder]="placeholder" [disabled]="disabled" [igxTextSelection]="!composing"
        (focus)="onFocus()" (input)="handleInputChange($event)" (click)="handleInputClick()"
        (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()"/>

    <ng-container ngProjectAs="igx-suffix">
        <ng-content select="igx-suffix"></ng-content>
    </ng-container>

    <igx-suffix *ngIf="selection.length" aria-label="Clear Selection" class="igx-combo__clear-button"
        (click)="handleClear($event)">
        <ng-container *ngIf="clearIconTemplate">
            <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
        </ng-container>
        <igx-icon *ngIf="!clearIconTemplate">
            {{ clearIcon }}
        </igx-icon>
    </igx-suffix>

    <igx-suffix *ngIf="showSearchCaseIcon">
        <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
            (click)="toggleCaseSensitive()">
        </igx-icon>
    </igx-suffix>

    <igx-suffix class="igx-combo__toggle-button" (click)="onClick($event)">
        <ng-container *ngIf="toggleIconTemplate">
            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
        </ng-container>
        <igx-icon *ngIf="!toggleIconTemplate">
            {{ toggleIcon }}
        </igx-icon>
    </igx-suffix>

</igx-input-group>

<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
    [labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
    [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
    (opened)="handleOpened()" (closed)="handleClosed()" [singleMode]="true">
    <ng-container *ngTemplateOutlet="headerTemplate">
    </ng-container>
    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
        [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown"
        [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id"
        [attr.aria-activedescendant]="this.activeDescendant"
        (focus)="dropdown.onFocus()" (keydown)="handleItemKeyDown($event)">
        <igx-combo-item  [role]="item?.isHeader? 'group' : 'option'" [singleMode]="true"
            [itemHeight]="itemHeight" (click)="handleItemClick()" *igxFor="let item of data
                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
                | comboGrouping:groupKey:valueKey:groupSortingDirection;
                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
                [value]="item" [isHeader]="item?.isHeader" [index]="rowIndex">
            <ng-container *ngIf="item?.isHeader">
                <ng-container
                    *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
                </ng-container>
            </ng-container>
            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->
            <ng-container *ngIf="!item?.isHeader">
                <ng-container #listItem
                    *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
                </ng-container>
            </ng-container>
        </igx-combo-item>
    </div>

    <div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
        <div class="igx-combo__empty" *ngIf="filteredData.length === 0">
            <ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
            </ng-container>
        </div>
        <igx-combo-add-item #addItem [itemHeight]="itemHeight" *ngIf="isAddButtonVisible()"
            [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
            aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
            <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
            </ng-container>
        </igx-combo-add-item>
    </div>
    <ng-container *ngTemplateOutlet="footerTemplate">
    </ng-container>
</igx-combo-drop-down>

<ng-template #complex let-display let-data="data" let-key="displayKey">
    {{display[key]}}
</ng-template>
<ng-template #primitive let-display>
    {{display}}
</ng-template>
<ng-template #empty>
    <span>{{resourceStrings.igx_combo_empty_message}}</span>
</ng-template>
<ng-template #addItemDefault let-control>
    <button igxButton="flat" igxRipple>Add item</button>
</ng-template>
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
    {{ item[key] }}
</ng-template>