83 lines
4.0 KiB
HTML
83 lines
4.0 KiB
HTML
<div class="dropdown-input full-width" dropdown is-open="state.isOpen">
|
|
<button ux-id="dropdown-btn" type="button" class="dropdown-input__button dropdown-toggle" ng-class="{'ng-invalid-required' : (!selectedItemValue && selectedItemValue !== 0) && required}" id="{{inputId}}"
|
|
ng-disabled="disabledSelection" ng-class="{'dropdown-input__button_placeholder': !selectedItemValue && !firstItemEmpty}"
|
|
title="{{selectedItemLabel ? selectedItemLabel : 'common.placeholder.selectOne' | i18n}}">
|
|
{{selectedItemLabel ? selectedItemLabel : 'common.placeholder.selectOne' | i18n}}
|
|
</button>
|
|
<i ux-id="remove-item" class="icon-cross dropdown-clear" aria-label="{{'common.button.clear' | i18n}} {{titleText}}" role="link"
|
|
ng-if="!disabledSelection && showClear && selectedItemValue != null" ng-click="clear()" ng-enter="clear()" tabindex="0"></i>
|
|
<input ng-if="fieldName" type="text"
|
|
ux-id="dropdown-input"
|
|
potentially-required-field
|
|
field-name="{{fieldName}}"
|
|
entity="entity"
|
|
style="display: none;"
|
|
name="selectedItem"
|
|
ng-required="required"
|
|
ng-model="selectedItem" />
|
|
<input ng-if="!fieldName" type="text"
|
|
ux-id="dropdown-input"
|
|
style="display: none;"
|
|
name="{{tempFieldName}}"
|
|
ng-required="required"
|
|
ng-model="selectedItem" />
|
|
<ul class="dropdown-menu full-width">
|
|
<li class="dropdown-item__header" ng-if="selectionFilter && !typeaheadMode" ng-click="$event.stopPropagation();">
|
|
<label for="search_filter">
|
|
{{'common.placeholder.search' | i18n}}
|
|
</label>
|
|
</li>
|
|
<li class="dropdown-item_search-bar" ng-if="selectionFilter && !typeaheadMode">
|
|
<i class="icon-search dropdown-item_search-icon"></i>
|
|
<input id="search_filter" ux-id="search-text" title="{{selectionFilterPlaceholderText | i18n}}"
|
|
prevent-click-event
|
|
class="dropdown-item_search"
|
|
type="text"
|
|
ng-model="search.searchFilterText"
|
|
ng-keyup="handleKeyup($event)"
|
|
ng-keydown="handleKeydown($event)"
|
|
placeholder="{{selectionFilterPlaceholderText | i18n}}"/>
|
|
</li>
|
|
<li class="dropdown-item_typeahead-bar" ng-if="typeaheadMode" prevent-click-event>
|
|
<div class="dropdown-item_typeahead-label" ng-if="!search.typeaheadText || (search.typeaheadText.length > 2 && tooltip.showTooltip)">{{'common.labels.tooManyToDisplay' | i18n}}</div>
|
|
<input ux-id="search-typeahead" title="{{selectionFilterPlaceholderText | i18n}}"
|
|
class="dropdown-item_search-bar-input"
|
|
type="text"
|
|
ng-model="search.typeaheadText"
|
|
autocomplete="off"
|
|
typeahead-min-length="3"
|
|
typeahead="{{typeaheadDetails}}"
|
|
typeahead-on-select="itemSelected($item);search.typeaheadText='';"
|
|
typeahead-wait-ms="500"
|
|
typeahead-loading="isTypeaheadLoading"
|
|
ng-keydown="handleKeydown($event)"
|
|
ng-keyup="handleKeyup($event)"
|
|
placeholder="{{selectionFilterPlaceholderText | i18n}}"/>
|
|
<div class="dropdown-item_typeahead-bar-bottom-spinner">
|
|
<loading-spinner if="isTypeaheadLoading" inline="true"></loading-spinner>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-item" ng-if="loadingFlag">
|
|
<loading-spinner if="loadingFlag" inline="true" centered="true"></loading-spinner>
|
|
</li>
|
|
<li ng-if="firstItemEmpty && !typeaheadMode">
|
|
<a ux-id="selection-empty" class="dropdown-item"
|
|
ng-click="itemSelected()"
|
|
ng-keydown="handleKeydown($event)"
|
|
href="javascript:void(0)"
|
|
role="menuitem">
|
|
</a>
|
|
</li>
|
|
<li ux-id="selection-item_{{$index}}" ng-if="!search.typeaheadText" ng-repeat="selectionItem in selectionItems | filter : filterDropDown(search.searchFilterText)">
|
|
<a ux-id="item" class="{{(value ? selectionItem[value] == selectedItem[value] : selectionItem == selectedItem) ? 'dropdown-item_selected' : 'dropdown-item'}}"
|
|
ng-click="itemSelected(selectionItem)"
|
|
ng-enter="itemSelected(selectionItem)"
|
|
ng-keydown="handleKeydown($event)"
|
|
href="javascript:void(0)"
|
|
role="menuitem" aria-label="{{getLabel(selectionItem)}}">
|
|
{{getLabel(selectionItem)}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|