[Home](./index.md) > [@empathyco/x-components](./x-components.md)
## x-components package
X-Components is a library usable everywhere not only for search experiences.
## Classes
Class implementation for the [QuerySuggestionsGetter.querySuggestions()](./x-components.querysuggestionsgetter.querysuggestions.md) getter.
[XInstaller](./x-components.xinstaller.md)
The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more.
This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md). 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project.
The steps 2 & 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md).
[XPlugin](./x-components.xplugin.md)
Vue plugin that initializes the properties needed by the x-components, and exposes the events bus and the adapter after it has been installed.
[XPriorityBus](./x-components.xprioritybus.md)
A default [XBus](./x-components.xbus.md) implementation using a [priority queue](./x-components.xpriorityqueue.md) as its data structure to prioritise the emission of events. The priorities are preconfigured based on event naming.
Reduce an array of objects to an object which properties names are the value of each object\[key\], and the value under that property are each object. 'key' is the the parameter passed to this function.
Default implementation for [IdentifierResultsActions.cancelFetchAndSaveIdentifierResults](./x-components.identifierresultsactions.cancelfetchandsaveidentifierresults.md) action.
Default implementation for [NextQueriesActions.cancelFetchAndSaveNextQueries](./x-components.nextqueriesactions.cancelfetchandsavenextqueries.md) action.
Default implementation for [PopularSearchesActions.cancelFetchAndSaveSuggestions](./x-components.popularsearchesactions.cancelfetchandsavesuggestions.md) action.
Default implementation for [QuerySuggestionsActions.cancelFetchAndSaveSuggestions](./x-components.querysuggestionsactions.cancelfetchandsavesuggestions.md) action.
Default implementation for [RecommendationsActions.cancelFetchAndSaveRecommendations](./x-components.recommendationsactions.cancelfetchandsaverecommendations.md) action.
Default implementation for [RelatedPromptsActions.cancelFetchAndSaveRelatedPrompts](./x-components.relatedpromptsactions.cancelfetchandsaverelatedprompts.md) action.
Utility to create an action that requests and save some data asynchronously, with the option to cancel the request at any moment. This factory provides with the standard flow for requesting, cancelling, handling errors for a module, while also taking care of its status.
Creates a debounced [Wire](./x-components.wire.md). Being debounced means that it will only be executed after the time given by `timeInMs` has passed without invoking it.
Util function that returns a debounced version of the function passed as parameter. It can use the leading strategy, trailing strategy or both. Using both would result in one leading execution guaranteed and trailing executions only if there are further calls during the length of the debounce time.
Filters an array with all elements that pass the test implemented by the given filter function. If an item has another list of items in the `childrenKey` property it recursively filters that new list, adding it to the returned one.
Default implementation for [IdentifierResultsActions.fetchAndSaveIdentifierResults](./x-components.identifierresultsactions.fetchandsaveidentifierresults.md) action.
Default implementation for [SearchActions.fetchAndSavePartialResultsEnrichment](./x-components.searchactions.fetchandsavepartialresultsenrichment.md) action.
Default implementation for [QuerySuggestionsActions.fetchAndSaveSuggestions](./x-components.querysuggestionsactions.fetchandsavesuggestions.md) action.
Default implementation for [RecommendationsActions.fetchAndSaveRecommendations](./x-components.recommendationsactions.fetchandsaverecommendations.md) action.
Default implementation for [RelatedPromptsActions.fetchAndSaveRelatedPrompts](./x-components.relatedpromptsactions.fetchandsaverelatedprompts.md) action.
Creates a [Wire](./x-components.wire.md) that is only executed if the event is emitted from a [XModule](./x-components.xmodule.md) that is NOT included in the `blacklist` array passed as parameter.
Creates a [Wire](./x-components.wire.md) that is only executed when the payload is truthy. A truthy value is whatever is not a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
Creates a [Wire](./x-components.wire.md) that is only executed when the payload is a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
Creates a [Wire](./x-components.wire.md) that is only executed if the event is emitted from a [XModule](./x-components.xmodule.md) that is included in the `whitelist` array passed as parameter.
Retrieves the currently active element from the specified document or shadow root. This function is recursive to handle nested shadow DOMs, ensuring the actual active element is returned even if it resides deep within multiple shadow DOM layers.
Returns the target element for a given event. The target element is obtained from `composedPath` Event method because if the event is triggered inside a Shadow DOM context, `event.target` points to Shadow DOM element, not the element that triggered the event. `composedPath` method also is available in a non-shadow DOM context.
Compares two queries to know if the new one is a refined query from the previous one or a new one.
A refined query is a query which has the previous query or part of it. Example: - previousQuery = 'lego star'. - newQuery = 'lego star wars'.
Example: - previousQuery = 'lego star wars'. - newQuery = 'lego star'.
A new query is a query which has not the previous query. Example: - previousQuery = 'lego star'. - newQuery = 'lego wars'.
In this case, it is changing the word set, because a word is changed by another one, so this is changing the search intention.
Creates a [Wire](./x-components.wire.md) from other `toWire` wire. It uses `mapFn` to transform the `FromPayload` received to `ToPayload` which `toWire` requires. This is useful to reuse wires in different Events where the payload doesn't fit exactly.
Type safe debounce operator which creates a function which can only access the Module of the [Vuex](https://vuex.vuejs.org/) Store passed as parameter.
Type safe throttle operator which creates a function which can only access the Module of the [Vuex](https://vuex.vuejs.org/) Store passed as parameter.
Trims the string, transforms it to lower case, and removes [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) from it.
Removes focus from the search input element if it is currently focused. This function checks if the active element in the document matches the selector '.x-search-input' and, if so, blurs the element to remove focus.
Creates a throttled [Wire](./x-components.wire.md). Being throttled means that it will only be executed once every couple of milliseconds given by the `timeInMs` parameter.
Composable which wraps the function passed as parameter into a debounced function and returns it. It also cancels the debounced function when component is unmounted.
Composable that triggers a callback whenever the provided element appears in the viewport. It can trigger the first time only or every time the element appears in the viewport.
Function which returns the requested state's properties as a dictionary.
[useXBus()](./x-components.usexbus.md)
Composable which injects the current location, returns the `on` and `emit` functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted.
Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated.
Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated.
Creates a wire that commits a mutation to the store, but without any payload. This wire can be used in every event, as it does not have a payload type associated.
Creates a wire that dispatch an action to the store. This wire receives a function. This function is used to get the actual payload value passed to action. This wire can be used in every event, as it does not have a payload type associated.
Creates a wire that dispatches an action to the store, but without any payload. This wire can be used in every event, as it does not have a payload type associated.
The type returned by the [debounce()](./x-components.debounce.md) function. Basically is the function the [debounce()](./x-components.debounce.md) receives but debounced and with a method `cancel()` to cancel pending timeouts.
Dictionary of the events of [DeviceXModule](./x-components.devicexmodule.md), where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of Empathize XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of [ExtraParamsXModule](./x-components.extraparamsxmodule.md), where each key is the event name, and the value is the event payload type or `void` if it has no payload.
An object containing a facet id and the group id it belongs to.
[FacetsActions](./x-components.facetsactions.md)
Facets store actions.
[FacetsConfig](./x-components.facetsconfig.md)
Configuration options for the [FacetsXModule](./x-components.facetsxmodule.md).
[FacetsGetters](./x-components.facetsgetters.md)
Facets store getters.
[FacetsGroup](./x-components.facetsgroup.md)
An object containing a list of facets, and the group they belong to.
The facet group is used to perform operations over a list of facets. For example, some APIs have dynamic facets. This means that depending on the selected filters, some facets can be returned. For example if you select `category:television`, a new facet called \*Screen size\* might appear. And, because now filters are stored in a dictionary instead of an array, and overridden with each request, when the user performs a new query, we have to remove all the `Screen size` filters because we don't know if the API will return them or not in the new query.
Dictionary of the events of HistoryQueries XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of IdentifierResults XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
[InitWrapper](./x-components.initwrapper.md)
Interface for the returned type of the [XInstaller.init()](./x-components.xinstaller.init.md) function.
Interface for the parameter of the constructor of [XInstaller](./x-components.xinstaller.md) function. It is an extended version of [XPluginOptions](./x-components.xpluginoptions.md).
An internal search response containing the [InternalSearchRequest](./x-components.internalsearchrequest.md) performed to get a [SearchResponse](./x-types.searchresponse.md) and its [RequestStatus](./x-components.requeststatus.md).
Namespaced type for the [wireCommit()](./x-components.wirecommit.md) which creates a wire with its payload associated. Possible ways for creating a wire that commits a mutation. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the mutation.
Namespaced type for the [wireDispatch()](./x-components.wiredispatch.md) which creates a wire with its payload associated. Possible ways for creating a wire that dispatches an action. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the action.
Dictionary of the events of NextQueries XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of PopularSearches XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of QuerySuggestions XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of Recommendations XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of RelatedPrompts XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of RelatedTags XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
Dictionary of the events of SearchBox XModule, where each key is the event name, and the value is the event payload type or `void` if it has no payload.
[SearchConfig](./x-components.searchconfig.md)
Configuration options for the [SearchXModule](./x-components.searchxmodule.md).
Dictionary of the events of [SemanticQueriesXModule](./x-components.semanticqueriesxmodule.md),where each key is the event name, and the value is the event payload type or `void` if it has no payload.
[SnippetConfig](./x-components.snippetconfig.md)
Interface with the possible parameters to receive through the snippet integration.
Interface for SpatialNavigation services based on [CSSWK specification](https://www.w3.org/TR/css-nav-1/).
[StateSelector](./x-components.stateselector.md)
Composition type of [SimpleStateSelector](./x-components.simplestateselector.md) which allows to indicate if the state selector should be executed in first instance (first assignment of values). Selector is the [SimpleStateSelector](./x-components.simplestateselector.md) and immediate flags if the selector should be executed when it is initialized for first time.
Represents an object including an eventPayload, which type is extracted using [EventPayload](./x-components.eventpayload.md), and a metadata which type is taken from the SomeEventMetadata parameter of this type.
The type returned by the [throttle()](./x-components.throttle.md) function. Basically is the function the [throttle()](./x-components.throttle.md) receives but throttled.
API for emitting and subscribing to events of the XBus.
[XEventsTypes](./x-components.xeventstypes.md)
. Dictionary of all the [XEvents](./x-components.xevent.md), where each key is the event name, and the value is the event payload type or `void` if it has no payload. All the events listed in this file are common to all X components modules, so they might be fired by components of any module.
[XInjectKey](./x-components.xinjectkey.md)
Type of the key passed to `provide` and `inject` to be type-safe. With this type you can declare the type of the injected value directly in the injection key.
[XModule](./x-components.xmodule.md)
A group of a wiring configuration, a store module, and side effects.
Represents the [queue node data](./x-components.xpriorityqueuenode.data.md) in the [priority queue](./x-components.xpriorityqueue.md) of a [XPriorityBus](./x-components.xprioritybus.md).
[XStoreModule](./x-components.xstoremodule.md)
Type safe [Vuex](https://vuex.vuejs.org/) store module.
Default implementation for the [AiGetters.suggestionsSearchRequest](./x-components.aigetters.suggestionssearchrequest.md) getter.
[aiXModule](./x-components.aixmodule.md)
AI [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `AI` entry point.
[AllFilter](./x-components.allfilter.md)
This component receives a required `facet` with [BooleanFilter](./x-types.booleanfilter.md) as prop and renders a button, which on clicked emits the [FacetsXEvents.UserClickedAllFilter](./x-components.facetsxevents.userclickedallfilter.md) event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot.
The auto progress bar component is useful for displaying a visual indicator of numerical data in a bar shape.
[Banner](./x-components.banner.md)
. A banner result is just an item that has been inserted into the search results to advertise something. Usually it is the first item in the grid or it can be placed in the middle of them and fill the whole row where appears. The banner may be clickable or non-clickable depending on whether it has an associated URL or not. It contains an image and, optionally, a title. In case the image does not load due to an error the banner will not be rendered.
Additionally, this component exposes the following props to modify the classes of the elements: `titleClass`.
[BannersList](./x-components.bannerslist.md)
It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md).
The component provides a default slot which wraps the whole component with the `banners` plus the `injectedListItems` which also contains the injected list items from the ancestor.
It also provides the parent slots to customize the items.
[BaseAddToCart](./x-components.baseaddtocart.md)
Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event.
Column picker dropdown component renders [BaseDropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.
It emits [XEventsTypes.UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input.
Column picker list component renders a list of buttons to choose the columns number.
Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.
[BaseCurrency](./x-components.basecurrency.md)
Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.
[BaseDropdown](./x-components.basedropdown.md)
Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents.
Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content.
Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents.
Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents.
[BaseGrid](./x-components.basegrid.md)
Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the `items` to render; and an optional one: the number `columns` the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit.
Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel.
[BaseIdModal](./x-components.baseidmodal.md)
Component containing a modal expecting a required prop, named `modalId`. It reacts to `UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content.
Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md). It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.
Component that allows to open a modal by emitting [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function.
Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named `panelId`, which are responsible of rendering default slot inside a configurable transition.
It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's 'panelId' prop, to handle its open/close state.
The default slot offers the possibility to customise the modal content.
Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.
It has a default slot to customize its contents.
This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop.
[BaseScroll](./x-components.basescroll.md)
Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
[BaseSlider](./x-components.baseslider.md)
This component implements a range slider and prints the selected values. It receives a threshold prop to set the limits and uses v-model to get and set the selected values.
It makes use of the nouslider library
Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvent](./x-components.xevent.md) that will be emitted on click with a given feature.
The default slot receives the suggestion and the matched query has props.
Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working.
[BaseSwitch](./x-components.baseswitch.md)
Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it.
The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available `scopedSlots`.
Cancels the [IdentifierResultsActions.fetchAndSaveIdentifierResults](./x-components.identifierresultsactions.fetchandsaveidentifierresults.md) request promise.
A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries.
This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property.
[deviceXModule](./x-components.devicexmodule.md)
Device [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `device` entry point.
Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.
It provides a default slot, with some utils bind, to customize the whole component; and two named slots `apply-content` and `clear-content` to override each button content.
If `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.
If `clear` prop is true, clear button, which sets to null component min and max values, is rendered. True by default.
[Empathize](./x-components.empathize.md)
Component containing the empathize. It has a required slot to define its content.
Empathize [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `empathize` entry point.
The `ExcludeFiltersWithNoResults` component filters the provided list of filters, excluding those which have the `totalResults` property exactly equal to `0`. It won't remove filters with no `totalResults` property.
The new list of filters is bound to the default scoped slot. As this component does not render no root element, this default slot must contain a single root node.
Default implementation for the [ExperienceControlsGetters.experienceControlsRequest](./x-components.experiencecontrolsgetters.experiencecontrolsrequest.md) getter.
Search [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `x-controls` entry point.
[ExtraParams](./x-components.extraparams.md)
It emits a [ExtraParamsXEvents.ExtraParamsProvided](./x-components.extraparamsxevents.extraparamsprovided.md) with the values received as a prop.
ExtraParams [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `extraParams` entry point.
[facets](./x-components.facets.md)
Default implementation for the [FacetsGetters.facets](./x-components.facetsgetters.facets.md) getter.
[Facets](./x-components.facets.md)
This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs.
This component allows to provide facets by prop, to add them to the state of the `Facets X-Module`. These facets will be added to the `Facets X-Module` state together with the facets emitted by the `Search X-Module` through the [SearchXEvents.FacetsChanged](./x-components.searchxevents.facetschanged.md) event.
[facetsXModule](./x-components.facetsxmodule.md)
Facets [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `facets` entry point.
[Fade](./x-components.fade.md)
Renders a transition wrapping the element passed in the default slot. The animation just fades in/out the element by changing its opacity.
[FadeAndSlide](./x-components.fadeandslide.md)
Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation.
Default implementation for the [ExperienceControlsActions.fetchExperienceControlsResponse](./x-components.experiencecontrolsactions.fetchexperiencecontrolsresponse.md).
Default implementation for the [SemanticQueriesActions.fetchSemanticQuery](./x-components.semanticqueriesactions.fetchsemanticquery.md).
[FiltersList](./x-components.filterslist.md)
Renders a list with a list item per each [BooleanFilter](./x-types.booleanfilter.md) in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop.
Renders a hierarchical filter recursively, emitting the needed events when clicked.
[Highlight\_2](./x-components.highlight_2.md)
Highlights the given part of the text. The component is smart enough to do matches between special characters like tilde, cedilla, eñe, capital letters...
This component renders a list of suggestions coming from the user queries history. Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past.
HistoryQueries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `history-queries` entry point.
[HistoryQuery](./x-components.historyquery.md)
This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries.
Default implementation for the [IdentifierResultsGetters.identifierDetectionRegexp](./x-components.identifierresultsgetters.identifierdetectionregexp.md) getter.
Default implementation for the [IdentifierResultsGetters.identifierHighlightRegexp](./x-components.identifierresultsgetters.identifierhighlightregexp.md) getter.
This component renders an identifier result value and highlights its matching part with the query from the state. Receives as prop the [Result](./x-types.result.md) data.
Paints the list of identifier results stored in the state. Each identifier result should be represented by a [IdentifierResult](./x-components.identifierresult.md) component besides any other component.
Default implementation for the [IdentifierResultsGetters.identifierResultsRequest](./x-components.identifierresultsgetters.identifierresultsrequest.md) getter.
IdentifierResults [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `identifier-results` entry point.
Custom Vue directive for infinite scroll.
This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.
How it works.
As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the xBus. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.
Usage.
The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: `html`: will set the as the scrollable container. `body`: will set the as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.
If no argument is provided the scrollable container fallbacks to the viewport.
[ItemsList](./x-components.itemslist.md)
It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each `slotName` which depends on the `modelName`of the item.
Default implementation for the [HistoryQueriesActions.loadHistoryQueriesFromBrowserStorage](./x-components.historyqueriesactions.loadhistoryqueriesfrombrowserstorage.md) action.
Loads the history queries from the browser storage, saving them to the [HistoryQueriesState.historyQueries](./x-components.historyqueriesstate.historyqueries.md).
Location Provider component. This component injects the location with value passed as prop.
[MainModal](./x-components.mainmodal.md)
A specialised version of a modal component, made to contain a full search application.
[MainScroll](./x-components.mainscroll.md)
Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.
Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component.
Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position.
[Message](./x-components.message.md)
Message component displays a message with optional animation and customizable CSS classes.
[MyHistory](./x-components.myhistory.md)
The component renders the full history of user searched queries grouped by the day they were performed.
[nextQueries](./x-components.nextqueries.md)
Default implementation for the [NextQueriesGetters.nextQueries](./x-components.nextqueriesgetters.nextqueries.md) getter.
[NextQueries](./x-components.nextqueries.md)
Simple next-queries component that renders a list of \[`BaseSuggestions`\](./x-components.base-suggestions.md), allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.
Next queries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `next-queries` entry point.
[NextQuery](./x-components.nextquery.md)
Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default.
Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results.
[NoAnimation](./x-components.noanimation.md)
Component to be used as `default` for animation props together with dynamic components `` in the template.
Component that renders a text with the number of rendered results and the remaining ones and a `` with the logic of emitting the event "UserReachedResultsListEnd" to load more results on click.
[PageSelector](./x-components.pageselector.md)
Component that renders a pagination control with buttons for navigating between pages. It displays the current page, allows selecting other pages, and emits events when a page is selected.
A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [SearchXEvents.UserClickedPartialQuery](./x-components.searchxevents.userclickedpartialquery.md) events, expressing the user intention to set the partial query.
It renders a list of partial results from [SearchState.partialResults](./x-components.searchstate.partialresults.md) by default. It also provides the partial result slot to customize the item with the partial result bound.
[PopularSearch](./x-components.popularsearch.md)
Renders a popular search item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the popular search content. If the slot is not overridden, it will render the suggestion query by default.
Simple popular-searches component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A popular search is just a query that has been searched a lot in a certain period and may optionally have associated a set of filters.
Popular searches [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `popular-searches` entry point.
This component emits [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when a preselected filter is set in the snippet config or by using the prop of the component.
[Promoted](./x-components.promoted.md)
A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title.
Additionally, this component exposes the following props to modify the classes of the elements: `titleClass`.
[PromotedsList](./x-components.promotedslist.md)
It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md).
The component provides a default slot which wraps the whole component with the `promoteds` plus the `injectedListItems` which also contains the injected list items from the ancestor.
It also provides the parent slots to customize the items.
QueriesPreview [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `queries-preview` entry point.
[query](./x-components.query.md)
Default implementation for the next-queries query getter.
[QueryPreview](./x-components.querypreview.md)
Retrieves a preview of the results of a query and exposes them in the default slot, along with the query preview and the totalResults of the search request. By default, it renders the names of the results.
Component containing an event button that emits [QueriesPreviewXEvents.UserAcceptedAQueryPreview](./x-components.queriespreviewxevents.useracceptedaquerypreview.md) when clicked with the full query preview info as payload.
It has a default slot to customize its contents.
Renders the results previews of a list of objects with the information about the query preview, and exposes the [QueryPreview](./x-components.querypreview.md) slots to modify the content. The requests are made in sequential order.
This component renders a suggestion for a query. A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for \_shirt\_, a query suggestion could be \_long sleeve shirt\_.
This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of \[`QuerySuggestion`\](./x-components.query-suggestion.md) components.
QuerySuggestions [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `query-suggestions` entry point.
It renders a list of recommendations from the [RecommendationsState.recommendations](./x-components.recommendationsstate.recommendations.md) state by default. The component provides the slot layout which wraps the whole component with the recommendations bounded. It also provides the default slot to customize the item, which is within the layout slot, with the recommendation bounded. Each recommendation should be represented by a [BaseResultLink](./x-components.baseresultlink.md) component besides any other component.
Recommendations [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `recommendations` entry point.
[Redirection](./x-components.redirection.md)
A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like `help`, `shipping costs`, `my account`, where a link to a section in the website will be more helpful than the set of results returned.
Triggers a session refresh, extending its validity for the time configured in the [HistoryQueriesConfig.sessionTTLInMs](./x-components.historyqueriesconfig.sessionttlinms.md).
This component shows the list of `RelatedPrompts` components.
If the default slot is reimplemented in the consumer, `onSelect` function will be necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
Related Prompts [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `related-prompts` entry point.
[RelatedTag](./x-components.relatedtag.md)
This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for \*lego\*, a related tag could be \*city\*, refining the search with \*lego city\*.
[relatedTags](./x-components.relatedtags.md)
Default implementation for the [RelatedTagsGetters.relatedTags](./x-components.relatedtagsgetters.relatedtags.md) getter.
[RelatedTags](./x-components.relatedtags.md)
This component renders a set of \[`RelatedTag`\](./x-components.related-tag) components by default to select from after a query is performed to fine-tune search. For example, if you are searching for \*lego\*, different related tags could be \*city\*, friends\*, or \*harry potter\*, refining the search with \*lego city\*, \*lego friends\*, or \*lego harry potter\*.
RelatedTags [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `related-tags` entry point.
Button that when it is pressed emits the [HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md) event, expressing the user intention to remove a query in the history.
Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md), the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the CSS classes and if the content should be deactivated.
Resets the [SearchGetters.request](./x-components.searchgetters.request.md) parameters when refining request and before the actual request is launched.
Resets the search state when the request is changed to null. See the [SearchXStoreModule](./x-components.searchxstoremodule.md) for details.
[ResultsList](./x-components.resultslist.md)
It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.
The component provides a default slot which wraps the whole component with the `results` bound.
It also provides the slot result to customize the item, which is within the default slot, with the result bound.
Component that exposes the result merged with its selected variant in the default slot.
It receives the original result and keeps track of the selected variant.
It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.
[saveAiOrigin](./x-components.saveaiorigin.md)
Default implementation for the [AiActions.saveOrigin](./x-components.aiactions.saveorigin.md).
Default implementation for the [SearchActions.saveSearchResponse](./x-components.searchactions.savesearchresponse.md).
[Scroll](./x-components.scroll.md)
Scrollable container that emits scroll related X Events. It exposes all the listeners and props from the [BaseScroll](./x-components.basescroll.md) component.
[ScrollToTop](./x-components.scrolltotop.md)
The `ScrollToTop` component is a button that the user can click to make a container scroll up to its initial position.
[scrollXModule](./x-components.scrollxmodule.md)
Scroll [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `empathize` entry point.
SearchBox [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `search-box` entry point.
[SearchButton](./x-components.searchbutton.md)
This component renders a button to submit the query.
[SearchInput](./x-components.searchinput.md)
This component renders an input field that allows the user to type a query. It also reacts to query changes through event listening.
. This component renders an animated placeholder for the search input in the shape of a list of iterating messages that can be configured to happen always or only when hovering the input
[searchQuery](./x-components.searchquery.md)
Default implementation for the search query getter.
[searchRequest](./x-components.searchrequest.md)
Default implementation for the [SearchGetters.request](./x-components.searchgetters.request.md) getter.
[searchXModule](./x-components.searchxmodule.md)
Search [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `search` entry point.
Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.
The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected.
This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).
It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.
The property "alwaysVisible" handles if the component is rendered if no filters are selected.
SemanticQueries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `semantic-queries`entry point.
[SemanticQuery](./x-components.semanticquery.md)
This component renders a semantic query. A semantic query is a recommended query that is similar in its meaning to another one. It contains the query and the distance, which indicates how similar the query is compared to the searched query.
Sets the filters of the url module from a selectedQueryPreview's filters.
[setUrlSort](./x-components.seturlsort.md)
Sets the sort of the url module.
[SimpleFilter](./x-components.simplefilter.md)
Renders a simple filter, emitting the needed events when clicked.
[SlicedFilters](./x-components.slicedfilters.md)
Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons.
[SlidingPanel](./x-components.slidingpanel.md)
This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.
Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.
The `SortPickerList` component allows user to select the search results order. This component also allows to change the selected sort programmatically.
[Spellcheck](./x-components.spellcheck.md)
The `Spellcheck` component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the `query` scope property, and the spellchecked query proposal, using the `spellcheckedQuery` scope property.
The component will only render itself if the `spellcheckedQuery` property has value.
A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query.
Renders a transition group wrapping the elements passed in the default slot and animating them with a staggered fade and slide animation.
[storageKey](./x-components.storagekey.md)
Default implementation for the [HistoryQueriesGetters.storageKey](./x-components.historyqueriesgetters.storagekey.md) getter.
[Tagging](./x-components.tagging.md)
This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows you to activate or deactivate the session id management through the `consent` prop.
Tagging [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `empathize` entry point.
Performs a track of a query with no results that used related prompts or semantic queries as fallback. The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.
Performs a track of a query with no results that used semantic queries as fallback. The totalHits will be changed to -1 if semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any semantic queries.
Updates the history queries with the relevant info included in a search response.
[UrlHandler](./x-components.urlhandler.md)
This component manages the browser URL parameters to preserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM.
[urlXModule](./x-components.urlxmodule.md)
URL [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the `url` entry point.
[useGetter](./x-components.usegetter.md)
Function which returns the requested getter's properties as a dictionary.
[xPlugin](./x-components.xplugin.md)
Vue plugin that modifies each component instance, extending them with the [X Component API](./x-components.xcomponentapi.md).
The HTML document direction orientation. Possible values: ltr (left to right) or rtl (right to left).
[Emitter](./x-components.emitter.md)
Alias representing a [Subject](https://rxjs.dev/api/index/class/Subject) parametrized with the [SubjectPayload](./x-components.subjectpayload.md) of an event.
[Emitters](./x-components.emitters.md)
Represents a dictionary where the key is an event name and its value is an [Emitter](./x-components.emitter.md).
Type representing a grid item. It has to be an [Identifiable](./x-types.identifiable.md) object that can optionally contain a [modelName](./x-types.namedmodel.modelname.md).
Function type which receives the State and the Getters of the namespace [XStoreModule](./x-components.xstoremodule.md) to retrieve the time from there.
Function type which receives the wire to modify and the [NamespacedTimeSelector](./x-components.namespacedtimeselector.md) to retrieve the time from the [XStoreModule](./x-components.xstoremodule.md).
Namespaced payload to commit a mutation. Either a function that receives the [module state and getters](./x-components.storemodulestateandgetters.md) and returns the payload for the mutation, or a static action payload.
Namespaced payload to dispatch an action. Either a function that receives the [module state and getters](./x-components.storemodulestateandgetters.md) and returns the payload for the action, or a static action payload.
Information to track the usefulness of the query in relation to the [QueryFeature](./x-components.queryfeature.md) that generated it, and the [FeatureLocation](./x-components.featurelocation.md) where it has been shown to the user.
The possible status of a request: - Success: The request has resolved successfully. - Loading: The request is in process, waiting for a response. - Error: The request has failed.
[ResultFeature](./x-components.resultfeature.md)
The name of the tool that generated the results.
[ResultOrigin](./x-components.resultorigin.md)
Information to track the usefulness of a result in relation to the [ResultFeature](./x-components.resultfeature.md) that generated it, and the [FeatureLocation](./x-components.featurelocation.md) where it has been shown to the user.
[Returns](./x-components.returns.md)
Extracts the return type of each property of the T object.
Selects a part of the store state or getters (AKA "getter" inside [Vuex](https://vuex.vuejs.org/) watchers).
[StoreEmitters](./x-components.storeemitters.md)
Dictionary where the key is a [XEvent](./x-components.xevent.md), and the value is [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md). This [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md) can only access the state and getters from the [XStoreModule](./x-components.xstoremodule.md) passed as param type. This dictionary is used to emits a [XEvent](./x-components.xevent.md) when the part of the store selected by [SimpleStateSelector](./x-components.simplestateselector.md) changes.
[SubObject](./x-components.subobject.md)
Extracts a sub-type with the properties of `SomeObject` that have the `TargetPropertyType` type.