@empathyco/x-components

[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 | Description | | --- | --- | | [AddQueryToHistoryAction](./x-components.addquerytohistoryaction.md) | Class implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md) action. | | [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md). | | [DefaultExternalTaggingService](./x-components.defaultexternaltaggingservice.md) | Default implementation for the [ExternalTaggingService](./x-components.externaltaggingservice.md). | | [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md). | | [DirectionalFocusNavigationService](./x-components.directionalfocusnavigationservice.md) | Implementation of [SpatialNavigation](./x-components.spatialnavigation.md) using directional focus. | | [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. | | [QuerySuggestionsGetter](./x-components.querysuggestionsgetter.md) | 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. | ## Functions | Function | Description | | --- | --- | | [areFiltersDifferent(someFilters, anotherFilters)](./x-components.arefiltersdifferent.md) | Compares if two lists contains the same filters. | | [arrayToObject(array)](./x-components.arraytoobject.md) | Reduce an array of strings to an object which properties names are the value of each string, and the value under that property are also the string. | | [arrayToObject(array, key)](./x-components.arraytoobject_1.md) | 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. | | [assertXPluginOptionsAreValid(options)](./x-components.assertxpluginoptionsarevalid.md) | Asserts that the passed options object is valid, providing helpful error messages. | | [capitalize(str)](./x-components.capitalize.md) | Util to capitalize a string . | | [clone(something)](./x-components.clone.md) | Deeply clones an object or an array. | | [createFetchAndSaveActions({ fetch, onSuccess, onError, onCancel })](./x-components.createfetchandsaveactions.md) | 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. | | [createRawFilters(filterIds)](./x-components.createrawfilters.md) | Helper method which creates the filter entity from the filter ir of the url. | | [createRelatedTagsQueryGetter({ getRelatedTags })](./x-components.createrelatedtagsquerygetter.md) | Creates a getter that combines the current selected related tags and the query of the module. | | [createSetQueryTaggingFromQueryPreview()](./x-components.createsetquerytaggingfromquerypreview.md) | Factory helper to create a wire to set the queryTagging. | | [createStoreEmitters(storeModule, emitters)](./x-components.createstoreemitters.md) | Helper function for creating type-safe [StoreEmitters](./x-components.storeemitters.md). | | [createTrackDisplayWire(property)](./x-components.createtrackdisplaywire.md) | Factory helper to create a wire for the track of the display click. | | [createTrackRelatedPromptToolingDisplayClickWire()](./x-components.createtrackrelatedprompttoolingdisplayclickwire.md) | Factory helper to create a wire for the track of the tooling display click in a related prompt. | | [createTrackToolingAdd2CartWire()](./x-components.createtracktoolingadd2cartwire.md) | Factory helper to create a wire for the track of the tooling display add to cart. | | [createTrackToolingDisplayWire()](./x-components.createtracktoolingdisplaywire.md) | Factory helper to create a wire for the track of the tooling display click. | | [createTrackWire(property)](./x-components.createtrackwire.md) | Factory helper to create a wire for the track of a taggable element. | | [createUseDevice(devices)](./x-components.createusedevice.md) | Factory function that creates a composable for device detection using the devices parameter to configure breakpoints. | | [createWireFromFunction(fn)](./x-components.createwirefromfunction.md) | Creates a wire that executes the function passed. This function will receive a [WireParams](./x-components.wireparams.md) object. | | [createWiring(wiring)](./x-components.createwiring.md) | Util function to generate type-safe wiring. If TypeScript ever accepts the PR about generic type inference this function can be removed. | | [currencyFormatter(value, format)](./x-components.currencyformatter.md) | Format a value with a given format. | | [debounce(wire, timeInMs, options)](./x-components.debounce.md) | Creates a debounced [Wire](./x-components.wire.md). Being debounced means that it will only be executed after the time given by <code>timeInMs</code> has passed without invoking it. | | [deepFilter(array, condition, childrenKey)](./x-components.deepfilter.md) | 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 <code>childrenKey</code> property it recursively filters that new list, adding it to the returned one. | | [deepFlat(array, childrenKey)](./x-components.deepflat.md) | Flat an <code>Item[]</code> deeply using the given <code>childrenKey</code> to access to his children. | | [filter(wire, filterFn)](./x-components.filter.md) | Creates a [Wire](./x-components.wire.md) that is only executed whenever the condition in the filterFn is true. | | [filterBlacklistedModules(wire, blacklist)](./x-components.filterblacklistedmodules.md) | 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 <code>blacklist</code> array passed as parameter. | | [filterFalsyPayload(wire)](./x-components.filterfalsypayload.md) | 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). | | [filterTruthyPayload(wire)](./x-components.filtertruthypayload.md) | 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). | | [filterWhitelistedModules(wire, whitelist)](./x-components.filterwhitelistedmodules.md) | 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 <code>whitelist</code> array passed as parameter. | | [flatHierarchicalFilters(hierarchicalFilters)](./x-components.flathierarchicalfilters.md) | This function flattens the Hierarchical Filters, returning an array with all filters including the children. | | [getActiveElement(root)](./x-components.getactiveelement.md) | 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. | | [getGetterPath(moduleName, getterName)](./x-components.getgetterpath.md) | Generates a getter path string with the module and getter name. | | [getRootXComponent(component)](./x-components.getrootxcomponent.md) | Given a component, finds the root XComponent in the ancestors hierarchy. | | [getStateAndGettersFromModule(state, getters, moduleName)](./x-components.getstateandgettersfrommodule.md) | Returns an object with the getters and state of a module of store defined by the moduleName parameter. | | [getTargetElement(event)](./x-components.gettargetelement.md) | Returns the target element for a given event. The target element is obtained from <code>composedPath</code> Event method because if the event is triggered inside a Shadow DOM context, <code>event.target</code> points to Shadow DOM element, not the element that triggered the event. <code>composedPath</code> method also is available in a non-shadow DOM context. | | [groupItemsBy(array, groupBy)](./x-components.groupitemsby.md) | Groups the array items based on the provided <code>groupBy</code> function. | | [isArrayEmpty(array)](./x-components.isarrayempty.md) | Returns if the given array is <code>null</code>, <code>undefined</code>, or has no elements. | | [isElementEqualOrContained(a, b)](./x-components.iselementequalorcontained.md) | Returns true if the two elements are the same, or if <code>b</code> is a child of <code>a</code>. | | [isInRange(number, \[min, max\])](./x-components.isinrange.md) | Returns true if the number is greater than or equal than the min, and less than or equal than the max. | | [isNewQuery(newQuery, previousQuery)](./x-components.isnewquery.md) | 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. | | [isStringEmpty(str)](./x-components.isstringempty.md) | Util used to return true if the string is empty, undefined or null. | | [isXComponent(component)](./x-components.isxcomponent.md) | Returns if the component is an X-Component. An X-Component is a component that has an [XModule](./x-components.xmodule.md) associated to it. | | [mapWire(toWire, mapFn)](./x-components.mapwire.md) | Creates a [Wire](./x-components.wire.md) from other <code>toWire</code> wire. It uses <code>mapFn</code> to transform the <code>FromPayload</code> received to <code>ToPayload</code> which <code>toWire</code> requires. This is useful to reuse wires in different Events where the payload doesn't fit exactly. | | [mergeConfig(state, config)](./x-components.mergeconfig.md) | Merges a new config with the current one. Can be used as a mutation. | | [namespacedDebounce(moduleName)](./x-components.namespaceddebounce.md) | 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. | | [namespacedThrottle(moduleName)](./x-components.namespacedthrottle.md) | 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. | | [namespacedWireCommit(moduleName)](./x-components.namespacedwirecommit.md) | Creates a namespaced [wireCommit()](./x-components.wirecommit.md) for the module name passed. | | [namespacedWireCommitWithoutPayload(moduleName)](./x-components.namespacedwirecommitwithoutpayload.md) | Creates a namespaced [wireCommitWithoutPayload()](./x-components.wirecommitwithoutpayload.md) for the module name passed. | | [namespacedWireDispatch(moduleName)](./x-components.namespacedwiredispatch.md) | Creates a namespaced [wireDispatch()](./x-components.wiredispatch.md) for the module name passed. | | [namespacedWireDispatchWithoutPayload(moduleName)](./x-components.namespacedwiredispatchwithoutpayload.md) | Creates a namespaced [wireDispatchWithoutPayload()](./x-components.wiredispatchwithoutpayload.md) for the module name passed. | | [normalizeString(string)](./x-components.normalizestring.md) | Trims the string, transforms it to lower case, and removes [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) from it. | | [setConfig(state, config)](./x-components.setconfig.md) | Sets the request config. Can be used as a mutation. | | [setQuery(state, query)](./x-components.setquery.md) | Sets the query of the module. | | [setStatus(state, status)](./x-components.setstatus.md) | Sets the request status. Can be used as a mutation. | | [setupDevtools(app)](./x-components.setupdevtools.md) | **_(BETA)_** Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled. | | [throttle(wire, timeInMs, options)](./x-components.throttle.md) | 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 <code>timeInMs</code> parameter. | | [toKebabCase(str)](./x-components.tokebabcase.md) | Util to transform string a into kebab case. | | [use$x()](./x-components.use_x.md) | Function which returns the <code>$x</code> object from the current component instance. | | [useCollapseAnimation(property)](./x-components.usecollapseanimation.md) | Returns parametrized methods to use in a component to allow the collapsing of the provided property. | | [useDebounce(fn, debounceTimeInMs, debounceOptions)](./x-components.usedebounce.md) | 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. | | [useDisableAnimation(animationName)](./x-components.usedisableanimation.md) | Composable to ease disabling animations. | | [useEmitDisplayEvent({ element, taggingRequest, eventMetadata })](./x-components.useemitdisplayevent.md) | Composable that emits a <code>TrackableElementDisplayed</code> event whenever the provided element appears in the viewport for the first time. | | [useFacets(props)](./x-components.usefacets.md) | Composable to share Facets logic. | | [useFiltersInjection(props)](./x-components.usefiltersinjection.md) | Composable to share filters injection logic. | | [useGetter(module, getters)](./x-components.usegetter.md) | Function which returns the requested getters as a dictionary of getters. | | [useOnDisplay({ element, callback, triggerOnce })](./x-components.useondisplay.md) | 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. | | [useScroll(props, { emit }, scrollEl)](./x-components.usescroll.md) | Composable to share Scroll logic. | | [useState(module, paths)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. | | [useXBus()](./x-components.usexbus.md) | Composable which injects the current location, returns the <code>on</code> and <code>emit</code> functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted. | | [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | 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. | | [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | 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. | | [wireCommit(mutation)](./x-components.wirecommit_2.md) | Creates a wire that commits a mutation to the store. This wire will commit to the store the payload that it receives in the observable. | | [wireCommitWithoutPayload(mutation)](./x-components.wirecommitwithoutpayload.md) | 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. | | [wireDispatch(action, payloadFactory)](./x-components.wiredispatch.md) | 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. | | [wireDispatch(action, staticPayload)](./x-components.wiredispatch_1.md) | Creates a wire that dispatches an action to the store. This wire can be used in every event, as it does not have a payload type associated. | | [wireDispatch(action)](./x-components.wiredispatch_2.md) | Creates a wire that dispatches an action to the store. This wire will pass the payload received in the observable to the action. | | [wireDispatchWithoutPayload(action)](./x-components.wiredispatchwithoutpayload.md) | 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. | | [wireService(service)](./x-components.wireservice.md) | Creates a wires factory that can create wires that will invoke the service methods. | | [wireServiceWithoutPayload(service)](./x-components.wireservicewithoutpayload.md) | Creates a wires factory that can create wires that will invoke the service methods but without payload. | ## Interfaces | Interface | Description | | --- | --- | | [ConfigMutations](./x-components.configmutations.md) | Config mutations, containing a method to change the current config and other to merge a new one. | | [CreateRelatedTagsQueryGetterOptions](./x-components.createrelatedtagsquerygetteroptions.md) | Options to create a getter that combines the query with the selected related tags. | | [DebouncedFunction](./x-components.debouncedfunction.md) | 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 <code>cancel()</code> to cancel pending timeouts. | | [DebounceOptions](./x-components.debounceoptions.md) | Debounce options for the strategies that the debounce would use. | | [DeviceActions](./x-components.deviceactions.md) | Device store actions. | | [DeviceGetters](./x-components.devicegetters.md) | Device store getters. | | [DeviceMutations](./x-components.devicemutations.md) | Device store mutations. | | [DeviceState](./x-components.devicestate.md) | Device store state. | | [DeviceXEvents](./x-components.devicexevents.md) | 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 <code>void</code> if it has no payload. | | [DisplayWireMetadata](./x-components.displaywiremetadata.md) | Wire metadata specific for display wires. | | [EmpathizeActions](./x-components.empathizeactions.md) | Empathize store actions. | | [EmpathizeConfig](./x-components.empathizeconfig.md) | Configuration options for the [EmpathizeXModule](./x-components.empathizexmodule.md). | | [EmpathizeGetters](./x-components.empathizegetters.md) | Empathize store getters. | | [EmpathizeMutations](./x-components.empathizemutations.md) | Empathize store mutations. | | [EmpathizeState](./x-components.empathizestate.md) | Empathize store state. | | [EmpathizeXEvents](./x-components.empathizexevents.md) | Dictionary of the events of Empathize XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [ExperienceControlsActions](./x-components.experiencecontrolsactions.md) | Experience Controls store actions. | | [ExperienceControlsGetters](./x-components.experiencecontrolsgetters.md) | Experience Controls store getters. | | [ExperienceControlsMutations](./x-components.experiencecontrolsmutations.md) | Experience Controls store mutations. | | [ExperienceControlsState](./x-components.experiencecontrolsstate.md) | Experience Controls store state. | | [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md) | Dictionary of the events of Experience Controls XModule. | | [ExternalTaggingService](./x-components.externaltaggingservice.md) | Service to handle the workflow for tracking add to cart from PDP. | | [ExtraParamsActions](./x-components.extraparamsactions.md) | ExtraParams store actions. | | [ExtraParamsGetters](./x-components.extraparamsgetters.md) | ExtraParams store getters. | | [ExtraParamsMutations](./x-components.extraparamsmutations.md) | ExtraParams store mutations. | | [ExtraParamsState](./x-components.extraparamsstate.md) | ExtraParams store state. | | [ExtraParamsXEvents](./x-components.extraparamsxevents.md) | 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 <code>void</code> if it has no payload. | | [ExtraPluginsOptions](./x-components.extrapluginsoptions.md) | Options to install more Vue plugins with. | | [FacetGroupEntry](./x-components.facetgroupentry.md) | 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 <code>category:television</code>, 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 <code>Screen size</code> filters because we don't know if the API will return them or not in the new query. | | [FacetsMutations](./x-components.facetsmutations.md) | Facets store mutations. | | [FacetsService](./x-components.facetsservice.md) | Service to manipulate the filters. | | [FacetsState](./x-components.facetsstate.md) | Facets store state. | | [FacetsXEvents](./x-components.facetsxevents.md) | Dictionary of the events of Facets XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [FetchAndSaveActions](./x-components.fetchandsaveactions.md) | Actions returned from the [createFetchAndSaveActions()](./x-components.createfetchandsaveactions.md). | | [FetchAndSaveHooks](./x-components.fetchandsavehooks.md) | Options to use with the [createFetchAndSaveActions()](./x-components.createfetchandsaveactions.md) factory. | | [FiltersMetadata](./x-components.filtersmetadata.md) | An object containing additional context regarding the filters. | | [HistoryQueriesActions](./x-components.historyqueriesactions.md) | HistoryQueries store actions. | | [HistoryQueriesConfig](./x-components.historyqueriesconfig.md) | Configuration options for the [HistoryQueriesXModule](./x-components.historyqueriesxmodule.md). | | [HistoryQueriesGetters](./x-components.historyqueriesgetters.md) | HistoryQueries store getters. | | [HistoryQueriesMutations](./x-components.historyqueriesmutations.md) | HistoryQueries store mutations. | | [HistoryQueriesState](./x-components.historyqueriesstate.md) | HistoryQueries store state. | | [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md) | Dictionary of the events of HistoryQueries XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [IdentifierResultsActions](./x-components.identifierresultsactions.md) | IdentifierResults store actions. | | [IdentifierResultsConfig](./x-components.identifierresultsconfig.md) | Configuration options for the [IdentifierResultsXModule](./x-components.identifierresultsxmodule.md). | | [IdentifierResultsGetters](./x-components.identifierresultsgetters.md) | IdentifierResults store getters. | | [IdentifierResultsMutations](./x-components.identifierresultsmutations.md) | IdentifierResults store mutations. | | [IdentifierResultsState](./x-components.identifierresultsstate.md) | IdentifierResults store state. | | [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md) | Dictionary of the events of IdentifierResults XModule, where each key is the event name, and the value is the event payload type or <code>void</code> 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. | | [InstallXOptions](./x-components.installxoptions.md) | 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). | | [InternalSearchRequest](./x-components.internalsearchrequest.md) | An internal search request containing the page used to calculate the start and rows properties of a [SearchRequest](./x-types.searchrequest.md). | | [InternalSearchResponse](./x-components.internalsearchresponse.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). | | [MutateFilterPayload](./x-components.mutatefilterpayload.md) | Payload to use in the <code>mutateFilter</code> mutation. | | [NamespacedWireCommit](./x-components.namespacedwirecommit.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. | | [NamespacedWireDispatch](./x-components.namespacedwiredispatch.md) | 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. | | [NextQueriesActions](./x-components.nextqueriesactions.md) | Next queries module actions. | | [NextQueriesConfig](./x-components.nextqueriesconfig.md) | Configuration options for the [NextQueriesXModule](./x-components.nextqueriesxmodule.md). | | [NextQueriesGetters](./x-components.nextqueriesgetters.md) | Next queries module getters. | | [NextQueriesGroup](./x-components.nextqueriesgroup.md) | Next queries group interface for the NextQueries. | | [NextQueriesMutations](./x-components.nextqueriesmutations.md) | Next queries module mutations. | | [NextQueriesState](./x-components.nextqueriesstate.md) | Next queries module state. | | [NextQueriesXEvents](./x-components.nextqueriesxevents.md) | Dictionary of the events of NextQueries XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [PopularSearchesActions](./x-components.popularsearchesactions.md) | Popular searches module actions. | | [PopularSearchesConfig](./x-components.popularsearchesconfig.md) | Configuration options for the popular searches module. | | [PopularSearchesGetters](./x-components.popularsearchesgetters.md) | Popular searches module getters. | | [PopularSearchesMutations](./x-components.popularsearchesmutations.md) | Popular searches module mutations. | | [PopularSearchesState](./x-components.popularsearchesstate.md) | Popular searches module state. | | [PopularSearchesXEvents](./x-components.popularsearchesxevents.md) | Dictionary of the events of PopularSearches XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [PrivateXModuleOptions](./x-components.privatexmoduleoptions.md) | Options for overriding the default store module and store emitters for a [XModule](./x-components.xmodule.md). | | [QueriesPreviewActions](./x-components.queriespreviewactions.md) | QueriesPreview store actions. | | [QueriesPreviewConfig](./x-components.queriespreviewconfig.md) | Configuration options for the [QueriesPreviewXModule](./x-components.queriespreviewxmodule.md). | | [QueriesPreviewGetters](./x-components.queriespreviewgetters.md) | QueriesPreview store getters. | | [QueriesPreviewMutations](./x-components.queriespreviewmutations.md) | QueriesPreview store mutations. | | [QueriesPreviewState](./x-components.queriespreviewstate.md) | QueriesPreview store state. | | [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) | Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [QueryMutations](./x-components.querymutations.md) | The [QueryState](./x-components.querystate.md) mutations. | | [QueryPreviewInfo](./x-components.querypreviewinfo.md) | Information to render or request a query preview with. | | [QueryPreviewItem](./x-components.querypreviewitem.md) | QueriesPreview store state. | | [QueryPreviewStatusPayload](./x-components.querypreviewstatuspayload.md) | Payload to use in the <code>setStatus</code> mutation. | | [QueryState](./x-components.querystate.md) | Query state type, containing a property to hold the current query of the module. | | [QuerySuggestionsActions](./x-components.querysuggestionsactions.md) | QuerySuggestions store actions. | | [QuerySuggestionsConfig](./x-components.querysuggestionsconfig.md) | Configuration options for the [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md). | | [QuerySuggestionsGetters](./x-components.querysuggestionsgetters.md) | QuerySuggestions store getters. | | [QuerySuggestionsMutations](./x-components.querysuggestionsmutations.md) | QuerySuggestions store mutations. | | [QuerySuggestionsState](./x-components.querysuggestionsstate.md) | QuerySuggestions store state. | | [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md) | Dictionary of the events of QuerySuggestions XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [RecommendationsActions](./x-components.recommendationsactions.md) | Recommendations store actions. | | [RecommendationsConfig](./x-components.recommendationsconfig.md) | Configuration options for the [RecommendationsXModule](./x-components.recommendationsxmodule.md). | | [RecommendationsGetters](./x-components.recommendationsgetters.md) | Recommendations store getters. | | [RecommendationsMutations](./x-components.recommendationsmutations.md) | Recommendations store mutations. | | [RecommendationsState](./x-components.recommendationsstate.md) | Recommendations store state. | | [RecommendationsXEvents](./x-components.recommendationsxevents.md) | Dictionary of the events of Recommendations XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [RelatedPromptsActions](./x-components.relatedpromptsactions.md) | Related prompts module actions. | | [RelatedPromptsGetters](./x-components.relatedpromptsgetters.md) | Related prompts module getters. | | [RelatedPromptsMutations](./x-components.relatedpromptsmutations.md) | Related prompts module mutations. | | [RelatedPromptsState](./x-components.relatedpromptsstate.md) | Related prompts module state. | | [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) | Dictionary of the events of RelatedPrompts XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [RelatedTagsActions](./x-components.relatedtagsactions.md) | RelatedTags store actions. | | [RelatedTagsConfig](./x-components.relatedtagsconfig.md) | Configuration options for the [RelatedTagsXModule](./x-components.relatedtagsxmodule.md). | | [RelatedTagsGetters](./x-components.relatedtagsgetters.md) | RelatedTags store getters. | | [RelatedTagsMutations](./x-components.relatedtagsmutations.md) | RelatedTags store mutations. | | [RelatedTagsState](./x-components.relatedtagsstate.md) | RelatedTags store state. | | [RelatedTagsXEvents](./x-components.relatedtagsxevents.md) | Dictionary of the events of RelatedTags XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [RootXStoreState](./x-components.rootxstorestate.md) | Base X store state type. All [XStoreModule](./x-components.xstoremodule.md) are nested under the <code>x</code> module for safe scoping. | | [ScrollActions](./x-components.scrollactions.md) | Scroll store actions. | | [ScrollComponentState](./x-components.scrollcomponentstate.md) | Contains all the state of a scroll component. | | [ScrollGetters](./x-components.scrollgetters.md) | Scroll store getters. | | [ScrollMutations](./x-components.scrollmutations.md) | Scroll store mutations. | | [ScrollState](./x-components.scrollstate.md) | Scroll store state. | | [ScrollStatePayload](./x-components.scrollstatepayload.md) | Payload object containing the identifier of the scroll and its position. | | [ScrollVisibilityObserver](./x-components.scrollvisibilityobserver.md) | Methods to initialise and cease visibility observing. | | [ScrollXEvents](./x-components.scrollxevents.md) | Dictionary of the events of Scroll XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [SearchActions](./x-components.searchactions.md) | Search store actions. | | [SearchBoxActions](./x-components.searchboxactions.md) | SearchBox store actions. | | [SearchBoxGetters](./x-components.searchboxgetters.md) | SearchBox store getters. | | [SearchBoxMutations](./x-components.searchboxmutations.md) | SearchBox store mutations. | | [SearchBoxState](./x-components.searchboxstate.md) | SearchBox store state. | | [SearchBoxXEvents](./x-components.searchboxxevents.md) | Dictionary of the events of SearchBox XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [SearchConfig](./x-components.searchconfig.md) | Configuration options for the [SearchXModule](./x-components.searchxmodule.md). | | [SearchGetters](./x-components.searchgetters.md) | Search store getters. | | [SearchMutations](./x-components.searchmutations.md) | Search store mutations. | | [SearchState](./x-components.searchstate.md) | Search store state. | | [SearchXEvents](./x-components.searchxevents.md) | Dictionary of the events of Search XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [SemanticQueriesActions](./x-components.semanticqueriesactions.md) | SemanticQueries store actions. | | [SemanticQueriesConfig](./x-components.semanticqueriesconfig.md) | Configuration options for the [SemanticQueriesXModule](./x-components.semanticqueriesxmodule.md). | | [SemanticQueriesGetters](./x-components.semanticqueriesgetters.md) | SemanticQueries store getters. | | [SemanticQueriesMutations](./x-components.semanticqueriesmutations.md) | SemanticQueries store mutations. | | [SemanticQueriesState](./x-components.semanticqueriesstate.md) | SemanticQueries store state. | | [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.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 <code>void</code> if it has no payload. | | [SnippetConfig](./x-components.snippetconfig.md) | Interface with the possible parameters to receive through the snippet integration. | | [SpatialNavigation](./x-components.spatialnavigation.md) | 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. | | [StatusMutations](./x-components.statusmutations.md) | Status mutations, containing a method to change the current status. | | [StatusState](./x-components.statusstate.md) | Status state type, containing a property to hold the status property. | | [TaggingActions](./x-components.taggingactions.md) | Tagging store actions. | | [TaggingConfig](./x-components.taggingconfig.md) | Configuration options for the [TaggingXModule](./x-components.taggingxmodule.md). | | [TaggingGetters](./x-components.tagginggetters.md) | Tagging store getters. | | [TaggingMutations](./x-components.taggingmutations.md) | Tagging store mutations. | | [TaggingState](./x-components.taggingstate.md) | Tagging store state. | | [TaggingXEvents](./x-components.taggingxevents.md) | Dictionary of the events of Tagging XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [ThrottleFunction](./x-components.throttlefunction.md) | The type returned by the [throttle()](./x-components.throttle.md) function. Basically is the function the [throttle()](./x-components.throttle.md) receives but throttled. | | [TimedWireOperatorOptions](./x-components.timedwireoperatoroptions.md) | Options for wire operators that delay subscribers. | | [TypingOptions](./x-components.typingoptions.md) | TypingOptions interface. | | [UrlActions](./x-components.urlactions.md) | URL store actions. | | [UrlGetters](./x-components.urlgetters.md) | URL store getters. | | [UrlMutations](./x-components.urlmutations.md) | URL store mutations. | | [UrlParams](./x-components.urlparams.md) | URL store params. | | [UrlState](./x-components.urlstate.md) | URL store state. | | [UrlXEvents](./x-components.urlxevents.md) | Dictionary of the events of URL XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. | | [UseAliasAPI](./x-components.usealiasapi.md) | Alias to facilitate retrieving values from the store. | | [UseAliasQueryAPI](./x-components.usealiasqueryapi.md) | Alias to facilitate retrieving the modules with query. | | [UseAliasStatusAPI](./x-components.usealiasstatusapi.md) | Alias to facilitate retrieving the modules with status. | | [WatchedInternalSearchRequest](./x-components.watchedinternalsearchrequest.md) | A representation of a watched [InternalSearchRequest](./x-components.internalsearchrequest.md) object, wrapping its new and old values. | | [WireMetadata](./x-components.wiremetadata.md) | The wires metadata includes more information about the emitted event, so then these events can be processed with more precision if needed. | | [WireParams](./x-components.wireparams.md) | Groups the payload, metadata, and the store into an object to avoid having multiple parameters. | | [WirePayload](./x-components.wirepayload.md) | The wire payload includes the payload of the event, and a [WireMetadata](./x-components.wiremetadata.md) object to add more information to the event. | | [WireService](./x-components.wireservice.md) | Wires factory to invoke methods from a given service. | | [WireServiceWithoutPayload](./x-components.wireservicewithoutpayload.md) | Wires factory to invoke methods from a given service. | | [XActionContext](./x-components.xactioncontext.md) | Type safe Vuex [Action](https://vuex.vuejs.org/api/#actions) context, with the local types of the module. | | [XAPI](./x-components.xapi.md) | Interface with the API functions exposes as X [window](https://developer.mozilla.org/en-US/docs/Web/API/Window) property. | | [XComponentAliasAPI](./x-components.xcomponentaliasapi.md) | Alias to facilitate retrieving values from the store. | | [XComponentAliasQueryAPI](./x-components.xcomponentaliasqueryapi.md) | Alias to facilitate retrieving the modules with query. | | [XComponentAliasStatusAPI](./x-components.xcomponentaliasstatusapi.md) | Alias to facilitate retrieving the modules with status. | | [XComponentAPI](./x-components.xcomponentapi.md) | The XComponentAPI exposes access to the , and store aliases to the components. | | [XComponentBusAPI](./x-components.xcomponentbusapi.md) | API for emitting and subscribing to events of the . | | [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 <code>void</code> 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 <code>provide</code> and <code>inject</code> 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. | | [XModuleOptions](./x-components.xmoduleoptions.md) | Options for overriding the default config state and wiring for a [XModule](./x-components.xmodule.md). | | [XModulesTree](./x-components.xmodulestree.md) | Gives each [XModule](./x-components.xmodule.md) a name, that can be used to retrieve then its value. | | [XPluginOptions](./x-components.xpluginoptions.md) | [XPlugin](./x-components.xplugin.md) Installation options. | | [XStoreModule](./x-components.xstoremodule.md) | Type safe [Vuex](https://vuex.vuejs.org/) store module. | ## Variables | Variable | Description | | --- | --- | | [addQueryPreviewInstanceWire](./x-components.addquerypreviewinstancewire.md) | Adds a new instance in a query preview. | | [addQueryToHistory](./x-components.addquerytohistory.md) | Default implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md). | | [addQueryToHistoryQueries](./x-components.addquerytohistoryqueries.md) | Saves a new query into the history queries. | | [addQueryToHistoryQueriesFromPreview](./x-components.addquerytohistoryqueriesfrompreview.md) | Saves the selectedQueryPreview query into the history queries. | | [AllFilter](./x-components.allfilter.md) | This component receives a required <code>facet</code> 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. | | [animateClipPath](./x-components.animateclippath.md) | Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter. | | [animateScale](./x-components.animatescale.md) | Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter. | | [animateTranslate](./x-components.animatetranslate.md) | Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter. | | [AnimateWidth](./x-components.animatewidth.md) | Renders a transition wrapping an element passed in the default slot and animating its width. | | [AnimationProp](./x-components.animationprop.md) | Type for animations props. | | [AutoProgressBar](./x-components.autoprogressbar.md) | 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: <code>titleClass</code>. | | [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 <code>banners</code> plus the <code>injectedListItems</code> 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. | | [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | 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. | | [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | 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: <code>buttonClass</code>. | | [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 <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.</p