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

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

<igx-input-group #inputGroup class="input-group" (click)="inputGroupClick($event)" [type]="type" [displayDensity]="displayDensity">
    <ng-container ngProjectAs="[igxLabel]">
        <ng-content select="[igxLabel]"></ng-content>
    </ng-container>
    <ng-container ngProjectAs="igx-prefix">
        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
    </ng-container>
    <input #input class="input" type="text" igxInput [igxSelectItemNavigation]="this"
        [disabled]="disabled"
        readonly="true"
        [attr.placeholder]="this.placeholder"
        [value]="this.selectionValue"
        role="combobox"
        aria-haspopup="listbox"
        [attr.aria-labelledby]="this.label?.id"
        [attr.aria-expanded]="!this.collapsed"
        [attr.aria-owns]="this.listId"
        [attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
        (blur)="onBlur()"
        (focus)="onFocus()"
    />
    <ng-container ngProjectAs="igx-suffix">
        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
    </ng-container>
    <igx-suffix class="igx-select__toggle-button">
        <ng-container *ngIf="toggleIconTemplate">
            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
        </ng-container>
        <igx-icon *ngIf="!toggleIconTemplate">
            {{ inputGroup.theme === 'material' ? collapsed ? 'expand_more' : 'expand_less' : collapsed ? 'arrow_drop_down' : 'arrow_drop_up' }}
        </igx-icon>
    </igx-suffix>
    <ng-container ngProjectAs="igx-hint, [igxHint]" >
        <ng-content select="igx-hint, [igxHint]"></ng-content>
    </ng-container>
</igx-input-group>
<div igxToggle class="igx-drop-down__list" (mousedown)="mousedownHandler($event);"
    (appended)="onToggleContentAppended($event)"
    (opening)="handleOpening($event)"
    (opened)="handleOpened()"
    (closing)="handleClosing($event)"
    (closed)="handleClosed()">

    <div *ngIf="headerTemplate" class="igx-drop-down__select-header">
        <ng-content *ngTemplateOutlet="headerTemplate"></ng-content>
    </div>

    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->
    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight"
        [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="this.label?.id">
        <ng-content select="igx-select-item, igx-select-item-group"></ng-content>
    </div>

    <div *ngIf="footerTemplate" class="igx-drop-down__select-footer">
        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
    </div>
</div>