@empathyco/x-components 3.0.0-alpha.241 → 3.0.0-alpha.243

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.243](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.242...@empathyco/x-components@3.0.0-alpha.243) (2022-12-08)
+
+### Testing
+
+- **e2e:** make `HistoryQueries` test wait for no results (#906)
+  ([82cc3dd](https://github.com/empathyco/x/commit/82cc3ddc0f1339fbff6c04e2eff7dfbf24598672)),
+  closes [EX-7591](https://searchbroker.atlassian.net/browse/EX-7591)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.242](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.241...@empathyco/x-components@3.0.0-alpha.242) (2022-12-07)
+
+### ⚠ BREAKING CHANGES
+
+- the event `SearchResponseProvided` was renamed to `SearchResponseChanged`
+
+### Code Refactoring
+
+- Simplify suggestions list slots. (#893)
+  ([fc4ccb9](https://github.com/empathyco/x/commit/fc4ccb97a91b4c2ff7dfd0d7aed9747d7841b4ed)),
+  closes [EX-7469](https://searchbroker.atlassian.net/browse/EX-7469)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.241](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.240...@empathyco/x-components@3.0.0-alpha.241) (2022-12-06)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/default-theme.css

@@ -734,15 +734,6 @@
   stroke: none;
   fill: var(--x-color-stroke-icon-default);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -963,6 +954,15 @@
   );
   --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
 }
+:root {
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);

package/design-system/full-theme.css

@@ -1204,6 +1204,69 @@
   --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
   --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
 }
+[dir="ltr"] .x-input {
+  padding-left: var(--x-size-padding-left-input-default);
+}[dir="rtl"] .x-input {
+  padding-right: var(--x-size-padding-left-input-default);
+}[dir="ltr"] .x-input {
+  padding-right: var(--x-size-padding-right-input-default);
+}[dir="rtl"] .x-input {
+  padding-left: var(--x-size-padding-right-input-default);
+}[dir="ltr"] .x-input {
+  border-right-width: var(--x-size-border-width-right-input-default);
+}[dir="rtl"] .x-input {
+  border-left-width: var(--x-size-border-width-right-input-default);
+}[dir="ltr"] .x-input {
+  border-left-width: var(--x-size-border-width-left-input-default);
+}[dir="rtl"] .x-input {
+  border-right-width: var(--x-size-border-width-left-input-default);
+}.x-input {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  height: var(--x-size-height-input-default);
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: var(--x-color-background-input-default);
+  border-color: var(--x-color-border-input-default);
+  color: var(--x-color-text-input-default);
+  border-top-width: var(--x-size-border-width-top-input-default);
+  border-bottom-width: var(--x-size-border-width-bottom-input-default);
+  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
+  border-style: solid;
+  font-family: var(--x-font-family-input-default);
+  font-size: var(--x-size-font-input-default);
+  font-weight: var(--x-number-font-weight-input-default);
+  line-height: var(--x-size-line-height-input-default);
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-input {
+    -webkit-appearance: none;
+  }
+}
+.x-input:focus {
+  border-color: var(--x-color-border-input-default-focus);
+}
+.x-input > .x-input-placeholder {
+  position: absolute;
+  height: 100%;
+}
+.x-input > .x-input {
+  background: none;
+  border: none;
+  padding: 0;
+  flex: 1 1 auto;
+}
+.x-input > .x-input-placeholder, .x-input::placeholder {
+  color: var(--x-color-text-input-placeholder-default);
+  font-family: var(--x-font-family-input-placeholder-default);
+  font-size: var(--x-size-font-input-placeholder-default);
+  font-weight: var(--x-number-font-weight-input-placeholder-default);
+  line-height: var(--x-size-line-height-input-placeholder-default);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7173,67 +7236,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-[dir="ltr"] .x-input {
-  padding-left: var(--x-size-padding-left-input-default);
-}[dir="rtl"] .x-input {
-  padding-right: var(--x-size-padding-left-input-default);
-}[dir="ltr"] .x-input {
-  padding-right: var(--x-size-padding-right-input-default);
-}[dir="rtl"] .x-input {
-  padding-left: var(--x-size-padding-right-input-default);
-}[dir="ltr"] .x-input {
-  border-right-width: var(--x-size-border-width-right-input-default);
-}[dir="rtl"] .x-input {
-  border-left-width: var(--x-size-border-width-right-input-default);
-}[dir="ltr"] .x-input {
-  border-left-width: var(--x-size-border-width-left-input-default);
-}[dir="rtl"] .x-input {
-  border-right-width: var(--x-size-border-width-left-input-default);
-}.x-input {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-  height: var(--x-size-height-input-default);
-  padding-top: 0;
-  padding-bottom: 0;
-  background-color: var(--x-color-background-input-default);
-  border-color: var(--x-color-border-input-default);
-  color: var(--x-color-text-input-default);
-  border-top-width: var(--x-size-border-width-top-input-default);
-  border-bottom-width: var(--x-size-border-width-bottom-input-default);
-  border-radius: var(--x-size-border-radius-top-left-input-default) var(--x-size-border-radius-top-right-input-default) var(--x-size-border-radius-bottom-right-input-default) var(--x-size-border-radius-bottom-left-input-default);
-  border-style: solid;
-  font-family: var(--x-font-family-input-default);
-  font-size: var(--x-size-font-input-default);
-  font-weight: var(--x-number-font-weight-input-default);
-  line-height: var(--x-size-line-height-input-default);
-}
-@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
-  .x-input {
-    -webkit-appearance: none;
-  }
-}
-.x-input:focus {
-  border-color: var(--x-color-border-input-default-focus);
-}
-.x-input > .x-input-placeholder {
-  position: absolute;
-  height: 100%;
-}
-.x-input > .x-input {
-  background: none;
-  border: none;
-  padding: 0;
-  flex: 1 1 auto;
-}
-.x-input > .x-input-placeholder, .x-input::placeholder {
-  color: var(--x-color-text-input-placeholder-default);
-  font-family: var(--x-font-family-input-placeholder-default);
-  font-size: var(--x-size-font-input-placeholder-default);
-  font-weight: var(--x-number-font-weight-input-placeholder-default);
-  line-height: var(--x-size-line-height-input-placeholder-default);
-}

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

@@ -21,7 +21,7 @@ export interface SearchXEvents
 |  [ResultsChanged](./x-components.searchxevents.resultschanged.md) | Result\[\] | Results have been changed. Payload: The new [results](./x-types.result.md)<!-- -->. |
 |  [SearchRequestChanged](./x-components.searchxevents.searchrequestchanged.md) | [InternalSearchRequest](./x-components.internalsearchrequest.md) \| null | Any property of the search request has changed. Payload: The new search request or <code>null</code> if there is not enough data in the state to conform a valid request. |
 |  [SearchRequestUpdated](./x-components.searchxevents.searchrequestupdated.md) | [InternalSearchRequest](./x-components.internalsearchrequest.md) | Any property of the search request has been updated. Payload: The new internal request object. |
-|  [SearchResponseProvided](./x-components.searchxevents.searchresponseprovided.md) | [InternalSearchResponse](./x-components.internalsearchresponse.md) | A search response has been provided. Payload: The provided internal response object. |
+|  [SearchResponseChanged](./x-components.searchxevents.searchresponsechanged.md) | [InternalSearchResponse](./x-components.internalsearchresponse.md) | A search response has been provided. Payload: The provided internal response object. |
 |  [SearchTaggingChanged](./x-components.searchxevents.searchtaggingchanged.md) | TaggingRequest | Query tagging has been changed. Payload: The new query tagging object. |
 |  [SelectedSortProvided](./x-components.searchxevents.selectedsortprovided.md) | Sort | A new selected sort has been provided. Payload: The sort option that has been provided. |
 |  [SortChanged](./x-components.searchxevents.sortchanged.md) | string | Sort has been changed. Payload: The new sort string. |

package/docs/API-reference/api/{x-components.searchxevents.searchresponseprovided.md → x-components.searchxevents.searchresponsechanged.md}

@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SearchXEvents](./x-components.searchxevents.md) &gt; [SearchResponseProvided](./x-components.searchxevents.searchresponseprovided.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SearchXEvents](./x-components.searchxevents.md) &gt; [SearchResponseChanged](./x-components.searchxevents.searchresponsechanged.md)
 
-## SearchXEvents.SearchResponseProvided property
+## SearchXEvents.SearchResponseChanged property
 
 A search response has been provided. Payload: The provided internal response object.
 
 <b>Signature:</b>
 
 ```typescript
-SearchResponseProvided: InternalSearchResponse;
+SearchResponseChanged: InternalSearchResponse;
 ```

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

@@ -12,21 +12,21 @@ another type of suggestion that contains a query that the user has made in the p
 
 ## Slots
 
-| Name                                   | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                                              |
-| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| <code>suggestion</code>                | History Query item                  | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index                                                                                                      |
-| <code>suggestion-content</code>        | History Query content               | **queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag<br />**v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
-| <code>suggestion-remove-content</code> | History Query remove button content | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index                                                                                                      |
+| Name                                   | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                                         |
+| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>suggestion</code>                | History Query item                  | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
+| <code>suggestion-content</code>        | History Query content               | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
+| <code>suggestion-remove-content</code> | History Query remove button content | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
 
 ## Inherited props
 
 This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
 props.
 
-| Name                          | Description                                                                                                                                                                                                  | Type                | Default         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | --------------- |
-| <code>animation</code>        | Animation component that will be used to animate the suggestions.                                                                                                                                            | <code>Vue</code>    | <code>ul</code> |
-| <code>maxItemsToRender</code> | Maximum number of history queries to show. It should be a lower number than the<br />{@link HistoryQueriesConfig.maxItemsToStore}. If it is not provided, it will show<br />all the stored `HistoryQueries`. | <code>number</code> | <code></code>   |
+| Name               | Description                                                       | Type     | Default |
+| ------------------ | ----------------------------------------------------------------- | -------- | ------- |
+| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `"ul"`  |
+| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |
 
 ## Events
 

package/docs/API-reference/components/next-queries/x-components.next-queries.md

@@ -21,20 +21,20 @@ for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.
 
 ## Slots
 
-| Name                            | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                                    |
-| ------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>suggestion</code>         | Next Query item    | **highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index      |
-| <code>suggestion-content</code> | Next Query content | **shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index |
+| Name                            | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                               |
+| ------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>suggestion</code>         | Next Query item    | **highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index |
+| <code>suggestion-content</code> | Next Query content | **v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index                                                                                                |
 
 ## Inherited props
 
 This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
 props.
 
-| Name                          | Description                                                       | Type                | Default         |
-| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |
-| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |
-| <code>maxItemsToRender</code> | Number of next queries to be rendered.                            | <code>number</code> | <code></code>   |
+| Name               | Description                                                       | Type     | Default |
+| ------------------ | ----------------------------------------------------------------- | -------- | ------- |
+| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `"ul"`  |
+| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |
 
 ## Examples
 

package/docs/API-reference/components/popular-searches/x-components.popular-searches.md

@@ -23,10 +23,10 @@ optionally have associated a set of filters.
 This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
 props.
 
-| Name                          | Description                                                       | Type                | Default         |
-| ----------------------------- | ----------------------------------------------------------------- | ------------------- | --------------- |
-| <code>animation</code>        | Animation component that will be used to animate the suggestions. | <code>Vue</code>    | <code>ul</code> |
-| <code>maxItemsToRender</code> | Number of popular searches to be rendered.                        | <code>number</code> | <code></code>   |
+| Name               | Description                                                       | Type     | Default |
+| ------------------ | ----------------------------------------------------------------- | -------- | ------- |
+| `animation`        | Animation component that will be used to animate the suggestions. | `Vue`    | `"ul"`  |
+| `maxItemsToRender` | Number of popular searches to be rendered.                        | `number` |         |
 
 ## Examples
 

package/docs/API-reference/components/query-suggestions/x-components.query-suggestions.md

@@ -12,20 +12,20 @@ in the input field. By default, this is a list of
 
 ## Slots
 
-| Name                            | Description                                                        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                               |
-| ------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>suggestion</code>         | Custom component that replaces the `QuerySuggestion` component     | **v-bind** <code>Object</code> - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Query Suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Query Suggestion index                                                                                                               |
-| <code>suggestion-content</code> | Custom content that replaces the `QuerySuggestion` default content | **queryHTML** <code>string</code> - Suggestion’s query with the matching part wrapped in a HTML span tag<br />**v-bind** <code>Object</code> - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Query Suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Query Suggestion index |
+| Name                            | Description                                                        | Bindings<br />(name - type - description)                                                                                                                                                           |
+| ------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>suggestion</code>         | Custom component that replaces the `QuerySuggestion` component     | **v-bind** <code>Object</code> - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index |
+| <code>suggestion-content</code> | Custom content that replaces the `QuerySuggestion` default content | **v-bind** <code>Object</code> - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index |
 
 ## Inherited props
 
 This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
 props.
 
-| Name                          | Description                                 | Type                | Default         |
-| ----------------------------- | ------------------------------------------- | ------------------- | --------------- |
-| <code>animation</code>        | Animation component for `QuerySuggestions`. | <code>Vue</code>    | <code>ul</code> |
-| <code>maxItemsToRender</code> | Number of query suggestions to be rendered. | <code>number</code> | <code></code>   |
+| Name               | Description                                 | Type     | Default |
+| ------------------ | ------------------------------------------- | -------- | ------- |
+| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `"ul"`  |
+| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |
 
 ## See it in action
 
@@ -108,8 +108,9 @@ _Type “bag” or another fashion term in the input field to try it out!_
   <div>
     <SearchInput />
     <QuerySuggestions #suggestion="{ suggestion }">
-      <QuerySuggestion :suggestion="suggestion" #default="{ queryHTML }">
-        <span v-html="queryHTML" />
+      <QuerySuggestion :suggestion="suggestion" #default="{ suggestion }">
+        <span>🔍</span>
+        <span>{{ suggestion.query }}</span>
       </QuerySuggestion>
     </QuerySuggestions>
   </div>
@@ -181,8 +182,8 @@ you must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` e
 
 ### Play with suggestion-content slot
 
-In this example, the `suggestion` and `queryHTML` bindings have been passed in the
-`suggestion-content` slot to paint the resulting query suggestions in blue.
+In this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used
+to paint a suggestion with an icon.
 
 _Type “trousers” or another toy in the input field to try it out!_
 
@@ -190,12 +191,9 @@ _Type “trousers” or another toy in the input field to try it out!_
 <template>
   <div>
     <SearchInput />
-    <QuerySuggestions #suggestion-content="{ suggestion, queryHTML }">
-      <span
-        :aria-label="`Select ${suggestion.query}`"
-        style="color: blue;"
-        v-html="queryHTML"
-      />
+    <QuerySuggestions #suggestion-content="{ suggestion, query }">
+      <span>🔍</span>
+      <Highlight :text="suggestion.query" :highlight="query" />
     </QuerySuggestions>
   </div>
 </template>
@@ -203,12 +201,14 @@ _Type “trousers” or another toy in the input field to try it out!_
 <script>
 import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
 import { SearchInput } from "@empathyco/x-components/search-box";
+import { Highlight } from "@empathyco/x-components";
 
 export default {
   name: "QuerySuggestionsDemo",
   components: {
     SearchInput,
-    QuerySuggestions
+    QuerySuggestions,
+    Highlight
   }
 };
 </script>

package/js/components/highlight.vue.js

@@ -0,0 +1,95 @@
+import script from './highlight.vue_rollup-plugin-vue_script.vue.js';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "NoElement",
+    [
+      _vm._t(
+        "default",
+        function () {
+          return [
+            _c(
+              "span",
+              { staticClass: "x-highlight", class: _vm.dynamicCSSClasses },
+              [
+                _vm.matchParts.start
+                  ? _c("span", {
+                      staticClass: "x-highlight__text",
+                      attrs: { "data-test": "highlight-start" },
+                      domProps: { textContent: _vm._s(_vm.matchParts.start) },
+                    })
+                  : _vm._e(),
+                _vm._v(" "),
+                _vm.hasMatch
+                  ? _c("span", {
+                      staticClass: "x-highlight__text x-highlight-text-match",
+                      class: _vm.matchingPartClass,
+                      attrs: { "data-test": "matching-part" },
+                      domProps: { textContent: _vm._s(_vm.matchParts.match) },
+                    })
+                  : _vm._e(),
+                _vm._v(" "),
+                _vm.matchParts.end
+                  ? _c("span", {
+                      staticClass: "x-highlight__text",
+                      attrs: { "data-test": "highlight-end" },
+                      domProps: { textContent: _vm._s(_vm.matchParts.end) },
+                    })
+                  : _vm._e(),
+              ]
+            ),
+          ]
+        },
+        null,
+        Object.assign(
+          {},
+          { text: _vm.text, hasMatch: _vm.hasMatch },
+          _vm.matchParts
+        )
+      ),
+    ],
+    2
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };
+//# sourceMappingURL=highlight.vue.js.map

package/js/components/highlight.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <NoElement>\n    <slot v-bind=\"{ text, hasMatch, ...matchParts }\">\n      <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n        <span\n          v-if=\"matchParts.start\"\n          v-text=\"matchParts.start\"\n          class=\"x-highlight__text\"\n          data-test=\"highlight-start\"\n        />\n        <span\n          v-if=\"hasMatch\"\n          v-text=\"matchParts.match\"\n          class=\"x-highlight__text x-highlight-text-match\"\n          :class=\"matchingPartClass\"\n          data-test=\"matching-part\"\n        />\n        <span\n          v-if=\"matchParts.end\"\n          v-text=\"matchParts.end\"\n          class=\"x-highlight__text\"\n          data-test=\"highlight-end\"\n        />\n      </span>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { normalizeString } from '../utils/normalize';\n  import { VueCSSClasses } from '../utils/types';\n  import { NoElement } from './no-element';\n  import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n  /**\n   * Highlights the given part of the text. The component is smart enough to do matches\n   * between special characters like tilde, cedilla, eñe, capital letters...\n   *\n   * @public\n   */\n  @Component({\n    components: { NoElement }\n  })\n  export default class Highlight extends Mixins(\n    dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])\n  ) {\n    /**\n     * The text to highlight some part of it.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    public text!: string;\n\n    /**\n     * The part of the text to be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    public highlight!: string;\n\n    /**\n     * CSS Class to add when the `text` string contains the `highlight` string.\n     */\n    @Prop({ default: '' })\n    public matchClass!: string;\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns True if there is a match between the text and the highlight strings.\n     * @internal\n     */\n    protected get hasMatch(): boolean {\n      return !!this.matchParts.match;\n    }\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The {@link VueCSSClasses} classes.\n     * @internal\n     */\n    protected get dynamicCSSClasses(): VueCSSClasses {\n      const classes: VueCSSClasses = {\n        'x-highlight--has-match': this.hasMatch,\n        'x-highlight-text': this.hasMatch,\n        [this.matchClass]: this.hasMatch\n      };\n      if (this.noMatchClass) {\n        classes[this.noMatchClass] = !this.hasMatch;\n      }\n      return classes;\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     * @internal\n     */\n    protected get matchParts(): HighlightMatch {\n      const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));\n      return matcherIndex !== -1 && this.highlight\n        ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)\n        : { start: this.text, match: '', end: '' };\n    }\n\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     * @internal\n     */\n    protected splitAt(label: string, start: number, end: number): HighlightMatch {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end)\n      };\n    }\n  }\n\n  /**\n   * Contains the different parts of a string match.\n   */\n  interface HighlightMatch {\n    /**\n     * When the match does not happen from the beginning of the string, the initial unmatched\n     * part.\n     */\n    start: string;\n    /**\n     * The part of the text that is matching.\n     */\n    match: string;\n    /**\n     * When the match does not extend until the end, the remaining unmatched string.\n     */\n    end: string;\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: ''\n      };\n    }\n  };\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: 'entran'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/highlight.vue_rollup-plugin-vue_script.vue.js

@@ -0,0 +1,95 @@
+import { __decorate } from 'tslib';
+import { Mixins, Prop, Component } from 'vue-property-decorator';
+import { normalizeString } from '../utils/normalize.js';
+import { NoElement } from './no-element.js';
+import { dynamicPropsMixin } from './dynamic-props.mixin.js';
+
+/**
+ * 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...
+ *
+ * @public
+ */
+let Highlight = class Highlight extends Mixins(dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])) {
+    /**
+     * Checks if the normalized suggestion query matches with the module's query, so it has a
+     * matching part.
+     *
+     * @returns True if there is a match between the text and the highlight strings.
+     * @internal
+     */
+    get hasMatch() {
+        return !!this.matchParts.match;
+    }
+    /**
+     * CSS classes to add depending on the component state.
+     *
+     * @remarks
+     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.
+     * `[matchClass]`: When there is a match between the text and
+     * the part to highlight.
+     * `[noMatchClass]`: when there is no match between the text to highlight.
+     * @returns The {@link VueCSSClasses} classes.
+     * @internal
+     */
+    get dynamicCSSClasses() {
+        const classes = {
+            'x-highlight--has-match': this.hasMatch,
+            'x-highlight-text': this.hasMatch,
+            [this.matchClass]: this.hasMatch
+        };
+        if (this.noMatchClass) {
+            classes[this.noMatchClass] = !this.hasMatch;
+        }
+        return classes;
+    }
+    /**
+     * Splits the text to highlight into 3 parts: a starting part, the matching part
+     * and the ending part. If there is no match between the text and the highlight, the `start`
+     * property will contain the whole text.
+     *
+     * @returns An object containing the different parts of the text.
+     * @internal
+     */
+    get matchParts() {
+        const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));
+        return matcherIndex !== -1 && this.highlight
+            ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)
+            : { start: this.text, match: '', end: '' };
+    }
+    /**
+     * Splits the label in three parts based on two indexes.
+     *
+     * @param label - The string that will be divided in three parts.
+     * @param start - The first index that the label will be divided by.
+     * @param end - The second index that the label will be divided by.
+     *
+     * @returns The three parts of the divided label.
+     * @internal
+     */
+    splitAt(label, start, end) {
+        return {
+            start: label.substring(0, start),
+            match: label.substring(start, end),
+            end: label.substring(end)
+        };
+    }
+};
+__decorate([
+    Prop({ default: '' })
+], Highlight.prototype, "text", void 0);
+__decorate([
+    Prop({ default: '' })
+], Highlight.prototype, "highlight", void 0);
+__decorate([
+    Prop({ default: '' })
+], Highlight.prototype, "matchClass", void 0);
+Highlight = __decorate([
+    Component({
+        components: { NoElement }
+    })
+], Highlight);
+var script = Highlight;
+
+export { script as default };
+//# sourceMappingURL=highlight.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/highlight.vue_rollup-plugin-vue_script.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/highlight.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Component, Mixins, Prop } from 'vue-property-decorator';\nimport { normalizeString } from '../utils/normalize';\nimport { VueCSSClasses } from '../utils/types';\nimport { NoElement } from './no-element';\nimport { dynamicPropsMixin } from './dynamic-props.mixin';\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\n@Component({\n  components: { NoElement }\n})\nexport default class Highlight extends Mixins(\n  dynamicPropsMixin(['noMatchClass', 'matchingPartClass'])\n) {\n  /**\n   * The text to highlight some part of it.\n   *\n   * @public\n   */\n  @Prop({ default: '' })\n  public text!: string;\n\n  /**\n   * The part of the text to be highlighted.\n   *\n   * @public\n   */\n  @Prop({ default: '' })\n  public highlight!: string;\n\n  /**\n   * CSS Class to add when the `text` string contains the `highlight` string.\n   */\n  @Prop({ default: '' })\n  public matchClass!: string;\n\n  /**\n   * Checks if the normalized suggestion query matches with the module's query, so it has a\n   * matching part.\n   *\n   * @returns True if there is a match between the text and the highlight strings.\n   * @internal\n   */\n  protected get hasMatch(): boolean {\n    return !!this.matchParts.match;\n  }\n\n  /**\n   * CSS classes to add depending on the component state.\n   *\n   * @remarks\n   * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n   * `[matchClass]`: When there is a match between the text and\n   * the part to highlight.\n   * `[noMatchClass]`: when there is no match between the text to highlight.\n   * @returns The {@link VueCSSClasses} classes.\n   * @internal\n   */\n  protected get dynamicCSSClasses(): VueCSSClasses {\n    const classes: VueCSSClasses = {\n      'x-highlight--has-match': this.hasMatch,\n      'x-highlight-text': this.hasMatch,\n      [this.matchClass]: this.hasMatch\n    };\n    if (this.noMatchClass) {\n      classes[this.noMatchClass] = !this.hasMatch;\n    }\n    return classes;\n  }\n\n  /**\n   * Splits the text to highlight into 3 parts: a starting part, the matching part\n   * and the ending part. If there is no match between the text and the highlight, the `start`\n   * property will contain the whole text.\n   *\n   * @returns An object containing the different parts of the text.\n   * @internal\n   */\n  protected get matchParts(): HighlightMatch {\n    const matcherIndex = normalizeString(this.text).indexOf(normalizeString(this.highlight));\n    return matcherIndex !== -1 && this.highlight\n      ? this.splitAt(this.text.trim(), matcherIndex, matcherIndex + this.highlight.trim().length)\n      : { start: this.text, match: '', end: '' };\n  }\n\n  /**\n   * Splits the label in three parts based on two indexes.\n   *\n   * @param label - The string that will be divided in three parts.\n   * @param start - The first index that the label will be divided by.\n   * @param end - The second index that the label will be divided by.\n   *\n   * @returns The three parts of the divided label.\n   * @internal\n   */\n  protected splitAt(label: string, start: number, end: number): HighlightMatch {\n    return {\n      start: label.substring(0, start),\n      match: label.substring(start, end),\n      end: label.substring(end)\n    };\n  }\n}\n\n/**\n * Contains the different parts of a string match.\n */\ninterface HighlightMatch {\n  /**\n   * When the match does not happen from the beginning of the string, the initial unmatched\n   * part.\n   */\n  start: string;\n  /**\n   * The part of the text that is matching.\n   */\n  match: string;\n  /**\n   * When the match does not extend until the end, the remaining unmatched string.\n   */\n  end: string;\n}\n"],"names":[],"mappings":";;;;;;AAmCA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,MAAM,CAC3C,iBAAiB,CAAC,CAAC,cAAc,EAAE,mBAAmB,CAAC,CAAC,CACzD;;;;;;;;IA8BC,IAAc,QAAQ;QACpB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;KAChC;;;;;;;;;;;;IAaD,IAAc,iBAAiB;QAC7B,MAAM,OAAO,GAAkB;YAC7B,wBAAwB,EAAE,IAAI,CAAC,QAAQ;YACvC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;YACjC,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;SACjC,CAAC;QACF,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC7C;QACD,OAAO,OAAO,CAAC;KAChB;;;;;;;;;IAUD,IAAc,UAAU;QACtB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACzF,OAAO,YAAY,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS;cACxC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC;cACzF,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;KAC9C;;;;;;;;;;;IAYS,OAAO,CAAC,KAAa,EAAE,KAAa,EAAE,GAAW;QACzD,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;YAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;YAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC;SAC1B,CAAC;KACH;CACF,CAAA;AAlFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;uCACD;AAQrB;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;4CACI;AAM1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;6CACK;AAvBR,SAAS;IAH7B,SAAS,CAAC;QACT,UAAU,EAAE,EAAE,SAAS,EAAE;KAC1B,CAAC;GACmB,SAAS,CA2F7B;aA3FoB,SAAS;;;;"}