carbon-components-angular
Version:
Next generation components
5,771 lines • 248 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">carbon-components-angular documentation</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Components</li>
<li class="breadcrumb-item"
>
ComboBox</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info" class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source" class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
<li class="nav-item">
<a href="#tree" class="nav-link"
role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/combobox/combobox.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Get started with importing the module:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import { ComboBoxModule } from 'carbon-components-angular';</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.
Multi-select comboboxes also provide "pills" of selected items.</p>
<p><a href="../../?path=/story/components-combobox--basic">See demo</a></p>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnChanges</code>
<code>AfterViewInit</code>
<code>AfterContentInit</code>
<code>OnDestroy</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">providers</td>
<td class="col-md-9">
<code><a href="../components/ComboBox.html" target="_self" >{
provide: NG_VALUE_ACCESSOR, useExisting: ComboBox, multi: true
}</a></code>
</td>
</tr>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>cds-combo-box, ibm-combo-box</code></td>
</tr>
<tr>
<td class="col-md-3">template</td>
<td class="col-md-9"><pre class="line-numbers"><code class="language-html"><div
class="cds--list-box__wrapper"
[ngClass]="{
'cds--list-box__wrapper--fluid': fluid,
'cds--list-box__wrapper--fluid--invalid': fluid && invalid,
'cds--list-box__wrapper--fluid--focus': fluid && _isFocused
}">
<label
*ngIf="label"
[for]="id"
[id]="labelId"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled,
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
#listbox
[ngClass]="{
'cds--multi-select cds--multi-select--filterable': type === 'multi',
'cds--list-box--light': theme === 'light',
'cds--list-box--expanded': open,
'cds--list-box--sm': size === 'sm',
'cds--list-box--md': size === 'md',
'cds--list-box--lg': size === 'lg',
'cds--list-box--disabled': disabled,
'cds--combo-box--readonly': readonly,
'cds--combo-box--warning cds--list-box--warning': warn,
'cds--list-box--invalid': invalid
}"
class="cds--list-box cds--combo-box"
[attr.data-invalid]="(invalid ? true : null)">
<div
class="cds--list-box__field"
(click)="toggleDropdown()"
(blur)="onBlur()">
<div
*ngIf="type === 'multi' && pills.length > 0"
class="cds--tag cds--tag--filter cds--tag--high-contrast"
[ngClass]="{'cds--tag--disabled': disabled || readonly}">
<span class="cds--tag__label">{{ pills.length }}</span>
<button
type="button"
(click)="clearSelected($event)"
(blur)="onBlur()"
(keydown.enter)="clearSelected($event)"
class="cds--tag__close-icon"
tabindex="0"
[title]="clearSelectionsTitle"
[disabled]="disabled || readonly"
[attr.aria-label]="clearSelectionAria">
<svg
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
role="img"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
</svg>
</button>
</div>
<input
#input
type="text"
autocomplete="off"
role="combobox"
[disabled]="disabled"
[readOnly]="readonly"
(input)="onSearch($event.target.value)"
(focus)="fluid ? handleFocus($event) : null"
(blur)="fluid ? handleFocus($event) : onBlur()"
(keydown.enter)="onSubmit($event)"
[value]="selectedValue"
class="cds--text-input"
[ngClass]="{'cds--text-input--empty': !showClearButton}"
tabindex="0"
[id]="id"
[attr.aria-labelledby]="labelId"
[attr.aria-expanded]="open"
aria-haspopup="listbox"
[attr.maxlength]="maxLength"
[attr.aria-controls]="open ? view?.listId : null"
[attr.aria-autocomplete]="autocomplete"
[placeholder]="placeholder"/>
<svg
*ngIf="invalid"
cdsIcon="warning--filled"
size="16"
class="cds--list-box__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
</svg>
<div
*ngIf="showClearButton"
role="button"
class="cds--list-box__selection"
tabindex="0"
[attr.aria-label]="clearSelectionAria"
[title]="clearSelectionTitle"
(keyup.enter)="clearInput($event)"
(click)="clearInput($event)"
(blur)="onBlur()">
<svg cdsIcon="close" size="16"></svg>
</div>
<button
type="button"
role="button"
class="cds--list-box__menu-icon"
tabindex="-1"
[title]="open ? closeMenuAria : openMenuAria"
[attr.aria-label]="open ? closeMenuAria : openMenuAria"
[ngClass]="{'cds--list-box__menu-icon--open': open}">
<svg cdsIcon="chevron--down" size="16"></svg>
</button>
</div>
<div
#dropdownMenu
[ngClass]="{
'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp
}">
<ng-content *ngIf="open"></ng-content>
</div>
</div>
<hr *ngIf="fluid" class="cds--list-box__divider" />
<div
*ngIf="helperText && !invalid && !warn && !fluid"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</div>
</code></pre></td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<a href="#_clearSelectionAria" >_clearSelectionAria</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_clearSelectionsAria" >_clearSelectionsAria</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_clearSelectionsTitle" >_clearSelectionsTitle</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_clearSelectionTitle" >_clearSelectionTitle</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_closeMenuAria" >_closeMenuAria</a>
</li>
<li>
<a href="#_dropUp" >_dropUp</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_isFocused" >_isFocused</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_openMenuAria" >_openMenuAria</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#_placeholder" >_placeholder</a>
</li>
<li>
<span class="modifier">Static</span>
<a href="#comboBoxCount" >comboBoxCount</a>
</li>
<li>
<span class="modifier"></span>
<a href="#dropdownMenu" >dropdownMenu</a>
</li>
<li>
<span class="modifier"></span>
<a href="#hostClass" >hostClass</a>
</li>
<li>
<span class="modifier"></span>
<a href="#input" >input</a>
</li>
<li>
<a href="#keyboardNav" >keyboardNav</a>
</li>
<li>
<span class="modifier"></span>
<a href="#listbox" >listbox</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#noop" >noop</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#onTouchedCallback" >onTouchedCallback</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#open" >open</a>
</li>
<li>
<a href="#outsideClick" >outsideClick</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#pills" >pills</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#propagateChangeCallback" >propagateChangeCallback</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#selectedValue" >selectedValue</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#showClearButton" >showClearButton</a>
</li>
<li>
<span class="modifier"></span>
<a href="#view" >view</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#_appendToBody" >_appendToBody</a>
</li>
<li>
<a href="#_appendToDropdown" >_appendToDropdown</a>
</li>
<li>
<a href="#_keyboardNav" >_keyboardNav</a>
</li>
<li>
<a href="#_noop" >_noop</a>
</li>
<li>
<a href="#_outsideClick" >_outsideClick</a>
</li>
<li>
<a href="#_shouldDropUp" >_shouldDropUp</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#checkForReorder" >checkForReorder</a>
</li>
<li>
<a href="#clearInput" >clearInput</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#clearSelected" >clearSelected</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#closeDropdown" >closeDropdown</a>
</li>
<li>
<a href="#handleFocus" >handleFocus</a>
</li>
<li>
<span class="modifier"></span>
<a href="#hostkeys" >hostkeys</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#isTemplate" >isTemplate</a>
</li>
<li>
<a href="#ngAfterContentInit" >ngAfterContentInit</a>
</li>
<li>
<a href="#ngAfterViewInit" >ngAfterViewInit</a>
</li>
<li>
<a href="#ngOnChanges" >ngOnChanges</a>
</li>
<li>
<a href="#ngOnDestroy" >ngOnDestroy</a>
</li>
<li>
<a href="#onBlur" >onBlur</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#onSearch" >onSearch</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#onSubmit" >onSubmit</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#openDropdown" >openDropdown</a>
</li>
<li>
<a href="#registerOnChange" >registerOnChange</a>
</li>
<li>
<a href="#registerOnTouched" >registerOnTouched</a>
</li>
<li>
<a href="#setDisabledState" >setDisabledState</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#toggleDropdown" >toggleDropdown</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#updatePills" >updatePills</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#updateSelected" >updateSelected</a>
</li>
<li>
<a href="#writeValue" >writeValue</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#appendInline" >appendInline</a>
</li>
<li>
<a href="#autocomplete" >autocomplete</a>
</li>
<li>
<a href="#clearSelectionAria" >clearSelectionAria</a>
</li>
<li>
<a href="#clearSelectionsAria" >clearSelectionsAria</a>
</li>
<li>
<a href="#clearSelectionsTitle" >clearSelectionsTitle</a>
</li>
<li>
<a href="#clearSelectionTitle" >clearSelectionTitle</a>
</li>
<li>
<a href="#closeMenuAria" >closeMenuAria</a>
</li>
<li>
<a href="#disabled" >disabled</a>
</li>
<li>
<a href="#dropUp" >dropUp</a>
</li>
<li>
<a href="#fluid" >fluid</a>
</li>
<li>
<a href="#helperText" >helperText</a>
</li>
<li>
<a href="#hideLabel" >hideLabel</a>
</li>
<li>
<a href="#id" >id</a>
</li>
<li>
<a href="#invalid" >invalid</a>
</li>
<li>
<a href="#invalidText" >invalidText</a>
</li>
<li>
<a href="#items" >items</a>
</li>
<li>
<a href="#itemValueKey" >itemValueKey</a>
</li>
<li>
<a href="#label" >label</a>
</li>
<li>
<a href="#labelId" >labelId</a>
</li>
<li>
<a href="#maxLength" >maxLength</a>
</li>
<li>
<a href="#openMenuAria" >openMenuAria</a>
</li>
<li>
<a href="#placeholder" >placeholder</a>
</li>
<li>
<a href="#readonly" >readonly</a>
</li>
<li>
<a href="#selectionFeedback" >selectionFeedback</a>
</li>
<li>
<a href="#size" >size</a>
</li>
<li>
<a href="#theme" class="deprecated-name">theme</a>
</li>
<li>
<a href="#type" >type</a>
</li>
<li>
<a href="#warn" >warn</a>
</li>
<li>
<a href="#warnText" >warnText</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#clear" >clear</a>
</li>
<li>
<a href="#close" >close</a>
</li>
<li>
<a href="#search" >search</a>
</li>
<li>
<a href="#selected" >selected</a>
</li>
<li>
<a href="#submit" >submit</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostBindings</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#class.cds--list-box__wrapper" >class.cds--list-box__wrapper</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>HostListeners</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#keydown" >keydown</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#placeholder" >placeholder</a>
</li>
<li>
<a href="#openMenuAria" >openMenuAria</a>
</li>
<li>
<a href="#closeMenuAria" >closeMenuAria</a>
</li>
<li>
<a href="#clearSelectionsTitle" >clearSelectionsTitle</a>
</li>
<li>
<a href="#clearSelectionsAria" >clearSelectionsAria</a>
</li>
<li>
<a href="#clearSelectionTitle" >clearSelectionTitle</a>
</li>
<li>
<a href="#clearSelectionAria" >clearSelectionAria</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(elementRef: ElementRef, dropdownService: <a href="../injectables/DropdownService.html" target="_self">DropdownService</a>, i18n: <a href="../injectables/I18n.html" target="_self">I18n</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="471" class="link-to-prism">src/combobox/combobox.component.ts:471</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates an instance of ComboBox.</p>
</div>
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>elementRef</td>
<td>
<code>ElementRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>dropdownService</td>
<td>
<code><a href="../injectables/DropdownService.html" target="_self" >DropdownService</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>i18n</td>
<td>
<code><a href="../injectables/I18n.html" target="_self" >I18n</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="appendInline"></a>
<b>appendInline</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="331" class="link-to-prism">src/combobox/combobox.component.ts:331</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>set to <code>true</code> to place the dropdown view inline with the component</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="autocomplete"></a>
<b>autocomplete</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"list"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="367" class="link-to-prism">src/combobox/combobox.component.ts:367</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify aria-autocomplete attribute of text input.
"list", is the expected value for a combobox that invokes a drop-down list</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionAria"></a>
<b>clearSelectionAria</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionsAria"></a>
<b>clearSelectionsAria</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/combobox/combobox.component.ts:247</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes to clear selections, when multi is selected</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionsTitle"></a>
<b>clearSelectionsTitle</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/combobox/combobox.component.ts:237</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display on the clear selections icon, when multi is selected</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionTitle"></a>
<b>clearSelectionTitle</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/combobox/combobox.component.ts:257</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display on the clear the selected item icon, when single is selected</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="closeMenuAria"></a>
<b>closeMenuAria</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/combobox/combobox.component.ts:227</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the combobox control menu when opened</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="disabled"></a>
<b>disabled</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="375" class="link-to-prism">src/combobox/combobox.component.ts:375</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to disable combobox.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dropUp"></a>
<b>dropUp</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="371" class="link-to-prism">src/combobox/combobox.component.ts:371</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Overrides the automatic dropUp.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fluid"></a>
<b>fluid</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="383" class="link-to-prism">src/combobox/combobox.component.ts:383</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Experimental: enable fluid state</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="helperText"></a>
<b>helperText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="327" class="link-to-prism">src/combobox/combobox.component.ts:327</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets the optional helper text.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hideLabel"></a>
<b>hideLabel</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="323" class="link-to-prism">src/combobox/combobox.component.ts:323</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Hide label while keeping it accessible for screen readers</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="id"></a>
<b>id</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>`combobox-${ComboBox.comboBoxCount++}`</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="275" class="link-to-prism">src/combobox/combobox.component.ts:275</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="invalid"></a>
<b>invalid</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="335" class="link-to-prism">src/combobox/combobox.component.ts:335</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to show the invalid state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="invalidText"></a>
<b>invalidText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="339" class="link-to-prism">src/combobox/combobox.component.ts:339</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value displayed if combobox is in an invalid state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="items"></a>
<b>items</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/ListItem.html" target="_self" >Array<ListItem></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="303" class="link-to-prism">src/combobox/combobox.component.ts:303</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>List of items to fill the content with.</p>
<p><strong>Example:</strong></p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-javascript">items = [
{
content: "Abacus",
selected: false
},
{
content: "Byte",
selected: false,
},
{
content: "Computer",
selected: false
},
{
content: "Digital",
selected: false
}
];</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="itemValueKey"></a>
<b>itemValueKey</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="315" class="link-to-prism">src/combobox/combobox.component.ts:315</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specifies the property to be used as the return value to <code>ngModel</code></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="label"></a>
<b>label</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="319" class="link-to-prism">src/combobox/combobox.component.ts:319</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Label for the combobox.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="labelId"></a>
<b>labelId</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>`combobox-label-${ComboBox.comboBoxCount++}`</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="276" class="link-to-prism">src/combobox/combobox.component.ts:276</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="maxLength"></a>
<b>maxLength</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="351" class="link-to-prism">src/combobox/combobox.component.ts:351</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Max length value to limit input characters</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="openMenuAria"></a>
<b>openMenuAria</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the combobox control menu when closed</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="placeholder"></a>
<b>placeholder</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | Observable</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/combobox/combobox.component.ts:207</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Text to show when nothing is selected.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="readonly"></a>
<b>readonly</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="379" class="link-to-prism">src/combobox/combobox.component.ts:379</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> for readonly state.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectionFeedback"></a>
<b>selectionFeedback</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"top" | "fixed" | "top-after-reopen"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"top-after-reopen"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="362" class="link-to-prism">src/combobox/combobox.component.ts:362</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Specify feedback (mode) of the selection.
<code>top</code>: selected item jumps to top
<code>fixed</code>: selected item stays at its position
<code>top-after-reopen</code>: selected item jump to top after reopen dropdown</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="size"></a>
<b>size</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"sm" | "md" | "lg"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"md"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="311" class="link-to-prism">src/combobox/combobox.component.ts:311</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Combo box render size.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="theme"></a>
<b>theme</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"light" | "dark"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"dark"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="355" class="link-to-prism">src/combobox/combobox.component.ts:355</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="type"></a>
<b>type</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"single" | "multi"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>"single"</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="307" class="link-to-prism">src/combobox/combobox.component.ts:307</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Combo box type (supporting single or multi selection of items).</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="warn"></a>
<b>warn</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="343" class="link-to-prism">src/combobox/combobox.component.ts:343</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Set to <code>true</code> to show a warning (contents set by warnText)</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="warnText"></a>
<b>warnText</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | TemplateRef<any></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="347" class="link-to-prism">src/combobox/combobox.component.ts:347</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets the warning text</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-outputs">
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clear"></a>
<b>clear</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="435" class="link-to-prism">src/combobox/combobox.component.ts:435</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits an event when the clear button is clicked.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="close"></a>
<b>close</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="431" class="link-to-prism">src/combobox/combobox.component.ts:431</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits an empty event when the menu is closed</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="search"></a>
<b>search</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="433" class="link-to-prism">src/combobox/combobox.component.ts:433</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits the search string from the input</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selected"></a>
<b>selected</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="395" class="link-to-prism">src/combobox/combobox.component.ts:395</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits a ListItem</p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-javascript">{
content: "one",
selected: true
}</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="submit"></a>
<b>submit</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>EventEmitter</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="422" class="link-to-prism">src/combobox/combobox.component.ts:422</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Intended to be used to add items to the list.</p>
<p>Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem</p>
<p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-javascript"> {
items: [{content: "one", selected: true}, {content: "two", selected: true}],
index: 1,
value: {
content: "some user string",
selected: false
}
}</code></pre></div><p>Example:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-javascript">{
after: 1,
value: "some user string"
}</code></pre></div></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="class.cds--list-box__wrapper"></a>
<span class="name">
<span ><b>class.cds--list-box__wrapper</b></span>
<a href="#class.cds--list-box__wrapper"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3>HostListeners</h3> <table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="keydown"></a>
<span class="name">
<span ><b>keydown</b></span>
<a href="#keydown"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Arguments : </i><code>'$event' </code>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>keydown(ev: KeyboardEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="594"
class="link-to-prism">src/combobox/combobox.component.ts:594</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles <code>Escape/Tab</code> key closing the dropdown, and arrow up/down focus to/from the dropdown list.</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_appendToBody"></a>
<span class="name">
<span ><b>_appendToBody</b></span>
<a href="#_appendToBody"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_appendToBody()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="859"
class="link-to-prism">src/combobox/combobox.component.ts:859</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates the <code>Dropdown</code> list as an element that is appended to the DOM body.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_appendToDropdown"></a>
<span class="name">
<span ><b>_appendToDropdown</b></span>
<a href="#_appendToDropdown"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_appendToDropdown()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="870"
class="link-to-prism">src/combobox/combobox.component.ts:870</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates the <code>Dropdown</code> list appending it to the dropdown parent object instead of the body.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_keyboardNav"></a>
<span class="name">
<span ><b>_keyboardNav</b></span>
<a href="#_keyboardNav"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_keyboardNav(event: KeyboardEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="839"
class="link-to-prism">src/combobox/combobox.component.ts:839</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles keyboard events so users are controlling the <code>Dropdown</code> instead of unintentionally controlling outside elements.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
<code>KeyboardEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_noop"></a>
<span class="name">
<span ><b>_noop</b></span>
<a href="#_noop"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_noop()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="619"
class="link-to-prism">src/combobox/combobox.component.ts:619</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_outsideClick"></a>
<span class="name">
<span ><b>_outsideClick</b></span>
<a href="#_outsideClick"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_outsideClick(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="899"
class="link-to-prism">src/combobox/combobox.component.ts:899</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles clicks outside of the <code>Dropdown</code> list.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_shouldDropUp"></a>
<span class="name">
<span ><b>_shouldDropUp</b></span>
<a href="#_shouldDropUp"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>_shouldDropUp()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="879"
class="link-to-prism">src/combobox/combobox.component.ts:879</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Detects whether or not the <code>Dropdown</code> list is visible within all scrollable parents.
This can be overridden by passing in a value to the <code>dropUp</code> input.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="checkForReorder"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>checkForReorder</b></span>
<a href="#checkForReorder"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>checkForReorder()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="924"
class="link-to-prism">src/combobox/combobox.component.ts:924</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearInput"></a>
<span class="name">
<span ><b>clearInput</b></span>
<a href="#clearInput"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>clearInput(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="811"
class="link-to-prism">src/combobox/combobox.component.ts:811</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelected"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>clearSelected</b></span>
<a href="#clearSelected"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>clearSelected(event)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="685"
class="link-to-prism">src/combobox/combobox.component.ts:685</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="closeDropdown"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>closeDropdown</b></span>
<a href="#closeDropdown"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>closeDropdown()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="719"
class="link-to-prism">src/combobox/combobox.component.ts:719</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Closes the dropdown and emits the close event.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="handleFocus"></a>
<span class="name">
<span ><b>handleFocus</b></span>
<a href="#handleFocus"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>handleFocus(event: FocusEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="908"
class="link-to-prism">src/combobox/combobox.component.ts:908</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
<code>FocusEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hostkeys"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>hostkeys</b></span>
<a href="#hostkeys"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>hostkeys(ev: KeyboardEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>@HostListener('keydown', ['$event'])<br /></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="594"
class="link-to-prism">src/combobox/combobox.component.ts:594</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Handles <code>Escape/Tab</code> key closing the dropdown, and arrow up/down focus to/from the dropdown list.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>ev</td>
<td>
<code>KeyboardEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isTemplate"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>isTemplate</b></span>
<a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>isTemplate(value)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="832"
class="link-to-prism">src/combobox/combobox.component.ts:832</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterContentInit"></a>
<span class="name">
<span ><b>ngAfterContentInit</b></span>
<a href="#ngAfterContentInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngAfterContentInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="503"
class="link-to-prism">src/combobox/combobox.component.ts:503</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets initial state that depends on child components
Subscribes to select events and handles focus/filtering/initial list updates</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterViewInit"></a>
<span class="name">
<span ><b>ngAfterViewInit</b></span>
<a href="#ngAfterViewInit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngAfterViewInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="568"
class="link-to-prism">src/combobox/combobox.component.ts:568</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Binds event handlers against the rendered view</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnChanges"></a>
<span class="name">
<span ><b>ngOnChanges</b></span>
<a href="#ngOnChanges"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnChanges(changes)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="487"
class="link-to-prism">src/combobox/combobox.component.ts:487</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Lifecycle hook.
Updates pills if necessary.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>changes</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnDestroy"></a>
<span class="name">
<span ><b>ngOnDestroy</b></span>
<a href="#ngOnDestroy"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnDestroy()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="584"
class="link-to-prism">src/combobox/combobox.component.ts:584</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Removing the <code>Dropdown</code> from the body if it is appended to the body.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onBlur"></a>
<span class="name">
<span ><b>onBlur</b></span>
<a href="#onBlur"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onBlur()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="656"
class="link-to-prism">src/combobox/combobox.component.ts:656</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onSearch"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>onSearch</b></span>
<a href="#onSearch"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>onSearch(searchString, shouldEmitSearch)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="767"
class="link-to-prism">src/combobox/combobox.component.ts:767</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets the list group filter, and manages single select item selection.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>searchString</td>
<td>
No
</td>
<td>
</td>
</tr>
<tr>
<td>shouldEmitSearch</td>
<td>
No
</td>
<td>
<code>true</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onSubmit"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>onSubmit</b></span>
<a href="#onSubmit"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>onSubmit(event: KeyboardEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="800"
class="link-to-prism">src/combobox/combobox.component.ts:800</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Intended to be used to add items to the list.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td>
<code>KeyboardEvent</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="openDropdown"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>openDropdown</b></span>
<a href="#openDropdown"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>openDropdown()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="733"
class="link-to-prism">src/combobox/combobox.component.ts:733</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Opens the dropdown.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="registerOnChange"></a>
<span class="name">
<span ><b>registerOnChange</b></span>
<a href="#registerOnChange"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>registerOnChange(fn: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="660"
class="link-to-prism">src/combobox/combobox.component.ts:660</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>fn</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="registerOnTouched"></a>
<span class="name">
<span ><b>registerOnTouched</b></span>
<a href="#registerOnTouched"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>registerOnTouched(fn: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="664"
class="link-to-prism">src/combobox/combobox.component.ts:664</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>fn</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setDisabledState"></a>
<span class="name">
<span ><b>setDisabledState</b></span>
<a href="#setDisabledState"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>setDisabledState(isDisabled: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="673"
class="link-to-prism">src/combobox/combobox.component.ts:673</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p><code>ControlValueAccessor</code> method to programmatically disable the combobox.</p>
<p>ex: <code>this.formGroup.get("myCoolCombobox").disable();</code></p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>isDisabled</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="toggleDropdown"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>toggleDropdown</b></span>
<a href="#toggleDropdown"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>toggleDropdown()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="756"
class="link-to-prism">src/combobox/combobox.component.ts:756</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Toggles the dropdown.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="updatePills"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>updatePills</b></span>
<a href="#updatePills"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>updatePills()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="680"
class="link-to-prism">src/combobox/combobox.component.ts:680</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Called by <code>n-pill-input</code> when the selected pills have changed.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="updateSelected"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>updateSelected</b></span>
<a href="#updateSelected"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>updateSelected()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="912"
class="link-to-prism">src/combobox/combobox.component.ts:912</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="writeValue"></a>
<span class="name">
<span ><b>writeValue</b></span>
<a href="#writeValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>writeValue(value: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="624"
class="link-to-prism">src/combobox/combobox.component.ts:624</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_clearSelectionAria"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_clearSelectionAria</b></span>
<a href="#_clearSelectionAria"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="469" class="link-to-prism">src/combobox/combobox.component.ts:469</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_clearSelectionsAria"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_clearSelectionsAria</b></span>
<a href="#_clearSelectionsAria"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTIONS")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="467" class="link-to-prism">src/combobox/combobox.component.ts:467</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_clearSelectionsTitle"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_clearSelectionsTitle</b></span>
<a href="#_clearSelectionsTitle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTIONS")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="466" class="link-to-prism">src/combobox/combobox.component.ts:466</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_clearSelectionTitle"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_clearSelectionTitle</b></span>
<a href="#_clearSelectionTitle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="468" class="link-to-prism">src/combobox/combobox.component.ts:468</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_closeMenuAria"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_closeMenuAria</b></span>
<a href="#_closeMenuAria"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.A11Y.CLOSE_MENU")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="464" class="link-to-prism">src/combobox/combobox.component.ts:464</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_dropUp"></a>
<span class="name">
<span ><b>_dropUp</b></span>
<a href="#_dropUp"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="457" class="link-to-prism">src/combobox/combobox.component.ts:457</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>controls whether the <code>drop-up</code> class is applied</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_isFocused"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_isFocused</b></span>
<a href="#_isFocused"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="471" class="link-to-prism">src/combobox/combobox.component.ts:471</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_openMenuAria"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_openMenuAria</b></span>
<a href="#_openMenuAria"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.A11Y.OPEN_MENU")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="465" class="link-to-prism">src/combobox/combobox.component.ts:465</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="_placeholder"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>_placeholder</b></span>
<a href="#_placeholder"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this.i18n.getOverridable("COMBOBOX.PLACEHOLDER")</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="463" class="link-to-prism">src/combobox/combobox.component.ts:463</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="comboBoxCount"></a>
<span class="name">
<span class="modifier">Static</span>
<span ><b>comboBoxCount</b></span>
<a href="#comboBoxCount"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>0</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="274" class="link-to-prism">src/combobox/combobox.component.ts:274</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dropdownMenu"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>dropdownMenu</b></span>
<a href="#dropdownMenu"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ViewChild('dropdownMenu')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="438" class="link-to-prism">src/combobox/combobox.component.ts:438</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hostClass"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>hostClass</b></span>
<a href="#hostClass"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>true</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@HostBinding('class.cds--list-box__wrapper')<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="441" class="link-to-prism">src/combobox/combobox.component.ts:441</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="input"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>input</b></span>
<a href="#input"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>ElementRef</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ViewChild('input', {static: true})<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="439" class="link-to-prism">src/combobox/combobox.component.ts:439</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="keyboardNav"></a>
<span class="name">
<span ><b>keyboardNav</b></span>
<a href="#keyboardNav"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this._keyboardNav.bind(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="453" class="link-to-prism">src/combobox/combobox.component.ts:453</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="listbox"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>listbox</b></span>
<a href="#listbox"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>ElementRef</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ViewChild('listbox', {static: true})<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="440" class="link-to-prism">src/combobox/combobox.component.ts:440</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="noop"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>noop</b></span>
<a href="#noop"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this._noop.bind(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="459" class="link-to-prism">src/combobox/combobox.component.ts:459</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onTouchedCallback"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>onTouchedCallback</b></span>
<a href="#onTouchedCallback"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this._noop</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="460" class="link-to-prism">src/combobox/combobox.component.ts:460</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="open"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>open</b></span>
<a href="#open"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="443" class="link-to-prism">src/combobox/combobox.component.ts:443</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="outsideClick"></a>
<span class="name">
<span ><b>outsideClick</b></span>
<a href="#outsideClick"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this._outsideClick.bind(this)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="452" class="link-to-prism">src/combobox/combobox.component.ts:452</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="pills"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>pills</b></span>
<a href="#pills"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="448" class="link-to-prism">src/combobox/combobox.component.ts:448</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Selected items for multi-select combo-boxes.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="propagateChangeCallback"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>propagateChangeCallback</b></span>
<a href="#propagateChangeCallback"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>this._noop</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="461" class="link-to-prism">src/combobox/combobox.component.ts:461</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selectedValue"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>selectedValue</b></span>
<a href="#selectedValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>""</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="450" class="link-to-prism">src/combobox/combobox.component.ts:450</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>used to update the displayValue</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="showClearButton"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>showClearButton</b></span>
<a href="#showClearButton"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="445" class="link-to-prism">src/combobox/combobox.component.ts:445</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="view"></a>
<span class="name">
<span class="modifier"></span>
<span ><b>view</b></span>
<a href="#view"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../directives/AbstractDropdownView.html" target="_self" >AbstractDropdownView</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<b>Decorators : </b>
<br />
<code>
@ContentChild(AbstractDropdownView, {static: true})<br />
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="437" class="link-to-prism">src/combobox/combobox.component.ts:437</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>ContentChild reference to the instantiated dropdown list</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="placeholder"></a>
<span class="name"><b>placeholder</b><a href="#placeholder"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>placeholder()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/combobox/combobox.component.ts:211</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>placeholder(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/combobox/combobox.component.ts:207</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Text to show when nothing is selected.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="openMenuAria"></a>
<span class="name"><b>openMenuAria</b><a href="#openMenuAria"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>openMenuAria()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/combobox/combobox.component.ts:221</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>openMenuAria(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/combobox/combobox.component.ts:217</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the combobox control menu when closed</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="closeMenuAria"></a>
<span class="name"><b>closeMenuAria</b><a href="#closeMenuAria"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>closeMenuAria()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/combobox/combobox.component.ts:231</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>closeMenuAria(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/combobox/combobox.component.ts:227</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the combobox control menu when opened</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionsTitle"></a>
<span class="name"><b>clearSelectionsTitle</b><a href="#clearSelectionsTitle"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>clearSelectionsTitle()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/combobox/combobox.component.ts:241</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>clearSelectionsTitle(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/combobox/combobox.component.ts:237</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display on the clear selections icon, when multi is selected</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionsAria"></a>
<span class="name"><b>clearSelectionsAria</b><a href="#clearSelectionsAria"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>clearSelectionsAria()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/combobox/combobox.component.ts:251</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>clearSelectionsAria(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="247" class="link-to-prism">src/combobox/combobox.component.ts:247</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes to clear selections, when multi is selected</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionTitle"></a>
<span class="name"><b>clearSelectionTitle</b><a href="#clearSelectionTitle"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>clearSelectionTitle()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="261" class="link-to-prism">src/combobox/combobox.component.ts:261</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>clearSelectionTitle(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="257" class="link-to-prism">src/combobox/combobox.component.ts:257</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display on the clear the selected item icon, when single is selected</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="clearSelectionAria"></a>
<span class="name"><b>clearSelectionAria</b><a href="#clearSelectionAria"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>clearSelectionAria()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">src/combobox/combobox.component.ts:271</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>set</b><code>clearSelectionAria(value: string | Observable<string>)</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="267" class="link-to-prism">src/combobox/combobox.component.ts:267</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>string | Observable<string></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
Component,
OnChanges,
ContentChild,
Input,
Output,
HostListener,
ElementRef,
ViewChild,
EventEmitter,
AfterViewInit,
AfterContentInit,
HostBinding,
TemplateRef,
OnDestroy
} from "@angular/core";
import { AbstractDropdownView, DropdownService } from "carbon-components-angular/dropdown";
import { ListItem } from "carbon-components-angular/dropdown";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { filter } from "rxjs/operators";
import {
getScrollableParents,
hasScrollableParents
} from "carbon-components-angular/utils";
import { I18n, Overridable } from "carbon-components-angular/i18n";
import { Observable } from "rxjs";
/**
* Get started with importing the module:
*
* ```typescript
* import { ComboBoxModule } from 'carbon-components-angular';
* ```
*
* ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.
* Multi-select comboboxes also provide "pills" of selected items.
*
* [See demo](../../?path=/story/components-combobox--basic)
*/
@Component({
selector: "cds-combo-box, ibm-combo-box",
template: `
<div
class="cds--list-box__wrapper"
[ngClass]="{
'cds--list-box__wrapper--fluid': fluid,
'cds--list-box__wrapper--fluid--invalid': fluid && invalid,
'cds--list-box__wrapper--fluid--focus': fluid && _isFocused
}">
<label
*ngIf="label"
[for]="id"
[id]="labelId"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled,
'cds--visually-hidden': hideLabel
}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
#listbox
[ngClass]="{
'cds--multi-select cds--multi-select--filterable': type === 'multi',
'cds--list-box--light': theme === 'light',
'cds--list-box--expanded': open,
'cds--list-box--sm': size === 'sm',
'cds--list-box--md': size === 'md',
'cds--list-box--lg': size === 'lg',
'cds--list-box--disabled': disabled,
'cds--combo-box--readonly': readonly,
'cds--combo-box--warning cds--list-box--warning': warn,
'cds--list-box--invalid': invalid
}"
class="cds--list-box cds--combo-box"
[attr.data-invalid]="(invalid ? true : null)">
<div
class="cds--list-box__field"
(click)="toggleDropdown()"
(blur)="onBlur()">
<div
*ngIf="type === 'multi' && pills.length > 0"
class="cds--tag cds--tag--filter cds--tag--high-contrast"
[ngClass]="{'cds--tag--disabled': disabled || readonly}">
<span class="cds--tag__label">{{ pills.length }}</span>
<button
type="button"
(click)="clearSelected($event)"
(blur)="onBlur()"
(keydown.enter)="clearSelected($event)"
class="cds--tag__close-icon"
tabindex="0"
[title]="clearSelectionsTitle"
[disabled]="disabled || readonly"
[attr.aria-label]="clearSelectionAria">
<svg
focusable="false"
preserveAspectRatio="xMidYMid meet"
style="will-change: transform;"
role="img"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
</svg>
</button>
</div>
<input
#input
type="text"
autocomplete="off"
role="combobox"
[disabled]="disabled"
[readOnly]="readonly"
(input)="onSearch($event.target.value)"
(focus)="fluid ? handleFocus($event) : null"
(blur)="fluid ? handleFocus($event) : onBlur()"
(keydown.enter)="onSubmit($event)"
[value]="selectedValue"
class="cds--text-input"
[ngClass]="{'cds--text-input--empty': !showClearButton}"
tabindex="0"
[id]="id"
[attr.aria-labelledby]="labelId"
[attr.aria-expanded]="open"
aria-haspopup="listbox"
[attr.maxlength]="maxLength"
[attr.aria-controls]="open ? view?.listId : null"
[attr.aria-autocomplete]="autocomplete"
[placeholder]="placeholder"/>
<svg
*ngIf="invalid"
cdsIcon="warning--filled"
size="16"
class="cds--list-box__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
</svg>
<div
*ngIf="showClearButton"
role="button"
class="cds--list-box__selection"
tabindex="0"
[attr.aria-label]="clearSelectionAria"
[title]="clearSelectionTitle"
(keyup.enter)="clearInput($event)"
(click)="clearInput($event)"
(blur)="onBlur()">
<svg cdsIcon="close" size="16"></svg>
</div>
<button
type="button"
role="button"
class="cds--list-box__menu-icon"
tabindex="-1"
[title]="open ? closeMenuAria : openMenuAria"
[attr.aria-label]="open ? closeMenuAria : openMenuAria"
[ngClass]="{'cds--list-box__menu-icon--open': open}">
<svg cdsIcon="chevron--down" size="16"></svg>
</button>
</div>
<div
#dropdownMenu
[ngClass]="{
'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp
}">
<ng-content *ngIf="open"></ng-content>
</div>
</div>
<hr *ngIf="fluid" class="cds--list-box__divider" />
<div
*ngIf="helperText && !invalid && !warn && !fluid"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
</div>
<div *ngIf="!invalid && warn" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
</div>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: ComboBox,
multi: true
}
]
})
export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {
/**
* Text to show when nothing is selected.
*/
@Input() set placeholder(value: string | Observable<string>) {
this._placeholder.override(value);
}
get placeholder() {
return this._placeholder.value;
}
/**
* Value to display for accessibility purposes on the combobox control menu when closed
*/
@Input() set openMenuAria(value: string | Observable<string>) {
this._openMenuAria.override(value);
}
get openMenuAria() {
return this._openMenuAria.value;
}
/**
* Value to display for accessibility purposes on the combobox control menu when opened
*/
@Input() set closeMenuAria(value: string | Observable<string>) {
this._closeMenuAria.override(value);
}
get closeMenuAria() {
return this._closeMenuAria.value;
}
/**
* Value to display on the clear selections icon, when multi is selected
*/
@Input() set clearSelectionsTitle(value: string | Observable<string>) {
this._clearSelectionsTitle.override(value);
}
get clearSelectionsTitle() {
return this._clearSelectionsTitle.value;
}
/**
* Value to display for accessibility purposes to clear selections, when multi is selected
*/
@Input() set clearSelectionsAria(value: string | Observable<string>) {
this._clearSelectionsAria.override(value);
}
get clearSelectionsAria() {
return this._clearSelectionsAria.value;
}
/**
* Value to display on the clear the selected item icon, when single is selected
*/
@Input() set clearSelectionTitle(value: string | Observable<string>) {
this._clearSelectionTitle.override(value);
}
get clearSelectionTitle() {
return this._clearSelectionTitle.value;
}
/**
* Value to display for accessibility purposes on the clear the selected item icon, when single is selected
*/
@Input() set clearSelectionAria(value: string | Observable<string>) {
this._clearSelectionAria.override(value);
}
get clearSelectionAria() {
return this._clearSelectionAria.value;
}
static comboBoxCount = 0;
@Input() id = `combobox-${ComboBox.comboBoxCount++}`;
@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;
/**
* List of items to fill the content with.
*
* **Example:**
* ```javascript
* items = [
* {
* content: "Abacus",
* selected: false
* },
* {
* content: "Byte",
* selected: false,
* },
* {
* content: "Computer",
* selected: false
* },
* {
* content: "Digital",
* selected: false
* }
* ];
* ```
*
*/
@Input() items: Array<ListItem> = [];
/**
* Combo box type (supporting single or multi selection of items).
*/
@Input() type: "single" | "multi" = "single";
/**
* Combo box render size.
*/
@Input() size: "sm" | "md" | "lg" = "md";
/**
* Specifies the property to be used as the return value to `ngModel`
*/
@Input() itemValueKey: string;
/**
* Label for the combobox.
*/
@Input() label: string | TemplateRef<any>;
/**
* Hide label while keeping it accessible for screen readers
*/
@Input() hideLabel = false;
/**
* Sets the optional helper text.
*/
@Input() helperText: string | TemplateRef<any>;
/**
* set to `true` to place the dropdown view inline with the component
*/
@Input() appendInline: boolean = null;
/**
* Set to `true` to show the invalid state.
*/
@Input() invalid = false;
/**
* Value displayed if combobox is in an invalid state.
*/
@Input() invalidText: string | TemplateRef<any>;
/**
* Set to `true` to show a warning (contents set by warnText)
*/
@Input() warn = false;
/**
* Sets the warning text
*/
@Input() warnText: string | TemplateRef<any>;
/**
* Max length value to limit input characters
*/
@Input() maxLength: number = null;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
*/
@Input() theme: "light" | "dark" = "dark";
/**
* Specify feedback (mode) of the selection.
* `top`: selected item jumps to top
* `fixed`: selected item stays at its position
* `top-after-reopen`: selected item jump to top after reopen dropdown
*/
@Input() selectionFeedback: "top" | "fixed" | "top-after-reopen" = "top-after-reopen";
/**
* Specify aria-autocomplete attribute of text input.
* "list", is the expected value for a combobox that invokes a drop-down list
*/
@Input() autocomplete = "list";
/**
* Overrides the automatic dropUp.
*/
@Input() dropUp: boolean;
/**
* Set to `true` to disable combobox.
*/
@Input() disabled = false;
/**
* Set to `true` for readonly state.
*/
@Input() readonly = false;
/**
* Experimental: enable fluid state
*/
@Input() fluid = false;
/**
* Emits a ListItem
*
* Example:
* ```javascript
* {
* content: "one",
* selected: true
* }
* ```
*/
@Output() selected = new EventEmitter<ListItem | ListItem[]>();
/**
* Intended to be used to add items to the list.
*
* Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem
*
* Example:
* ```javascript
* {
* items: [{content: "one", selected: true}, {content: "two", selected: true}],
* index: 1,
* value: {
* content: "some user string",
* selected: false
* }
* }
* ```
*
*
* Example:
* ```javascript
* {
* after: 1,
* value: "some user string"
* }
* ```
*/
@Output() submit = new EventEmitter<{
items: ListItem[],
index: number,
value: {
content: string,
selected: boolean
}
}>();
/** Emits an empty event when the menu is closed */
@Output() close = new EventEmitter<void>();
/** Emits the search string from the input */
@Output() search = new EventEmitter<string>();
/** Emits an event when the clear button is clicked. */
@Output() clear = new EventEmitter<Event>();
/** ContentChild reference to the instantiated dropdown list */
@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;
@ViewChild("dropdownMenu") dropdownMenu;
@ViewChild("input", { static: true }) input: ElementRef;
@ViewChild("listbox", { static: true }) listbox: ElementRef;
@HostBinding("class.cds--list-box__wrapper") hostClass = true;
public open = false;
public showClearButton = false;
/** Selected items for multi-select combo-boxes. */
public pills = [];
/** used to update the displayValue */
public selectedValue = "";
outsideClick = this._outsideClick.bind(this);
keyboardNav = this._keyboardNav.bind(this);
/**
* controls whether the `drop-up` class is applied
*/
_dropUp = false;
protected noop = this._noop.bind(this);
protected onTouchedCallback: () => void = this._noop;
protected propagateChangeCallback: (_: any) => void = this._noop;
protected _placeholder = this.i18n.getOverridable("COMBOBOX.PLACEHOLDER");
protected _closeMenuAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLOSE_MENU");
protected _openMenuAria = this.i18n.getOverridable("COMBOBOX.A11Y.OPEN_MENU");
protected _clearSelectionsTitle = this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTIONS");
protected _clearSelectionsAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTIONS");
protected _clearSelectionTitle = this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED");
protected _clearSelectionAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED");
protected _isFocused = false;
/**
* Creates an instance of ComboBox.
*/
constructor(
protected elementRef: ElementRef,
protected dropdownService: DropdownService,
protected i18n: I18n
) {}
/**
* Lifecycle hook.
* Updates pills if necessary.
*
*/
ngOnChanges(changes) {
if (changes.items) {
this.view.items = changes.items.currentValue;
this.updateSelected();
// If new items are added into the combobox while there is search input,
// repeat the search. Search should only trigger for type 'single' when there is no value selected.
if (this.type === "multi" || (this.type === "single" && !this.selectedValue)) {
this.onSearch(this.input.nativeElement.value, false);
}
}
}
/**
* Sets initial state that depends on child components
* Subscribes to select events and handles focus/filtering/initial list updates
*/
ngAfterContentInit() {
if (this.view) {
this.view.type = this.type;
// function to check if the event is organic (isUpdate === false) or programmatic
const isUpdate = event => event && event.isUpdate;
this.view.select.subscribe(event => {
if (Array.isArray(event)) {
this.updatePills();
if (!isUpdate(event)) {
if (this.itemValueKey && this.view.getSelected()) {
const values = this.view.getSelected().map(item => item[this.itemValueKey]);
this.propagateChangeCallback(values);
// otherwise just pass up the values from `getSelected`
} else {
this.propagateChangeCallback(this.view.getSelected());
}
this.selected.emit(event);
}
} else {
// If type is single, dropdown list will emit an object
if (event.item && event.item.selected) {
this.showClearButton = true;
this.selectedValue = event.item.content;
if (!isUpdate(event)) {
if (this.itemValueKey) {
this.propagateChangeCallback(event.item[this.itemValueKey]);
} else {
this.propagateChangeCallback(event.item);
}
}
} else {
this.selectedValue = "";
if (!isUpdate(event)) {
this.propagateChangeCallback(null);
}
}
// not guarding these since the nativeElement has to be loaded
// for select to even fire
// only focus for "organic" selections
if (!isUpdate(event)) {
this.elementRef.nativeElement.querySelector("input").focus();
this.view.filterBy("");
this.selected.emit(event.item);
this.closeDropdown();
}
}
});
// update the rest of combobox with any pre-selected items
// setTimeout just defers the call to the next check cycle
setTimeout(() => {
this.updateSelected();
});
this.view.blurIntent.pipe(filter(v => v === "top")).subscribe(() => {
this.elementRef.nativeElement.querySelector(".cds--text-input").focus();
});
}
}
/**
* Binds event handlers against the rendered view
*/
ngAfterViewInit() {
// if appendInline is default valued (null) we should:
// 1. if there are scrollable parents (not including body) don't append inline
// this should also cover the case where the dropdown is in a modal
// (where we _do_ want to append to the placeholder)
if (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {
this.appendInline = false;
// 2. otherwise we should append inline
} else if (this.appendInline === null) {
this.appendInline = true;
}
}
/**
* Removing the `Dropdown` from the body if it is appended to the body.
*/
ngOnDestroy() {
if (!this.appendInline) {
this._appendToDropdown();
}
}
/**
* Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.
*/
@HostListener("keydown", ["$event"])
hostkeys(ev: KeyboardEvent) {
if (ev.key === "Escape") {
this.closeDropdown();
} else if ((ev.key === "ArrowDown")
&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {
ev.preventDefault();
this.openDropdown();
setTimeout(() => { this.view.initFocus(); }, 0);
}
if (
this.open && ev.key === "Tab" &&
(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)
) {
this.closeDropdown();
}
if (this.open && ev.key === "Tab" && ev.shiftKey) {
this.closeDropdown();
}
}
/*
* no-op method for null event listeners, and other no op calls
*/
_noop() {}
/*
* propagates the value provided from ngModel
*/
writeValue(value: any) {
if (this.type === "single") {
if (this.itemValueKey) {
// clone the specified item and update its state
const newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));
newValue.selected = true;
this.view.propagateSelected([newValue]);
} else {
// all items in propagateSelected must be iterable
this.view.propagateSelected([value || ""]);
}
this.showClearButton = !!(value && this.view.getSelected().length);
} else {
if (this.itemValueKey) {
// clone the items and update their state based on the received value array
// this way we don't lose any additional metadata that may be passed in via the `items` Input
let newValues = [];
for (const v of value ?? []) {
for (const item of this.view.getListItems()) {
if (item[this.itemValueKey] === v) {
newValues.push(Object.assign({}, item, { selected: true }));
}
}
}
this.view.propagateSelected(newValues);
} else {
this.view.propagateSelected(value ? value : [""]);
}
}
this.updateSelected();
}
onBlur() {
this.onTouchedCallback();
}
registerOnChange(fn: any) {
this.propagateChangeCallback = fn;
}
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
/**
* `ControlValueAccessor` method to programmatically disable the combobox.
*
* ex: `this.formGroup.get("myCoolCombobox").disable();`
*/
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
/**
* Called by `n-pill-input` when the selected pills have changed.
*/
public updatePills() {
this.pills = this.view.getSelected() || [];
this.checkForReorder();
}
public clearSelected(event) {
this.items = this.items.map(item => {
if (!item.disabled) {
item.selected = false;
}
return item;
});
this.view.items = this.items;
this.updatePills();
/**
* @todo - In next major version update to the following:
* const selected = this.type === "multi" ? this.view.getSelected() : undefined;
*
* Previously it returned an empty array even for type === 'single'
* Also resolve #ref-1245723
*/
// On type=multi we just emit getSelected() (just in case there's any disabled but selected items)
const selected = this.view.getSelected();
// in case there are disabled items they should be mapped according to itemValueKey
if (this.itemValueKey && selected) {
const values = selected.map((item) => item[this.itemValueKey]);
this.propagateChangeCallback(values);
} else {
this.propagateChangeCallback(selected);
}
this.selected.emit(selected as any);
this.clear.emit(event);
}
/**
* Closes the dropdown and emits the close event.
*/
public closeDropdown() {
this.open = false;
this.checkForReorder();
this.close.emit();
if (!this.appendInline) {
this._appendToDropdown();
}
document.removeEventListener("click", this.outsideClick, true);
}
/**
* Opens the dropdown.
*/
public openDropdown() {
if (this.disabled || this.readonly) { return; }
this.open = true;
this._dropUp = false;
if (!this.appendInline) {
this._appendToBody();
}
document.addEventListener("click", this.outsideClick, true);
// set the dropdown menu to drop up if it is near the bottom of the screen
// setTimeout lets us do the calculations after it is visible in the DOM
setTimeout(() => {
if (this.dropUp === null || this.dropUp === undefined) {
this._dropUp = this._shouldDropUp();
}
}, 0);
}
/**
* Toggles the dropdown.
*/
public toggleDropdown() {
if (this.open) {
this.closeDropdown();
} else {
this.openDropdown();
}
}
/**
* Sets the list group filter, and manages single select item selection.
*/
public onSearch(searchString, shouldEmitSearch = true) {
if (shouldEmitSearch) {
this.search.emit(searchString);
}
this.showClearButton = !!searchString;
this.view.filterBy(searchString);
if (searchString !== "") {
if (!this.open) {
this.openDropdown();
}
} else {
this.selectedValue = "";
if (this.type === "multi" &&
(this.selectionFeedback === "top" || this.selectionFeedback === "top-after-reopen")) {
this.view.reorderSelected();
}
}
if (this.type === "single") {
// deselect if the input doesn't match the content
// of any given item
const matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
if (!matches) {
const selected = this.view.getSelected();
if (!selected || !selected[0]) {
this.view.filterBy(searchString);
}
}
}
}
/**
* Intended to be used to add items to the list.
*/
public onSubmit(event: KeyboardEvent) {
this.submit.emit({
items: this.view.getListItems(),
index: 0,
value: {
content: (event.target as HTMLInputElement).value,
selected: false
}
});
}
clearInput(event) {
event.stopPropagation();
event.preventDefault();
if (this.disabled || this.readonly) {
return;
}
if (this.type === "single") { // don't want to clear selected or close if multi
this.clearSelected(event);
this.closeDropdown();
}
this.selectedValue = "";
this.input.nativeElement.value = "";
this.showClearButton = false;
this.input.nativeElement.focus();
this.onSearch(this.input.nativeElement.value);
}
public isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.
*/
_keyboardNav(event: KeyboardEvent) {
if ((event.key === "Escape") && this.open) {
event.stopImmediatePropagation(); // don't unintentionally close modal if inside of it
}
if (event.key === "Escape") {
event.preventDefault();
this.closeDropdown();
this.input.nativeElement.focus();
} else if (this.open && event.key === "Tab") {
// this way focus will start on the next focusable item from the dropdown
// not the top of the body!
this.input.nativeElement.focus();
this.input.nativeElement.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, cancelable: true, key: "Tab" }));
this.closeDropdown();
}
}
/**
* Creates the `Dropdown` list as an element that is appended to the DOM body.
*/
_appendToBody() {
this.dropdownService.appendToBody(
this.listbox.nativeElement,
this.dropdownMenu.nativeElement,
`${this.elementRef.nativeElement.className}${this.open ? " cds--list-box--expanded" : ""}`);
this.dropdownMenu.nativeElement.addEventListener("keydown", this.keyboardNav, true);
}
/**
* Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.
*/
_appendToDropdown() {
this.dropdownService.appendToDropdown(this.elementRef.nativeElement);
this.dropdownMenu.nativeElement.removeEventListener("keydown", this.keyboardNav, true);
}
/**
* Detects whether or not the `Dropdown` list is visible within all scrollable parents.
* This can be overridden by passing in a value to the `dropUp` input.
*/
_shouldDropUp() {
// check if dropdownMenu exists first.
const menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu");
// check if menu exists first.
const menuRect = menu && menu.getBoundingClientRect();
if (menu && menuRect) {
const scrollableParents = getScrollableParents(menu);
return scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {
const parentRect = parent.getBoundingClientRect();
const isBelowParent = !(menuRect.bottom <= parentRect.bottom);
return shouldDropUp || isBelowParent;
}, false);
}
return false;
}
/**
* Handles clicks outside of the `Dropdown` list.
*/
_outsideClick(event) {
if (!this.elementRef.nativeElement.contains(event.target) &&
// if we're appendToBody the list isn't within the _elementRef,
// so we've got to check if our target is possibly in there too.
!this.dropdownMenu.nativeElement.contains(event.target)) {
this.closeDropdown();
}
}
handleFocus(event: FocusEvent) {
this._isFocused = event.type === "focus";
}
protected updateSelected() {
const selected = this.view.getSelected();
if (this.type === "multi") {
this.updatePills();
} else if (selected) {
const value = selected[0] ? selected[0].content : "";
const changeCallbackValue = selected[0] ? selected[0] : "";
this.selectedValue = value;
this.showClearButton = !!value;
}
}
protected checkForReorder() {
const topAfterReopen = !this.open && this.selectionFeedback === "top-after-reopen";
if ((this.type === "multi") && (topAfterReopen || this.selectionFeedback === "top")) {
this.view.reorderSelected(true);
}
}
}
</code></pre>
</div>
<div class="tab-pane fade " id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><div class="cds--list-box__wrapper" [ngClass]="{ \'cds--list-box__wrapper--fluid\': fluid, \'cds--list-box__wrapper--fluid--invalid\': fluid && invalid, \'cds--list-box__wrapper--fluid--focus\': fluid && _isFocused }"> <label *ngIf="label" [for]="id" [id]="labelId" class="cds--label" [ngClass]="{ \'cds--label--disabled\': disabled, \'cds--visually-hidden\': hideLabel }"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div #listbox [ngClass]="{ \'cds--multi-select cds--multi-select--filterable\': type === \'multi\', \'cds--list-box--light\': theme === \'light\', \'cds--list-box--expanded\': open, \'cds--list-box--sm\': size === \'sm\', \'cds--list-box--md\': size === \'md\', \'cds--list-box--lg\': size === \'lg\', \'cds--list-box--disabled\': disabled, \'cds--combo-box--readonly\': readonly, \'cds--combo-box--warning cds--list-box--warning\': warn, \'cds--list-box--invalid\': invalid }" class="cds--list-box cds--combo-box" [attr.data-invalid]="(invalid ? true : null)"> <div class="cds--list-box__field" (click)="toggleDropdown()" (blur)="onBlur()"> <div *ngIf="type === \'multi\' && pills.length > 0" class="cds--tag cds--tag--filter cds--tag--high-contrast" [ngClass]="{\'cds--tag--disabled\': disabled || readonly}"> <span class="cds--tag__label">{{ pills.length }}</span> <button type="button" (click)="clearSelected($event)" (blur)="onBlur()" (keydown.enter)="clearSelected($event)" class="cds--tag__close-icon" tabindex="0" [title]="clearSelectionsTitle" [disabled]="disabled || readonly" [attr.aria-label]="clearSelectionAria"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path> </svg> </button> </div> <input #input type="text" autocomplete="off" role="combobox" [disabled]="disabled" [readOnly]="readonly" (input)="onSearch($event.target.value)" (focus)="fluid ? handleFocus($event) : null" (blur)="fluid ? handleFocus($event) : onBlur()" (keydown.enter)="onSubmit($event)" [value]="selectedValue" class="cds--text-input" [ngClass]="{\'cds--text-input--empty\': !showClearButton}" tabindex="0" [id]="id" [attr.aria-labelledby]="labelId" [attr.aria-expanded]="open" aria-haspopup="listbox" [attr.maxlength]="maxLength" [attr.aria-controls]="open ? view?.listId : null" [attr.aria-autocomplete]="autocomplete" [placeholder]="placeholder"/> <svg *ngIf="invalid" cdsIcon="warning--filled" size="16" class="cds--list-box__invalid-icon"> </svg> <svg *ngIf="!invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning"> </svg> <div *ngIf="showClearButton" role="button" class="cds--list-box__selection" tabindex="0" [attr.aria-label]="clearSelectionAria" [title]="clearSelectionTitle" (keyup.enter)="clearInput($event)" (click)="clearInput($event)" (blur)="onBlur()"> <svg cdsIcon="close" size="16"></svg> </div> <button type="button" role="button" class="cds--list-box__menu-icon" tabindex="-1" [title]="open ? closeMenuAria : openMenuAria" [attr.aria-label]="open ? closeMenuAria : openMenuAria" [ngClass]="{\'cds--list-box__menu-icon--open\': open}"> <svg cdsIcon="chevron--down" size="16"></svg> </button> </div> <div #dropdownMenu [ngClass]="{ \'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp }"> <ng-content *ngIf="open"></ng-content> </div> </div> <hr *ngIf="fluid" class="cds--list-box__divider" /> <div *ngIf="helperText && !invalid && !warn && !fluid" class="cds--form__helper-text" [ngClass]="{\'cds--form__helper-text--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div></div> </div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ComboButtonComponent', 'selector': 'cds-combo-button'},{'name': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-menu, cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-menu-group, cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-menu-item, cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'MenuButtonComponent', 'selector': 'cds-menu-button'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TagOperationalComponent', 'selector': 'cds-tag-operational, ibm-tag-operational'},{'name': 'TagSelectableComponent', 'selector': 'cds-tag-selectable, ibm-tag-selectable'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ClickableTileIconDirective', 'selector': '[cdsClickableTileIcon], [ibmClickableTileIcon]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'LinkIconDirective', 'selector': '[ibmLinkIcon], [cdsLinkIcon]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TagIconDirective', 'selector': '[cdsTagIcon], [ibmTagIcon]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
var ACTUAL_COMPONENT = {'name': 'ComboBox'};
</script>
<script src="../js/tree.js"></script>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
var COMPODOC_CURRENT_PAGE_URL = 'ComboBox.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
<footer class="carbon">
<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
</footer>
<script
key="8"
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
</script>
<!-- Storybook override -->
<script>
document.title = "Carbon Components Angular";
</script>
<script
src="//1.www.s81c.com/common/stats/ibm-common.js"
type="text/javascript"
async="async">
</script>
</body>
</html>