<button [disabled]="disabled" [ngClass]="selectButtonClasses" (blur)="trySetTouched()" (keydown.arrowDown)="show()"
    (keydown.arrowUp)="show()" class="select-button" type="button" #selectButton>

    <ng-container *ngIf="selectionModel.length; else placeholderTemplate">
        <ng-container *ngIf="customLabel; else defaultSelectionTemplate">
            <ng-content select="el-select-label"></ng-content>
        </ng-container>

        <ng-template #defaultSelectionTemplate>{{ selectionView }}</ng-template>
    </ng-container>

    <ng-template #placeholderTemplate>{{ placeholder }}</ng-template>

    <el-icon icon="chevron-down-outline" pack="endlessjs-essentials" (click)="disabled && $event.stopPropagation()"
        aria-hidden="true">
    </el-icon>
</button>

<div *elPortal [ngClass]="optionsListClasses" [style.width.px]="hostWidth" class="options-list-container">
    <ul class="options-list" [class.full-width]="fullWidth">
        <ng-content select="el-option, el-option-group"></ng-content>
    </ul>
</div>
