npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.6 → 6.0.0-alpha.61 - Mend

@empathyco/x-components 6.0.0-alpha.6 → 6.0.0-alpha.61

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 (833) hide show

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 ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {String} query - The query that the suggestion belongs to\n @binding {Filter} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ query, suggestion, filter }\">\n <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n </slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n import { forEach } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { QueryFeature } from '../../types';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n import Highlight from '../highlight.vue';\n import { use$x } from '../../composables/index';\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} 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 export default defineComponent({\n components: { Highlight },\n props: {\n /\n The normalized query of the module using this component.\n \n @public\n /\n query: {\n type: String,\n default: ''\n },\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n suggestion: {\n type: Object as PropType<Suggestion>,\n required: true\n },\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n //TODO: set to true when the suggestions components pass it.\n feature: {\n type: String as PropType<QueryFeature>\n },\n\n /\n The {@link XEvent} that will be emitted when selecting a suggestion.\n \n @public\n /\n suggestionSelectedEvents: {\n type: Object as PropType<Partial<XEventsTypes>>,\n required: true\n },\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n highlightCurated: {\n type: Boolean\n }\n },\n\n setup(props) {\n const el = ref<HTMLElement \| null>(null);\n\n const $x = use$x();\n\n /\n Returns the suggestion filter object.\n * It is a BooleanFilter because the label is needed.\n * It returns only the first element because the facets and filters are being planned\n * in the BaseSuggestions component.\n \n @returns The filter.\n * @public\n /\n const filter = computed<BooleanFilter \| undefined>(\n () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n );\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 * UserClickedAFilter: suggestion.facets[0].filters[0]\n * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent} to emit.\n * @public\n /\n const events = computed<Partial<XEventsTypes>>(() => {\n const filterEvent: Partial<XEventsTypes> = filter.value\n ? { UserClickedAFilter: filter.value }\n : {};\n return {\n UserAcceptedAQuery: props.suggestion.query,\n UserSelectedASuggestion: props.suggestion,\n ...props.suggestionSelectedEvents,\n ...filterEvent\n };\n });\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n const emitEvents = (): void => {\n forEach(events.value, (event, payload): void => {\n $x.emit(event, payload, {\n target: el.value!,\n feature: props.feature\n });\n });\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 const shouldHighlightCurated = computed<boolean>(\n () => props.highlightCurated && !!props.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 const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n 'x-suggestion--is-curated': shouldHighlightCurated.value\n }));\n\n return {\n el,\n filter,\n emitEvents,\n dynamicCSSClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the suggestion query\n data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button if the suggestion includes a filter. The\n event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n import { BaseSuggestion } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionDemo',\n components: {\n BaseSuggestion\n },\n data() {\n return {\n query: 'st',\n suggestion: {\n modelName: 'QuerySuggestion',\n query: 'steak',\n facet: {\n namedModel: 'SimpleFacet',\n id: 'category',\n label: 'Category',\n filters: [\n {\n id: 'category:groceries',\n modelName: 'SimpleFilter',\n facetId: 'category-facet',\n label: 'Groceries',\n selected: false,\n totalResults: 10\n }\n ]\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n <span>🔍</span>\n <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n <span v-if=\"filter\">{{ filter.label }}</span>\n </BaseSuggestion>\n</template>\n<script>\n import { BaseSuggestion } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionDemo',\n components: {\n BaseSuggestion\n },\n data() {\n return {\n query: 'st',\n suggestion: {\n modelName: 'QuerySuggestion',\n query: 'steak'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","~~_createCommentVNode","_renderSlot","~~_normalizeProps","_guardReactiveProps","_createVNode","suggestion","filter"],"mappings":";;;;MAU0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;+BAT9BA,gBAWS,CAAA,WAAA,CAAA,CAAA;SAXSC,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MAAa,GAAK,EAAA,IAAA;AAAA,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;~~AACzC~~,MAAA,KAAA,EAAAC,cAAA,~~CAAA~~,~~IAAA~~,CAAA,iBAAA,CAAA;AAAA,KAAA~~;AAMA~~,~~IAAA;AAAA,MACuFC,kBAAA,CAAA,4OAAA,CAAA;AAAA,MAAAC,UAAA,CAApE,~~IAAqB,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAQC,oBAAgB,EAAA;AAAA,UAAG,KAAA,EAAA,qBAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA;UACrDC,SAAM,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAlB,CAA0E,MAAA,EAAA,WAAA,CAAA,CAAA;AAAA,QAVhF,IAAA,CAAA,MAAA,~~IAAAT~~,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n <button ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {String} query - The query that the suggestion belongs to\n @binding {Filter} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ query, suggestion, filter }\">\n <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n </slot>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n import { forEach } from '@empathyco/x-utils';\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { QueryFeature } from '../../types';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n import Highlight from '../highlight.vue';\n import { use$x } from '../../composables/index';\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} 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 export default defineComponent({\n components: { Highlight },\n props: {\n /\n The normalized query of the module using this component.\n \n @public\n /\n query: {\n type: String,\n default: ''\n },\n\n /\n The suggestion to render and use in the default slot.\n \n @public\n /\n suggestion: {\n type: Object as PropType<Suggestion>,\n required: true\n },\n\n /\n The feature from which the events will be emitted.\n \n @public\n /\n //TODO: set to true when the suggestions components pass it.\n feature: {\n type: String as PropType<QueryFeature>\n },\n\n /\n The {@link XEvent} that will be emitted when selecting a suggestion.\n \n @public\n /\n suggestionSelectedEvents: {\n type: Object as PropType<Partial<XEventsTypes>>,\n required: true\n },\n\n /\n Indicates if the curated suggestion should be highlighted.\n \n @public\n /\n highlightCurated: {\n type: Boolean\n }\n },\n\n setup(props) {\n const el = ref<HTMLElement \| null>(null);\n\n const $x = use$x();\n\n /\n Returns the suggestion filter object.\n * It is a BooleanFilter because the label is needed.\n * It returns only the first element because the facets and filters are being planned\n * in the BaseSuggestions component.\n \n @returns The filter.\n * @public\n /\n const filter = computed<BooleanFilter \| undefined>(\n () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n );\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 * UserClickedAFilter: suggestion.facets[0].filters[0]\n * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n \n @returns The {@link XEvent} to emit.\n * @public\n /\n const events = computed<Partial<XEventsTypes>>(() => {\n const filterEvent: Partial<XEventsTypes> = filter.value\n ? { UserClickedAFilter: filter.value }\n : {};\n return {\n UserAcceptedAQuery: props.suggestion.query,\n UserSelectedASuggestion: props.suggestion,\n ...props.suggestionSelectedEvents,\n ...filterEvent\n };\n });\n\n /\n Emits the events when the button is clicked.\n \n @public\n /\n const emitEvents = (): void => {\n forEach(events.value, (event, payload): void => {\n $x.emit(event, payload, {\n target: el.value!,\n feature: props.feature\n });\n });\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 const shouldHighlightCurated = computed<boolean>(\n () => props.highlightCurated && !!props.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 const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n 'x-suggestion--is-curated': shouldHighlightCurated.value\n }));\n\n return {\n el,\n filter,\n emitEvents,\n dynamicCSSClasses\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the suggestion query\n data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks the button if the suggestion includes a filter. The\n event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n import { BaseSuggestion } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionDemo',\n components: {\n BaseSuggestion\n },\n data() {\n return {\n query: 'st',\n suggestion: {\n modelName: 'QuerySuggestion',\n query: 'steak',\n facet: {\n namedModel: 'SimpleFacet',\n id: 'category',\n label: 'Category',\n filters: [\n {\n id: 'category:groceries',\n modelName: 'SimpleFilter',\n facetId: 'category-facet',\n label: 'Groceries',\n selected: false,\n totalResults: 10\n }\n ]\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n <span>🔍</span>\n <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n <span v-if=\"filter\">{{ filter.label }}</span>\n </BaseSuggestion>\n</template>\n<script>\n import { BaseSuggestion } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionDemo',\n components: {\n BaseSuggestion\n },\n data() {\n return {\n query: 'st',\n suggestion: {\n modelName: 'QuerySuggestion',\n query: 'steak'\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_createVNode","suggestion","filter"],"mappings":";;;;MAU0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;+BAT9BA,gBAWS,CAAA,WAAA,CAAA,CAAA;SAXSC,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MAAa,GAAK,EAAA,IAAA;AAAA,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAOzC,MAAA,KAAA,EAAAC,cAAA,CAGO,IAXX,CAAA,iBAAA,CAAA;AAAA,KAAA;;iBASuB,IAAqB,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAQC,oBAAgB,EAAA;AAAA,UAAG,KAAA,EAAA,qBAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA;UACrDC,SAAM,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAlB,CAA0E,MAAA,EAAA,WAAA,CAAA,CAAA;AAAA,QAVhF,IAAA,CAAA,MAAA,IAAAP,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './base-suggestions.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, mergeProps } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createCommentVNode } from 'vue';
 import './base-suggestions.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
@@ -22,7 +22,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "data-test": "suggestion-item"
             },
             [
-              createCommentVNode("\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       "),
               renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { suggestion, index, filter: _ctx.getSuggestionFilter(suggestion) }), void 0, true)
             ],
             2

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

	@@ -1 +1 @@
1	- {"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n <li\n v-for=\"(suggestion, index) in suggestionsToRender\"\n :key=\"suggestionsKeys[index]\"\n class=\"x-suggestions__item\"\n :class=\"suggestionItemClass\"\n data-test=\"suggestion-item\"\n >\n <!--\n @slot (Required) List item content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {number} index - Suggestion index\n @binding {Filter \| undefined} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { Suggestion, Facet } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n import { AnimationProp } from '../../types';\n\n /*\n Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n \n @public\n /\n export default defineComponent({\n name: 'BaseSuggestions',\n props: {\n /\n The list of suggestions to render.\n \n @public\n /\n suggestions: {\n type: Array as PropType<Suggestion[]>,\n required: true\n },\n /\n Animation component that will be used to animate the suggestion.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n /\n Number of suggestions to be rendered.\n \n @public\n /\n maxItemsToRender: Number,\n /\n Boolean value to indicate if the facets should be rendered.\n \n @public\n /\n showFacets: {\n type: Boolean,\n default: false\n },\n /\n When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n * filter should be rendered.\n \n @public\n /\n showPlainSuggestion: {\n type: Boolean,\n default: false\n },\n /* Class inherited by content element. /\n suggestionItemClass: String\n },\n setup: function (props) {\n /\n Creates a suggestion for each one of the filter inside each facet.\n \n @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n \n @internal\n /\n const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n };\n\n /\n Creates a list of suggestions to render based on the configuration of this component.\n \n @returns - The list of suggestions to be rendered by this component.\n \n @internal\n /\n const suggestionsToRender = computed(() =>\n props.suggestions\n .flatMap(suggestion =>\n props.showFacets && suggestion.facets?.length\n ? props.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n : expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, props.maxItemsToRender)\n );\n\n /\n Generates a string from the given facet.\n \n @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n /\n const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&');\n\n /\n Generates a string from the given facets.\n \n @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n /\n const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&');\n\n /\n An array with the unique keys for each suggestion. Required by the `v-for` loop.\n \n @returns An array with the unique keys of the suggestions.\n * @internal\n /\n const suggestionsKeys = computed(() =>\n suggestionsToRender.value.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`\n )\n );\n\n /\n Returns the filter contained by the suggestion.\n \n @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0];\n\n return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-suggestions {\n list-style-type: none;\n }\n\n .x-suggestions,\n .x-suggestions__item {\n display: flex;\n flex-flow: column nowrap;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n <template #default=\"{ suggestion }\">\n <button @click=\"emitSuggestionSelected($event, suggestion)\">\n {{ suggestion.query }}\n </button>\n </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n computed: {\n ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n },\n methods: {\n emitSuggestionSelected(event, suggestion) {\n this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n }\n }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [\n {\n id: 'exampleFacet',\n label: 'exampleFacet',\n modelName: 'SimpleFacet',\n filters: [\n {\n facetId: 'exampleFacet',\n id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n label: 'EXAMPLE',\n selected: false,\n totalResults: 10,\n modelName: 'SimpleFilter'\n }\n ]\n }\n ],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","suggestionsKeys","_Fragment","_renderList","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IAC+D,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AADrE,IAAA,KAAA,EAAA,eAAA;AAAA,GAAA,EAAA;;AAIYC,OAAAA,SAAAA,CAAAA,IAAAA,CAAAA,EAAAA,kBAAAA;AAAAA,QAAqBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;iBACtBL,SALX,EAAA,EAAAM,kBAAA;AAAA,YAKY,IAAA;AAAA,YAAqB;AAAA,cAE3B,0BAAU,KAAiB,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,mBAAA,CAAA,CAAA;AAE3B,cAAA,WAAA,EAAA,iBAAA;AAAA,aAAA;AAMA,YAAA;AAAA,cAAAC,kBAAA,CAAA,uPAAA,CAAA;;;;;;AAfN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
1	+ {"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n <li\n v-for=\"(suggestion, index) in suggestionsToRender\"\n :key=\"suggestionsKeys[index]\"\n class=\"x-suggestions__item\"\n :class=\"suggestionItemClass\"\n data-test=\"suggestion-item\"\n >\n <!--\n @slot (Required) List item content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {number} index - Suggestion index\n @binding {Filter \| undefined} filter - Suggestion's filter\n -->\n <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { Suggestion, Facet } from '@empathyco/x-types';\n import { isArrayEmpty } from '../../utils/array';\n import { AnimationProp } from '../../types';\n\n /*\n Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n \n @public\n /\n export default defineComponent({\n name: 'BaseSuggestions',\n props: {\n /\n The list of suggestions to render.\n \n @public\n /\n suggestions: {\n type: Array as PropType<Suggestion[]>,\n required: true\n },\n /\n Animation component that will be used to animate the suggestion.\n \n @public\n /\n animation: {\n type: AnimationProp,\n default: 'ul'\n },\n /\n Number of suggestions to be rendered.\n \n @public\n /\n maxItemsToRender: Number,\n /\n Boolean value to indicate if the facets should be rendered.\n \n @public\n /\n showFacets: {\n type: Boolean,\n default: false\n },\n /\n When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n * filter should be rendered.\n \n @public\n /\n showPlainSuggestion: {\n type: Boolean,\n default: false\n },\n /* Class inherited by content element. /\n suggestionItemClass: String\n },\n setup: function (props) {\n /\n Creates a suggestion for each one of the filter inside each facet.\n \n @param suggestion - Suggestion to expand.\n * @returns A list of suggestions, each one with a single filter.\n \n @internal\n /\n const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n return (\n suggestion.facets?.flatMap(facet =>\n facet.filters.map(filter => ({\n ...suggestion,\n facets: [{ ...facet, filters: [filter] }]\n }))\n ) ?? []\n );\n };\n\n /\n Creates a list of suggestions to render based on the configuration of this component.\n \n @returns - The list of suggestions to be rendered by this component.\n \n @internal\n /\n const suggestionsToRender = computed(() =>\n props.suggestions\n .flatMap(suggestion =>\n props.showFacets && suggestion.facets?.length\n ? props.showPlainSuggestion\n ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n : expandSuggestionFilters(suggestion)\n : { ...suggestion, facets: [] }\n )\n .slice(0, props.maxItemsToRender)\n );\n\n /\n Generates a string from the given facet.\n \n @param facet - The facet to reduce to a string.\n * @returns - A string representing the facet.\n * @internal\n /\n const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&');\n\n /\n Generates a string from the given facets.\n \n @param facets - The list of facets to reduce to a string.\n * @returns - A string representing the list of facets.\n * @internal\n /\n const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&');\n\n /\n An array with the unique keys for each suggestion. Required by the `v-for` loop.\n \n @returns An array with the unique keys of the suggestions.\n * @internal\n /\n const suggestionsKeys = computed(() =>\n suggestionsToRender.value.map(suggestion =>\n isArrayEmpty(suggestion.facets)\n ? suggestion.query\n : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`\n )\n );\n\n /\n Returns the filter contained by the suggestion.\n \n @param suggestion - Suggestion containing the filter.\n * @returns The suggestion filter.\n * @internal\n */\n const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0];\n\n return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-suggestions {\n list-style-type: none;\n }\n\n .x-suggestions,\n .x-suggestions__item {\n display: flex;\n flex-flow: column nowrap;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n <template #default=\"{ suggestion }\">\n <button @click=\"emitSuggestionSelected($event, suggestion)\">\n {{ suggestion.query }}\n </button>\n </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n computed: {\n ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n },\n methods: {\n emitSuggestionSelected(event, suggestion) {\n this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n }\n }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [\n {\n id: 'exampleFacet',\n label: 'exampleFacet',\n modelName: 'SimpleFacet',\n filters: [\n {\n facetId: 'exampleFacet',\n id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n label: 'EXAMPLE',\n selected: false,\n totalResults: 10,\n modelName: 'SimpleFilter'\n }\n ]\n }\n ],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n import { BaseSuggestions } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSuggestionsDemo',\n components: {\n BaseSuggestions\n },\n data() {\n return {\n suggestions: [\n {\n facets: [],\n key: 'chips',\n query: 'Chips',\n totalResults: 10,\n results: [],\n modelName: 'PopularSearch'\n }\n ]\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","suggestionsKeys","_Fragment","_renderList","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IAC+D,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AADrE,IAAA,KAAA,EAAA,eAAA;AAAA,GAAA,EAAA;;AAIYC,OAAAA,SAAAA,CAAAA,IAAAA,CAAAA,EAAAA,kBAAAA;AAAAA,QAAqBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;iBACtBL,SALX,EAAA,EAAAM,kBAAA;AAAA,YAKY,IAAA;AAAA,YAAqB;AAAA,cAE3B,0BAAU,KAAiB,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,mBAAA,CAAA,CAAA;cAQ3B,WAAgF,EAAA,iBAAA;AAAA,aAAA;;;;;;;AAftF,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/composables/use-alias-api.js CHANGED Viewed

@@ -7,7 +7,7 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 /**
  * Creates an object containing the alias part of {@link XComponentAPI}.
@@ -134,6 +134,9 @@ function useAliasApi() {
         },
         get selectedSort() {
             return store.state.x.search?.sort ?? '';
+        },
+        get priceStats() {
+            return store.state.x.search?.stats?.price ?? {};
         }
     };
 }

package/js/composables/use-alias-api.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import {\n Facet,\n Filter,\n HistoryQuery,\n NextQuery,\n PartialResult,\n Redirection,\n RelatedTag,\n Result,\n SemanticQuery,\n Suggestion\n} from '@empathyco/x-types';\nimport { ScrollComponentState } from '../x-modules/scroll/store/types';\nimport { InputStatus } from '../x-modules/search-box/store/types';\nimport { RequestStatus } from '../store/utils/status-store.utils';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/*\n Creates an object containing the alias part of {@link XComponentAPI}.\n \n @returns An object containing the alias part of the {@link XComponentAPI}.\n \n @internal\n /\nexport function useAliasApi(): UseAliasAPI {\n const queryModules = [\n 'facets',\n 'searchBox',\n 'nextQueries',\n 'querySuggestions',\n 'relatedTags',\n 'search'\n ] as const;\n const statusModules = [\n 'identifierResults',\n 'nextQueries',\n 'popularSearches',\n 'querySuggestions',\n 'recommendations',\n 'relatedTags',\n 'search'\n ] as const;\n\n const store = useStore();\n\n const query = queryModules.reduce((acc, moduleName) => {\n return Object.defineProperty(acc, moduleName, {\n get(): string {\n return store.state.x[moduleName]?.query ?? '';\n },\n enumerable: true\n });\n }, {} as UseAliasQueryAPI);\n\n const status = statusModules.reduce((acc, moduleName) => {\n return Object.defineProperty(acc, moduleName, {\n get(): RequestStatus \| undefined {\n return store.state.x[moduleName]?.status;\n },\n enumerable: true\n });\n }, {} as UseAliasStatusAPI);\n\n return {\n query,\n status,\n get device() {\n return store.state.x.device?.name ?? null;\n },\n get facets() {\n return store.getters[getGetterPath('facets', 'facets')] ?? {};\n },\n get historyQueries() {\n return store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];\n },\n get historyQueriesWithResults() {\n return store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];\n },\n get fullHistoryQueries() {\n return store.state.x.historyQueries?.historyQueries ?? [];\n },\n get isHistoryQueriesEnabled() {\n return store.state.x.historyQueries?.isEnabled ?? false;\n },\n get fromNoResultsWithFilters() {\n return store.state.x.search?.fromNoResultsWithFilters ?? false;\n },\n get identifierResults() {\n return store.state.x.identifierResults?.identifierResults ?? [];\n },\n get searchBoxStatus() {\n return store.state.x.searchBox?.inputStatus ?? undefined;\n },\n get isEmpathizeOpen() {\n return store.state.x.empathize?.isOpen ?? false;\n },\n get nextQueries() {\n return store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];\n },\n get noResults() {\n return store.state.x.search?.isNoResults ?? false;\n },\n get partialResults() {\n return store.state.x.search?.partialResults ?? [];\n },\n get popularSearches() {\n return store.state.x.popularSearches?.popularSearches ?? [];\n },\n get querySuggestions() {\n return store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];\n },\n get fullQuerySuggestions() {\n return store.state.x.querySuggestions?.suggestions ?? [];\n },\n get recommendations() {\n return store.state.x.recommendations?.recommendations ?? [];\n },\n get redirections() {\n return store.state.x.search?.redirections ?? [];\n },\n get relatedTags() {\n return store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];\n },\n get results() {\n return store.state.x.search?.results ?? [];\n },\n get scroll() {\n return store.state.x.scroll?.data ?? {};\n },\n get selectedFilters() {\n return store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];\n },\n get selectedRelatedTags() {\n return store.state.x.relatedTags?.selectedRelatedTags ?? [];\n },\n get semanticQueries() {\n return store.state.x.semanticQueries?.semanticQueries ?? [];\n },\n get spellcheckedQuery() {\n return store.state.x.search?.spellcheckedQuery ?? null;\n },\n get totalResults() {\n return store.state.x.search?.totalResults ?? 0;\n },\n get selectedSort() {\n return store.state.x.search?.sort ?? '';\n }\n };\n}\n\n/\n Alias to facilitate retrieving values from the store.\n \n @public\n /\nexport interface UseAliasAPI {\n /* The {@link DeviceXModule} detected device. /\n readonly device: string \| null;\n /* The {@link FacetsXModule} facets. /\n readonly facets: Record<Facet['id'], Facet>;\n /* The {@link HistoryQueriesXModule} history queries matching the query. /\n readonly historyQueries: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries with 1 or more results. /\n readonly historyQueriesWithResults: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries. /\n readonly fullHistoryQueries: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries enabled flag. /\n readonly isHistoryQueriesEnabled: Readonly<boolean>;\n /* The {@link SearchXModule} no results with filters flag. /\n readonly fromNoResultsWithFilters: Readonly<boolean>;\n /* The {@link IdentifierResultsXModule} results. /\n readonly identifierResults: ReadonlyArray<Result>;\n /* The {@link SearchBoxXModule } input status. /\n readonly searchBoxStatus: InputStatus \| undefined;\n /* The {@link Empathize} is open state. /\n readonly isEmpathizeOpen: boolean;\n /* The {@link NextQueriesXModule} next queries. /\n readonly nextQueries: ReadonlyArray<NextQuery>;\n /* The {@link SearchXModule} no results situation. /\n readonly noResults: boolean;\n /* The {@link SearchXModule} partial results. /\n readonly partialResults: ReadonlyArray<PartialResult>;\n /* The {@link PopularSearchesXModule} popular searches. /\n readonly popularSearches: ReadonlyArray<Suggestion>;\n /* The query value of the different modules. /\n readonly query: UseAliasQueryAPI;\n /* The {@link QuerySuggestionsXModule} query suggestions that should be displayed. /\n readonly querySuggestions: ReadonlyArray<Suggestion>;\n /* The {@link QuerySuggestionsXModule} query suggestions. /\n readonly fullQuerySuggestions: ReadonlyArray<Suggestion>;\n /* The {@link RecommendationsXModule} recommendations. /\n readonly recommendations: ReadonlyArray<Result>;\n /* The {@link SearchXModule} redirections. /\n readonly redirections: ReadonlyArray<Redirection>;\n /* The {@link RelatedTagsXModule} related tags (Both selected and deselected). /\n readonly relatedTags: ReadonlyArray<RelatedTag>;\n /* The {@link SearchXModule} search results. /\n readonly results: ReadonlyArray<Result>;\n /* The {@link ScrollXModule} data state. /\n readonly scroll: Record<string, ScrollComponentState>;\n /* The {@link FacetsXModule} selected filters. /\n readonly selectedFilters: Filter[];\n /* The {@link RelatedTagsXModule} selected related tags. /\n readonly selectedRelatedTags: ReadonlyArray<RelatedTag>;\n /* The {@link SemanticQueriesXModule} queries. /\n readonly semanticQueries: ReadonlyArray<SemanticQuery>;\n /* The {@link SearchXModule} spellchecked query. /\n readonly spellcheckedQuery: string \| null;\n /* The status value of the different modules. /\n readonly status: UseAliasStatusAPI;\n /* The {@link SearchXModule} total results. /\n readonly totalResults: number;\n /* The {@link SearchXModule} selected sort. /\n readonly selectedSort: string;\n}\n\n/\n Alias to facilitate retrieving the modules with query.\n \n @public\n /\nexport interface UseAliasQueryAPI {\n /* The {@link FacetsXModule} query. /\n readonly facets: string;\n /* The {@link SearchBoxXModule} query. /\n readonly searchBox: string;\n /* The {@link NextQueriesXModule} query. /\n readonly nextQueries: string;\n /* The {@link QuerySuggestionsXModule} query. /\n readonly querySuggestions: string;\n /* The {@link RelatedTagsXModule} query. /\n readonly relatedTags: string;\n /* The {@link SearchXModule} query. /\n readonly search: string;\n}\n\n/\n Alias to facilitate retrieving the modules with status.\n \n @public\n /\nexport interface UseAliasStatusAPI {\n /* The {@link IdentifierResultsXModule} status. /\n readonly identifierResults: RequestStatus \| undefined;\n /* The {@link NextQueriesXModule} status. /\n readonly nextQueries: RequestStatus \| undefined;\n /* The {@link PopularSearchesXModule} status. /\n readonly popularSearches: RequestStatus \| undefined;\n /* The {@link QuerySuggestionsXModule} status. /\n readonly querySuggestions: RequestStatus \| undefined;\n /* The {@link RecommendationsXModule} status. /\n readonly recommendations: RequestStatus \| undefined;\n /* The {@link RelatedTagsXModule} status. /\n readonly relatedTags: RequestStatus \| undefined;\n /* The {@link SearchXModule} status. */\n readonly search: RequestStatus \| undefined;\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import {\n Facet,\n Filter,\n HistoryQuery,\n NextQuery,\n PartialResult,\n Redirection,\n RelatedTag,\n Result,\n SemanticQuery,\n Suggestion\n} from '@empathyco/x-types';\nimport { ScrollComponentState } from '../x-modules/scroll/store/types';\nimport { InputStatus } from '../x-modules/search-box/store/types';\nimport { RequestStatus } from '../store/utils/status-store.utils';\nimport { getGetterPath } from '../plugins/index';\nimport { useStore } from './use-store';\n\n/*\n Creates an object containing the alias part of {@link XComponentAPI}.\n \n @returns An object containing the alias part of the {@link XComponentAPI}.\n \n @internal\n /\nexport function useAliasApi(): UseAliasAPI {\n const queryModules = [\n 'facets',\n 'searchBox',\n 'nextQueries',\n 'querySuggestions',\n 'relatedTags',\n 'search'\n ] as const;\n const statusModules = [\n 'identifierResults',\n 'nextQueries',\n 'popularSearches',\n 'querySuggestions',\n 'recommendations',\n 'relatedTags',\n 'search'\n ] as const;\n\n const store = useStore();\n\n const query = queryModules.reduce((acc, moduleName) => {\n return Object.defineProperty(acc, moduleName, {\n get(): string {\n return store.state.x[moduleName]?.query ?? '';\n },\n enumerable: true\n });\n }, {} as UseAliasQueryAPI);\n\n const status = statusModules.reduce((acc, moduleName) => {\n return Object.defineProperty(acc, moduleName, {\n get(): RequestStatus \| undefined {\n return store.state.x[moduleName]?.status;\n },\n enumerable: true\n });\n }, {} as UseAliasStatusAPI);\n\n return {\n query,\n status,\n get device() {\n return store.state.x.device?.name ?? null;\n },\n get facets() {\n return store.getters[getGetterPath('facets', 'facets')] ?? {};\n },\n get historyQueries() {\n return store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];\n },\n get historyQueriesWithResults() {\n return store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];\n },\n get fullHistoryQueries() {\n return store.state.x.historyQueries?.historyQueries ?? [];\n },\n get isHistoryQueriesEnabled() {\n return store.state.x.historyQueries?.isEnabled ?? false;\n },\n get fromNoResultsWithFilters() {\n return store.state.x.search?.fromNoResultsWithFilters ?? false;\n },\n get identifierResults() {\n return store.state.x.identifierResults?.identifierResults ?? [];\n },\n get searchBoxStatus() {\n return store.state.x.searchBox?.inputStatus ?? undefined;\n },\n get isEmpathizeOpen() {\n return store.state.x.empathize?.isOpen ?? false;\n },\n get nextQueries() {\n return store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];\n },\n get noResults() {\n return store.state.x.search?.isNoResults ?? false;\n },\n get partialResults() {\n return store.state.x.search?.partialResults ?? [];\n },\n get popularSearches() {\n return store.state.x.popularSearches?.popularSearches ?? [];\n },\n get querySuggestions() {\n return store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];\n },\n get fullQuerySuggestions() {\n return store.state.x.querySuggestions?.suggestions ?? [];\n },\n get recommendations() {\n return store.state.x.recommendations?.recommendations ?? [];\n },\n get redirections() {\n return store.state.x.search?.redirections ?? [];\n },\n get relatedTags() {\n return store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];\n },\n get results() {\n return store.state.x.search?.results ?? [];\n },\n get scroll() {\n return store.state.x.scroll?.data ?? {};\n },\n get selectedFilters() {\n return store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];\n },\n get selectedRelatedTags() {\n return store.state.x.relatedTags?.selectedRelatedTags ?? [];\n },\n get semanticQueries() {\n return store.state.x.semanticQueries?.semanticQueries ?? [];\n },\n get spellcheckedQuery() {\n return store.state.x.search?.spellcheckedQuery ?? null;\n },\n get totalResults() {\n return store.state.x.search?.totalResults ?? 0;\n },\n get selectedSort() {\n return store.state.x.search?.sort ?? '';\n },\n get priceStats() {\n return store.state.x.search?.stats?.price ?? {};\n }\n };\n}\n\n/\n Alias to facilitate retrieving values from the store.\n \n @public\n /\nexport interface UseAliasAPI {\n /* The {@link DeviceXModule} detected device. /\n readonly device: string \| null;\n /* The {@link FacetsXModule} facets. /\n readonly facets: Record<Facet['id'], Facet>;\n /* The {@link HistoryQueriesXModule} history queries matching the query. /\n readonly historyQueries: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries with 1 or more results. /\n readonly historyQueriesWithResults: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries. /\n readonly fullHistoryQueries: ReadonlyArray<HistoryQuery>;\n /* The {@link HistoryQueriesXModule} history queries enabled flag. /\n readonly isHistoryQueriesEnabled: Readonly<boolean>;\n /* The {@link SearchXModule} no results with filters flag. /\n readonly fromNoResultsWithFilters: Readonly<boolean>;\n /* The {@link IdentifierResultsXModule} results. /\n readonly identifierResults: ReadonlyArray<Result>;\n /* The {@link SearchBoxXModule } input status. /\n readonly searchBoxStatus: InputStatus \| undefined;\n /* The {@link Empathize} is open state. /\n readonly isEmpathizeOpen: boolean;\n /* The {@link NextQueriesXModule} next queries. /\n readonly nextQueries: ReadonlyArray<NextQuery>;\n /* The {@link SearchXModule} no results situation. /\n readonly noResults: boolean;\n /* The {@link SearchXModule} partial results. /\n readonly partialResults: ReadonlyArray<PartialResult>;\n /* The {@link PopularSearchesXModule} popular searches. /\n readonly popularSearches: ReadonlyArray<Suggestion>;\n /* The query value of the different modules. /\n readonly query: UseAliasQueryAPI;\n /* The {@link QuerySuggestionsXModule} query suggestions that should be displayed. /\n readonly querySuggestions: ReadonlyArray<Suggestion>;\n /* The {@link QuerySuggestionsXModule} query suggestions. /\n readonly fullQuerySuggestions: ReadonlyArray<Suggestion>;\n /* The {@link RecommendationsXModule} recommendations. /\n readonly recommendations: ReadonlyArray<Result>;\n /* The {@link SearchXModule} redirections. /\n readonly redirections: ReadonlyArray<Redirection>;\n /* The {@link RelatedTagsXModule} related tags (Both selected and deselected). /\n readonly relatedTags: ReadonlyArray<RelatedTag>;\n /* The {@link SearchXModule} search results. /\n readonly results: ReadonlyArray<Result>;\n /* The {@link ScrollXModule} data state. /\n readonly scroll: Record<string, ScrollComponentState>;\n /* The {@link FacetsXModule} selected filters. /\n readonly selectedFilters: Filter[];\n /* The {@link RelatedTagsXModule} selected related tags. /\n readonly selectedRelatedTags: ReadonlyArray<RelatedTag>;\n /* The {@link SemanticQueriesXModule} queries. /\n readonly semanticQueries: ReadonlyArray<SemanticQuery>;\n /* The {@link SearchXModule} spellchecked query. /\n readonly spellcheckedQuery: string \| null;\n /* The status value of the different modules. /\n readonly status: UseAliasStatusAPI;\n /* The {@link SearchXModule} total results. /\n readonly totalResults: number;\n /* The {@link SearchXModule} selected sort. /\n readonly selectedSort: string;\n /* The {@link SearchXModule} price specific stats. /\n readonly priceStats: { min: number; max: number };\n}\n\n/\n Alias to facilitate retrieving the modules with query.\n \n @public\n /\nexport interface UseAliasQueryAPI {\n /* The {@link FacetsXModule} query. /\n readonly facets: string;\n /* The {@link SearchBoxXModule} query. /\n readonly searchBox: string;\n /* The {@link NextQueriesXModule} query. /\n readonly nextQueries: string;\n /* The {@link QuerySuggestionsXModule} query. /\n readonly querySuggestions: string;\n /* The {@link RelatedTagsXModule} query. /\n readonly relatedTags: string;\n /* The {@link SearchXModule} query. /\n readonly search: string;\n}\n\n/\n Alias to facilitate retrieving the modules with status.\n \n @public\n /\nexport interface UseAliasStatusAPI {\n /* The {@link IdentifierResultsXModule} status. /\n readonly identifierResults: RequestStatus \| undefined;\n /* The {@link NextQueriesXModule} status. /\n readonly nextQueries: RequestStatus \| undefined;\n /* The {@link PopularSearchesXModule} status. /\n readonly popularSearches: RequestStatus \| undefined;\n /* The {@link QuerySuggestionsXModule} status. /\n readonly querySuggestions: RequestStatus \| undefined;\n /* The {@link RecommendationsXModule} status. /\n readonly recommendations: RequestStatus \| undefined;\n /* The {@link RelatedTagsXModule} status. /\n readonly relatedTags: RequestStatus \| undefined;\n /* The {@link SearchXModule} status. */\n readonly search: RequestStatus \| undefined;\n}\n"],"names":[],"mappings":"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"}

package/js/composables/use-getter.js CHANGED Viewed

@@ -8,7 +8,7 @@ import '../plugins/devtools/colors.utils.js';
 import '../plugins/x-bus.js';
 import '../plugins/x-plugin.js';
 import { getGetterPath } from '../plugins/x-plugin.utils.js';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 /**
  * Function which returns the requested getters as a dictionary of getters.

package/js/composables/use-state.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { computed } from 'vue';
-import { useStore } from './use-store.js';
+import { useStore } from 'vuex';
 /**
  * Function which returns the requested state's properties as a dictionary.

package/js/directives/typing.js ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * Typing directive.
+ *
+ * @public
+ */
+const typing = {
+    mounted(el, binding) {
+        execute(el, binding.value);
+    },
+    updated(el, binding) {
+        if (binding.value.text !== binding.oldValue?.text) {
+            clearTimeout(el.__timeoutId);
+            execute(el, binding.value);
+        }
+    },
+    unmounted(el) {
+        clearTimeout(el.__timeoutId);
+    }
+};
+/**
+ * Execute a typing animation in an HTML element.
+ *
+ * @param el - The HTML element where the typing animation will be displayed.
+ * @param options - Options for the behavior of the animation.
+ */
+function execute(el, options) {
+    const { text, speed = 1, targetAttr = '' } = options;
+    if (!text) {
+        // eslint-disable-next-line no-console
+        console.error('v-typing: "text" is required.');
+        return;
+    }
+    let index = 0;
+    const updateContent = (value) => {
+        if (targetAttr) {
+            el.setAttribute(targetAttr, value);
+        }
+        else {
+            el.innerHTML = value;
+        }
+    };
+    const type = () => {
+        if (index < text.length) {
+            updateContent(text.slice(0, index + 1));
+            index++;
+            el.__timeoutId = setTimeout(type, speed);
+        }
+        else {
+            updateContent(text);
+            clearTimeout(el.__timeoutId);
+            el.__timeoutId = undefined;
+        }
+    };
+    type();
+}
+export { typing };
+//# sourceMappingURL=typing.js.map

package/js/directives/typing.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue';\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n /**\n * The text (plain or html) that will be typed into the target element.\n */\n text: string;\n /**\n * The typing speed in milliseconds per character.\n *\n */\n speed?: number;\n /**\n * The attribute of the HTML element where the typed text will be placed.\n * If not specified, the text will be set as content (innerHTML).\n *\n * @example 'placeholder'\n */\n targetAttr?: string;\n}\n\ninterface TypingHTMLElement extends HTMLElement {\n __timeoutId?: number;\n}\n\n/**\n * Typing directive.\n *\n * @public\n */\nexport const typing: Directive<TypingHTMLElement, TypingOptions> = {\n mounted(el, binding) {\n execute(el, binding.value);\n },\n\n updated(el, binding) {\n if (binding.value.text !== binding.oldValue?.text) {\n clearTimeout(el.__timeoutId);\n execute(el, binding.value);\n }\n },\n\n unmounted(el) {\n clearTimeout(el.__timeoutId);\n }\n};\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n const { text, speed = 1, targetAttr = '' } = options;\n\n if (!text) {\n // eslint-disable-next-line no-console\n console.error('v-typing: \"text\" is required.');\n return;\n }\n\n let index = 0;\n\n const updateContent = (value: string) => {\n if (targetAttr) {\n el.setAttribute(targetAttr, value);\n } else {\n el.innerHTML = value;\n }\n };\n\n const type = () => {\n if (index < text.length) {\n updateContent(text.slice(0, index + 1));\n index++;\n el.__timeoutId = setTimeout(type, speed) as unknown as number;\n } else {\n updateContent(text);\n clearTimeout(el.__timeoutId);\n el.__timeoutId = undefined;\n }\n };\n\n type();\n}\n"],"names":[],"mappings":"AA8BA;;;;AAIG;AACU,MAAA,MAAM,GAAgD;IACjE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;QACjB,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;KAC9B;EACD;AAEF;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;IAErD,IAAI,CAAC,IAAI,EAAE;;AAET,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO;AACR,KAAA;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACpC,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAC;AACtB,SAAA;AACH,KAAC,CAAC;IAEF,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;AACxC,YAAA,KAAK,EAAE,CAAC;YACR,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAC;AAC/D,SAAA;AAAM,aAAA;YACL,aAAa,CAAC,IAAI,CAAC,CAAC;AACpB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAC;AAC5B,SAAA;AACH,KAAC,CAAC;AAEF,IAAA,IAAI,EAAE,CAAC;AACT;;;;"}

package/js/index.js CHANGED Viewed

@@ -128,6 +128,7 @@ export { default as BaseEventButton } from './components/base-event-button.vue.j
 export { default as BaseGrid } from './components/base-grid.vue.js';
 export { default as BaseKeyboardNavigation } from './components/base-keyboard-navigation.vue.js';
 export { default as BaseRating } from './components/base-rating.vue.js';
+export { default as BaseSlider } from './components/base-slider.vue.js';
 export { default as BaseSwitch } from './components/base-switch.vue.js';
 export { default as BaseVariableColumnGrid } from './components/base-variable-column-grid.vue.js';
 export { default as DisplayEmitter } from './components/display-emitter.vue.js';
@@ -138,6 +139,9 @@ export { default as LocationProvider } from './components/location-provider.vue.
 export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
 export { default as PageLoaderButton } from './components/page-loader-button.vue.js';
+export { default as PageSelector } from './components/page-selector.vue.js';
+export { default as DisplayClickProvider } from './components/display-click-provider.vue.js';
+export { default as BaseTeleport } from './components/base-teleport.vue.js';
 export { DISABLE_ANIMATIONS_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY, QUERY_KEY, RESULT_WITH_VARIANTS_KEY, SELECTED_VARIANTS_KEY, SELECT_RESULT_VARIANT_KEY } from './components/decorators/injection.consts.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
 export { createUseDevice } from './composables/create-use-device.js';
@@ -147,16 +151,20 @@ export { useDebounce } from './composables/use-debounce.js';
 export { useGetter } from './composables/use-getter.js';
 export { useEmitDisplayEvent, useOnDisplay } from './composables/use-on-display.js';
 export { useState } from './composables/use-state.js';
-export { useStore } from './composables/use-store.js';
+export { useStore } from 'vuex';
 export { useXBus } from './composables/use-x-bus.js';
 export { infiniteScroll } from './directives/infinite-scroll.js';
+export { typing } from './directives/typing.js';
 export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
 export { bus } from './plugins/x-bus.js';
 export { isSimpleSelector, registerStoreEmitters } from './plugins/x-emitters.js';
 export { XPlugin, xPlugin } from './plugins/x-plugin.js';
 export { assertXPluginOptionsAreValid, getGetterPath } from './plugins/x-plugin.utils.js';
 export { DirectionalFocusNavigationService } from './services/directional-focus-navigation.service.js';
+export { mergeConfig, setConfig } from './store/utils/config-store.utils.js';
 export { createFetchAndSaveActions } from './store/utils/fetch-and-save-action.utils.js';
+export { cleanGettersProxyCache, getGettersProxy, getGettersProxyFromModule } from './store/utils/getters-proxy.utils.js';
+export { createRelatedTagsQueryGetter, setQuery } from './store/utils/query.utils.js';
 export { setStatus } from './store/utils/status-store.utils.js';
 export { createStoreEmitters } from './store/utils/store-emitters.utils.js';
 export { RootXStoreModule } from './store/x.module.js';
@@ -325,6 +333,15 @@ export { request as recommendationsRequest } from './x-modules/recommendations/s
 export { recommendationsXStoreModule } from './x-modules/recommendations/store/module.js';
 export { recommendationsWiring, setRecommendationsExtraParams } from './x-modules/recommendations/wiring.js';
 export { recommendationsXModule } from './x-modules/recommendations/x-module.js';
+export { default as RelatedPrompt } from './x-modules/related-prompts/components/related-prompt.vue.js';
+export { default as RelatedPromptsList } from './x-modules/related-prompts/components/related-prompts-list.vue.js';
+export { default as RelatedPromptsTagList } from './x-modules/related-prompts/components/related-prompts-tag-list.vue.js';
+export { cancelFetchAndSaveRelatedPrompts, fetchAndSaveRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.js';
+export { fetchRelatedPrompts } from './x-modules/related-prompts/store/actions/fetch-related-prompts.action.js';
+export { relatedPromptsStoreEmitters } from './x-modules/related-prompts/store/emitters.js';
+export { relatedPromptsXStoreModule } from './x-modules/related-prompts/store/module.js';
+export { relatedPromptsWiring } from './x-modules/related-prompts/wiring.js';
+export { relatedPromptsXModule } from './x-modules/related-prompts/x-module.js';
 export { default as RelatedTag } from './x-modules/related-tags/components/related-tag.vue.js';
 export { default as RelatedTags } from './x-modules/related-tags/components/related-tags.vue.js';
 export { cancelFetchAndSaveRelatedTags, fetchAndSaveRelatedTags } from './x-modules/related-tags/store/actions/fetch-and-save-related-tags.action.js';
@@ -390,16 +407,16 @@ export { semanticQueriesXStoreModule } from './x-modules/semantic-queries/store/
 export { semanticQueriesXModule } from './x-modules/semantic-queries/x-module.js';
 export { clearQueryWire, fetchAndSaveSemanticQueryWire, semanticQueriesWiring, setQueryFromSearchResponseChangedWire, setQueryWire, setSemanticQueriesExtraParamsWire, setTotalResultsFromSearchResponseChangedWire, setTotalResultsWire } from './x-modules/semantic-queries/wiring.js';
 export { default as Tagging } from './x-modules/tagging/components/tagging.vue.js';
-export { DefaultPDPAddToCartService } from './x-modules/tagging/service/pdp-add-to-cart.service.js';
+export { DefaultExternalTaggingService } from './x-modules/tagging/service/external-tagging.service.js';
 export { track } from './x-modules/tagging/store/actions/track.action.js';
 export { taggingEmitters } from './x-modules/tagging/store/emitters.js';
 export { taggingXStoreModule } from './x-modules/tagging/store/module.js';
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire } from './x-modules/tagging/wiring.js';
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire } from './x-modules/tagging/wiring.js';
 export { taggingXModule } from './x-modules/tagging/x-module.js';
 export { default as UrlHandler } from './x-modules/url/components/url-handler.vue.js';
 export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';
 export { urlXStoreModule } from './x-modules/url/store/module.js';
-export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
+export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlPrompt, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
 export { urlXModule } from './x-modules/url/x-module.js';
 export { default as ExperienceControls } from './x-modules/experience-controls/components/experience-controls.vue.js';
 export { cancelFetchAndSaveControls, fetchAndSaveExperienceControlsResponse } from './x-modules/experience-controls/store/actions/fetch-and-save-experience-controls.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/types/animation-prop.js CHANGED Viewed

@@ -1,6 +1,11 @@
 /**
  * Type for animations props.
  *
+ * @remarks
+ * String for 'ul'
+ * Object for `DefineComponent` type
+ * Function for `() => NoElement`
+ *
  * @public
  */
 const AnimationProp = [String, Object, Function];

package/js/types/animation-prop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animation-prop.js","sources":["../../../src/types/animation-prop.ts"],"sourcesContent":["~~import~~ { ~~DefineComponent,~~ ~~PropType~~ } ~~from~~ '~~vue~~';\n\n~~/*\n~~ ~~Type~~ for ~~animations~~ ~~props.\~~n \n @public\n */\nexport const AnimationProp = [String, Object, Function] ~~as PropType<DefineComponent \| string>;\~~n"],"names":[],"mappings":"~~AAEA;;;;AAIG~~;AACU,MAAA,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ;;;;"}
1	+ {"version":3,"file":"animation-prop.js","sources":["../../../src/types/animation-prop.ts"],"sourcesContent":["/*\n Type for animations props.\n \n @remarks\n * String for 'ul'\n * Object for `DefineComponent` type\n * Function for `() => NoElement`\n \n @public\n */\nexport const AnimationProp = [String, Object, Function];\n"],"names":[],"mappings":"AAAA;;;;;;;;;AASG;AACU,MAAA,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ;;;;"}

package/js/x-installer/x-installer/x-installer.js CHANGED Viewed

@@ -234,10 +234,10 @@ class XInstaller {
      * returns an Element or element selector to use.
      * If it is not present, a new <div> Element is created and appended to the body.
      *
-     * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
-     * to mount the Vue Application.
+     * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+     * used to mount the Vue Application.
      *
-     * @returns The Element to use as mounting target for the Vue Application.
+     * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
      * @internal
      */
     getMountingTarget(domElement) {

package/js/x-installer/x-installer/x-installer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n interface Window {\n InterfaceX?: XAPI;\n initX?: (() => SnippetConfig) \| SnippetConfig;\n }\n}\n\n/*\n The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n \n This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n \n The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n \n @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n \n ```\n * const installer = new XInstaller(installXOptions)\n * ```\n \n 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n \n 2.1 Using the created installer:\n \n ```\n * installer.init(snippetConfig)\n * ```\n \n 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n \n ```\n * window.InterfaceX.init(snippetConfig)\n * ```\n \n 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their website. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n \n ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n \n ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n \n @public\n /\nexport class XInstaller {\n private app!: App;\n private api?: XAPI;\n\n /\n The configuration coming from the snippet {@link SnippetConfig}.\n \n @internal\n /\n protected snippetConfig?: NormalisedSnippetConfig;\n\n /\n Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n \n @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig \| snippet config}.\n \n \n * @param options - The {@link InstallXOptions}.\n \n @public\n /\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI();\n }\n\n /\n Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n \n @internal\n /\n protected createAPI(): void {\n const { api } = this.options;\n if (api !== false) {\n this.api = api ?? new BaseXAPI();\n this.api.setInitCallback(this.init.bind(this));\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n window.InterfaceX = this.api;\n }\n }\n\n /\n Retrieves the {@link SnippetConfig \| snippet config} it is defined in the window.initX.\n \n @returns The snippet config if it is defined or undefined otherwise.\n \n @internal\n /\n private retrieveSnippetConfig(): SnippetConfig \| undefined {\n if (typeof window.initX === 'function') {\n return window.initX();\n } else if (typeof window.initX === 'object') {\n return window.initX;\n }\n }\n\n /\n Receives the {@link SnippetConfig \| snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n \n @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n \n @returns If {@link SnippetConfig \| snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n * and the Vue application instance. Else, a rejected promise is returned.\n \n @public\n /\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n init(): Promise<InitWrapper \| void>;\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper \| void> {\n if (snippetConfig) {\n this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n this.createApp();\n const bus = this.createBus();\n const pluginOptions = this.getPluginOptions();\n const plugin = this.installPlugin(pluginOptions, bus);\n await this.installExtraPlugins(bus);\n this.api?.setBus(bus);\n this.app.mount(this.getMountingTarget(this.options.domElement));\n\n return {\n api: this.api,\n app: this.app,\n bus,\n plugin\n };\n }\n\n return Promise.resolve();\n }\n\n /\n Creates the {@link XPluginOptions} object.\n \n @returns The {@link XPluginOptions} object.\n \n @internal\n /\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules\n };\n }\n\n /\n This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link @empathyco/x-bus#XPriorityBus \| bus}.\n \n @returns XBus - The bus instance.\n \n @internal\n /\n protected createBus(): XBus<XEventsTypes, WireMetadata> {\n return this.options.bus ?? bus;\n }\n\n /\n Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n \n @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n \n @returns Plugin<XPluginOption> - The plugin instance.\n * @internal\n /\n protected installPlugin(\n pluginOptions: XPluginOptions,\n bus: XBus<XEventsTypes, WireMetadata>\n ): Plugin<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus);\n this.app.use(plugin, pluginOptions);\n return plugin;\n }\n\n /\n Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n * to allow the user to install more plugins to the App.\n \n @param bus - The events bus used in the application.\n * @returns An empty promise.\n * @internal\n /\n protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n return Promise.resolve(\n this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n );\n }\n\n /\n In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n * then a new Vue application is created using that component as root.\n \n @internal\n /\n protected createApp(): void {\n if (this.options.rootComponent !== undefined) {\n this.app = createApp(this.options.rootComponent);\n this.app.provide('snippetConfig', this.snippetConfig);\n this.options.onCreateApp?.(this.app);\n }\n }\n\n protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n /\n Transforms the snippet configuration.\n * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n \n @param snippetConfig - The snippet config to normalise.\n * @returns The normalised version of the given snippet config.\n * @internal\n /\n protected normaliseSnippetConfig(\n snippetConfig: SnippetConfig \| Partial<SnippetConfig>\n ): NormalisedSnippetConfig \| Partial<SnippetConfig> {\n if (snippetConfig.lang) {\n snippetConfig.uiLang ??= snippetConfig.lang;\n }\n return snippetConfig;\n }\n\n /\n It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n * returns an Element or element selector to use.\n * If it is not present, a new <div> Element is created and appended to the body.\n \n @param domElement - {@link InstallXOptions.domElement \| Element, string or function} Used\n * to mount the Vue Application.\n \n @returns The Element to use as mounting target for the Vue Application.\n * @internal\n /\n protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n if (isFunction(domElement)) {\n domElement = domElement(this.snippetConfig!);\n }\n if (typeof domElement === 'string') {\n const target = document.querySelector(domElement);\n if (!target) {\n throw Error(\n `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n );\n }\n return target;\n }\n return domElement ?? document.body.appendChild(document.createElement('div'));\n }\n\n /\n It updates all the provided properties from the current snippet config.\n \n @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n \n @internal\n /\n protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n if (!this.snippetConfig) {\n return;\n }\n forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n this.snippetConfig![name] = value;\n });\n }\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n */\n protected getSnippetConfig(): NormalisedSnippetConfig {\n return this.snippetConfig!;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n interface Window {\n InterfaceX?: XAPI;\n initX?: (() => SnippetConfig) \| SnippetConfig;\n }\n}\n\n/*\n The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n \n This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n \n The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n \n @example The way to use this class is the next:\n * 1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n \n ```\n * const installer = new XInstaller(installXOptions)\n * ```\n \n 2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n * There are 3 different ways to do this:\n \n 2.1 Using the created installer:\n \n ```\n * installer.init(snippetConfig)\n * ```\n \n 2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n * is not present as the default value is `true`) then this init step can be done with\n * the Public API:\n \n ```\n * window.InterfaceX.init(snippetConfig)\n * ```\n \n 2.3 When the script of the project build is loaded it searches for a global `initX`\n * variable that the customer must have in their website. This variable can be a\n * function that returns the {@link SnippetConfig} or an object that contains the\n * {@link SnippetConfig} itself:\n \n ```\n * window.initX = function() {\n * return {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * };\n * ```\n \n ```\n * window.initX = {\n * instance,\n * env,\n * scope,\n * lang,\n * uiLang,\n * currency,\n * consent,\n * documentDirection\n * };\n * ```\n \n @public\n /\nexport class XInstaller {\n private app!: App;\n private api?: XAPI;\n\n /\n The configuration coming from the snippet {@link SnippetConfig}.\n \n @internal\n /\n protected snippetConfig?: NormalisedSnippetConfig;\n\n /\n Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n * creates the public {@link XAPI}.\n \n @remarks Auto initializes the Vue application if window.initX is defined as a function or\n * object specifying the {@link SnippetConfig \| snippet config}.\n \n \n * @param options - The {@link InstallXOptions}.\n \n @public\n /\n public constructor(protected readonly options: InstallXOptions) {\n this.createAPI();\n }\n\n /\n Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n * creation the value `false` must be passed in the `api` option.\n \n @internal\n /\n protected createAPI(): void {\n const { api } = this.options;\n if (api !== false) {\n this.api = api ?? new BaseXAPI();\n this.api.setInitCallback(this.init.bind(this));\n this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n window.InterfaceX = this.api;\n }\n }\n\n /\n Retrieves the {@link SnippetConfig \| snippet config} it is defined in the window.initX.\n \n @returns The snippet config if it is defined or undefined otherwise.\n \n @internal\n /\n private retrieveSnippetConfig(): SnippetConfig \| undefined {\n if (typeof window.initX === 'function') {\n return window.initX();\n } else if (typeof window.initX === 'object') {\n return window.initX;\n }\n }\n\n /\n Receives the {@link SnippetConfig \| snippet config} or retrieves it from window.initX and\n * installs the plugin and initializes the Vue application.\n \n @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n \n @returns If {@link SnippetConfig \| snippet config} is passed or configured in window.initX,\n * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n * and the Vue application instance. Else, a rejected promise is returned.\n \n @public\n /\n init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n init(): Promise<InitWrapper \| void>;\n async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper \| void> {\n if (snippetConfig) {\n this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n this.createApp();\n const bus = this.createBus();\n const pluginOptions = this.getPluginOptions();\n const plugin = this.installPlugin(pluginOptions, bus);\n await this.installExtraPlugins(bus);\n this.api?.setBus(bus);\n this.app.mount(this.getMountingTarget(this.options.domElement));\n\n return {\n api: this.api,\n app: this.app,\n bus,\n plugin\n };\n }\n\n return Promise.resolve();\n }\n\n /\n Creates the {@link XPluginOptions} object.\n \n @returns The {@link XPluginOptions} object.\n \n @internal\n /\n protected getPluginOptions(): XPluginOptions {\n const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n return {\n adapter,\n store,\n xModules,\n initialXModules,\n __PRIVATE__xModules\n };\n }\n\n /\n This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n * creates a new instance of {@link @empathyco/x-bus#XPriorityBus \| bus}.\n \n @returns XBus - The bus instance.\n \n @internal\n /\n protected createBus(): XBus<XEventsTypes, WireMetadata> {\n return this.options.bus ?? bus;\n }\n\n /\n Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n * created and installed.\n \n @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n * of the plugin.\n * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n \n @returns Plugin<XPluginOption> - The plugin instance.\n * @internal\n /\n protected installPlugin(\n pluginOptions: XPluginOptions,\n bus: XBus<XEventsTypes, WireMetadata>\n ): Plugin<XPluginOptions> {\n const plugin = this.options.plugin ?? new XPlugin(bus);\n this.app.use(plugin, pluginOptions);\n return plugin;\n }\n\n /\n Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n * to allow the user to install more plugins to the App.\n \n @param bus - The events bus used in the application.\n * @returns An empty promise.\n * @internal\n /\n protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n return Promise.resolve(\n this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n );\n }\n\n /\n In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n * then a new Vue application is created using that component as root.\n \n @internal\n /\n protected createApp(): void {\n if (this.options.rootComponent !== undefined) {\n this.app = createApp(this.options.rootComponent);\n this.app.provide('snippetConfig', this.snippetConfig);\n this.options.onCreateApp?.(this.app);\n }\n }\n\n protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n /\n Transforms the snippet configuration.\n * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n \n @param snippetConfig - The snippet config to normalise.\n * @returns The normalised version of the given snippet config.\n * @internal\n /\n protected normaliseSnippetConfig(\n snippetConfig: SnippetConfig \| Partial<SnippetConfig>\n ): NormalisedSnippetConfig \| Partial<SnippetConfig> {\n if (snippetConfig.lang) {\n snippetConfig.uiLang ??= snippetConfig.lang;\n }\n return snippetConfig;\n }\n\n /\n It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n * returns an Element or element selector to use.\n * If it is not present, a new <div> Element is created and appended to the body.\n \n @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function\n * used to mount the Vue Application.\n \n @returns The Element or ShadowRoot to use as mounting target for the Vue Application.\n * @internal\n /\n protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element \| ShadowRoot {\n if (isFunction(domElement)) {\n domElement = domElement(this.snippetConfig!);\n }\n if (typeof domElement === 'string') {\n const target = document.querySelector(domElement);\n if (!target) {\n throw Error(\n `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n );\n }\n return target;\n }\n return domElement ?? document.body.appendChild(document.createElement('div'));\n }\n\n /\n It updates all the provided properties from the current snippet config.\n \n @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n \n @internal\n /\n protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n if (!this.snippetConfig) {\n return;\n }\n forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n this.snippetConfig![name] = value;\n });\n }\n\n /\n Getter for the snippet config object.\n \n @returns The {@link NormalisedSnippetConfig \| snippetConfig} object.\n \n @public\n */\n protected getSnippetConfig(): NormalisedSnippetConfig {\n return this.snippetConfig!;\n }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/device/store/emitters.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { deviceXStoreModule } from './module.js';

package/js/x-modules/device/store/emitters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the device module.\n \n @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":"~~;;;~~AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}
1	+ {"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/device/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { deviceXStoreModule } from './module';\n\n/*\n {@link StoreEmitters} For the device module.\n \n @internal\n */\nexport const deviceEmitters = createStoreEmitters(deviceXStoreModule, {});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,EAAE;;;;"}

package/js/x-modules/empathize/components/empathize.vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _sfc_main from './empathize.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, createCommentVNode, renderSlot, vShow } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, withDirectives, createElementVNode, withModifiers, renderSlot, vShow } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -17,7 +17,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-test": "empathize"
         },
         [
-          createCommentVNode(" @slot (Required) Modal container content "),
           renderSlot(_ctx.$slots, "default")
         ],
         544

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

	@@ -1 +1 @@
1	- {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = ~~ref~~(!!empathizeRef.value?.children.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n ~~hasContent.value = !!empathizeRef.value?.children.length;\n~~ if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","~~_createCommentVNode","~~isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;~~AAErB~~,~~UAAA~~,~~WAAA,~~EAAA,WAAA;AAAA,SAAA~~;AACA~~,~~QAAA;AAAA,UAAAC,kBAAA,CAAA,4CAAA,CAAA;qBATQC,~~IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref, computed } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;UAGrB,WAAQ,EAAA,WAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}