<template>
|
<div class={getFormElementClass}>
|
<label lwc:if={label} class={getLabelClass} for="combobox">
|
<abbr lwc:if={required} title="required" class="slds-required"
|
>*</abbr
|
>
|
{label}
|
</label>
|
<div class="slds-form-element__control">
|
<div class={getContainerClass}>
|
<div
|
class={getDropdownClass}
|
aria-expanded={isListboxOpen}
|
aria-haspopup="listbox"
|
aria-owns="listbox"
|
role="combobox"
|
>
|
<!-- Search input start -->
|
<div class={getComboboxClass} role="none">
|
<template lwc:if={isSingleEntry}>
|
<lightning-icon
|
icon-name={getSelectIconName}
|
size="small"
|
alternative-text="Selected item icon"
|
class={getSelectIconClass}
|
>
|
</lightning-icon>
|
</template>
|
|
<!-- Text input -->
|
<input
|
type="text"
|
class={getInputClass}
|
aria-autocomplete="list"
|
aria-controls="listbox"
|
aria-activedescendant={_focusedResultIndex}
|
autocomplete="off"
|
role="textbox"
|
id="combobox"
|
placeholder={placeholder}
|
value={getInputValue}
|
title={getInputTitle}
|
readonly={isInputReadonly}
|
disabled={disabled}
|
onfocus={handleFocus}
|
onblur={handleBlur}
|
oninput={handleInput}
|
onkeydown={handleKeyDown}
|
/>
|
|
<!-- Search icon -->
|
<lightning-icon
|
icon-name="utility:search"
|
size="x-small"
|
alternative-text="Search icon"
|
class={getSearchIconClass}
|
></lightning-icon>
|
|
<!-- Clear selection button icon for single entry lookups -->
|
<template lwc:if={isSingleEntry}>
|
<button
|
title="Remove selected option"
|
type="button"
|
onclick={handleClearSelection}
|
class={getClearSelectionButtonClass}
|
disabled={disabled}
|
>
|
<lightning-icon
|
icon-name="utility:close"
|
size="x-small"
|
alternative-text="Remove selected option"
|
class="slds-button__icon"
|
></lightning-icon>
|
</button>
|
</template>
|
</div>
|
<!-- Search input end -->
|
|
<!-- Result list box start -->
|
<div
|
id="listbox"
|
role="listbox"
|
aria-label={label}
|
onmousedown={handleComboboxMouseDown}
|
onmouseup={handleComboboxMouseUp}
|
class={getListboxClass}
|
>
|
<ul
|
class="slds-listbox slds-listbox_vertical"
|
role="presentation"
|
>
|
<!-- Spinner to display when waiting for results of search -->
|
<div lwc:if={loading}>
|
<lightning-spinner
|
alternative-text="Loading"
|
size="small"
|
></lightning-spinner>
|
</div>
|
|
<!-- Result list start -->
|
<template
|
for:each={searchResultsLocalState}
|
for:item="item"
|
for:index="index"
|
lwc:if={hasResults}
|
>
|
<li
|
key={item.result.id}
|
role="presentation"
|
class="slds-listbox__item"
|
>
|
<div
|
class={item.classes}
|
role="option"
|
id={index}
|
aria-label={item.result.title}
|
onclick={handleResultClick}
|
data-recordid={item.result.id}
|
>
|
<span
|
class="slds-media__figure slds-listbox__option-icon"
|
>
|
<lightning-icon
|
icon-name={item.result.icon}
|
size="small"
|
alternative-text="Result item icon"
|
></lightning-icon>
|
</span>
|
<span class="slds-media__body">
|
<span
|
class="slds-listbox__option-text slds-listbox__option-text_entity"
|
>
|
<lightning-formatted-rich-text
|
value={item.result.titleFormatted}
|
disable-linkify
|
>
|
</lightning-formatted-rich-text>
|
</span>
|
<!-- <span lwc:if={item.result.subtitleFormatted}
|
class="slds-listbox__option-meta slds-listbox__option-meta_entity">
|
<lightning-formatted-rich-text value={item.result.subtitleFormatted}
|
disable-linkify>
|
</lightning-formatted-rich-text>
|
</span> -->
|
</span>
|
</div>
|
</li>
|
</template>
|
<!-- Result list end -->
|
|
<!-- No results start -->
|
<template lwc:else>
|
<li role="presentation">
|
<span
|
class="slds-media slds-listbox__option_entity"
|
role="option"
|
>
|
<span
|
lwc:if={loading}
|
class="slds-media__body"
|
>Loading...</span
|
>
|
<span lwc:else class="slds-media__body"
|
>No results.</span
|
>
|
</span>
|
</li>
|
</template>
|
<!-- No results end -->
|
|
<!-- Create new records -->
|
<template
|
for:each={newRecordOptions}
|
for:item="newRecord"
|
>
|
<li
|
key={newRecord.value}
|
role="presentation"
|
class="slds-listbox__item"
|
>
|
<div
|
class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity"
|
onclick={handleNewRecordClick}
|
data-sobject={newRecord.value}
|
role="option"
|
>
|
<span
|
class="slds-media__figure slds-listbox__option-icon"
|
>
|
<lightning-icon
|
icon-name="utility:add"
|
size="small"
|
alternative-text={newRecord.label}
|
></lightning-icon>
|
</span>
|
<span class="slds-media__body">
|
<span
|
class="slds-listbox__option-text"
|
>{newRecord.label}</span
|
>
|
</span>
|
</div>
|
</li>
|
</template>
|
<!-- Create new records end -->
|
</ul>
|
</div>
|
<!-- Result list box end -->
|
</div>
|
</div>
|
|
<!-- Multi-selection start -->
|
<template lwc:if={isMultiEntry}>
|
<div
|
id="selection"
|
role="listbox"
|
aria-label={label}
|
aria-orientation="horizontal"
|
>
|
<ul
|
class="slds-listbox slds-listbox_inline slds-var-p-top_xxx-small"
|
role="group"
|
aria-label="Selected options"
|
>
|
<template for:each={selection} for:item="item">
|
<li key={item.id} role="presentation">
|
<lightning-pill
|
label={item.title}
|
title={item.title}
|
onremove={handleRemoveSelectedItem}
|
name={item.id}
|
>
|
<lightning-icon
|
icon-name={item.icon}
|
></lightning-icon>
|
</lightning-pill>
|
</li>
|
</template>
|
</ul>
|
</div>
|
</template>
|
<!-- Multi-selection end -->
|
|
<!-- Errors start -->
|
<template for:each={_errors} for:item="error">
|
<div
|
key={error.id}
|
role="alert"
|
class="slds-form-element__label slds-var-m-top_xx-small form-error"
|
>
|
{error.message}
|
</div>
|
</template>
|
<!-- Errors end -->
|
</div>
|
</div>
|
</template>
|
