@empathyco/x-components 5.0.0-alpha.39 → 5.0.0-alpha.40

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.40](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.39...@empathyco/x-components@5.0.0-alpha.40) (2024-06-12)
+
+
+### Features
+
+* migrate history queries x module to composition api (#1494) ([cd51e9b](https://github.com/empathyco/x/commit/cd51e9bb2afb77bbb8f935445bfda360dcfaafde))
+
+
+
 ## [5.0.0-alpha.39](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.39) (2024-06-11)
 
 

package/design-system/deprecated-full-theme.css

@@ -1,4 +1,5 @@
 
+
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -493,7 +494,6 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important;
 }
-
 .x-margin--auto {
   margin: auto !important;
 }
@@ -956,6 +956,29 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -990,29 +1013,6 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important;
 }
@@ -3329,21 +3329,6 @@
 .x-border-color--transparent {
   border-color: var(--x-color-base-transparent) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
 }
@@ -3387,6 +3372,24 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
@@ -3909,6 +3912,13 @@
   --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
   --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
 }
+:root {
+  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
+  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
+}
 
 .x-tag--card.x-tag,
 .x-tag--card .x-tag {
@@ -3920,13 +3930,6 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
 }
-:root {
-  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
-  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
-}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(
@@ -5038,6 +5041,10 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5054,10 +5061,6 @@
   width: 100%;
   height: 100%;
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -7874,6 +7877,13 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
+
+.x-dropdown.x-dropdown--xl {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
+}
 :root {
   --x-size-width-dropdown-s: 74px;
 }
@@ -7945,13 +7955,6 @@
 .x-dropdown.x-dropdown--m {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
 }
-:root {
-  --x-size-width-dropdown-xl: 282px;
-}
-
-.x-dropdown.x-dropdown--xl {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7976,9 +7979,6 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8045,6 +8045,9 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
@@ -8838,7 +8841,4 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
 }

package/docs/API-reference/api/x-components.clearhistoryqueries.md

@@ -1,13 +1,17 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [clearHistoryQueries](./x-components.clearhistoryqueries.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ClearHistoryQueries](./x-components.clearhistoryqueries.md)
 
-## clearHistoryQueries variable
+## ClearHistoryQueries variable
 
-Clears the history queries.
+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.
 
 **Signature:**
 
 ```typescript
-clearHistoryQueries: import("../..").AnyWire
+_default: import("vue").DefineComponent<{}, {
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+    clearHistoryQueriesEvents: Partial<XEventsTypes>;
+    isHistoryQueriesEmpty: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>
 ```

package/docs/API-reference/api/x-components.historyqueries.md

@@ -1,13 +1,15 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [historyQueries](./x-components.historyqueries.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueries](./x-components.historyqueries.md)
 
-## historyQueries variable
+## HistoryQueries variable
 
-Default implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter.
+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.
 
 **Signature:**
 
 ```typescript
-historyQueries: ({ query, historyQueries, config }: HistoryQueriesState) => HistoryQuery[]
+_default: import("vue").DefineComponent<{}, {
+    historyQueriesWithResults: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>
 ```

package/docs/API-reference/api/x-components.historyqueriesswitch.md

@@ -2,21 +2,15 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md)
 
-## HistoryQueriesSwitch class
+## HistoryQueriesSwitch variable
 
 History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the `isEnabled` value.
 
 **Signature:**
 
 ```typescript
-export default class HistoryQueriesSwitch extends Vue 
+_default: import("vue").DefineComponent<{}, {
+    toggle: () => void;
+    isEnabled: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [hasHistoryQueries](./x-components.historyqueriesswitch.hashistoryqueries.md) | <p><code>protected</code></p><p><code>readonly</code></p> | boolean | Checks if there are history queries. |
-|  [historyQueries](./x-components.historyqueriesswitch.historyqueries.md) |  | HistoryQuery\[\] | The history queries from the state. |
-

package/docs/API-reference/api/x-components.historyquery.md

@@ -2,20 +2,29 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [HistoryQuery](./x-components.historyquery.md)
 
-## HistoryQuery class
+## HistoryQuery variable
 
 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.
 
 **Signature:**
 
 ```typescript
-export default class HistoryQuery extends HistoryQuery_base 
+_default: import("vue").DefineComponent<{
+    suggestion: {
+        type: PropType<HistoryQueryModel>;
+        required: true;
+    };
+    removeButtonClass: StringConstructor;
+    suggestionClass: StringConstructor;
+}, {
+    query: import("vue").ComputedRef<any>;
+    suggestionSelectedEvents: import("vue").ComputedRef<Partial<XEventsTypes>>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "click"[], string, Readonly<import("vue").ExtractPropTypes<{
+    suggestion: {
+        type: PropType<HistoryQueryModel>;
+        required: true;
+    };
+    removeButtonClass: StringConstructor;
+    suggestionClass: StringConstructor;
+}>>, {}>
 ```
-**Extends:** HistoryQuery\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [suggestion](./x-components.historyquery.suggestion.md) | <code>protected</code> | HistoryQueryModel | The history query suggestion to render. |
-

package/docs/API-reference/api/x-components.md

@@ -14,7 +14,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [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. |
 |  [Banner](./x-components.banner.md) | <p>. 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.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>titleClass</code>.</p> |
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
-|  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | 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. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
 |  [DeviceDetector](./x-components.devicedetector.md) | 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. |
@@ -27,13 +26,9 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [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. |
 |  [FallbackDisclaimer](./x-components.fallbackdisclaimer.md) | The <code>FallbackDisclaimer</code> component shows a message if the filters have been removed from the current search because there were no results. |
 |  [HierarchicalFilter](./x-components.hierarchicalfilter.md) | Renders a hierarchical filter recursively, emitting the needed events when clicked. |
-|  [HistoryQueries](./x-components.historyqueries.md) | 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. |
 |  [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
-|  [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the <code>isEnabled</code> value. |
-|  [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. |
 |  [IdentifierResult](./x-components.identifierresult.md) | 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. |
 |  [IdentifierResults](./x-components.identifierresults.md) | 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. |
-|  [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) | Simple next-queries component that renders a list of \[<code>BaseSuggestions</code>\](./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 <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
 |  [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. |
 |  [NextQueryPreview](./x-components.nextquerypreview.md) | 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. |
@@ -49,7 +44,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [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 <code>help</code>, <code>shipping costs</code>, <code>my account</code>, where a link to a section in the website will be more helpful than the set of results returned. |
 |  [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) | This component renders a set of \[<code>RelatedTag</code>\](./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\*. |
-|  [RemoveHistoryQuery](./x-components.removehistoryquery.md) | 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. |
 |  [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
 |  [RenderlessFilter](./x-components.renderlessfilter.md) | 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. |
 |  [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. |
@@ -409,6 +403,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ChevronUpIcon](./x-components.chevronupicon.md) |  |
 |  [ClearFilters](./x-components.clearfilters.md) | Renders a simple button, emitting the needed events when clicked. |
 |  [clearHistoryQueries](./x-components.clearhistoryqueries.md) | Clears the history queries. |
+|  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | 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. |
 |  [clearHistoryQueriesQuery](./x-components.clearhistoryqueriesquery.md) | Sets the query of the history queries module to an empty string. |
 |  [clearIdentifierResultsQuery](./x-components.clearidentifierresultsquery.md) | Clears the identifier-results module query. |
 |  [clearPendingScrollToWire](./x-components.clearpendingscrolltowire.md) | Resets the selector of the scroll that is pending to restore. |
@@ -495,7 +490,10 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [Highlight](./x-components.highlight.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... |
 |  [HistoryIcon](./x-components.historyicon.md) |  |
 |  [historyQueries](./x-components.historyqueries.md) | Default implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
+|  [HistoryQueries](./x-components.historyqueries.md) | 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. |
+|  [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to activate or deactivate the history queries. This component emits events depending on the <code>isEnabled</code> value. |
 |  [historyQueriesXModule](./x-components.historyqueriesxmodule.md) | HistoryQueries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>history-queries</code> 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. |
 |  [HistoryTinyIcon](./x-components.historytinyicon.md) |  |
 |  [identifierDetectionRegexp](./x-components.identifierdetectionregexp.md) | Default implementation for the [IdentifierResultsGetters.identifierDetectionRegexp](./x-components.identifierresultsgetters.identifierdetectionregexp.md) getter. |
 |  [identifierHighlightRegexp](./x-components.identifierhighlightregexp.md) | Default implementation for the [IdentifierResultsGetters.identifierHighlightRegexp](./x-components.identifierresultsgetters.identifierhighlightregexp.md) getter. |
@@ -517,6 +515,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [MinusIcon](./x-components.minusicon.md) |  |
 |  [MinusTinyIcon](./x-components.minustinyicon.md) |  |
 |  [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
+|  [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. |
 |  [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
 |  [nextQueriesRequest](./x-components.nextqueriesrequest.md) | Default implementation for the [NextQueriesGetters.request](./x-components.nextqueriesgetters.request.md) getter. |
@@ -553,6 +552,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [relatedTagsXModule](./x-components.relatedtagsxmodule.md) | RelatedTags [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>related-tags</code> entry point. |
 |  [removeFromHistory](./x-components.removefromhistory.md) | Default implementation for the [HistoryQueriesActions.removeFromHistory()](./x-components.historyqueriesactions.removefromhistory.md)<!-- -->. |
 |  [removeHistoryQuery](./x-components.removehistoryquery.md) | Removes a single history query from the history queries. |
+|  [RemoveHistoryQuery](./x-components.removehistoryquery.md) | 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. |
 |  [removeQueryPreviewInstanceWire](./x-components.removequerypreviewinstancewire.md) | Removes an instance in a query preview. |
 |  [resetAppending](./x-components.resetappending.md) | Resets the search state <code>isAppendingResults</code>. |
 |  [resetFromNoResultsWithFilters](./x-components.resetfromnoresultswithfilters.md) | Resets the search state <code>fromNoResultsWithFilters</code>. |

package/docs/API-reference/api/x-components.myhistory.md

@@ -2,25 +2,47 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [MyHistory](./x-components.myhistory.md)
 
-## MyHistory class
+## MyHistory variable
 
 The component renders the full history of user searched queries grouped by the day they were performed.
 
 **Signature:**
 
 ```typescript
-export default class MyHistory extends Vue 
+_default: import("vue").DefineComponent<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    queriesListClass: StringConstructor;
+}, {
+    hasHistoryQueries: import("vue").ComputedRef<boolean>;
+    groupByDate: import("vue").ComputedRef<Dictionary<HistoryQueryType[]>>;
+    historyQueries: import("vue").ComputedRef<any>;
+    formatTime: (timestamp: number) => string;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: import("vue").PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: string;
+    };
+    queriesListClass: StringConstructor;
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+    locale: string;
+}>
 ```
-**Extends:** Vue
 
 ## Remarks
 
 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.
 
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.myhistory.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the suggestions. |
-|  [locale](./x-components.myhistory.locale.md) | <code>protected</code> | string | The current locale. |
-

package/docs/API-reference/api/x-components.removehistoryquery.md

@@ -1,13 +1,25 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [removeHistoryQuery](./x-components.removehistoryquery.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RemoveHistoryQuery](./x-components.removehistoryquery.md)
 
-## removeHistoryQuery variable
+## RemoveHistoryQuery variable
 
-Removes a single history query from the history queries.
+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.
 
 **Signature:**
 
 ```typescript
-removeHistoryQuery: import("../..").Wire<import("@empathyco/x-types").HistoryQuery>
+_default: import("vue").DefineComponent<{
+    historyQuery: {
+        type: PropType<HistoryQuery>;
+        required: true;
+    };
+}, {
+    removeHistoryQueryEvent: import("vue").ComputedRef<Partial<XEventsTypes>>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    historyQuery: {
+        type: PropType<HistoryQuery>;
+        required: true;
+    };
+}>>, {}>
 ```

package/docs/API-reference/components/history-queries/x-components.history-query.md

@@ -12,9 +12,11 @@ queries.
 
 ## Props
 
-| Name                    | Description                             | Type                           | Default       |
-| ----------------------- | --------------------------------------- | ------------------------------ | ------------- |
-| <code>suggestion</code> | The history query suggestion to render. | <code>HistoryQueryModel</code> | <code></code> |
+| Name                           | Description                             | Type                           | Default       |
+| ------------------------------ | --------------------------------------- | ------------------------------ | ------------- |
+| <code>suggestion</code>        | The history query suggestion to render. | <code>HistoryQueryModel</code> | <code></code> |
+| <code>removeButtonClass</code> | Class inherited by content element.     | <code>string</code>            | <code></code> |
+| <code>suggestionClass</code>   | Class inherited by content element.     | <code>string</code>            | <code></code> |
 
 ## Events
 

package/docs/API-reference/components/history-queries/x-components.my-history.md

@@ -11,10 +11,11 @@ performed.
 
 ## Props
 
-| Name                   | Description                                                       | Type                | Default           |
-| ---------------------- | ----------------------------------------------------------------- | ------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>union</code>  | <code>'ul'</code> |
-| <code>locale</code>    | The current locale.                                               | <code>string</code> | <code>'en'</code> |
+| Name                          | Description                                                       | Type                       | Default           |
+| ----------------------------- | ----------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>AnimationProp</code> | <code>'ul'</code> |
+| <code>locale</code>           | The current locale.                                               | <code>string</code>        | <code>'en'</code> |
+| <code>queriesListClass</code> | Class inherited by content element.                               | <code>string</code>        | <code></code>     |
 
 ## Slots
 

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { HistoryQuery } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { State } from '../../../components/decorators/store.decorators';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton },\n    mixins: [xComponentMixin(historyQueriesXModule)]\n  })\n  export default class ClearHistoryQueries extends Vue {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    protected get isHistoryQueriesEmpty(): boolean {\n      return this.historyQueries.length === 0;\n    }\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty\n      };\n    }\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined\n    };\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { historyQueriesXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * A button that when is pressed, emits the\n   * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n   * intention to clear the whole history of queries.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearHistoryQueries',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseEventButton\n    },\n    setup() {\n      /**\n       * The whole history queries.\n       *\n       * @internal\n       */\n      const { historyQueries } = useState('historyQueries', ['historyQueries']);\n\n      /**\n       * Returns if the array of history queries is empty.\n       *\n       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n       * @internal\n       */\n      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);\n\n      /**\n       * Dynamic CSS classes to add to the root element of this component.\n       *\n       * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n       * tells if it should be added or not.\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value\n        })\n      );\n\n      /**\n       * The list of events that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n        UserPressedClearHistoryQueries: undefined\n      };\n\n      return {\n        dynamicClasses,\n        clearHistoryQueriesEvents,\n        isHistoryQueriesEmpty\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries';\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('FadeAndSlide', FadeAndSlide);\n  export default {\n    name: 'ClearHistoryQueriesDemo',\n    components: {\n      SearchInput,\n      HistoryQueries,\n      ClearHistoryQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}