coveo-search-ui
Version:
Coveo JavaScript Search Framework
3,121 lines • 178 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Facet | Coveo JavaScript Search Framework - Reference Documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/bqa0xml.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/overrides.css">
<link rel="stylesheet" href="../assets/css/coveo-connect-header.css">
<link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v2.10122/css/CoveoFullSearch.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://static.cloud.coveo.com/coveo.analytics.js/coveoua.js"></script>
<script src="../assets/js/modernizr.js"></script>
<script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10122/js/CoveoJsSearch.min.js"></script>
<script src="../assets/js/coveo-connect-header.js"></script>
<script src="../assets/gen/js/playground.js"></script>
<script src="../assets/js/searchUIrefDoc.js"></script>
<link href="../assets/favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<header class="no-sticky">
<div class="content">
<div class="main-header">
<div class="logo">
<a class="logo-img-wrap" href="https://coveo.com">
<div class="logo-imgbg">
<svg width="124" height="32" viewBox="0 0 409 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M164.7 36.2L159.8 41.4C156.4 38.1 152.8 36.2 147.9 36.2C139.4 36.2 133 42.9 133 52.3C133 61.7 139.4 68.4 147.9 68.4C152.5 68.4 156.9 66.5 160.1 63.2L164.7 68.4C160.7 73 155 75.4 148.3 75.4C134.3 75.4 125.2 65.4 125.2 52.3C125.2 38.9 134.3 28.9 148.3 28.9C154.6 28.8 160.6 31.5 164.7 36.2Z" fill="white"/>
<path d="M219.4 52.3C219.4 65.4 209.4 75.4 196 75.4C182.3 75.4 172.3 65.4 172.3 52.3C172.3 38.9 182.3 28.9 196 28.9C209.4 28.9 219.4 38.9 219.4 52.3ZM180.2 52.3C180.2 61.7 186.9 68.4 196 68.4C204.8 68.4 211.5 61.7 211.5 52.3C211.5 42.9 204.8 36.2 196 36.2C186.9 36.2 180.2 42.9 180.2 52.3Z" fill="white"/>
<path d="M252.3 74.5H243.1L224.3 30.1H232.8L247.7 66.9L262.6 30.1H270.8L252.3 74.5Z" fill="white"/>
<path d="M318.8 52V55H283.8C284.7 64.1 291.1 68.7 298.7 68.7C303.8 68.8 308.8 66.9 312.7 63.5L316.7 68.7C311.2 73.9 305.1 75.5 298.4 75.5C285 75.5 275.6 66.4 275.6 52.4C275.6 38.7 285 29 297.8 29C310 28.9 318.8 38.6 318.8 52ZM283.9 48.6H311.3C310.4 41 305.2 35.8 297.9 35.8C290 35.9 285.1 41 283.9 48.6Z" fill="white"/>
<path d="M376 52.3C376 65.4 366 75.4 352.6 75.4C338.9 75.4 328.9 65.4 328.9 52.3C328.9 38.9 338.9 28.9 352.6 28.9C365.9 28.9 376 38.9 376 52.3ZM336.8 52.3C336.8 61.7 343.5 68.4 352.6 68.4C361.4 68.4 368.1 61.7 368.1 52.3C368.1 42.9 361.4 36.2 352.6 36.2C343.4 36.2 336.8 42.9 336.8 52.3Z" fill="white"/>
<path d="M88.1 14.9C79.5 6.4 68.3 1.2 56.2 0C55.3 0 54.6 0.8 54.6 1.8C54.6 2.2 54.7 2.5 55 2.8L73.8 21.3C73.8 21.6 73.8 21.6 73.5 21.6C68.3 17.8 62.2 15.5 55.9 14.9C55.3 14.8 54.8 15.2 54.7 15.8C54.7 16.1 54.8 16.4 55 16.7L67.8 29.5C67.8 29.5 67.8 29.8 67.5 29.5C64 27.3 60.1 25.9 55.9 25.5C55.3 25.5 55 26.1 55.3 26.7L76.9 48.3C77.5 48.9 78.4 48.3 78.1 47.7C77.8 43.6 76.4 39.6 74.1 36.1C73.8 36.1 74.1 35.8 74.1 36.1L86.6 48.3C87.2 48.9 88.4 48.3 88.4 47.4C87.7 41 85.4 34.8 81.7 29.5C81.4 29.5 81.7 29.2 81.7 29.5L100.6 48C101.1 48.6 101.9 48.7 102.5 48.3C103 48 103.2 47.4 103 46.8C101.9 34.7 96.6 23.4 88.1 14.9Z" fill="#00ADFF"/>
<path d="M14.9 14.9C23.6 6.5 34.8 1.2 46.8 0C47.7 0 48.4 0.6 48.5 1.5C48.5 1.9 48.4 2.4 48 2.7L29.5 21.3C29.2 21.6 29.5 21.6 29.5 21.6C34.8 17.8 41 15.5 47.4 14.9C48.3 14.9 48.9 16.1 48.3 16.7L35.6 29.5C35.3 29.5 35.6 29.8 35.6 29.5C39.1 27.3 43 26 47.2 25.5C47.8 25.5 48.4 26.1 47.8 26.7L26.1 48.3C25.5 48.9 24.9 48.3 24.9 47.7C25.3 43.6 26.8 39.6 29.2 36.1C29.2 36.1 28.9 35.8 28.9 36.1L16.7 48.3C15.8 48.9 14.6 48.3 14.9 47.4C15.5 40.9 17.8 34.7 21.6 29.5C21.6 29.5 21.3 29.2 21.3 29.5L2.7 48C1.5 49.2 0 48.3 0 46.8C1.2 34.8 6.5 23.6 14.9 14.9Z" fill="#F05245"/>
<path d="M14.9 88.8C23.4 97.4 34.7 102.7 46.8 103.7C47.6 103.8 48.3 103.3 48.4 102.5C48.5 102 48.3 101.6 48 101.2L29.5 82.4C29.2 82.4 29.5 82.1 29.5 82.4C34.8 86.2 41 88.5 47.4 89C48.3 89 48.9 87.8 48.3 87.2L35.6 74.5C35.3 74.2 35.6 74.2 35.6 74.2C39 76.5 43 78 47.1 78.4C47.7 78.4 48.3 77.5 47.7 77.2L26.1 55.6C25.5 55 24.9 55.3 24.9 56.2C25.3 60.3 26.8 64.3 29.2 67.8C29.2 67.8 28.9 68.1 28.9 67.8L16.7 55.6C15.8 55 14.6 55.3 14.9 56.5C15.5 62.9 17.8 69 21.6 74.1C21.6 74.3 21.5 74.4 21.3 74.4L2.7 55.6C2 55 0.9 55.2 0.4 55.9C0.2 56.2 0.1 56.5 0 56.9C1.1 68.9 6.4 80.2 14.9 88.8Z" fill="#1CEBCF"/>
<path d="M88.1 88.8C79.6 97.5 68.3 102.8 56.2 103.7C55 104 54.1 102.2 55 101.3L73.8 82.5C73.8 82.5 73.8 82.2 73.5 82.5C68.3 86.3 62.2 88.6 55.9 89.2C55.3 89.3 54.8 88.8 54.7 88.2C54.7 87.9 54.8 87.6 55 87.3L67.8 74.5C67.8 74.2 67.8 74.2 67.5 74.2C64.1 76.6 60.1 78.1 56 78.4C55.5 78.3 55.2 77.9 55.3 77.5C55.3 77.4 55.3 77.3 55.4 77.2L77 55.6C77.6 55 78.5 55.3 78.2 56.2C77.9 60.3 76.5 64.3 74.2 67.8C73.9 67.8 74.2 68.1 74.2 67.8L86.7 55.6C87.1 55.2 87.8 55.2 88.2 55.6C88.4 55.8 88.5 56.2 88.5 56.5C87.8 62.8 85.5 68.9 81.8 74.1C81.5 74.4 81.8 74.4 81.8 74.4L100.6 55.6C101.5 54.7 103.3 55.6 103 56.8C102 68.9 96.7 80.2 88.1 88.8Z" fill="#FFE300"/>
<path opacity="0.87" d="M390.8 31.9V43H388.9V31.9H385.4V30.1H394.4V31.9H390.8Z" fill="white"/>
<path opacity="0.87" d="M407.7 43V34.4L404.7 40.5999H403.3L400.3 34.4V43H398.3V30.2H400.3L404 38.2L407.7 30.2H409.6V43H407.7Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="409" height="104" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
</a>
<a class="logo-text" href="https://docs.coveo.com">
<span class="logo-text-bar">|</span>
<span class="logo-text-custom">docs</span>
</a>
</div>
<div class="search">
<div id="coveoConnectHeaderStandaloneSearchbox" class="searchbox">
<div class="CoveoSearchbox" style="display: flex;" type="text" data-auto-focus="false" data-enable-omnibox="true"
data-inline="false" data-enable-wildcards="true" data-enable-search-as-you-type="false"
data-enable-reveal-query-suggest-addon="true" data-enable-query-syntax="true"
data-enable-field-addon="true" data-placeholder="Search"></div>
<div class="CoveoAnalytics"></div>
</div>
</div>
<nav class="subnav">
<ul>
<li><a href="https://connect.coveo.com/" target="_blank">Community</a></li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSeyNL18g4JWIDR5xEyIMY48JIjyjwXRmlCveecjXBNSLh4Ygg/viewform?usp=sf_link" target="_blank">Feedback</a></li>
<li><a href="https://docs.coveo.com/en/3378/">News</a></li>
</ul>
</nav>
</div>
</div>
</header>
<subHeader class="no-sticky">
<div class="content">
<nav class="navBar">
<ul>
<li><button class="dropdownButton">Guides<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://docs.coveo.com/en/1724/">Searching With Coveo</a></li>
<li><a href="https://docs.coveo.com/en/2648/">Project Guide</a></li>
<li><a href="https://docs.coveo.com/en/1351/">Services</a></li>
</li>
</ul>
</button>
</li>
<li>
<button class="dropdownButton">API Reference<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://coveo.github.io/search-ui/" target="_blank">JavaScript Search Framework</a></li>
<!-- <li><a href="#">Atomic</a></li> -->
<li><a href="https://docs.coveo.com/en/headless/latest/reference/">Headless</a></li>
<li><a href="https://docs.coveo.com/en/12/">Push API</a></li>
<li><a href="https://docs.coveo.com/en/8/">Field API</a></li>
<li><a href="https://docs.coveo.com/en/13/">Search API</a></li>
<li><a href="https://docs.coveo.com/en/18/">Usage Analytics API</a></li>
<li><a href="https://docs.coveo.com/en/4/">Other APIs</a></li>
</ul>
</button>
</li>
<li>
<button class="dropdownButton">Extensions<i class="fas fa-chevron-down"></i>
<ul class="dropdown">
<li><a href="https://docs.coveo.com/en/1499/">Coveo for Commerce</a></li>
<li><a href="https://docs.coveo.com/en/1243/">Coveo for Salesforce</a></li>
<li><a href="https://docs.coveo.com/en/1479/">Coveo for ServiceNow</a></li>
<li><a href="https://docs.coveo.com/en/2709/">Coveo for Sitecore</a></li>
</ul>
</button>
</li>
</ul>
</nav>
</div>
</subHeader>
<div class="container container-main">
<div class="row">
<div id="toc-column" class="col-1 col-menu menu-sticky-wrap menu-highlight">
<div id="filter-box-container">
<div id="filter-box-header">Filter</div>
<div id="filter-box-body">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<div class="ctr-box-filter">
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited" title="Display inherited methods and properties"> Inherited</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="filter-box-footer"></div>
</div>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<a id="globals-toc-link" href=../globals.html><b>Globals</b></a>
</ul>
<ul class="current">
<li class="current tsd-kind-coveo-component">
<a href="facet.html" class="tsd-kind-icon">Facet</a>
<ul>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#collapse" class="tsd-kind-icon">collapse</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#deselectmultiplevalues" class="tsd-kind-icon">deselect<wbr>Multiple<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#deselectvalue" class="tsd-kind-icon">deselect<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#disable" class="tsd-kind-icon">disable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#enable" class="tsd-kind-icon">enable</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#excludemultiplevalues" class="tsd-kind-icon">exclude<wbr>Multiple<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#excludevalue" class="tsd-kind-icon">exclude<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#expand" class="tsd-kind-icon">expand</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getcaptionforstringvalue" class="tsd-kind-icon">get<wbr>Caption<wbr>For<wbr>String<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getdisplayedfacetvalues" class="tsd-kind-icon">get<wbr>Displayed<wbr>Facet<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getdisplayedvalues" class="tsd-kind-icon">get<wbr>Displayed<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getendpoint" class="tsd-kind-icon">get<wbr>Endpoint</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getexcludedvalues" class="tsd-kind-icon">get<wbr>Excluded<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getselectedvalues" class="tsd-kind-icon">get<wbr>Selected<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#getvaluecaption" class="tsd-kind-icon">get<wbr>Value<wbr>Caption</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#hasselectedvalue" class="tsd-kind-icon">has<wbr>Selected<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#hidewaitinganimation" class="tsd-kind-icon">hide<wbr>Waiting<wbr>Animation</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#reset" class="tsd-kind-icon">reset</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#selectmultiplevalues" class="tsd-kind-icon">select<wbr>Multiple<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#selectvalue" class="tsd-kind-icon">select<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#showless" class="tsd-kind-icon">show<wbr>Less</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#showmore" class="tsd-kind-icon">show<wbr>More</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#showwaitinganimation" class="tsd-kind-icon">show<wbr>Waiting<wbr>Animation</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#switchtoand" class="tsd-kind-icon">switch<wbr>ToAnd</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#switchtoor" class="tsd-kind-icon">switch<wbr>ToOr</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#toggleexcludevalue" class="tsd-kind-icon">toggle<wbr>Exclude<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#toggleselectvalue" class="tsd-kind-icon">toggle<wbr>Select<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#unexcludemultiplevalues" class="tsd-kind-icon">unexclude<wbr>Multiple<wbr>Values</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#unexcludevalue" class="tsd-kind-icon">unexclude<wbr>Value</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component">
<a href="facet.html#updatesort" class="tsd-kind-icon">update<wbr>Sort</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a href="facet.html#get" class="tsd-kind-icon">get</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#bind" class="tsd-kind-icon">bind</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#componentoptionsmodel" class="tsd-kind-icon">component<wbr>Options<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#componentstatemodel" class="tsd-kind-icon">component<wbr>State<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#disabled" class="tsd-kind-icon">disabled</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component">
<a href="facet.html#facetsearch" class="tsd-kind-icon">facet<wbr>Search</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component">
<a href="facet.html#facetsettings" class="tsd-kind-icon">facet<wbr>Settings</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#logger" class="tsd-kind-icon">logger</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#querycontroller" class="tsd-kind-icon">query<wbr>Controller</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#querystatemodel" class="tsd-kind-icon">query<wbr>State<wbr>Model</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#root" class="tsd-kind-icon">root</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#searchinterface" class="tsd-kind-icon">search<wbr>Interface</a>
</li>
<li class=" tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a href="facet.html#id" class="tsd-kind-icon">ID</a>
</li>
<li class=" tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<a href="facet.html#usageanalytics" class="tsd-kind-icon">usage<wbr>Analytics</a>
</li>
<li class=" tsd-kind-object-literal tsd-parent-kind-coveo-component tsd-is-static">
<a href="facet.html#options" class="tsd-kind-icon">options</a>
</li>
<li class=" tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<a href="facet.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
<div id="separator"></div>
<div class="col-2 col-content">
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<a id="home-menu-link" class="aui-nav-link" title="Go to the home page" href=..>
<i class="fa fa-home" aria-hidden="true"></i>
</a>
<li>
<a href="../globals.html">Globals</a>
</li>
<li>
<a href="facet.html">Facet</a>
</li>
</ul>
<h1>Coveo Facet Component (CoveoFacet)</h1>
</div>
</div>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<div class="lead">
<p><strong>Note:</strong></p>
<blockquote>
<p>We recommend using the simpler and more powerful <a href="dynamicfacet.html"><code>DynamicFacet</code></a> component instead.</p>
</blockquote>
</div>
<p>The <code>Facet</code> component displays a <em>facet</em> of the results for the current query. A facet is a list of values for a
certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).</p>
<p>The list of values is obtained using a <a href="../interfaces/igroupbyrequest.html"><code>GroupByRequest</code></a> operation performed at the same time
as the main query.</p>
<p>The <code>Facet</code> component allows the end user to drill down inside a result set by restricting the result to certain
field values. It also allows filtering out values from the facet itself, and can provide a search box to look for
specific values inside larger sets.</p>
<p>This is probably the most complex component in the Coveo JavaScript Search Framework and as such, it allows for many
configuration options.</p>
<p>See also the <a href="facetrange.html"><code>FacetRange</code></a> and <a href="timespanfacet.html"><code>TimespanFacet</code></a> components (which
extend this component), and the <a href="facetslider.html"><code>FacetSlider</code></a> and <a href="categoryfacet.html"><code>CategoryFacet</code></a> components (which do not extend this
component, but are very similar).</p>
</div>
</section>
<div class="preview-container tsd-panel">
<div class="overlay"></div>
</div>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#collapse" class="tsd-kind-icon">collapse</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#debuginfo" class="tsd-kind-icon">debug<wbr>Info</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#deselectmultiplevalues" class="tsd-kind-icon">deselect<wbr>Multiple<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#deselectvalue" class="tsd-kind-icon">deselect<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#disable" class="tsd-kind-icon">disable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#enable" class="tsd-kind-icon">enable</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#excludemultiplevalues" class="tsd-kind-icon">exclude<wbr>Multiple<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#excludevalue" class="tsd-kind-icon">exclude<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#expand" class="tsd-kind-icon">expand</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#getbindings" class="tsd-kind-icon">get<wbr>Bindings</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getcaptionforstringvalue" class="tsd-kind-icon">get<wbr>Caption<wbr>For<wbr>String<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getdisplayedfacetvalues" class="tsd-kind-icon">get<wbr>Displayed<wbr>Facet<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getdisplayedvalues" class="tsd-kind-icon">get<wbr>Displayed<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getendpoint" class="tsd-kind-icon">get<wbr>Endpoint</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getexcludedvalues" class="tsd-kind-icon">get<wbr>Excluded<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getselectedvalues" class="tsd-kind-icon">get<wbr>Selected<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#getvaluecaption" class="tsd-kind-icon">get<wbr>Value<wbr>Caption</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#hasselectedvalue" class="tsd-kind-icon">has<wbr>Selected<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#hidewaitinganimation" class="tsd-kind-icon">hide<wbr>Waiting<wbr>Animation</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#reset" class="tsd-kind-icon">reset</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#selectmultiplevalues" class="tsd-kind-icon">select<wbr>Multiple<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#selectvalue" class="tsd-kind-icon">select<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#showless" class="tsd-kind-icon">show<wbr>Less</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#showmore" class="tsd-kind-icon">show<wbr>More</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#showwaitinganimation" class="tsd-kind-icon">show<wbr>Waiting<wbr>Animation</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#switchtoand" class="tsd-kind-icon">switch<wbr>ToAnd</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#switchtoor" class="tsd-kind-icon">switch<wbr>ToOr</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#toggleexcludevalue" class="tsd-kind-icon">toggle<wbr>Exclude<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#toggleselectvalue" class="tsd-kind-icon">toggle<wbr>Select<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#unexcludemultiplevalues" class="tsd-kind-icon">unexclude<wbr>Multiple<wbr>Values</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#unexcludevalue" class="tsd-kind-icon">unexclude<wbr>Value</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component"><a href="facet.html#updatesort" class="tsd-kind-icon">update<wbr>Sort</a></li>
<li class="tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static"><a href="facet.html#get" class="tsd-kind-icon">get</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#bind" class="tsd-kind-icon">bind</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#componentoptionsmodel" class="tsd-kind-icon">component<wbr>Options<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#componentstatemodel" class="tsd-kind-icon">component<wbr>State<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#disabled" class="tsd-kind-icon">disabled</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component"><a href="facet.html#facetsearch" class="tsd-kind-icon">facet<wbr>Search</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component"><a href="facet.html#facetsettings" class="tsd-kind-icon">facet<wbr>Settings</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#logger" class="tsd-kind-icon">logger</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#querycontroller" class="tsd-kind-icon">query<wbr>Controller</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#querystatemodel" class="tsd-kind-icon">query<wbr>State<wbr>Model</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#root" class="tsd-kind-icon">root</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#searchinterface" class="tsd-kind-icon">search<wbr>Interface</a></li>
<li class="tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static"><a href="facet.html#id" class="tsd-kind-icon">ID</a></li>
</ul>
</section>
<section class="tsd-index-section tsd-is-inherited">
<h3>Accessors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited"><a href="facet.html#usageanalytics" class="tsd-kind-icon">usage<wbr>Analytics</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Component Options</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.additionalfilter" class="tsd-kind-icon">additional<wbr>Filter</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.allowedvalues" class="tsd-kind-icon">allowed<wbr>Values</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.availablesorts" class="tsd-kind-icon">available<wbr>Sorts</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.computedfield" class="tsd-kind-icon">computed<wbr>Field</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.computedfieldcaption" class="tsd-kind-icon">computed<wbr>Field<wbr>Caption</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.computedfieldformat" class="tsd-kind-icon">computed<wbr>Field<wbr>Format</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.computedfieldoperation" class="tsd-kind-icon">computed<wbr>Field<wbr>Operation</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.customsort" class="tsd-kind-icon">custom<wbr>Sort</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.dependson" class="tsd-kind-icon">depends<wbr>On</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.dependsoncondition" class="tsd-kind-icon">depends<wbr>OnCondition</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enablecollapse" class="tsd-kind-icon">enable<wbr>Collapse</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enablefacetsearch" class="tsd-kind-icon">enable<wbr>Facet<wbr>Search</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enablemoreless" class="tsd-kind-icon">enable<wbr>More<wbr>Less</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enablesettings" class="tsd-kind-icon">enable<wbr>Settings</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enablesettingsfacetstate" class="tsd-kind-icon">enable<wbr>Settings<wbr>Facet<wbr>State</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.enabletogglingoperator" class="tsd-kind-icon">enable<wbr>Toggling<wbr>Operator</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.facetsearchdelay" class="tsd-kind-icon">facet<wbr>Search<wbr>Delay</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.facetsearchignoreaccents" class="tsd-kind-icon">facet<wbr>Search<wbr>Ignore<wbr>Accents</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.field" class="tsd-kind-icon">field</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.id-1" class="tsd-kind-icon">id</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.includeinbreadcrumb" class="tsd-kind-icon">include<wbr>InBreadcrumb</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.includeinomnibox" class="tsd-kind-icon">include<wbr>InOmnibox</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.injectiondepth" class="tsd-kind-icon">injection<wbr>Depth</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.ismultivaluefield" class="tsd-kind-icon">is<wbr>Multi<wbr>Value<wbr>Field</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.lookupfield" class="tsd-kind-icon">lookup<wbr>Field</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.numberofvalues" class="tsd-kind-icon">number<wbr>OfValues</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.numberofvaluesinbreadcrumb" class="tsd-kind-icon">number<wbr>OfValues<wbr>InBreadcrumb</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.numberofvaluesinfacetsearch" class="tsd-kind-icon">number<wbr>OfValues<wbr>InFacet<wbr>Search</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.numberofvaluesinomnibox" class="tsd-kind-icon">number<wbr>OfValues<wbr>InOmnibox</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.paddingcontainer" class="tsd-kind-icon">padding<wbr>Container</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.pagesize" class="tsd-kind-icon">page<wbr>Size</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.preserveposition" class="tsd-kind-icon">preserve<wbr>Position</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.scrollcontainer" class="tsd-kind-icon">scroll<wbr>Container</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.sortcriteria" class="tsd-kind-icon">sort<wbr>Criteria</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.title" class="tsd-kind-icon">title</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.useand" class="tsd-kind-icon">use<wbr>And</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.usewildcardsinfacetsearch" class="tsd-kind-icon">use<wbr>Wildcards<wbr>InFacet<wbr>Search</a></li>
<li class="tsd-kind-variable tsd-parent-kind-object-literal"><a href="facet.html#options.valuecaption" class="tsd-kind-icon">value<wbr>Caption</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite"><a href="facet.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="collapse" class="tsd-anchor"></a>
<h3>collapse</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">collapse<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1256">ui/Facet/Facet.ts
:1256</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Collapses the facet.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="debuginfo" class="tsd-anchor"></a>
<h3>debug<wbr>Info</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">debug<wbr>Info<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#debuginfo">debugInfo</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L41">ui/Base/BaseComponent.ts
:41</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Return the debug info about this component.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="deselectmultiplevalues" class="tsd-anchor"></a>
<h3>deselect<wbr>Multiple<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">deselect<wbr>Multiple<wbr>Values<span class="tsd-signature-symbol">(</span>values<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L909">ui/Facet/Facet.ts
:909</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Deselects multiple values.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>values: <span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be an array of <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or an array of strings.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="deselectvalue" class="tsd-anchor"></a>
<h3>deselect<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">deselect<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L895">ui/Facet/Facet.ts
:895</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Deselects a single value.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string (e.g., <code>deselectValue('foobar')</code> or
<code>deselectValue(new FacetValue('foobar'))</code>).</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="disable" class="tsd-anchor"></a>
<h3>disable</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">disable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#disable">disable</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L52">ui/Base/BaseComponent.ts
:52</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Disable the component.
Normally this means that the component will not execute handlers for the framework events (query events, for example).
Components are enabled by default on creation.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="enable" class="tsd-anchor"></a>
<h3>enable</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">enable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#enable">enable</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L61">ui/Base/BaseComponent.ts
:61</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Enable the component.
Normally this means that the component will execute handlers for the framework events (query events, for example).
Components are enabled by default on creation.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="excludemultiplevalues" class="tsd-anchor"></a>
<h3>exclude<wbr>Multiple<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">exclude<wbr>Multiple<wbr>Values<span class="tsd-signature-symbol">(</span>values<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L940">ui/Facet/Facet.ts
:940</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Excludes multiple values.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>values: <span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be an array of <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or an array of strings.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="excludevalue" class="tsd-anchor"></a>
<h3>exclude<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">exclude<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L926">ui/Facet/Facet.ts
:926</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Excludes a single value.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string (e.g., <code>excludeValue('foobar')</code> or
<code>excludeValue(new FacetValue('foobar'))</code>).</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="expand" class="tsd-anchor"></a>
<h3>expand</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">expand<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1266">ui/Facet/Facet.ts
:1266</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Expands the facet.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="getbindings" class="tsd-anchor"></a>
<h3>get<wbr>Bindings</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon">get<wbr>Bindings<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#getbindings">getBindings</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L328">ui/Base/Component.ts
:328</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Return the bindings, or environment, for the current component.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getcaptionforstringvalue" class="tsd-anchor"></a>
<h3>get<wbr>Caption<wbr>For<wbr>String<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Caption<wbr>For<wbr>String<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1214">ui/Facet/Facet.ts
:1214</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the configured caption for a desired facet value.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The string facet value whose caption the method should return.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getdisplayedfacetvalues" class="tsd-anchor"></a>
<h3>get<wbr>Displayed<wbr>Facet<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Displayed<wbr>Facet<wbr>Values<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FacetValue[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1022">ui/Facet/Facet.ts
:1022</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the currently displayed values as an array of <a href="../classes/facetvalue.html"><code>FacetValue</code></a>.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">FacetValue[]</span></h4>
<p>The currently displayed values.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getdisplayedvalues" class="tsd-anchor"></a>
<h3>get<wbr>Displayed<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Displayed<wbr>Values<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1013">ui/Facet/Facet.ts
:1013</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the currently displayed values as an array of strings.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string[]</span></h4>
<p>The currently displayed values.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getendpoint" class="tsd-anchor"></a>
<h3>get<wbr>Endpoint</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Endpoint<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ISearchEndpoint</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1096">ui/Facet/Facet.ts
:1096</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the endpoint for the facet.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ISearchEndpoint</span></h4>
<p>The endpoint for the facet.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getexcludedvalues" class="tsd-anchor"></a>
<h3>get<wbr>Excluded<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Excluded<wbr>Values<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1052">ui/Facet/Facet.ts
:1052</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the currently excluded values as an array of strings.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string[]</span></h4>
<p>The currently excluded values.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getselectedvalues" class="tsd-anchor"></a>
<h3>get<wbr>Selected<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Selected<wbr>Values<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string[]</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1034">ui/Facet/Facet.ts
:1034</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the currently selected values as an array of strings.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string[]</span></h4>
<p>The currently selected values.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="getvaluecaption" class="tsd-anchor"></a>
<h3>get<wbr>Value<wbr>Caption</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">get<wbr>Value<wbr>Caption<span class="tsd-signature-symbol">(</span>facetValue<span class="tsd-signature-symbol">: </span><a href="../interfaces/iindexfieldvalue.html" class="tsd-signature-type">IIndexFieldValue</a><span class="tsd-signature-symbol"> | </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1191">ui/Facet/Facet.ts
:1191</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns the configured caption for the given <a href="../classes/facetvalue.html"><code>FacetValue</code></a>.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>facetValue: <a href="../interfaces/iindexfieldvalue.html" class="tsd-signature-type">IIndexFieldValue</a><span class="tsd-signature-symbol"> | </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The <code>FacetValue</code> whose caption the method should return.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="hasselectedvalue" class="tsd-anchor"></a>
<h3>has<wbr>Selected<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">has<wbr>Selected<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1043">ui/Facet/Facet.ts
:1043</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Determines whether the specified value is selected in the facet.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The name of the facet value to verify.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="hidewaitinganimation" class="tsd-anchor"></a>
<h3>hide<wbr>Waiting<wbr>Animation</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">hide<wbr>Waiting<wbr>Animation<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1149">ui/Facet/Facet.ts
:1149</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Hides the waiting animation in the facet header.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="reset" class="tsd-anchor"></a>
<h3>reset</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">reset<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1060">ui/Facet/Facet.ts
:1060</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Resets the facet by un-selecting all values, un-excluding all values, and redrawing the facet.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="selectmultiplevalues" class="tsd-anchor"></a>
<h3>select<wbr>Multiple<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">select<wbr>Multiple<wbr>Values<span class="tsd-signature-symbol">(</span>values<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L878">ui/Facet/Facet.ts
:878</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Selects multiple values.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>values: <span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be an array of <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or an array of strings.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="selectvalue" class="tsd-anchor"></a>
<h3>select<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">select<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L864">ui/Facet/Facet.ts
:864</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Selects a single value.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string (e.g., <code>selectValue('foobar')</code> or
<code>selectValue(new FacetValue('foobar'))</code>).</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="showless" class="tsd-anchor"></a>
<h3>show<wbr>Less</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">show<wbr>Less<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1243">ui/Facet/Facet.ts
:1243</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Shows less elements in the Facet (up to the original number of values).</p>
</div>
<p>See the <a href="facet.html#options.enablemoreless"><code>enableMoreLess</code></a>, and
<a href="facet.html#options.numberofvalues"><code>numberOfValues</code></a> options.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="showmore" class="tsd-anchor"></a>
<h3>show<wbr>More</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">show<wbr>More<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1227">ui/Facet/Facet.ts
:1227</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Shows the next page of results in the facet.</p>
</div>
<p>See the <a href="facet.html#options.enablemoreless"><code>enableMoreLess</code></a>, and <a href="facet.html#options.pagesize"><code>pageSize</code></a>
options.</p>
<p>Triggers a query if needed, or displays the already available values.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="showwaitinganimation" class="tsd-anchor"></a>
<h3>show<wbr>Waiting<wbr>Animation</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">show<wbr>Waiting<wbr>Animation<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1138">ui/Facet/Facet.ts
:1138</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Shows a waiting animation in the facet header (a spinner).</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="switchtoand" class="tsd-anchor"></a>
<h3>switch<wbr>ToAnd</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">switch<wbr>ToAnd<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1074">ui/Facet/Facet.ts
:1074</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Switches the facet to <code>AND</code> mode.</p>
</div>
<p>See the <a href="facet.html#options.useand"><code>useAnd</code></a>, and
<a href="facet.html#options.enabletogglingoperator"><code>enableTogglingOperator</code></a> options.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="switchtoor" class="tsd-anchor"></a>
<h3>switch<wbr>ToOr</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">switch<wbr>ToOr<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1086">ui/Facet/Facet.ts
:1086</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Switches the facet to <code>OR</code> mode.</p>
</div>
<p>See the <a href="facet.html#options.useand"><code>useAnd</code></a>, and
<a href="facet.html#options.enabletogglingoperator"><code>enableTogglingOperator</code></a> options.</p>
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="toggleexcludevalue" class="tsd-anchor"></a>
<h3>toggle<wbr>Exclude<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">toggle<wbr>Exclude<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1001">ui/Facet/Facet.ts
:1001</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggles the exclusion state of a single value (excludes the value if it is not already excluded; un-excludes the
value if it is already excluded).</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="toggleselectvalue" class="tsd-anchor"></a>
<h3>toggle<wbr>Select<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">toggle<wbr>Select<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L986">ui/Facet/Facet.ts
:986</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Toggles the selection state of a single value (selects the value if it is not already selected; un-selects the
value if it is already selected).</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="unexcludemultiplevalues" class="tsd-anchor"></a>
<h3>unexclude<wbr>Multiple<wbr>Values</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">unexclude<wbr>Multiple<wbr>Values<span class="tsd-signature-symbol">(</span>values<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L970">ui/Facet/Facet.ts
:970</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Unexcludes multiple values.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>values: <span class="tsd-signature-type">FacetValue[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string[]</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be an array of <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or an array of strings.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="unexcludevalue" class="tsd-anchor"></a>
<h3>unexclude<wbr>Value</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">unexclude<wbr>Value<span class="tsd-signature-symbol">(</span>value<span class="tsd-signature-symbol">: </span><a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L956">ui/Facet/Facet.ts
:956</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Unexcludes a single value.</p>
</div>
<p>Does not trigger a query automatically.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>value: <a href="../classes/facetvalue.html" class="tsd-signature-type">FacetValue</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>Can be a <a href="../classes/facetvalue.html"><code>FacetValue</code></a> or a string.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component">
<a name="updatesort" class="tsd-anchor"></a>
<h3>update<wbr>Sort</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component">
<li class="tsd-signature tsd-kind-icon">update<wbr>Sort<span class="tsd-signature-symbol">(</span>criteria<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L1109">ui/Facet/Facet.ts
:1109</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Changes the sort parameter for the facet.</p>
</div>
<p>See <a href="facet.html#options.availablesorts">Facet.options.availableSorts</a> for the list of possible values.</p>
<p>Also triggers a new query.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>criteria: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The new sort parameter for the facet.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a name="get" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagStatic">Static</span> get</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<li class="tsd-signature tsd-kind-icon">get<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span>, componentClass<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span>, noThrow<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#get">get</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L410">ui/Base/Component.ts
:410</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.<br/>
If there is multiple component bound to the current HTMLElement, you must specify the component class.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLElement</span></h5>
<div class="tsd-comment tsd-typography">
<p>HTMLElement for which to get the bound component.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> componentClass: <span class="tsd-signature-type">any</span></h5>
<div class="tsd-comment tsd-typography">
<p>Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> noThrow: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Boolean option to tell the method to not throw on error.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../classes/basecomponent.html" class="tsd-signature-type">BaseComponent</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="bind" class="tsd-anchor"></a>
<h3>bind</h3>
<div class="tsd-signature tsd-kind-icon">bind<span class="tsd-signature-symbol">:</span> <a href="../classes/componentevents.html" class="tsd-signature-type">ComponentEvents</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#bind">bind</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L270">ui/Base/Component.ts
:270</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Allows the component to bind events and execute them only when it is enabled.</p>
</div>
<dl class="tsd-comment-tags">
<dt>type</dt>
<dd><p>{Coveo.ComponentEvents}</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="componentoptionsmodel" class="tsd-anchor"></a>
<h3>component<wbr>Options<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">component<wbr>Options<wbr>Model<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ComponentOptionsModel</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#componentoptionsmodel">componentOptionsModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L294">ui/Base/Component.ts
:294</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the state of options for different components. Mainly used by <a href="resultlink.html">ResultLink</a>.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="componentstatemodel" class="tsd-anchor"></a>
<h3>component<wbr>State<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">component<wbr>State<wbr>Model<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ComponentStateModel</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#componentstatemodel">componentStateModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L282">ui/Base/Component.ts
:282</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers component state event when modified. Each component can listen to those events.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="disabled" class="tsd-anchor"></a>
<h3>disabled</h3>
<div class="tsd-signature tsd-kind-icon">disabled<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#disabled">disabled</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L23">ui/Base/BaseComponent.ts
:23</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>A disabled component will not participate in the query, or listen to <a href="../classes/componentevents.html">ComponentEvents</a>.</p>
</div>
<dl class="tsd-comment-tags">
<dt>type</dt>
<dd><p>{boolean}</p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component">
<a name="facetsearch" class="tsd-anchor"></a>
<h3>facet<wbr>Search</h3>
<div class="tsd-signature tsd-kind-icon">facet<wbr>Search<span class="tsd-signature-symbol">:</span> <a href="../classes/facetsearch.html" class="tsd-signature-type">FacetSearch</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L734">ui/Facet/Facet.ts
:734</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Renders and handles the facet <strong>Search</strong> part of the component.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component">
<a name="facetsettings" class="tsd-anchor"></a>
<h3>facet<wbr>Settings</h3>
<div class="tsd-signature tsd-kind-icon">facet<wbr>Settings<span class="tsd-signature-symbol">:</span> <a href="../classes/facetsettings.html" class="tsd-signature-type">FacetSettings</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L739">ui/Facet/Facet.ts
:739</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Renders and handles the facet <strong>Settings</strong> part of the component</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="logger" class="tsd-anchor"></a>
<h3>logger</h3>
<div class="tsd-signature tsd-kind-icon">logger<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Logger</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#logger">logger</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L18">ui/Base/BaseComponent.ts
:18</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Allows component to log in the dev console.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="querycontroller" class="tsd-anchor"></a>
<h3>query<wbr>Controller</h3>
<div class="tsd-signature tsd-kind-icon">query<wbr>Controller<span class="tsd-signature-symbol">:</span> <a href="../classes/querycontroller.html" class="tsd-signature-type">QueryController</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#querycontroller">queryController</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L286">ui/Base/Component.ts
:286</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the singleton that allows to trigger queries.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="querystatemodel" class="tsd-anchor"></a>
<h3>query<wbr>State<wbr>Model</h3>
<div class="tsd-signature tsd-kind-icon">query<wbr>State<wbr>Model<span class="tsd-signature-symbol">:</span> <a href="../classes/querystatemodel.html" class="tsd-signature-type">QueryStateModel</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#querystatemodel">queryStateModel</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L278">ui/Base/Component.ts
:278</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="root" class="tsd-anchor"></a>
<h3>root</h3>
<div class="tsd-signature tsd-kind-icon">root<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#root">root</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L274">ui/Base/Component.ts
:274</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the root HTMLElement (the <a href="searchinterface.html">SearchInterface</a>).</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="searchinterface" class="tsd-anchor"></a>
<h3>search<wbr>Interface</h3>
<div class="tsd-signature tsd-kind-icon">search<wbr>Interface<span class="tsd-signature-symbol">:</span> <a href="searchinterface.html" class="tsd-signature-type">SearchInterface</a></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#searchinterface">searchInterface</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L290">ui/Base/Component.ts
:290</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the root of every component, the <a href="searchinterface.html">SearchInterface</a>.</p>
</div>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-coveo-component tsd-is-inherited tsd-is-static">
<a name="id" class="tsd-anchor"></a>
<h3><span class="tsd-flag ts-flagStatic">Static</span> ID</h3>
<div class="tsd-signature tsd-kind-icon">ID<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/basecomponent.html">BaseComponent</a>.<a href="../classes/basecomponent.html#id">ID</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/BaseComponent.ts#L28">ui/Base/BaseComponent.ts
:28</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The static ID that each component needs in order to be identified.<br/>
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton</p>
</div>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group tsd-is-inherited">
<h2>Accessors</h2>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<a name="usageanalytics" class="tsd-anchor"></a>
<h3>usage<wbr>Analytics</h3>
<ul class="tsd-signatures tsd-kind-get-signature tsd-parent-kind-coveo-component tsd-is-inherited">
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">get</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/ianalyticsclient.html" class="tsd-signature-type">IAnalyticsClient</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Inherited from <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#usageanalytics">usageAnalytics</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Base/Component.ts#L343">ui/Base/Component.ts
:343</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>A reference to the <a href="analytics.html#client">Analytics.client</a>.</p>
</div>
</div>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/ianalyticsclient.html" class="tsd-signature-type">IAnalyticsClient</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Component Options</h2>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.additionalfilter" class="tsd-anchor"></a>
<h3>additional<wbr>Filter</h3>
<div class="tsd-signature tsd-kind-icon">additional<wbr>Filter<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L630">ui/Facet/Facet.ts
:630</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies an additional query expression (query override) to add to each
<a href="../interfaces/igroupbyrequest.html"><code>GroupByRequest</code></a> that this facet performs.</p>
</div>
<p>Example: <code>@date>=2014/01/01</code></p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p><a href="https://docs.coveo.com/en/1107/">Coveo for Salesforce Free</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-additional-filter='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.allowedvalues" class="tsd-anchor"></a>
<h3>allowed<wbr>Values</h3>
<div class="tsd-signature tsd-kind-icon">allowed<wbr>Values<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string[]</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L622">ui/Facet/Facet.ts
:622</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies an explicit list of <a href="../interfaces/igroupbyrequest.html#allowedvalues"><code>allowedValues</code></a> in the
<a href="../interfaces/igroupbyrequest.html"><code>GroupByRequest</code></a>.</p>
</div>
<p>If you specify a list of values for this option, the facet uses only these values (if they are available in
the current result set).</p>
<p><strong>Example:</strong></p>
<p>The following facet only uses the <code>Contact</code>, <code>Account</code>, and <code>File</code> values of the <code>@objecttype</code> field. Even if the
current result set contains other <code>@objecttype</code> values, such as <code>Message</code>, or <code>Product</code>, the facet does not use
those other values.</p>
<pre><code class="lang-html">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"CoveoFacet"</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">"@objecttype"</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">"Object Type"</span> <span class="hljs-attr">data-tab</span>=<span class="hljs-string">"All"</span> <span class="hljs-attr">data-allowed-values</span>=<span class="hljs-string">"Contact,Account,File"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>Default value is <code>undefined</code>, and the facet uses all available values for its
<a href="facet.html#options.field"><code>field</code></a> in the current result set.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.availablesorts" class="tsd-anchor"></a>
<h3>available<wbr>Sorts</h3>
<div class="tsd-signature tsd-kind-icon">available<wbr>Sorts<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">("occurrences" | "score" | "alphaascending" | "alphadescending" | "computedfieldascending" | "computedfielddescending" | "chisquare" | "nosort")[]</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L266">ui/Facet/Facet.ts
:266</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablesettings"><code>enableSettings</code></a> option is <code>true</code>, specifies the sort criteria
options to display in the facet <strong>Settings</strong> menu.</p>
</div>
<p>Possible values are:</p>
<ul>
<li><code>"occurrences"</code></li>
<li><code>"score"</code></li>
<li><code>"alphaascending"</code></li>
<li><code>"alphadescending"</code></li>
<li><code>"computedfieldascending"</code></li>
<li><code>"computedfielddescending"</code></li>
<li><code>"custom"</code></li>
</ul>
<p>See <a href="../interfaces/igroupbyrequest.html#sortcriteria">IGroupByRequest.sortCriteria</a> for a description of each possible value.</p>
<p><strong>Notes:</strong></p>
<blockquote>
<ul>
<li>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</li>
</ul>
</blockquote>
<blockquote>
<ul>
<li>Using value captions will disable alphabetical sorts (see the <a href="facet.html#options.valuecaption">valueCaption</a> option).</li>
</ul>
</blockquote>
<p>Default value is <code>occurrences,score,alphaascending,alphadescending</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablesettings"><code>enableSettings</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>[occurrences, score, alphaascending, alphadescending]</code></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.computedfield" class="tsd-anchor"></a>
<h3>computed<wbr>Field</h3>
<div class="tsd-signature tsd-kind-icon">computed<wbr>Field<span class="tsd-signature-symbol">:</span> <a href="../interfaces/ifieldoption.html" class="tsd-signature-type">IFieldOption</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L472">ui/Facet/Facet.ts
:472</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the name of a field on which to execute an aggregate operation for all distinct values of the facet
<a href="facet.html#options.field"><code>field</code></a>.</p>
</div>
<p>The facet displays the result of the operation along with the number of occurrences for each value.</p>
<p>You can use this option to compute the sum of a field (like a money amount) for each listed facet value.</p>
<p>Works in conjunction with the <a href="facet.html#options.computedfieldoperation"><code>computedFieldOperation</code></a>,
<a href="facet.html#options.computedfieldformat"><code>computedFieldFormat</code></a>, and
<a href="facet.html#options.computedfieldcaption"><code>computedFieldCaption</code></a> options.</p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p><a href="https://docs.coveo.com/en/1107/">Coveo for Salesforce Free</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-computed-field='@foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.computedfieldcaption" class="tsd-anchor"></a>
<h3>computed<wbr>Field<wbr>Caption</h3>
<div class="tsd-signature tsd-kind-icon">computed<wbr>Field<wbr>Caption<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L520">ui/Facet/Facet.ts
:520</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies what the caption of the <a href="facet.html#options.computedfield"><code>computedField</code></a> should be in the facet
<strong>Settings</strong> menu for sorting.</p>
</div>
<p>For example, setting this option to <code>"Money"</code> will display <code>"Money Ascending"</code> for computed field ascending.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is the localized string for <code>ComputedField</code>.</p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p><a href="https://docs.coveo.com/en/1107/">Coveo for Salesforce Free</a></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-computed-field-caption='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.computedfieldformat" class="tsd-anchor"></a>
<h3>computed<wbr>Field<wbr>Format</h3>
<div class="tsd-signature tsd-kind-icon">computed<wbr>Field<wbr>Format<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"c0"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"n0"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"n2"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L504">ui/Facet/Facet.ts
:504</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies how to format the values resulting from a
<a href="facet.html#options.computedfieldoperation"><code>computedFieldOperation</code></a>.</p>
</div>
<p>The Globalize library defines all available formats (see
<a href="https://github.com/klaaspieter/jquery-global#globalizeformat-value-format-culture-">Globalize</a>).</p>
<p>The most commonly used formats are:</p>
<ul>
<li><code>c0</code> - Formats the value as a currency.</li>
<li><code>n0</code> - Formats the value as an integer.</li>
<li><code>n2</code> - Formats the value as a floating point with 2 decimal digits.</li>
</ul>
<p>Default value is <code>"c0"</code>.</p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p><a href="https://docs.coveo.com/en/1107/">Coveo for Salesforce Free</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>c0</code></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.computedfieldoperation" class="tsd-anchor"></a>
<h3>computed<wbr>Field<wbr>Operation</h3>
<div class="tsd-signature tsd-kind-icon">computed<wbr>Field<wbr>Operation<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"sum"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"average"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"minimum"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"maximum"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L485">ui/Facet/Facet.ts
:485</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the type of aggregate operation to perform on the <a href="facet.html#options.computedfield"><code>computedField</code></a>.</p>
</div>
<p>The possible values are:</p>
<ul>
<li><code>sum</code> - Computes the sum of the computed field values.</li>
<li><code>average</code> - Computes the average of the computed field values.</li>
<li><code>minimum</code> - Finds the minimum value of the computed field values.</li>
<li><code>maximum</code> - Finds the maximum value of the computed field values.</li>
</ul>
<p>Default value is <code>sum</code>.</p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p><a href="https://docs.coveo.com/en/1107/">Coveo for Salesforce Free</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>sum</code></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.customsort" class="tsd-anchor"></a>
<h3>custom<wbr>Sort</h3>
<div class="tsd-signature tsd-kind-icon">custom<wbr>Sort<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string[]</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L307">ui/Facet/Facet.ts
:307</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies a custom order by which to sort the facet values.</p>
</div>
<p><strong>Example:</strong></p>
<p>You could use this option to specify a logical order for support tickets, such as:</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"CoveoFacet"</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">"@ticketstatus"</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">"Ticket Status"</span> <span class="hljs-attr">data-tab</span>=<span class="hljs-string">"All"</span> <span class="hljs-attr">data-custom-sort</span>=<span class="hljs-string">"New,Opened,Feedback,Resolved"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.dependson" class="tsd-anchor"></a>
<h3>depends<wbr>On</h3>
<div class="tsd-signature tsd-kind-icon">depends<wbr>On<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L661">ui/Facet/Facet.ts
:661</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies whether this facet only appears when a value is selected in its "parent" facet.</p>
</div>
<p>To specify the parent facet, use its <a href="facet.html#options.id-1"><code>id</code></a>.</p>
<p>Remember that by default, a facet <code>id</code> value is the same as its <a href="facet.html#options.field"><code>field</code></a> option
value.</p>
<p><strong>Examples:</strong></p>
<p>First case: the "parent" facet has no custom <code>id</code>:</p>
<pre><code class="lang-html"><span class="hljs-comment"><!-- "Parent" Facet: --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoFacet'</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">'@myfield'</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">'My Parent Facet'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- The "dependent" Facet must refer to the default `id` of its "parent" Facet, which is the name of its field. --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoFacet'</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">'@myotherfield'</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">'My Dependent Facet'</span> <span class="hljs-attr">data-depends-on</span>=<span class="hljs-string">'@myfield'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>Second case: the "parent" facet has a custom <code>id</code>:</p>
<pre><code class="lang-html"><span class="hljs-comment"><!-- "Parent" Facet: --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoFacet'</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">'@myfield'</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">'My Parent Facet'</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">'myParentCustomId'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- The "dependent" Facet must refer to the custom `id` of its "parent" Facet, which is 'myParentCustomId'. --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoFacet'</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">'@myotherfield'</span> <span class="hljs-attr">data-title</span>=<span class="hljs-string">'My Dependent Facet'</span> <span class="hljs-attr">data-depends-on</span>=<span class="hljs-string">'myParentCustomId'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>Default value is <code>undefined</code></p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-depends-on='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.dependsoncondition" class="tsd-anchor"></a>
<h3>depends<wbr>OnCondition</h3>
<div class="tsd-signature tsd-kind-icon">depends<wbr>OnCondition<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">IDependentFacetCondition</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L672">ui/Facet/Facet.ts
:672</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>A function that verifies whether the current state of the <code>dependsOn</code> facet allows the dependent facet to be displayed.</p>
</div>
<p>If specified, the function receives a reference to the resolved <code>dependsOn</code> facet component instance as an argument, and must return a boolean.
The function's argument should typically be treated as read-only.</p>
<p>By default, the dependent facet is displayed whenever one or more values are selected in its <code>dependsOn</code> facet.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.dependson"><code>dependsOn</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Additional documentation</dt>
<dd><p><a href="https://docs.coveo.com/3210/">Defining Dependent Facets</a></p>
</dd>
</dl>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablecollapse" class="tsd-anchor"></a>
<h3>enable<wbr>Collapse</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Collapse<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L600">ui/Facet/Facet.ts
:600</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablesettings"><code>enableSettings</code></a> option is <code>true</code>, specifies whether the
<strong>Collapse \ Expand</strong> menu option is available in the facet <strong>Settings</strong> menu.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablesettings"><code>enableSettings</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-collapse='true'
data-enable-collapse='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablefacetsearch" class="tsd-anchor"></a>
<h3>enable<wbr>Facet<wbr>Search</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Facet<wbr>Search<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L367">ui/Facet/Facet.ts
:367</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to display a search box at the bottom of the facet for searching among the available facet
<a href="facet.html#options.field"><code>field</code></a> values.</p>
</div>
<p>See also the <a href="facet.html#options.facetsearchdelay"><code>facetSearchDelay</code></a>,
<a href="facet.html#options.facetsearchignoreaccents"><code>facetSearchIgnoreAccents</code></a>, and
<a href="facet.html#options.numberofvaluesinfacetsearch"><code>numberOfValuesInFacetSearch</code></a> options.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-facet-search='true'
data-enable-facet-search='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablemoreless" class="tsd-anchor"></a>
<h3>enable<wbr>More<wbr>Less</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>More<wbr>Less<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L580">ui/Facet/Facet.ts
:580</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to enable the <strong>More</strong> and <strong>Less</strong> buttons in the Facet.</p>
</div>
<p>See also the <a href="facet.html#options.pagesize"><code>pageSize</code></a> option.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-more-less='true'
data-enable-more-less='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablesettings" class="tsd-anchor"></a>
<h3>enable<wbr>Settings</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Settings<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L233">ui/Facet/Facet.ts
:233</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to display the facet <strong>Settings</strong> menu.</p>
</div>
<p>See also the <a href="facet.html#options.enablesettingsfacetstate"><code>enableSettingsFacetState</code></a>,
<a href="facet.html#options.availablesorts"><code>availableSorts</code></a>, and
<a href="facet.html#options.enablecollapse"><code>enableCollapse</code></a> options.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-settings='true'
data-enable-settings='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enablesettingsfacetstate" class="tsd-anchor"></a>
<h3>enable<wbr>Settings<wbr>Facet<wbr>State</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Settings<wbr>Facet<wbr>State<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L243">ui/Facet/Facet.ts
:243</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablesettings"><code>enableSettings</code></a> option is <code>true</code>, specifies whether the
<strong>Save state</strong> menu option is available in the facet <strong>Settings</strong> menu.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablesettings"><code>enableSettings</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-settings-facet-state='true'
data-enable-settings-facet-state='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.enabletogglingoperator" class="tsd-anchor"></a>
<h3>enable<wbr>Toggling<wbr>Operator</h3>
<div class="tsd-signature tsd-kind-icon">enable<wbr>Toggling<wbr>Operator<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L350">ui/Facet/Facet.ts
:350</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to allow the user to toggle between the <code>OR</code> and <code>AND</code> modes in the facet.</p>
</div>
<p>Setting this option to <code>true</code> displays an icon in the top right corner of the facet. The user can click this icon
to toggle between between the two modes.</p>
<p>Default value is <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-enable-toggling-operator='true'
data-enable-toggling-operator='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.facetsearchdelay" class="tsd-anchor"></a>
<h3>facet<wbr>Search<wbr>Delay</h3>
<div class="tsd-signature tsd-kind-icon">facet<wbr>Search<wbr>Delay<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L380">ui/Facet/Facet.ts
:380</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablefacetsearch"><code>enableFacetSearch</code></a> option is <code>true</code>, specifies the delay (in
milliseconds) before sending a search request to the server when the user starts typing in the facet search box.</p>
</div>
<p>Specifying a smaller value makes results appear faster. However, chances of having to cancel many requests
sent to the server increase as the user keeps on typing new characters.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>100</code>. Minimum value is <code>0</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablefacetsearch"><code>enableFacetSearch</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Minimum</dt>
<dd><p><code>0</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>100</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-facet-search-delay='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.facetsearchignoreaccents" class="tsd-anchor"></a>
<h3>facet<wbr>Search<wbr>Ignore<wbr>Accents</h3>
<div class="tsd-signature tsd-kind-icon">facet<wbr>Search<wbr>Ignore<wbr>Accents<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L390">ui/Facet/Facet.ts
:390</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablefacetsearch"><code>enableFacetSearch</code></a> option is <code>true</code>, specifies whether to ignore
accents in the facet search box.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablefacetsearch"><code>enableFacetSearch</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-facet-search-ignore-accents='true'
data-facet-search-ignore-accents='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.field" class="tsd-anchor"></a>
<h3>field</h3>
<div class="tsd-signature tsd-kind-icon">field<span class="tsd-signature-symbol">:</span> <a href="../interfaces/ifieldoption.html" class="tsd-signature-type">IFieldOption</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L177">ui/Facet/Facet.ts
:177</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the index field whose values the facet should use.</p>
</div>
<p>The field must of the <code>string</code> type.</p>
<p>This requires the given field to be configured correctly in the index as a <em>Facet field</em> (see
<a href="https://docs.coveo.com/en/1982/">Add or Edit Fields</a>).</p>
<p>Specifying a value for this option is required for the <code>Facet</code> component to work.</p>
<dl class="tsd-comment-tags">
<dt>Required</dt>
<dd><p>Specifying a value for this option is required for the component to work</p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-field='@foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.id-1" class="tsd-anchor"></a>
<h3>id</h3>
<div class="tsd-signature tsd-kind-icon">id<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L192">ui/Facet/Facet.ts
:192</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies a unique identifier for the facet. Among other things, this identifier serves the purpose of saving
the facet state in the URL hash.</p>
</div>
<p>If you have two facets with the same field on the same page, you should specify an <code>id</code> value for at least one of
those two facets. This <code>id</code> must be unique among the facets.</p>
<p>Non-word characters except - @ $ _ . + ! <em> ' ( ) , , ( `^a-zA-Z0-9-@$_.+!</em>'(),,]+<code>) are automatically removed from the</code>id` value.</p>
<p>Default value is the <a href="facet.html#options.field"><code>field</code></a> option value.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-id='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.includeinbreadcrumb" class="tsd-anchor"></a>
<h3>include<wbr>InBreadcrumb</h3>
<div class="tsd-signature tsd-kind-icon">include<wbr>InBreadcrumb<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L419">ui/Facet/Facet.ts
:419</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether the facet should push data to the <a href="breadcrumb.html"><code>Breadcrumb</code></a> component.</p>
</div>
<p>See also the <a href="facet.html#options.numberofvaluesinbreadcrumb"><code>numberOfValuesInBreadcrumb</code></a> option.</p>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-include-in-breadcrumb='true'
data-include-in-breadcrumb='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.includeinomnibox" class="tsd-anchor"></a>
<h3>include<wbr>InOmnibox</h3>
<div class="tsd-signature tsd-kind-icon">include<wbr>InOmnibox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L441">ui/Facet/Facet.ts
:441</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether the Facet should push data to the <a href="omnibox.html">Omnibox</a> component.</p>
</div>
<p>See also <a href="facet.html#options.numberofvaluesinomnibox">Facet.options.numberOfValuesInOmnibox</a>.</p>
<p>Default value is <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>deprecated</dt>
<dd><p>This option is exposed for legacy reasons. It is not recommended to use this option.</p>
</dd>
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-include-in-omnibox='true'
data-include-in-omnibox='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.injectiondepth" class="tsd-anchor"></a>
<h3>injection<wbr>Depth</h3>
<div class="tsd-signature tsd-kind-icon">injection<wbr>Depth<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L326">ui/Facet/Facet.ts
:326</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the <em>injection depth</em> to use for the <a href="../interfaces/igroupbyrequest.html"><code>GroupByRequest</code></a> operation.</p>
</div>
<p>The injection depth determines how many results to scan in the index to ensure that the facet lists all potential
facet values. Increasing this value enhances the accuracy of the listed values at the cost of performance.</p>
<p>Default value is <code>1000</code>. Minimum value is <code>1000</code>.</p>
<dl class="tsd-comment-tags">
<dt>Not supported in</dt>
<dd><p>salesforcefree</p>
</dd>
<dt>Minimum</dt>
<dd><p><code>1000</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>1000</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-injection-depth='1500'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.ismultivaluefield" class="tsd-anchor"></a>
<h3>is<wbr>Multi<wbr>Value<wbr>Field</h3>
<div class="tsd-signature tsd-kind-icon">is<wbr>Multi<wbr>Value<wbr>Field<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L212">ui/Facet/Facet.ts
:212</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether the facet <a href="facet.html#options.field"><code>field</code></a> is configured in the index as a multi-value
field (semicolon separated values such as <code>abc;def;ghi</code>).</p>
</div>
<p>Default value is <code>false</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-is-multi-value-field='true'
data-is-multi-value-field='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.lookupfield" class="tsd-anchor"></a>
<h3>lookup<wbr>Field</h3>
<div class="tsd-signature tsd-kind-icon">lookup<wbr>Field<span class="tsd-signature-symbol">:</span> <a href="../interfaces/ifieldoption.html" class="tsd-signature-type">IFieldOption</a></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L218">ui/Facet/Facet.ts
:218</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the field whose values the Facet should display.</p>
</div>
<dl class="tsd-comment-tags">
<dt>deprecated</dt>
<dd><p>This option is exposed for legacy reasons. It is not recommended to use this option.</p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-lookup-field='@foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.numberofvalues" class="tsd-anchor"></a>
<h3>number<wbr>OfValues</h3>
<div class="tsd-signature tsd-kind-icon">number<wbr>OfValues<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L314">ui/Facet/Facet.ts
:314</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies the maximum number of field values to display by default in the facet before the user
clicks the arrow to show more.</p>
</div>
<p>See also the <a href="facet.html#options.enablemoreless"><code>enableMoreLess</code></a> option.</p>
<dl class="tsd-comment-tags">
<dt>Minimum</dt>
<dd><p><code>0</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>5</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-number-of-values='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.numberofvaluesinbreadcrumb" class="tsd-anchor"></a>
<h3>number<wbr>OfValues<wbr>InBreadcrumb</h3>
<div class="tsd-signature tsd-kind-icon">number<wbr>OfValues<wbr>InBreadcrumb<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L427">ui/Facet/Facet.ts
:427</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.includeinbreadcrumb"><code>includeInBreadcrumb</code></a> option is <code>true</code>, specifies the maximum
number of values that the facet should display in the <a href="breadcrumb.html"><code>Breadcrumb</code></a> before outputting a
<strong>more...</strong> button.</p>
</div>
<p>Default value is <code>5</code> on a desktop computer and <code>3</code> on a mobile device. Minimum value is <code>0</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.includeinbreadcrumb"><code>includeInBreadcrumb</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Minimum</dt>
<dd><p><code>0</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-number-of-values-in-breadcrumb='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.numberofvaluesinfacetsearch" class="tsd-anchor"></a>
<h3>number<wbr>OfValues<wbr>InFacet<wbr>Search</h3>
<div class="tsd-signature tsd-kind-icon">number<wbr>OfValues<wbr>InFacet<wbr>Search<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L400">ui/Facet/Facet.ts
:400</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablefacetsearch"><code>enableFacetSearch</code></a> option is <code>true</code>, specifies the number of v
alues to display in the facet search results popup.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>15</code>. Minimum value is <code>1</code>.</p>
<dl class="tsd-comment-tags">
<dt>Minimum</dt>
<dd><p><code>1</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>15</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-number-of-values-in-facet-search='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.numberofvaluesinomnibox" class="tsd-anchor"></a>
<h3>number<wbr>OfValues<wbr>InOmnibox</h3>
<div class="tsd-signature tsd-kind-icon">number<wbr>OfValues<wbr>InOmnibox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L453">ui/Facet/Facet.ts
:453</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>When <a href="facet.html#options.includeinomnibox">Facet.options.includeInOmnibox</a> is <code>true</code>, specifies the number of values to populate the
<a href="breadcrumb.html">Breadcrumb</a> with.</p>
</div>
<p>Default value is <code>5</code> on desktop computer and <code>3</code> on a mobile device. Minimum value is <code>0</code>.</p>
<dl class="tsd-comment-tags">
<dt>deprecated</dt>
<dd><p>This option is exposed for legacy reasons. It is not recommended to use this option.</p>
</dd>
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.includeinomnibox"><code>includeInOmnibox</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Minimum</dt>
<dd><p><code>0</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-number-of-values-in-omnibox='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.paddingcontainer" class="tsd-anchor"></a>
<h3>padding<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">padding<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L552">ui/Facet/Facet.ts
:552</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the parent container of the facets.</p>
</div>
<p>Used by the <a href="facet.html#options.preserveposition"><code>preservePosition</code></a> option.</p>
<p>Default value is <code>element.parentElement</code>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.pagesize" class="tsd-anchor"></a>
<h3>page<wbr>Size</h3>
<div class="tsd-signature tsd-kind-icon">page<wbr>Size<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L590">ui/Facet/Facet.ts
:590</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>If the <a href="facet.html#options.enablemoreless"><code>enableMoreLess</code></a> option is <code>true</code>, specifies the number of
additional results to fetch when clicking the <strong>More</strong> button.</p>
</div>
<p><strong>Note:</strong></p>
<blockquote>
<p>The <a href="facetrange.html"><code>FacetRange</code></a> component does not support this option.</p>
</blockquote>
<p>Default value is <code>10</code>. Minimum value is <code>1</code>.</p>
<dl class="tsd-comment-tags">
<dt>Only effective when</dt>
<dd><p><a href="facet.html#options.enablemoreless"><code>enableMoreLess</code></a> is <a href="https://developer.mozilla.org/en-US/docs/Glossary/Truthy">truthy</a></p>
</dd>
<dt>Minimum</dt>
<dd><p><code>1</code></p>
</dd>
<dt>Default</dt>
<dd><p><code>10</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-page-size='10'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.preserveposition" class="tsd-anchor"></a>
<h3>preserve<wbr>Position</h3>
<div class="tsd-signature tsd-kind-icon">preserve<wbr>Position<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L544">ui/Facet/Facet.ts
:544</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether the facet should remain stable in its current position in the viewport while the mouse cursor
is over it.</p>
</div>
<p>Whenever the value selection changes in a facet, the search interface automatically performs a query. This new
query might cause other elements in the page to resize themselves (typically, other facets above or below the
one the user is interacting with).</p>
<p>This option is responsible for adding the <code><div class='coveo-topSpace'></code> and
<code><div class='coveo-bottomSpace'></code> around the Facet container. The Facet adjusts the scroll amount of the page to
ensure that it does not move relatively to the mouse when the results are updated.</p>
<p>In some cases, the facet also adds margins to the <code>scrollContainer</code>, if scrolling alone is not enough to
preserve position.</p>
<p>See also the <a href="facet.html#options.paddingcontainer"><code>paddingContainer</code></a>, and
<a href="facet.html#options.scrollcontainer"><code>scrollContainer</code></a> options.</p>
<p>Default value is <code>true</code>.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>true</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-preserve-position='true'
data-preserve-position='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.scrollcontainer" class="tsd-anchor"></a>
<h3>scroll<wbr>Container</h3>
<div class="tsd-signature tsd-kind-icon">scroll<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLElement</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L569">ui/Facet/Facet.ts
:569</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the HTML element (through a CSS selector) whose scroll amount the facet should adjust to preserve its
position when results are updated.</p>
</div>
<p>Used by the <a href="facet.html#options.preserveposition"><code>preservePosition</code></a> option.</p>
<p>Default value is <code>document.body</code>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.sortcriteria" class="tsd-anchor"></a>
<h3>sort<wbr>Criteria</h3>
<div class="tsd-signature tsd-kind-icon">sort<wbr>Criteria<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"occurrences"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"score"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"alphaascending"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"alphadescending"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"computedfieldascending"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"computedfielddescending"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"chisquare"</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">"nosort"</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L289">ui/Facet/Facet.ts
:289</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the criteria to use to sort the facet values.</p>
</div>
<p>See <a href="../interfaces/igroupbyrequest.html#sortcriteria">IGroupByRequest.sortCriteria</a> for the list and description of possible values.</p>
<p>Default value is the first sort criteria specified in the <a href="facet.html#options.availablesorts"><code>availableSorts</code></a>
option, or <code>occurrences</code> if no sort criteria is specified.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.title" class="tsd-anchor"></a>
<h3>title</h3>
<div class="tsd-signature tsd-kind-icon">title<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L162">ui/Facet/Facet.ts
:162</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies the title to display at the top of the facet.</p>
</div>
<p>Default value is the localized string for <code>NoTitle</code>.</p>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-title='foo'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.useand" class="tsd-anchor"></a>
<h3>use<wbr>And</h3>
<div class="tsd-signature tsd-kind-icon">use<wbr>And<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L341">ui/Facet/Facet.ts
:341</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether to use the <code>AND</code> operator in the resulting filter when multiple values are selected in the
facet.</p>
</div>
<p>Setting this option to <code>true</code> means that items must have all of the selected values to match the resulting
query.</p>
<p>Default value is <code>false</code>, which means that the filter uses the <code>OR</code> operator. Thus, by default, items must
have at least one of the selected values to match the query.</p>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-use-and='true'
data-use-and='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.usewildcardsinfacetsearch" class="tsd-anchor"></a>
<h3>use<wbr>Wildcards<wbr>InFacet<wbr>Search</h3>
<div class="tsd-signature tsd-kind-icon">use<wbr>Wildcards<wbr>InFacet<wbr>Search<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L411">ui/Facet/Facet.ts
:411</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<dl class="tsd-deprecated">
</dl>
<div class="lead">
<p>Specifies whether [wildcards]{@link AllowedValuesPatternType.wildcards} are used as the <a href="../interfaces/igroupbyrequest.html#allowedvaluespatterntype">allowedValuesPatternType</a>
in the <a href="../interfaces/igroupbyrequest.html">groupBy</a> for the facet search.</p>
</div>
<p>Enabling this option returns results that end with the entered value. For example, searching for <code>veo</code> would match with <code>Coveo</code>.</p>
<p><strong>Note:</strong></p>
<blockquote>
<p>If you are experiencing slow facet search and/or timeouts when this option is set to <code>true</code>, consider enabling the <strong>Use cache for nested queries</strong>
option on your facet <a href="facet.html#options.field">field</a> in the Coveo Cloud Admninistration Console (see <a href="https://docs.coveo.com/en/1982/" class="external">Add or Edit Fields</a>).</p>
</blockquote>
<dl class="tsd-comment-tags">
<dt>Default</dt>
<dd><p><code>false</code></p>
</dd>
</dl>
</div>
<div class="tsd-panel">
<div class="tsd-signature-type">Markup configuration example(s) :</div>
<pre>data-use-wildcards-in-facet-search='true'
data-use-wildcards-in-facet-search='false'</pre>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-variable tsd-parent-kind-object-literal">
<a name="options.valuecaption" class="tsd-anchor"></a>
<h3>value<wbr>Caption</h3>
<div class="tsd-signature tsd-kind-icon">value<wbr>Caption<span class="tsd-signature-symbol">:</span> <a href="../interfaces/istringmap.html" class="tsd-signature-type">IStringMap</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span></div>
<aside class="tsd-sources">
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L717">ui/Facet/Facet.ts
:717</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Specifies a JSON object describing a mapping of facet values to their desired captions. See
<a href="https://docs.coveo.com/en/368/">Normalizing Facet Value Captions</a>.</p>
</div>
<p><strong>Examples:</strong></p>
<p>You can set the option in the <a href="../globals.html#init">'init'</a> call:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> myValueCaptions = {
<span class="hljs-string">"txt"</span> : <span class="hljs-string">"Text files"</span>,
<span class="hljs-string">"html"</span> : <span class="hljs-string">"Web page"</span>,
[ ... ]
};
Coveo.init(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#search"</span>), {
<span class="hljs-attr">Facet</span> : {
<span class="hljs-attr">valueCaption</span> : myValueCaptions
}
});
</code></pre>
<p>Or before the <code>init</code> call, using the <a href="facet.html#options">'options'</a> top-level function:</p>
<pre><code class="lang-javascript">Coveo.options(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">"#search"</span>), {
<span class="hljs-attr">Facet</span> : {
<span class="hljs-attr">valueCaption</span> : myValueCaptions
}
});
</code></pre>
<p>Or directly in the markup:</p>
<pre><code class="lang-html"><span class="hljs-comment"><!-- Ensure that the double quotes are properly handled in data-value-caption. --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'CoveoFacet'</span> <span class="hljs-attr">data-field</span>=<span class="hljs-string">'@myotherfield'</span> <span class="hljs-attr">data-value-caption</span>=<span class="hljs-string">'{"txt":"Text files","html":"Web page"}'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p><strong>Note:</strong></p>
<blockquote>
<p>Using value captions will disable alphabetical sorts (see the <a href="facet.html#options.availablesorts">availableSorts</a> option).</p>
</blockquote>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<a name="constructor" class="tsd-anchor"></a>
<h3>constructor</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-coveo-component tsd-is-overwrite">
<li class="tsd-signature tsd-kind-icon">new <wbr>Facet<span class="tsd-signature-symbol">(</span>element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span>, options<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">IFacetOptions</span>, bindings<span class="tsd-signature-symbol">?: </span><a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a>, facetClassId<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="facet.html" class="tsd-signature-type">Facet</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<p>Overwrites <a href="../classes/component.html">Component</a>.<a href="../classes/component.html#constructor">constructor</a></p>
<ul>
<li>Defined in
<a href="https://github.com/coveo/search-ui/tree/master/src/ui/Facet/Facet.ts#L765">ui/Facet/Facet.ts
:765</a></li>
</ul>
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Creates a new <code>Facet</code> component. Binds multiple query events as well.</p>
</div>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>element: <span class="tsd-signature-type">HTMLElement</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The HTMLElement on which to instantiate the component.</p>
</div>
</div>
</li>
<li>
<h5>options: <span class="tsd-signature-type">IFacetOptions</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The options for the <code>Facet</code> component.</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> bindings: <a href="../interfaces/icomponentbindings.html" class="tsd-signature-type">IComponentBindings</a></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The bindings that the component requires to function normally. If not set, these will be
automatically resolved (with a slower execution time).</p>
</div>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagDefault value">Default value</span> facetClassId: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = Facet.ID</span></h5>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>The ID to use for this facet (as <code>Facet</code> inherited from by other component
(e.g., <a href="facetrange.html"><code>FacetRange</code></a>). Default value is <code>Facet</code>.</p>
</div>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="facet.html" class="tsd-signature-type">Facet</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel">
<h3>Implements</h3>
<ul class="tsd-hierarchy">
<li><span class="tsd-signature-type">IFieldValueCompatibleFacet</span></li>
</ul>
</section>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer> </div>
</div>
</div>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/generateMetaData.js"></script>
</body>
</html>