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

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

<igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type" (click)="onClick($event)">
    <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 igxInput #comboInput name="comboInput" type="text" [value]="value" readonly
            [attr.placeholder]="placeholder" [disabled]="disabled"
            role="combobox" aria-haspopup="listbox"
            [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
            [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
            (blur)="onBlur()" />
    <ng-container ngProjectAs="igx-suffix">
        <ng-content select="igx-suffix"></ng-content>
    </ng-container>
    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button"
        (click)="handleClearItems($event)">
        <ng-container *ngIf="clearIconTemplate">
            <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
        </ng-container>
        <igx-icon *ngIf="!clearIconTemplate">
            {{ clearIcon }}
        </igx-icon>
    </igx-suffix>
    <igx-suffix class="igx-combo__toggle-button">
        <ng-container *ngIf="toggleIconTemplate">
            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.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()">
    <div class="igx-combo__search">
        <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" >
            <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                   [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                   (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
                   aria-autocomplete="list" role="searchbox" aria-label="search"/>
            <igx-suffix *ngIf="showSearchCaseIcon" (click)="toggleCaseSensitive()">
                <span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
                    <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"></igx-icon>
                </span>
            </igx-suffix>
        </igx-input-group>
    </div>
    <ng-container *ngTemplateOutlet="headerTemplate">
    </ng-container>
    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
        [style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
        [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
        [attr.aria-activedescendant]="this.activeDescendant">
        <igx-combo-item [itemHeight]='itemHeight' *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" [role]="item?.isHeader? 'group' : 'option'">
            <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 [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>