npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.68 → 3.0.0-alpha.70 - Mend

@empathyco/x-components 3.0.0-alpha.68 → 3.0.0-alpha.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,28 @@
 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.70](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.69...@empathyco/x-components@3.0.0-alpha.70) (2022-03-21)
+**Note:** Version bump only for package @empathyco/x-components
+# 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.69](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.68...@empathyco/x-components@3.0.0-alpha.69) (2022-03-18)
+### Features
+- **history-queries:** add `my-history` component
+  ([a7de7f2](https://github.com/empathyco/x/commit/a7de7f297251bf4290787e362f46b2ab3ec6a428)),
+  closes [EX-3582](https://searchbroker.atlassian.net/browse/EX-3582)
+# 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.68](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.67...@empathyco/x-components@3.0.0-alpha.68) (2022-03-16)
 ### Bug Fixes

package/core/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css CHANGED Viewed

@@ -100,6 +100,20 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
+}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -7552,18 +7566,3 @@
 .x-normal-case {
   text-transform: none;
 }
-.x-button--card.x-button,
-.x-button--card .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-card
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-card
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-card
-  );
-}

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

@@ -86,6 +86,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [MainScroll](./x-components.mainscroll.md) | Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.<!-- -->Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component. |
 |  [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
 |  [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
+|  [MyHistory](./x-components.myhistory.md) | This component renders the complete list of suggestions coming from the user queries history. |
 |  [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of suggestions, 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>. |
 |  [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. |
 |  [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. |

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

@@ -0,0 +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; [MyHistory](./x-components.myhistory.md) &gt; [animation](./x-components.myhistory.animation.md)
+## MyHistory.animation property
+Animation component that will be used to animate the suggestions.
+<b>Signature:</b>
+```typescript
+protected animation: Vue;
+```

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

@@ -0,0 +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; [MyHistory](./x-components.myhistory.md)
+## MyHistory class
+This component renders the complete list of suggestions coming from the user queries history.
+<b>Signature:</b>
+```typescript
+export default class MyHistory extends Vue
+```
+<b>Extends:</b> 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) |  | Vue | Animation component that will be used to animate the suggestions. |

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

@@ -27,55 +27,154 @@ made in the past.
 | <code>suggestion-content</code>        | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a span tag |
 | <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index                                                                                                      |
-## Examples
+## Events
-This component renders a list of suggestions coming from the user queries history
+This component doesn't emit events.
-### Default usage
+## See it in action
-No props are required for the usage of this component.
+Here you have a basic example of how the HistoryQueries is rendered.
 ```vue
-<HistoryQueries />
+<template>
+  <HistoryQueries />
+</template>
+<script>
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries
+  }
+};
+</script>
 ```
-The component has two optional props. `animation` to render the component with an animation and
-`maxItemToRender` to limit the number of history queries will be rendered (by default it is 5).
+### Play with props
+In this example, the history queries have been limited to render a maximum of 10 queries (by default
+it is 5).
+```vue
+<template>
+  <HistoryQueries :maxItemsToRender="10" />
+</template>
+<script>
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries
+  }
+};
+</script>
+```
+### Play with the animation
+```vue
+<template>
+  <HistoryQueries :animation="fadeAndSlide" />
+</template>
+<script>
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries
+  },
+  data() {
+    return {
+      fadeAndSlide: FadeAndSlide
+    };
+  }
+};
+</script>
+```
+### Play with suggestion slot
+In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
+`suggestion` slot (although any other component could potentially be passed).
 ```vue
-<HistoryQueries :animation="FadeAndSlide" :maxItemsToRender="10" />
+<template>
+  <HistoryQueries #suggestion="{ suggestion }">
+    <HistoryQuery :suggestion="suggestion"></HistoryQuery>
+  </HistoryQueries>
+</template>
+<script>
+import {
+  HistoryQueries,
+  HistoryQuery
+} from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries,
+    HistoryQuery
+  }
+};
+</script>
 ```
-### Overriding Suggestion component
+### Play with suggestion-content slot
-The default `HistoryQuery` component that is used in every suggestion can be replaced. To do so, the
-`suggestion` slot is available, containing the history query data under the `suggestion` property.
-Remember that if HistoryQuery component wasn't used the `handleHistoryQuerySelection` method needs
-to be implemented emitting the needed events.
+To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
+passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
+passed.
 ```vue
-<HistoryQueries>
-  <template #suggestion="{ suggestion }">
-    <img class="x-history-query__icon" src="./history-query-extra-icon.svg"/>
-    <HistoryQuery :suggestion="suggestion"/>
-  </template>
-</HistoryQueries>
+<template>
+  <HistoryQueries #suggestion-content="{ suggestion }">
+    <span>{{ suggestion.query }}</span>
+  </HistoryQueries>
+</template>
+<script>
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries
+  }
+};
+</script>
 ```
-### Overriding suggestion-content and suggestion-remove-content slot
+### Play with suggestion-content-remove slot
-The content of the `HistoryQuery` component can be overridden. For replacing the default suggestion
-content, the `suggestion-content` slot is available, containing the history query suggestion (in the
-`suggestion` property), and the matching query part HTML (in the `queryHTML` property).
+To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
+passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
+icon to remove the history query.
 ```vue
-<HistoryQueries>
-  <template #suggestion-content="{ queryHTML }">
-    <img class="x-history-query__history-icon" src="./history-icon.svg"/>
-    <span class="x-history-query__matching-part" v-html="queryHTML"></span>
-  </template>
-  <template #suggestion-remove-content>
-    <img class="x-history-queries__remove" src="./remove-icon.svg"/>
-  </template>
-</HistoryQueries>
+<template>
+  <HistoryQueries #suggestion-content-remove="{ suggestion }">
+    <CrossIcon />
+  </HistoryQueries>
+</template>
+<script>
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+import { CrossIcon } from "@empathyco/x-components";
+export default {
+  name: "HistoryQueriesDemo",
+  components: {
+    HistoryQueries,
+    CrossIcon
+  }
+};
+</script>
 ```

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

@@ -0,0 +1,157 @@
+---
+title: MyHistory
+---
+# MyHistory
+This component renders the complete 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.
+## Props
+| Name                   | Description                                                       | Type             | Default       |
+| ---------------------- | ----------------------------------------------------------------- | ---------------- | ------------- |
+| <code>animation</code> | Animation component that will be used to animate the suggestions. | <code>Vue</code> | <code></code> |
+## Slots
+| Name                                   | Description                         | Bindings<br />(name - type - description)                                                                                                  |
+| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| <code>suggestion</code>                | History Query item                  | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
+| <code>suggestion-content</code>        | History Query content               | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
+| <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
+## Events
+This component doesn't emit events.
+## See it in action
+Here you have a basic example of how the MyHistory is rendered.
+```vue
+<template>
+  <MyHistory />
+</template>
+<script>
+import { MyHistory } from "@empathyco/x-components/history-queries";
+export default {
+  name: "MyHistoryDemo",
+  components: {
+    MyHistory
+  }
+};
+</script>
+```
+### Play with the animation
+```vue
+<template>
+  <MyHistory :animation="fadeAndSlide" />
+</template>
+<script>
+import { MyHistory } from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+export default {
+  name: "MyHistoryDemo",
+  components: {
+    MyHistory
+  },
+  data() {
+    return {
+      fadeAndSlide: FadeAndSlide
+    };
+  }
+};
+</script>
+```
+### Play with suggestion slot
+In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
+`suggestion` slot (although any other component could potentially be passed).
+```vue
+<template>
+  <MyHistory #suggestion="{ suggestion }">
+    <HistoryQuery :suggestion="suggestion"></HistoryQuery>
+  </MyHistory>
+</template>
+<script>
+import {
+  MyHistory,
+  HistoryQuery
+} from "@empathyco/x-components/history-queries";
+export default {
+  name: "MyHistoryDemo",
+  components: {
+    MyHistory,
+    HistoryQuery
+  }
+};
+</script>
+```
+### Play with suggestion-content slot
+To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
+passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
+passed.
+```vue
+<template>
+  <MyHistory #suggestion-content="{ suggestion }">
+    <span>{{ suggestion.query }}</span>
+  </MyHistory>
+</template>
+<script>
+import { MyHistory } from "@empathyco/x-components/history-queries";
+export default {
+  name: "MyHistoryDemo",
+  components: {
+    MyHistory
+  }
+};
+</script>
+```
+### Play with suggestion-content-remove slot
+To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
+passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
+icon to remove the history query.
+```vue
+<template>
+  <MyHistory #suggestion-content-remove="{ suggestion }">
+    <CrossIcon />
+  </MyHistory>
+</template>
+<script>
+import { MyHistory } from "@empathyco/x-components/history-queries";
+import { CrossIcon } from "@empathyco/x-components";
+export default {
+  name: "MyHistoryDemo",
+  components: {
+    MyHistory,
+    CrossIcon
+  }
+};
+</script>
+```

package/history-queries/index.js CHANGED Viewed

@@ -1,6 +1,7 @@
 export { default as ClearHistoryQueries } from '../js/x-modules/history-queries/components/clear-history-queries.vue.js';
 export { default as HistoryQueries } from '../js/x-modules/history-queries/components/history-queries.vue.js';
 export { default as HistoryQuery } from '../js/x-modules/history-queries/components/history-query.vue.js';
+export { default as MyHistory } from '../js/x-modules/history-queries/components/my-history.vue.js';
 export { default as RemoveHistoryQuery } from '../js/x-modules/history-queries/components/remove-history-query.vue.js';
 export { AddQueryToHistoryAction, addQueryToHistory } from '../js/x-modules/history-queries/store/actions/add-query-to-history.action.js';
 export { loadHistoryQueriesFromBrowserStorage } from '../js/x-modules/history-queries/store/actions/load-history-queries-from-browser-storage.action.js';

package/js/components/suggestions/base-suggestion.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ suggestion, queryHTML }\">\n <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n </slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { QueryFeature } from '../../types/origin';\n import { forEach } from '../../utils/object';\n import { normalizeString } from '../../utils/normalize';\n import { sanitize } from '../../utils/sanitize';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n\n /*\n Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent \| XEvents} that will be emitted\n * on click with a given feature.\n \n The default slot receives the suggestion and the matched query has props.\n \n @public\n /\n @Component\n export default class BaseSuggestion extends Vue {\n /\n The normalized query of the module using this component.\n \n @public\n /\n @Prop({ default: '' })\n protected query!: string;\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /\n The {@link XEvent \| XEvents} that will be emitted when selecting a suggestion.\n \n @public\n /\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /\n The event handler that will be triggered when clicking on a suggestion.\n \n @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent \| XEvents} to emit.\n * @public\n /\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\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 If the query has a matching part or not.\n * @internal\n /\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /\n Checks if the suggestion is curated and if it should be highlighted.\n \n @returns True if the suggestion is curated and should be highlighted.\n \n @internal\n /\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /\n Generates css classes dynamically.\n \n @remarks\n * 'x-suggestion--matching added when the query should be matched.\n \n @returns The {@link VueCSSClasses} classes.\n * @public\n /\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated,\n };\n }\n\n /\n Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n \n @remarks\n * The query prop should be normalized.\n \n @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n /\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\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 skip - 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, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n### Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n### Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n <template #default=\"{ suggestion, queryHTML }\">\n <span\n class=\"my-suggestion\"\n v-html=\"queryHTML\"\n :aria-label=\"suggestion.query\"\n />\n </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ suggestion, queryHTML }\">\n <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n </slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { QueryFeature } from '../../types/origin';\n import { forEach } from '../../utils/object';\n import { normalizeString } from '../../utils/normalize';\n import { sanitize } from '../../utils/sanitize';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n\n /*\n Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent \| XEvents} that will be emitted\n * on click with a given feature.\n \n The default slot receives the suggestion and the matched query has props.\n \n @public\n /\n @Component\n export default class BaseSuggestion extends Vue {\n /\n The normalized query of the module using this component.\n \n @public\n /\n @Prop({ default: '' })\n protected query!: string;\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /\n The {@link XEvent \| XEvents} that will be emitted when selecting a suggestion.\n \n @public\n /\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /\n The event handler that will be triggered when clicking on a suggestion.\n \n @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent \| XEvents} to emit.\n * @public\n /\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\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 If the query has a matching part or not.\n * @internal\n /\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /\n Checks if the suggestion is curated and if it should be highlighted.\n \n @returns True if the suggestion is curated and should be highlighted.\n \n @internal\n /\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /\n Generates css classes dynamically.\n \n @remarks\n * 'x-suggestion--matching added when the query should be matched.\n \n @returns The {@link VueCSSClasses} classes.\n * @public\n /\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated\n };\n }\n\n /\n Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n \n @remarks\n * The query prop should be normalized.\n \n @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n /\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\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 skip - 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, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n### Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n### Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n <template #default=\"{ suggestion, queryHTML }\">\n <span\n class=\"my-suggestion\"\n v-html=\"queryHTML\"\n :aria-label=\"suggestion.query\"\n />\n </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

@@ -78,7 +78,7 @@ let BaseSuggestion = class BaseSuggestion extends Vue {
     get dynamicCSSClasses() {
         return {
             'x-suggestion--matching': this.hasMatchingQuery,
-            'x-suggestion--is-curated': this.shouldHighlightCurated,
+            'x-suggestion--is-curated': this.shouldHighlightCurated
         };
     }
     /**

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/*\n Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent \| XEvents} that will be emitted\n * on click with a given feature.\n \n The default slot receives the suggestion and the matched query has props.\n \n @public\n /\n@Component\nexport default class BaseSuggestion extends Vue {\n /\n The normalized query of the module using this component.\n \n @public\n /\n @Prop({ default: '' })\n protected query!: string;\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /\n The {@link XEvent \| XEvents} that will be emitted when selecting a suggestion.\n \n @public\n /\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /\n The event handler that will be triggered when clicking on a suggestion.\n \n @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent \| XEvents} to emit.\n * @public\n /\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\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 If the query has a matching part or not.\n * @internal\n /\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /\n Checks if the suggestion is curated and if it should be highlighted.\n \n @returns True if the suggestion is curated and should be highlighted.\n \n @internal\n /\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /\n Generates css classes dynamically.\n \n @remarks\n * 'x-suggestion--matching added when the query should be matched.\n \n @returns The {@link VueCSSClasses} classes.\n * @public\n /\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated,\n };\n }\n\n /\n Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n \n @remarks\n * The query prop should be normalized.\n \n @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n /\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\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 skip - 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, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;;;AAUA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;;;;;;;;;;;;IAoD7C,IAAc,MAAM;QAClB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,GAAG,IAAI,CAAC,wBAAwB;SACjC,CAAC;KACH;;;;;;IAOS,UAAU;QAClB,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO;YAClC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,IAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;;;;IASD,IAAc,gBAAgB;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpF;;;;;;;;IASD,IAAc,sBAAsB;QAClC,OAAO,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;KAC7D;;;;;;;;;;IAWD,IAAc,iBAAiB;QAC7B,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;YAC/C,0BAA0B,EAAE,IAAI,CAAC,sBAAsB;SACxD,CAAC;KACH;;;;;;;;;;;IAYD,IAAc,SAAS;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhF,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EACrB,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,CAAC;YAEF,MAAM,aAAa,GAAG,+DAA+D,CAAC;YACtF,OAAO,GAAG,SAAS,SAAS,aAAa,IAAI,QAAQ,UAAU,GAAG,EAAE,CAAC;SACtE;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;;;;;;IAYS,OAAO,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY;QAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAE3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;KACzE;CACF,CAAA;AArJC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;6CACG;AAQzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACS;AAQlC;IADC,IAAI,EAAE;+CAC0B;AAQjC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gEACkC;AAQ3D;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACH;AAvClB,cAAc;IADlC,SAAS;GACW,cAAc,CA4JlC;aA5JoB,cAAc;;;;"}
1	+ {"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/*\n Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent \| XEvents} that will be emitted\n * on click with a given feature.\n \n The default slot receives the suggestion and the matched query has props.\n \n @public\n /\n@Component\nexport default class BaseSuggestion extends Vue {\n /\n The normalized query of the module using this component.\n \n @public\n /\n @Prop({ default: '' })\n protected query!: string;\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /\n The {@link XEvent \| XEvents} that will be emitted when selecting a suggestion.\n \n @public\n /\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /\n The event handler that will be triggered when clicking on a suggestion.\n \n @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent \| XEvents} to emit.\n * @public\n /\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\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 If the query has a matching part or not.\n * @internal\n /\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /\n Checks if the suggestion is curated and if it should be highlighted.\n \n @returns True if the suggestion is curated and should be highlighted.\n \n @internal\n /\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /\n Generates css classes dynamically.\n \n @remarks\n * 'x-suggestion--matching added when the query should be matched.\n \n @returns The {@link VueCSSClasses} classes.\n * @public\n /\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated\n };\n }\n\n /\n Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n \n @remarks\n * The query prop should be normalized.\n \n @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n /\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\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 skip - 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, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;;;AAUA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;;;;;;;;;;;;IAoD7C,IAAc,MAAM;QAClB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,GAAG,IAAI,CAAC,wBAAwB;SACjC,CAAC;KACH;;;;;;IAOS,UAAU;QAClB,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO;YAClC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,IAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;;;;IASD,IAAc,gBAAgB;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpF;;;;;;;;IASD,IAAc,sBAAsB;QAClC,OAAO,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;KAC7D;;;;;;;;;;IAWD,IAAc,iBAAiB;QAC7B,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;YAC/C,0BAA0B,EAAE,IAAI,CAAC,sBAAsB;SACxD,CAAC;KACH;;;;;;;;;;;IAYD,IAAc,SAAS;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhF,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EACrB,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,CAAC;YAEF,MAAM,aAAa,GAAG,+DAA+D,CAAC;YACtF,OAAO,GAAG,SAAS,SAAS,aAAa,IAAI,QAAQ,UAAU,GAAG,EAAE,CAAC;SACtE;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;;;;;;IAYS,OAAO,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY;QAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAE3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;KACzE;CACF,CAAA;AArJC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;6CACG;AAQzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACS;AAQlC;IADC,IAAI,EAAE;+CAC0B;AAQjC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gEACkC;AAQ3D;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACH;AAvClB,cAAc;IADlC,SAAS;GACW,cAAc,CA4JlC;aA5JoB,cAAc;;;;"}

package/js/index.js CHANGED Viewed

@@ -204,6 +204,7 @@ export { default as FacetsMixin } from './x-modules/facets/components/facets.mix
 export { default as ClearHistoryQueries } from './x-modules/history-queries/components/clear-history-queries.vue.js';
 export { default as HistoryQueries } from './x-modules/history-queries/components/history-queries.vue.js';
 export { default as HistoryQuery } from './x-modules/history-queries/components/history-query.vue.js';
+export { default as MyHistory } from './x-modules/history-queries/components/my-history.vue.js';
 export { default as RemoveHistoryQuery } from './x-modules/history-queries/components/remove-history-query.vue.js';
 export { AddQueryToHistoryAction, addQueryToHistory } from './x-modules/history-queries/store/actions/add-query-to-history.action.js';
 export { loadHistoryQueriesFromBrowserStorage } from './x-modules/history-queries/store/actions/load-history-queries-from-browser-storage.action.js';

package/js/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-history-queries\"\n data-test=\"history-queries\"\n :animation=\"animation\"\n :maxItemsToRender=\"maxItemsToRender\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default=\"{ queryHTML }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a span tag\n @binding {number} index - History Query suggestion index\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQuery from './history-query.vue';\n\n /*\n This component renders a list of suggestions coming from the user queries history.\n \n @remarks\n \n Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n \n @public\n /\n @Component({\n components: { BaseSuggestions, HistoryQuery },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class HistoryQueries extends Vue {\n /\n Animation component that will be used to animate the suggestions.\n \n @public\n /\n @Prop()\n protected animation!: Vue;\n\n /\n Maximum number of history queries to show. It should be a lower number than the\n * {@link HistoryQueriesConfig.maxItemsToStore}. If it is not provided, it will show\n * all the stored `HistoryQueries`.\n /\n @Prop()\n protected maxItemsToRender?: number;\n\n /\n The filtered list of history queries.\n \n @internal\n */\n @Getter('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQueryModel[];\n }\n</script>\n\n<docs lang=\"mdx\">\n## ~~Examples~~\n\nThis component ~~renders~~ a ~~list~~ of ~~suggestions~~ ~~coming~~ ~~from the user queries history~~\n\~~n###~~ ~~Default~~ ~~usage\n\nNo~~ ~~props~~ ~~are~~ ~~required~~ ~~for~~ the ~~usage~~ of ~~this component~~.\n\n```vue\n<HistoryQueries />\n~~```\~~n\~~nThe~~ ~~component~~ ~~has~~ ~~two~~ ~~optional~~ ~~props.~~ ~~`animation`~~ to ~~render~~ ~~the~~ ~~component~~ with ~~an animation and~~\n~~`maxItemToRender`~~ to ~~limit~~ the ~~number of~~ history queries ~~will~~ be ~~rendered~~ (by default it is 5).\n\n```vue\n<HistoryQueries :~~animation=\"FadeAndSlide\" :~~maxItemsToRender=\"10\" />\n```\n\n### ~~Overriding~~ ~~Suggestion~~ ~~component~~\n\~~nThe~~ ~~default~~ ~~`HistoryQuery`~~ ~~component~~ ~~that~~ is ~~used~~ in ~~every~~ ~~suggestion~~ ~~can~~ be ~~replaced.~~ To do ~~so,~~ ~~the~~\n~~`suggestion`~~ ~~slot~~ is ~~available,~~ ~~containing~~ ~~the~~ ~~history~~ ~~query~~ ~~data~~ ~~under~~ the `~~suggestion~~` ~~property.\nRemember~~ ~~that~~ if ~~HistoryQuery~~ ~~component wasn't used~~ the `~~handleHistoryQuerySelection~~` ~~method~~ ~~needs\nto~~ be ~~implemented~~ ~~emitting~~ ~~the~~ ~~needed~~ ~~events~~.\n\n```vue\n<~~HistoryQueries~~>\n <~~template~~ #suggestion=\"{ suggestion }\">\n <~~img~~ ~~class~~=\"x-history-~~query__icon~~\" ~~src=\"./history-query-extra-icon.svg~~\~~"/>\~~n ~~<HistoryQuery~~ :~~suggestion=\"suggestion~~\~~"/>\~~n ~~</template>\~~n</~~HistoryQueries~~>\n```\n\n### ~~Overriding~~ ~~suggestion-content~~ ~~and~~ suggestion-~~remove-~~content slot\n\~~nThe~~ ~~content~~ of the `HistoryQuery` component ~~can~~ be ~~overridden. For replacing~~ the ~~default suggestion\ncontent, the~~ `suggestion-content` slot ~~is available~~, ~~containing~~ ~~the history query suggestion (~~in ~~the\n`suggestion` property)~~, ~~and~~ ~~the~~ ~~matching~~ ~~query~~ ~~part~~ ~~HTML~~ ~~(in~~ ~~the~~ ~~`queryHTML` property)~~.\n\n```vue\n<~~HistoryQueries~~>\n <~~template~~ #suggestion-content=\"{ ~~queryHTML~~ }\">\n <~~img~~ ~~class=\"~~x-history-~~query__history-icon~~\" ~~src=\"./history-icon.svg~~\~~"/>\~~n ~~<span~~ ~~class=\"~~x-history-~~query__matching-part~~\" v-~~html=\"queryHTML~~\~~"></span>\~~n </template>\n <~~template~~ #suggestion-remove~~-content~~>\n <~~img~~ ~~class=\"~~x-history-~~queries__remove\"~~ ~~src=\"./remove~~-~~icon.svg~~\~~"/>\~~n ~~</template>\~~n</~~HistoryQueries~~>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-history-queries\"\n data-test=\"history-queries\"\n :animation=\"animation\"\n :maxItemsToRender=\"maxItemsToRender\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default=\"{ queryHTML }\">\n <!-- eslint-disable max-len -->\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a span tag\n @binding {number} index - History Query suggestion index\n -->\n <!-- eslint-enable max-len -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, queryHTML }\" />\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { Getter } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQuery from './history-query.vue';\n\n /*\n This component renders a list of suggestions coming from the user queries history.\n \n @remarks\n \n Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n \n @public\n /\n @Component({\n components: { BaseSuggestions, HistoryQuery },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class HistoryQueries extends Vue {\n /\n Animation component that will be used to animate the suggestions.\n \n @public\n /\n @Prop()\n protected animation!: Vue;\n\n /\n Maximum number of history queries to show. It should be a lower number than the\n * {@link HistoryQueriesConfig.maxItemsToStore}. If it is not provided, it will show\n * all the stored `HistoryQueries`.\n /\n @Prop()\n protected maxItemsToRender?: number;\n\n /\n The filtered list of history queries.\n \n @internal\n */\n @Getter('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQueryModel[];\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the HistoryQueries is rendered.\n\n```vue\n<template>\n <HistoryQueries />\n</template>\n\n<script>\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the history queries have been limited to render a maximum of 10 queries (by default\nit is 5).\n\n```vue\n<template>\n <HistoryQueries :maxItemsToRender=\"10\" />\n</template>\n\n<script>\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <HistoryQueries :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <HistoryQueries #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </HistoryQueries>\n</template>\n\n<script>\n import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <HistoryQueries #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </HistoryQueries>\n</template>\n\n<script>\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <HistoryQueries #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </HistoryQueries>\n</template>\n\n<script>\n import { HistoryQueries } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'HistoryQueriesDemo',\n components: {\n HistoryQueries,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/my-history.vue.js ADDED Viewed

@@ -0,0 +1,117 @@
+import script from './my-history.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("BaseSuggestions", {
+    staticClass: "x-my-history-queries",
+    attrs: {
+      suggestions: _vm.historyQueries,
+      "data-test": "my-history-queries",
+      animation: _vm.animation,
+    },
+    scopedSlots: _vm._u(
+      [
+        {
+          key: "default",
+          fn: function (ref) {
+            var suggestion = ref.suggestion;
+            var index = ref.index;
+            return [
+              _vm._t(
+                "suggestion",
+                function () {
+                  return [
+                    _c("HistoryQuery", {
+                      staticClass: "x-history-queries__item",
+                      attrs: {
+                        suggestion: suggestion,
+                        "data-test": "history-query-item",
+                      },
+                      scopedSlots: _vm._u(
+                        [
+                          {
+                            key: "default",
+                            fn: function () {
+                              return [
+                                _vm._t("suggestion-content", null, null, {
+                                  suggestion: suggestion,
+                                  index: index,
+                                }),
+                              ]
+                            },
+                            proxy: true,
+                          },
+                          {
+                            key: "remove-button-content",
+                            fn: function () {
+                              return [
+                                _vm._t(
+                                  "suggestion-remove-content",
+                                  null,
+                                  null,
+                                  { suggestion: suggestion, index: index }
+                                ),
+                              ]
+                            },
+                            proxy: true,
+                          },
+                        ],
+                        null,
+                        true
+                      ),
+                    }),
+                  ]
+                },
+                null,
+                { suggestion: suggestion, index: index }
+              ),
+            ]
+          },
+        },
+      ],
+      null,
+      true
+    ),
+  })
+};
+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=my-history.vue.js.map

package/js/x-modules/history-queries/components/my-history.vue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-my-history-queries\"\n data-test=\"my-history-queries\"\n :animation=\"animation\"\n >\n <template #default=\"{ suggestion, index }\">\n \n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default>\n \n \n \n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n <template #remove-button-content>\n \n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { State } from '../../../components/decorators/store.decorators';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQueryComponent from './history-query.vue';\n\n /**\n * This component renders the complete list of suggestions coming from the user queries history.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n *\n * @public\n */\n @Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop()\n protected animation!: Vue;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n <MyHistory />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <MyHistory #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <MyHistory #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { __decorate } from 'tslib';
+import Vue from 'vue';
+import { Prop, Component } from 'vue-property-decorator';
+import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { State } from '../../../components/decorators/store.decorators.js';
+import __vue_component__$1 from '../../../components/suggestions/base-suggestions.vue.js';
+import { historyQueriesXModule } from '../x-module.js';
+import __vue_component__ from './history-query.vue.js';
+/**
+ * This component renders the complete list of suggestions coming from the user queries history.
+ *
+ * @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.
+ *
+ * @public
+ */
+let MyHistory = class MyHistory extends Vue {
+};
+__decorate([
+    Prop()
+], MyHistory.prototype, "animation", void 0);
+__decorate([
+    State('historyQueries', 'historyQueries')
+], MyHistory.prototype, "historyQueries", void 0);
+MyHistory = __decorate([
+    Component({
+        components: { HistoryQuery: __vue_component__, BaseSuggestions: __vue_component__$1 },
+        mixins: [xComponentMixin(historyQueriesXModule)]
+    })
+], MyHistory);
+var script = MyHistory;
+export { script as default };
+//# sourceMappingURL=my-history.vue_rollup-plugin-vue_script.vue.js.map

package/js/x-modules/history-queries/components/my-history.vue_rollup-plugin-vue_script.vue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"my-history.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { HistoryQuery } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { State } from '../../../components/decorators/store.decorators';\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\nimport { historyQueriesXModule } from '../x-module';\nimport HistoryQueryComponent from './history-query.vue';\n\n/**\n * This component renders the complete list of suggestions coming from the user queries history.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n *\n * @public\n */\n@Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n})\nexport default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop()\n protected animation!: Vue;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n}\n"],"names":["HistoryQueryComponent","BaseSuggestions"],"mappings":";;;;;;;;;AAqDA;;;;;;;;;;;AAeA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;CAgBzC,CAAA;AATC;IADC,IAAI,EAAE;4CACmB;AAQ1B;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;iDACH;AAfpB,SAAS;IAJ7B,SAAS,CAAC;QACT,UAAU,EAAE,EAAE,YAAY,EAAEA,iBAAqB,mBAAEC,mBAAe,EAAE;QACpE,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,SAAS,CAgB7B;aAhBoB,SAAS;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.68",
+  "version": "3.0.0-alpha.70",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -127,5 +127,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "71019f0cd366c7dd8f89e8ced3cb527a942da2b2"
+  "gitHead": "c410c0ffd3032023573cc21760dede6432926a61"
 }

package/report/x-components.api.json CHANGED Viewed

@@ -24105,6 +24105,63 @@
             "endIndex": 9
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@empathyco/x-components!MyHistory:class",
+          "docComment": "/**\n * This component renders the complete list of suggestions coming from the user queries history.\n *\n * @remarks\n *\n * 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.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export default class MyHistory extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "Vue",
+              "canonicalReference": "vue!Vue:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "MyHistory",
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!MyHistory#animation:member",
+              "docComment": "/**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected animation: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Vue",
+                  "canonicalReference": "vue!Vue:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "animation",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "Function",
           "canonicalReference": "@empathyco/x-components!namespacedDebounce:function(1)",

package/report/x-components.api.md CHANGED Viewed

@@ -2286,6 +2286,13 @@ export type MutationsTree<State extends Dictionary, Mutations extends MutationsD
     [Key in keyof Mutations]: (state: State, payload: ExtractPayload<Mutations[Key]>) => void;
 };
+// @public
+export class MyHistory extends Vue_2 {
+    protected animation: Vue_2;
+    // @internal
+    historyQueries: HistoryQuery_2[];
+}
 // @public
 export function namespacedDebounce<ModuleName extends XModuleName>(moduleName: ModuleName): NamespacedTimeWireOperator<ModuleName>;

package/types/x-modules/history-queries/components/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export { default as ClearHistoryQueries } from './clear-history-queries.vue';
 export { default as HistoryQueries } from './history-queries.vue';
 export { default as HistoryQuery } from './history-query.vue';
+export { default as MyHistory } from './my-history.vue';
 export { default as RemoveHistoryQuery } from './remove-history-query.vue';
 //# sourceMappingURL=index.d.ts.map

package/types/x-modules/history-queries/components/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}

package/types/x-modules/history-queries/components/my-history.vue.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { HistoryQuery } from '@empathyco/x-types';
+import Vue from 'vue';
+/**
+ * This component renders the complete list of suggestions coming from the user queries history.
+ *
+ * @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.
+ *
+ * @public
+ */
+export default class MyHistory extends Vue {
+    /**
+     * Animation component that will be used to animate the suggestions.
+     *
+     * @public
+     */
+    protected animation: Vue;
+    /**
+     * The list of history queries.
+     *
+     * @internal
+     */
+    historyQueries: HistoryQuery[];
+}
+//# sourceMappingURL=my-history.vue?rollup-plugin-vue=script.d.ts.map

package/types/x-modules/history-queries/components/my-history.vue.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"my-history.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4CA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB;;;;;;;;;;GAUG;AAKH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,GAAG;IACxC;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,CAAC;IAE1B;;;;OAIG;IAEI,cAAc,EAAG,YAAY,EAAE,CAAC;CACxC"}