npm - @empathyco/x-components - Versions diffs - 7.5.0 → 8.0.0 - Mend

@empathyco/x-components 7.5.0 → 8.0.0

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

package/js/components/sort/sort-picker-list.vue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../src/components/sort/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort || null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { XEvent } from '../../wiring/index'\nimport { computed, defineComponent, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Sort Picker item options.\n */\nexport interface SortPickerItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortPickerList',\n components: { BaseEventButton },\n props: {\n /** The transition to use for rendering the list. */\n animation: {\n type: [String, Object] as PropType<string | Component>,\n default: () => 'div',\n },\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n selectedSort: {\n type: String as PropType<Sort>,\n required: true,\n },\n selectedSortProvidedEvent: {\n type: String as PropType<XEvent>,\n default: 'SelectedSortProvided',\n },\n clickedSortEvent: {\n type: String as PropType<XEvent>,\n default: 'UserClickedASort',\n },\n /** Class inherited by each sort button. */\n buttonClass: String,\n },\n setup(props) {\n const $x = use$x()\n\n watch(\n () => props.selectedSort,\n value => $x.emit(props.selectedSortProvidedEvent, value),\n {\n immediate: true,\n },\n )\n\n /**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortPickerItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'xds:selected': item === props.selectedSort,\n },\n event: { [props.clickedSortEvent]: item },\n })),\n )\n\n return {\n listItems,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAoBYC,wBAnBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IACd,GAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAM,oBAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACV,IAAA,EAAK;AAAA,GAAA,EAAA;qBAGH,MAAgD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADlDG,kBAAA;AAAA,QAYkBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAXsB,IAAA,CAAA,SAAA,EAAS,CAAA,EAAtC,IAAA,EAAM,UAAA,EAAY,KAAA,EAAK,KAAA;8BADlCJ,WAAA,CAYkB,0BAAA,EAAA;AAAA,YAVf,GAAA,EAAK,IAAA;AAAA,YACL,KAAA,EAAKK,cAAA,CAAA,CAAG,UAAA,EAAY,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,YAChC,WAAA,EAAU,oBAAA;AAAA,YACT,MAAA,EAAQ,KAAA;AAAA,YACR,cAAA,EAAc,SAAS,IAAA,CAAA,YAAA,IAAY,IAAA;AAAA,YACpC,IAAA,EAAK;AAAA,WAAA,EAAA;6BAEL,MAEO;AAAA,cAFPC,UAAA,CAEO,wBAFPC,UAAA,CAEO,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAA,EAAc,IAAA,KAAS,IAAA,CAAA,YAAA,EAAY,CAAA,EAAvD,MAEO;AAAA,gBAAAC,eAAA;kCADF,IAAI,CAAA;AAAA,kBAAA;AAAA;AAAA;AAAA,eAAA;;;;;;;;;;;;;;;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-picker-list.vue2.js RENAMED Viewed

@@ -1,8 +1,6 @@
 import { defineComponent, watch, computed } from 'vue';
-import BaseEventButton from '../../../components/base-event-button.vue.js';
-import { use$x } from '../../../composables/use-_x.js';
-import { useState } from '../../../composables/use-state.js';
-import { searchXModule } from '../x-module.js';
+import { use$x } from '../../composables/use-_x.js';
+import BaseEventButton from '../base-event-button.vue.js';
 /**
  * The `SortPickerList` component allows user to select the search results order. This component
@@ -10,26 +8,36 @@ import { searchXModule } from '../x-module.js';
  */
 var _sfc_main = defineComponent({
     name: 'SortPickerList',
-    xModule: searchXModule.name,
     components: { BaseEventButton },
     props: {
+        /** The transition to use for rendering the list. */
+        animation: {
+            type: [String, Object],
+            default: () => 'div',
+        },
         /** The list of possible sort values. */
         items: {
             type: Array,
             required: true,
         },
-        /** The transition to use for rendering the list. */
-        animation: {
-            type: [String, Object],
-            default: () => 'div',
+        selectedSort: {
+            type: String,
+            required: true,
+        },
+        selectedSortProvidedEvent: {
+            type: String,
+            default: 'SelectedSortProvided',
+        },
+        clickedSortEvent: {
+            type: String,
+            default: 'UserClickedASort',
         },
         /** Class inherited by each sort button. */
         buttonClass: String,
     },
     setup(props) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search');
-        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
+        watch(() => props.selectedSort, value => $x.emit(props.selectedSortProvidedEvent, value), {
             immediate: true,
         });
         /**
@@ -40,13 +48,12 @@ var _sfc_main = defineComponent({
         const listItems = computed(() => props.items.map(item => ({
             item,
             cssClasses: {
-                'xds:selected': item === selectedSort.value,
+                'xds:selected': item === props.selectedSort,
             },
-            event: { UserClickedASort: item },
+            event: { [props.clickedSortEvent]: item },
         })));
         return {
             listItems,
-            selectedSort,
         };
     },
 });

package/js/components/sort/sort-picker-list.vue2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../src/components/sort/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort || null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport type { XEvent } from '../../wiring/index'\nimport { computed, defineComponent, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Sort Picker item options.\n */\nexport interface SortPickerItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortPickerList',\n components: { BaseEventButton },\n props: {\n /** The transition to use for rendering the list. */\n animation: {\n type: [String, Object] as PropType<string | Component>,\n default: () => 'div',\n },\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n selectedSort: {\n type: String as PropType<Sort>,\n required: true,\n },\n selectedSortProvidedEvent: {\n type: String as PropType<XEvent>,\n default: 'SelectedSortProvided',\n },\n clickedSortEvent: {\n type: String as PropType<XEvent>,\n default: 'UserClickedASort',\n },\n /** Class inherited by each sort button. */\n buttonClass: String,\n },\n setup(props) {\n const $x = use$x()\n\n watch(\n () => props.selectedSort,\n value => $x.emit(props.selectedSortProvidedEvent, value),\n {\n immediate: true,\n },\n )\n\n /**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortPickerItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'xds:selected': item === props.selectedSort,\n },\n event: { [props.clickedSortEvent]: item },\n })),\n )\n\n return {\n listItems,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA2CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAwB;AAC9B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,sBAAsB;AAChC,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,KAAK,CACH,MAAM,KAAK,CAAC,YAAY,EACxB,KAAI,IAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,EACxD;AACE,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACH;AAEA;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,cAAc,EAAE,IAAG,KAAM,KAAK,CAAC,YAAY;AAC5C,aAAA;YACD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,GAAG,MAAM;SAC1C,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -144,6 +144,9 @@ function useAliasApi() {
         get selectedSort() {
             return store.state.x.search?.sort ?? '';
         },
+        get browseSelectedSort() {
+            return store.state.x.browse?.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 type {\n Facet,\n Filter,\n HistoryQuery,\n NextQuery,\n PartialResult,\n Redirection,\n RelatedPrompt,\n RelatedTag,\n Result,\n SemanticQuery,\n Suggestion,\n} from '@empathyco/x-types'\nimport type { RequestStatus } from '../store/utils/status-store.utils'\nimport type { ScrollComponentState } from '../x-modules/scroll/store/types'\nimport type { InputStatus } from '../x-modules/search-box/store/types'\nimport { useStore } from 'vuex'\nimport { getGetterPath } from '../plugins/index'\n\n/* eslint-disable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment /\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 lowResults() {\n return (\n store.state.x.search?.totalResults > 0 &&\n store.state.x.search?.totalResults < store.state.x.search?.config?.threshold\n )\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 selectedPrompt() {\n return store.state.x.relatedPrompts?.selectedPrompt ?? -1\n },\n get semanticQueries() {\n return store.state.x.semanticQueries?.semanticQueries ?? []\n },\n get relatedPrompts() {\n return store.state.x.relatedPrompts?.relatedPrompts ?? []\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 browseTotalResults() {\n return store.state.x.browse?.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} low results situation. /\n readonly lowResults: 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 RelatedPromptsXModule} selected prompt. /\n readonly selectedPrompt: number\n /* The {@link SemanticQueriesXModule} queries. /\n readonly semanticQueries: ReadonlyArray<SemanticQuery>\n /* The {@link RelatedPromptsXModule} related prompts. /\n readonly relatedPrompts: ReadonlyArray<RelatedPrompt>\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 BrowseXModule} total results. /\n readonly browseTotalResults: 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\n/ eslint-enable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"use-alias-api.js","sources":["../../../src/composables/use-alias-api.ts"],"sourcesContent":["import type {\n Facet,\n Filter,\n HistoryQuery,\n NextQuery,\n PartialResult,\n Redirection,\n RelatedPrompt,\n RelatedTag,\n Result,\n SemanticQuery,\n Suggestion,\n} from '@empathyco/x-types'\nimport type { RequestStatus } from '../store/utils/status-store.utils'\nimport type { ScrollComponentState } from '../x-modules/scroll/store/types'\nimport type { InputStatus } from '../x-modules/search-box/store/types'\nimport { useStore } from 'vuex'\nimport { getGetterPath } from '../plugins/index'\n\n/* eslint-disable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment /\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 lowResults() {\n return (\n store.state.x.search?.totalResults > 0 &&\n store.state.x.search?.totalResults < store.state.x.search?.config?.threshold\n )\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 selectedPrompt() {\n return store.state.x.relatedPrompts?.selectedPrompt ?? -1\n },\n get semanticQueries() {\n return store.state.x.semanticQueries?.semanticQueries ?? []\n },\n get relatedPrompts() {\n return store.state.x.relatedPrompts?.relatedPrompts ?? []\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 browseTotalResults() {\n return store.state.x.browse?.totalResults ?? 0\n },\n get selectedSort() {\n return store.state.x.search?.sort ?? ''\n },\n get browseSelectedSort() {\n return store.state.x.browse?.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} low results situation. /\n readonly lowResults: 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 RelatedPromptsXModule} selected prompt. /\n readonly selectedPrompt: number\n /* The {@link SemanticQueriesXModule} queries. /\n readonly semanticQueries: ReadonlyArray<SemanticQuery>\n /* The {@link RelatedPromptsXModule} related prompts. /\n readonly relatedPrompts: ReadonlyArray<RelatedPrompt>\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 BrowseXModule} total results. /\n readonly browseTotalResults: number\n /* The {@link SearchXModule} selected sort. /\n readonly selectedSort: string\n /* The {@link BrowseXModule} selected sort. /\n readonly browseSelectedSort: 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\n/ eslint-enable ts/no-unsafe-return,ts/no-unsafe-member-access,ts/no-unsafe-assignment */\n"],"names":[],"mappings":"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"}

package/js/index.js CHANGED Viewed

@@ -145,6 +145,9 @@ export { default as BaseScroll } from './components/scroll/base-scroll.vue.js';
 export { useScroll } from './components/scroll/use-scroll.js';
 export { default as SlidingPanel } from './components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from './components/snippet-callbacks.vue.js';
+export { default as SortDropdown } from './components/sort/sort-dropdown.vue.js';
+export { default as SortList } from './components/sort/sort-list.vue.js';
+export { default as SortPickerList } from './components/sort/sort-picker-list.vue.js';
 export { default as BaseSuggestion } from './components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from './components/suggestions/base-suggestions.vue.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
@@ -211,7 +214,6 @@ export { aiXStoreModule } from './x-modules/ai/store/module.js';
 export { aiWiring } from './x-modules/ai/wiring.js';
 export { aiXModule } from './x-modules/ai/x-module.js';
 export { default as BrowseResultsList } from './x-modules/browse/components/browse-results-list.vue.js';
-export { default as BrowseSortPickerList } from './x-modules/browse/components/browse-sort-picker-list.vue.js';
 export { cancelFetchAndSaveBrowseResponse, fetchAndSaveBrowseResponse } from './x-modules/browse/store/actions/fetch-and-save-browse-response.action.js';
 export { fetchAndSaveResultsEnrichment as fetchAndSaveBrowseResultsEnrichment } from './x-modules/browse/store/actions/fetch-and-save-results-enrichment.action.js';
 export { fetchBrowseResponse } from './x-modules/browse/store/actions/fetch-browse-response.action.js';
@@ -411,9 +413,6 @@ export { default as Promoted } from './x-modules/search/components/promoted.vue.
 export { default as PromotedsList } from './x-modules/search/components/promoteds-list.vue.js';
 export { default as Redirection } from './x-modules/search/components/redirection.vue.js';
 export { default as ResultsList } from './x-modules/search/components/results-list.vue.js';
-export { default as SortDropdown } from './x-modules/search/components/sort-dropdown.vue.js';
-export { default as SortList } from './x-modules/search/components/sort-list.vue.js';
-export { default as SortPickerList } from './x-modules/search/components/sort-picker-list.vue.js';
 export { default as SpellcheckButton } from './x-modules/search/components/spellcheck-button.vue.js';
 export { default as Spellcheck } from './x-modules/search/components/spellcheck.vue.js';
 export { cancelFetchAndSavePartialResultsEnrichment, fetchAndSavePartialResultsEnrichment } from './x-modules/search/store/actions/fetch-and-save-partial-results-enrichment.action.js';

package/js/index.js.map CHANGED Viewed

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

package/js/x-modules/ai/components/ai-carousel.vue2.js CHANGED Viewed

@@ -87,6 +87,10 @@ import '@empathyco/x-utils';
 import { use$x } from '../../../composables/use-_x.js';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/sort/sort-dropdown.vue2.js';
+import '../../../components/sort/sort-list.vue2.js';
+import '../../../components/sort/sort-list.vue3.js';
+import '../../../components/sort/sort-picker-list.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';

package/js/x-modules/ai/components/ai-carousel.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n\n <AiGroupedCarousel v-if=\"group\">\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <template #result=\"{ result }\">\n <slot name=\"result\" :result=\"result\" />\n </template>\n </AiGroupedCarousel>\n\n <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n <DisplayEmitter\n v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-query-display-emitter\"\n >\n <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n <BaseEventButton\n class=\"x-ai-carousel-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-carousel-suggestion-results\">\n <li\n v-for=\"result in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n AiGroupedCarousel,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: String,\n / Controls whether the carousel should group results or display N carousels per N queries. /\n group: {\n type: Boolean,\n default: true,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement \| null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /\n Checks if the title is overflowing and updates the state.\n /\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /\n Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-carousel-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.x-ai-carousel-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}
1	+ {"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n\n <AiGroupedCarousel v-if=\"group\">\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <template #result=\"{ result }\">\n <slot name=\"result\" :result=\"result\" />\n </template>\n </AiGroupedCarousel>\n\n <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n <DisplayEmitter\n v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query \|\| 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-query-display-emitter\"\n >\n <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n <BaseEventButton\n class=\"x-ai-carousel-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-carousel-suggestion-results\">\n <li\n v-for=\"result in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n AiGroupedCarousel,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: String,\n / Controls whether the carousel should group results or display N carousels per N queries. /\n group: {\n type: Boolean,\n default: true,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement \| null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /\n Checks if the title is overflowing and updates the state.\n /\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /\n Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n\n.x-ai-carousel-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.x-ai-carousel-suggestion-query-btn {\n border-color: transparent;\n background-color: transparent;\n margin-left: 1rem;\n margin-right: 1rem;\n font-weight: 700;\n width: fit-content;\n display: flex;\n align-items: center;\n gap: 1rem;\n cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\n\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}

package/js/x-modules/ai/components/ai-grouped-carousel.vue2.js CHANGED Viewed

@@ -88,6 +88,10 @@ import '../../../plugins/x-plugin.js';
 import 'rxjs';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/sort/sort-dropdown.vue2.js';
+import '../../../components/sort/sort-list.vue2.js';
+import '../../../components/sort/sort-list.vue3.js';
+import '../../../components/sort/sort-picker-list.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';

package/js/x-modules/ai/components/ai-grouped-carousel.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-grouped-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n components: {\n DisplayClickProvider,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. */\n slidingPanelButtonsClasses: String,\n },\n setup() {\n const { suggestionsSearch, tagging } = useState('ai')\n\n return {\n suggestionsSearch,\n tagging,\n }\n },\n})\n</script>\n"],"names":["DisplayClickProvider"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA0CA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;8BACVA,WAAoB;QACpB,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;AACnC,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,iBAAiB,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEpD,OAAO;YACL,iBAAiB;YACjB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"ai-grouped-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\n :button-class=\"slidingPanelButtonsClasses\"\n :reset-on-content-change=\"false\"\n >\n <template #sliding-panel-addons=\"{ arrivedState }\">\n <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n </template>\n <template #sliding-panel-left-button>\n <slot name=\"sliding-panels-left-button\" />\n </template>\n <template #sliding-panel-right-button>\n <slot name=\"sliding-panels-right-button\" />\n </template>\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n components: {\n DisplayClickProvider,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. */\n slidingPanelButtonsClasses: String,\n },\n setup() {\n const { suggestionsSearch, tagging } = useState('ai')\n\n return {\n suggestionsSearch,\n tagging,\n }\n },\n})\n</script>\n"],"names":["DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;8BACVA,WAAoB;QACpB,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;AACnC,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,iBAAiB,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEpD,OAAO;YACL,iBAAiB;YACjB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/browse/store/actions/set-url-params.action.js CHANGED Viewed

@@ -13,7 +13,7 @@ const setUrlParams = ({ commit, state }, { browseValue, browseField, page, sort
         (currentCategory.browseValue === browseValue && currentCategory.browseField === browseField)
         ? page
         : 1);
-    commit('setSort', sort);
+    commit('setSort', browseValue && browseField ? sort : '');
 };
 export { setUrlParams };

package/js/x-modules/browse/store/actions/set-url-params.action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/browse/store/actions/set-url-params.action.ts"],"sourcesContent":["import type { BrowseXStoreModule } from '../types'\n\n/*\n Default implementation for the {@link BrowseActions.setUrlParams}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param urlParams - List of params from the url.\n * @public\n */\nexport const setUrlParams: BrowseXStoreModule['actions']['setUrlParams'] = (\n { commit, state },\n { browseValue, browseField, page, sort },\n) => {\n const currentCategory = state.selectedCategory\n\n commit('setSelectedCategory', { browseValue, browseField })\n commit(\n 'setPage',\n !currentCategory \|\|\n (currentCategory.browseValue === browseValue && currentCategory.browseField === browseField)\n ? page\n : 1,\n )\n commit('setSort', sort)\n}\n"],"names":[],"mappings":"AAEA;;;;;;;AAOG;MACU,YAAY,GAAkD,CACzE,EAAE,MAAM,EAAE,KAAK,EAAE,EACjB,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KACtC;AACF,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,gBAAgB;IAE9C,MAAM,CAAC,qBAAqB,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC3D,IAAA,MAAM,CACJ,SAAS,EACT,CAAC,eAAe;SACb,eAAe,CAAC,WAAW,KAAK,WAAW,IAAI,eAAe,CAAC,WAAW,KAAK,WAAW;AAC3F,UAAE;UACA,CAAC,CACN;AACD,IAAA,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC;~~AACzB~~;;;;"}
1	+ {"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/browse/store/actions/set-url-params.action.ts"],"sourcesContent":["import type { BrowseXStoreModule } from '../types'\n\n/*\n Default implementation for the {@link BrowseActions.setUrlParams}.\n \n @param context - The {@link https://vuex.vuejs.org/guide/actions.html \| context} of the actions,\n * provided by Vuex.\n * @param urlParams - List of params from the url.\n * @public\n */\nexport const setUrlParams: BrowseXStoreModule['actions']['setUrlParams'] = (\n { commit, state },\n { browseValue, browseField, page, sort },\n) => {\n const currentCategory = state.selectedCategory\n\n commit('setSelectedCategory', { browseValue, browseField })\n commit(\n 'setPage',\n !currentCategory \|\|\n (currentCategory.browseValue === browseValue && currentCategory.browseField === browseField)\n ? page\n : 1,\n )\n commit('setSort', browseValue && browseField ? sort : '')\n}\n"],"names":[],"mappings":"AAEA;;;;;;;AAOG;MACU,YAAY,GAAkD,CACzE,EAAE,MAAM,EAAE,KAAK,EAAE,EACjB,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KACtC;AACF,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,gBAAgB;IAE9C,MAAM,CAAC,qBAAqB,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC3D,IAAA,MAAM,CACJ,SAAS,EACT,CAAC,eAAe;SACb,eAAe,CAAC,WAAW,KAAK,WAAW,IAAI,eAAe,CAAC,WAAW,KAAK,WAAW;AAC3F,UAAE;UACA,CAAC,CACN;AACD,IAAA,MAAM,CAAC,SAAS,EAAE,WAAW,IAAI,WAAW,GAAG,IAAI,GAAG,EAAE,CAAC;AAC3D;;;;"}

package/js/x-modules/browse/wiring.js CHANGED Viewed

@@ -181,7 +181,7 @@ const browseWiring = createWiring({
     ReloadBrowseRequested: {
         resetBrowseStateForReloadWire,
     },
-    SelectedSortProvided: {
+    SelectedBrowseSortProvided: {
         setBrowseSort,
     },
     ExtraParamsChanged: {
@@ -197,6 +197,11 @@ const browseWiring = createWiring({
         resetBrowseStateForReloadWire,
         cancelFetchAndSaveBrowseResponseWire,
     },
+    UserAcceptedAQuery: {
+        clearBrowseQuery,
+        resetBrowseStateForReloadWire,
+        cancelFetchAndSaveBrowseResponseWire,
+    },
     UserClickedOutOfMainModal: {
         clearBrowseQuery,
     },

package/js/x-modules/browse/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/browse/wiring.ts"],"sourcesContent":["import type { WirePayload } from '../../wiring'\nimport type { InternalBrowseRequest } from './types'\nimport {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload,\n} from '../../wiring'\n\n/*\n `browse` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'browse'\n\n/\n WireCommit for {@link BrowseXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/\n WireCommit without Payload for {@link BrowseXModule}.\n \n @internal\n /\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n\n/\n WireDispatch for {@link BrowseXModule}.\n \n @internal\n /\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/\n WireDispatchWithoutPayload for {@link BrowseXModule}.\n \n @internal\n /\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/\n Cancels the {@link BrowseActions.fetchAndSaveBrowseResponse} request promise.\n \n @public\n /\nexport const cancelFetchAndSaveBrowseResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveBrowseResponse',\n)\n\n/\n Sets the browse state `origin`.\n \n @public\n /\nexport const saveBrowseOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/\n Requests and stores the browse response.\n \n @public\n /\nexport const fetchAndSaveBrowseResponseWire = wireDispatch('fetchAndSaveBrowseResponse')\n\n/\n Requests and stores the enrichment results for the results.\n \n @public\n /\nexport const fetchAndSaveBrowseResultsEnrichmentWire = wireDispatch('fetchAndSaveResultsEnrichment')\n\n/\n Sets the browse state `selectedCategory`.\n \n @public\n /\nexport const setBrowseCategory = wireCommit('setSelectedCategory')\n\n/\n Clears the browse state `selectedCategory`.\n \n @public\n /\nexport const clearBrowseQuery = wireCommit('setSelectedCategory', {\n browseField: '',\n browseValue: '',\n})\n\n/\n Sets the browse state `selectedFilters`.\n \n @public\n /\nexport const setBrowseSelectedFilters = wireCommit('setSelectedFilters')\n\n/\n Sets the browse state `sort`.\n \n @public\n /\nexport const setBrowseSort = wireCommit('setSort')\n\n/\n Sets the browse state `query`.\n \n @public\n /\nexport const setBrowseUrlParamsWire = wireDispatch('setUrlParams')\n\n/\n Sets the browse state `page`.\n \n @public\n /\nexport const setBrowsePage = wireCommit('setPage')\n\n/\n Sets the browse state `params`.\n \n @public\n /\nexport const setBrowseExtraParams = wireCommit('setParams')\n\n/\n Resets the browse state to reload the current browse.\n \n @public\n /\nexport const resetBrowseStateForReloadWire = wireCommitWithoutPayload('resetStateForReload')\n\n/\n Resets the browse state `isNoResults`.\n \n @public\n /\nexport const resetIsNoBrowseResults = wireCommit('setIsNoResults', false)\n\n/\n Resets the browse state `fromNoResultsWithFilters`.\n \n @public\n /\nexport const resetFromNoBrowseResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false)\n\n/\n Increases the current browse state `page` by one.\n \n @public\n /\nexport const increaseBrowsePageAppendingResultsWire = wireDispatchWithoutPayload(\n 'increasePageAppendingResults',\n)\n\n/\n Resets the browse state `isAppendingResults`.\n \n @public\n /\nexport const resetBrowseAppending = wireCommit('setIsAppendResults', false)\n\n/\n Resets the {@link BrowseGetters.request} parameters when refining request and before the actual\n * request is launched.\n \n @public\n /\nexport const resetBrowseRequestOnRefinementWire = wireDispatch(\n 'resetRequestOnRefinement',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalBrowseRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalBrowseRequest,\n }),\n)\n\n/\n Resets the browse state when the request is changed to null. See the\n * {@link BrowseXStoreModule} for details.\n \n @public\n /\nexport const resetBrowseStateIfNoRequestWire = filterTruthyPayload<InternalBrowseRequest \| null>(\n wireCommitWithoutPayload('resetState'),\n)\n\n/\n Browse wiring.\n \n @internal\n */\nexport const browseWiring = createWiring({\n ParamsLoadedFromUrl: {\n setBrowseUrlParamsWire,\n saveBrowseOriginWire,\n },\n UserClickedABrowseSort: {\n setBrowseSort,\n },\n UserReachedResultsListEnd: {\n increaseBrowsePageAppendingResultsWire,\n },\n BrowseRequestUpdated: {\n resetBrowseStateIfNoRequestWire,\n fetchAndSaveBrowseResponseWire,\n },\n BrowseRequestChanged: {\n resetBrowseRequestOnRefinementWire,\n },\n SelectedFiltersForRequestChanged: {\n setBrowseSelectedFilters,\n },\n ResultsChanged: {\n resetBrowseAppending,\n fetchAndSaveBrowseResultsEnrichmentWire,\n },\n ReloadBrowseRequested: {\n resetBrowseStateForReloadWire,\n },\n ~~SelectedSortProvided~~: {\n setBrowseSort,\n },\n ExtraParamsChanged: {\n setBrowseExtraParams,\n },\n UserClickedCloseX: {\n clearBrowseQuery,\n resetBrowseStateForReloadWire,\n cancelFetchAndSaveBrowseResponseWire,\n },\n UserClickedOpenX: {\n clearBrowseQuery,\n resetBrowseStateForReloadWire,\n cancelFetchAndSaveBrowseResponseWire,\n },\n UserClickedOutOfMainModal: {\n clearBrowseQuery,\n },\n UserSelectedAPage: {\n setBrowsePage,\n resetBrowseAppending,\n },\n UserBrowsedToCategory: {\n setBrowseCategory,\n },\n})\n"],"names":[],"mappings":";;;;AAWA;;;;AAIG;AACH,MAAM,UAAU,GAAG,QAAQ;AAE3B;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC;AAEnD;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC;AAE/E;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEvD;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC;AAEnF;;;;AAIG;MACU,oCAAoC,GAAG,0BAA0B,CAC5E,kCAAkC;AAGpC;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ;AAEzF;;;;AAIG;MACU,8BAA8B,GAAG,YAAY,CAAC,4BAA4B;AAEvF;;;;AAIG;MACU,uCAAuC,GAAG,YAAY,CAAC,+BAA+B;AAEnG;;;;AAIG;MACU,iBAAiB,GAAG,UAAU,CAAC,qBAAqB;AAEjE;;;;AAIG;AACI,MAAM,gBAAgB,GAAG,UAAU,CAAC,qBAAqB,EAAE;AAChE,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,EAAE;AAChB,CAAA;AAED;;;;AAIG;MACU,wBAAwB,GAAG,UAAU,CAAC,oBAAoB;AAEvE;;;;AAIG;MACU,aAAa,GAAG,UAAU,CAAC,SAAS;AAEjD;;;;AAIG;MACU,sBAAsB,GAAG,YAAY,CAAC,cAAc;AAEjE;;;;AAIG;MACU,aAAa,GAAG,UAAU,CAAC,SAAS;AAEjD;;;;AAIG;MACU,oBAAoB,GAAG,UAAU,CAAC,WAAW;AAE1D;;;;AAIG;MACU,6BAA6B,GAAG,wBAAwB,CAAC,qBAAqB;AAE3F;;;;AAIG;AACI,MAAM,sBAAsB,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK;AAExE;;;;AAIG;AACI,MAAM,mCAAmC,GAAG,UAAU,CAAC,6BAA6B,EAAE,KAAK;AAElG;;;;AAIG;MACU,sCAAsC,GAAG,0BAA0B,CAC9E,8BAA8B;AAGhC;;;;AAIG;AACI,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,EAAE,KAAK;AAE1E;;;;;AAKG;MACU,kCAAkC,GAAG,YAAY,CAC5D,0BAA0B,EAC1B,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAsC,MAAM;IAC7F,UAAU;AACV,IAAA,UAAU,EAAE,QAAiC;AAC9C,CAAA,CAAC;AAGJ;;;;;AAKG;AACI,MAAM,+BAA+B,GAAG,mBAAmB,CAChE,wBAAwB,CAAC,YAAY,CAAC;AAGxC;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,mBAAmB,EAAE;QACnB,sBAAsB;QACtB,oBAAoB;AACrB,KAAA;AACD,IAAA,sBAAsB,EAAE;QACtB,aAAa;AACd,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,sCAAsC;AACvC,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,+BAA+B;QAC/B,8BAA8B;AAC/B,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,kCAAkC;AACnC,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,wBAAwB;AACzB,KAAA;AACD,IAAA,cAAc,EAAE;QACd,oBAAoB;QACpB,uCAAuC;AACxC,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,6BAA6B;AAC9B,KAAA;AACD,IAAA,~~oBAAoB~~,EAAE;~~QACpB~~,aAAa;AACd,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,oBAAoB;AACrB,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,gBAAgB;QAChB,6BAA6B;QAC7B,oCAAoC;AACrC,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,gBAAgB;QAChB,6BAA6B;QAC7B,oCAAoC;AACrC,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,gBAAgB;AACjB,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,aAAa;QACb,oBAAoB;AACrB,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,iBAAiB;AAClB,KAAA;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/browse/wiring.ts"],"sourcesContent":["import type { WirePayload } from '../../wiring'\nimport type { InternalBrowseRequest } from './types'\nimport {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload,\n} from '../../wiring'\n\n/*\n `browse` {@link XModuleName \| XModule name}.\n \n @internal\n /\nconst moduleName = 'browse'\n\n/\n WireCommit for {@link BrowseXModule}.\n \n @internal\n /\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/\n WireCommit without Payload for {@link BrowseXModule}.\n \n @internal\n /\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n\n/\n WireDispatch for {@link BrowseXModule}.\n \n @internal\n /\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/\n WireDispatchWithoutPayload for {@link BrowseXModule}.\n \n @internal\n /\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/\n Cancels the {@link BrowseActions.fetchAndSaveBrowseResponse} request promise.\n \n @public\n /\nexport const cancelFetchAndSaveBrowseResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveBrowseResponse',\n)\n\n/\n Sets the browse state `origin`.\n \n @public\n /\nexport const saveBrowseOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/\n Requests and stores the browse response.\n \n @public\n /\nexport const fetchAndSaveBrowseResponseWire = wireDispatch('fetchAndSaveBrowseResponse')\n\n/\n Requests and stores the enrichment results for the results.\n \n @public\n /\nexport const fetchAndSaveBrowseResultsEnrichmentWire = wireDispatch('fetchAndSaveResultsEnrichment')\n\n/\n Sets the browse state `selectedCategory`.\n \n @public\n /\nexport const setBrowseCategory = wireCommit('setSelectedCategory')\n\n/\n Clears the browse state `selectedCategory`.\n \n @public\n /\nexport const clearBrowseQuery = wireCommit('setSelectedCategory', {\n browseField: '',\n browseValue: '',\n})\n\n/\n Sets the browse state `selectedFilters`.\n \n @public\n /\nexport const setBrowseSelectedFilters = wireCommit('setSelectedFilters')\n\n/\n Sets the browse state `sort`.\n \n @public\n /\nexport const setBrowseSort = wireCommit('setSort')\n\n/\n Sets the browse state `query`.\n \n @public\n /\nexport const setBrowseUrlParamsWire = wireDispatch('setUrlParams')\n\n/\n Sets the browse state `page`.\n \n @public\n /\nexport const setBrowsePage = wireCommit('setPage')\n\n/\n Sets the browse state `params`.\n \n @public\n /\nexport const setBrowseExtraParams = wireCommit('setParams')\n\n/\n Resets the browse state to reload the current browse.\n \n @public\n /\nexport const resetBrowseStateForReloadWire = wireCommitWithoutPayload('resetStateForReload')\n\n/\n Resets the browse state `isNoResults`.\n \n @public\n /\nexport const resetIsNoBrowseResults = wireCommit('setIsNoResults', false)\n\n/\n Resets the browse state `fromNoResultsWithFilters`.\n \n @public\n /\nexport const resetFromNoBrowseResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false)\n\n/\n Increases the current browse state `page` by one.\n \n @public\n /\nexport const increaseBrowsePageAppendingResultsWire = wireDispatchWithoutPayload(\n 'increasePageAppendingResults',\n)\n\n/\n Resets the browse state `isAppendingResults`.\n \n @public\n /\nexport const resetBrowseAppending = wireCommit('setIsAppendResults', false)\n\n/\n Resets the {@link BrowseGetters.request} parameters when refining request and before the actual\n * request is launched.\n \n @public\n /\nexport const resetBrowseRequestOnRefinementWire = wireDispatch(\n 'resetRequestOnRefinement',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalBrowseRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalBrowseRequest,\n }),\n)\n\n/\n Resets the browse state when the request is changed to null. See the\n * {@link BrowseXStoreModule} for details.\n \n @public\n /\nexport const resetBrowseStateIfNoRequestWire = filterTruthyPayload<InternalBrowseRequest \| null>(\n wireCommitWithoutPayload('resetState'),\n)\n\n/\n Browse wiring.\n \n @internal\n */\nexport const browseWiring = createWiring({\n ParamsLoadedFromUrl: {\n setBrowseUrlParamsWire,\n saveBrowseOriginWire,\n },\n UserClickedABrowseSort: {\n setBrowseSort,\n },\n UserReachedResultsListEnd: {\n increaseBrowsePageAppendingResultsWire,\n },\n BrowseRequestUpdated: {\n resetBrowseStateIfNoRequestWire,\n fetchAndSaveBrowseResponseWire,\n },\n BrowseRequestChanged: {\n resetBrowseRequestOnRefinementWire,\n },\n SelectedFiltersForRequestChanged: {\n setBrowseSelectedFilters,\n },\n ResultsChanged: {\n resetBrowseAppending,\n fetchAndSaveBrowseResultsEnrichmentWire,\n },\n ReloadBrowseRequested: {\n resetBrowseStateForReloadWire,\n },\n SelectedBrowseSortProvided: {\n setBrowseSort,\n },\n ExtraParamsChanged: {\n setBrowseExtraParams,\n },\n UserClickedCloseX: {\n clearBrowseQuery,\n resetBrowseStateForReloadWire,\n cancelFetchAndSaveBrowseResponseWire,\n },\n UserClickedOpenX: {\n clearBrowseQuery,\n resetBrowseStateForReloadWire,\n cancelFetchAndSaveBrowseResponseWire,\n },\n UserAcceptedAQuery: {\n clearBrowseQuery,\n resetBrowseStateForReloadWire,\n cancelFetchAndSaveBrowseResponseWire,\n },\n UserClickedOutOfMainModal: {\n clearBrowseQuery,\n },\n UserSelectedAPage: {\n setBrowsePage,\n resetBrowseAppending,\n },\n UserBrowsedToCategory: {\n setBrowseCategory,\n },\n})\n"],"names":[],"mappings":"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"}

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

@@ -87,6 +87,10 @@ import { use$x } from '../../../composables/use-_x.js';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/sort/sort-dropdown.vue2.js';
+import '../../../components/sort/sort-list.vue2.js';
+import '../../../components/sort/sort-list.vue3.js';
+import '../../../components/sort/sort-picker-list.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpenAndHasContent\"\n ref=\"empathizeRef\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/*\n Component containing the empathize. It has a required slot to define its content.\n \n @public\n /\nexport 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 /* Whether the empathize has content or not. As it is only known in the client, it is a prop. /\n hasContent: {\n type: Boolean,\n default: true,\n },\n /* Fallback flag to trigger a search and close the empathize when has no-content. /\n searchAndCloseOnNoContent: {\n type: Boolean,\n default: false,\n },\n /* Debounce time in milliseconds to search and close the empathize when has no-content. /\n searchAndCloseDebounceInMs: {\n type: Number,\n default: 1000,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const empathizeRef = ref<HTMLDivElement \| null>(null)\n const isOpen = ref(false)\n const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n /* Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. /\n watch(isOpenAndHasContent, () => {\n const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n })\n\n /* Debounce function to change the state `isOpen` to the new value. /\n const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n /\n Open empathize. This function will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n * element.\n /\n function open() {\n changeOpenDebounced(true)\n }\n\n /\n Close empathize. This function will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n * element.\n /\n function close() {\n const activeElement = getActiveElement()\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpenDebounced(false)\n }\n }\n\n /* Events subscriptions to open and close empathize. /\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n /* Debounced function to unwatch the search-box query and also search and close empathize. /\n const searchAndCloseDebounced = useDebounce(async () => {\n if (isOpen.value) {\n unwatchSearchBoxQuery()\n await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n close()\n }\n }, props.searchAndCloseDebounceInMs)\n\n /\n Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n * with the following casuistics:\n * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n * search fallback when the user types in the search-box during debounced time.\n */\n watch(\n () => props.hasContent,\n () => {\n if (props.searchAndCloseOnNoContent) {\n if (props.hasContent) {\n unwatchSearchBoxQuery()\n searchAndCloseDebounced.cancel()\n } else {\n unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n immediate: true,\n })\n }\n }\n },\n )\n\n return { empathizeRef, isOpenAndHasContent, open, close }\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` and `hasContent` to `true`.\n The event 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` and `hasContent` to `true`.\n The event 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`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n <Empathize>\n <BaseKeyboardNavigation>\n <QuerySuggestions />\n <PopularSearches />\n <HistoryQueries />\n </BaseKeyboardNavigation>\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\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<template>\n <Empathize\n :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n >\n Please, type a query in the Search Box.\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\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` and a slot inside:\n\n```vue\n<template>\n <Empathize :animation=\"collapseFromTop\">\n <PopularSearches />\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n <Empathize\n :animation=\"empathizeAnimation\"\n :events-to-close-empathize=\"empathizeCloseEvents\"\n :has-content=\"showEmpathize\"\n :search-and-close-debounce-in-ms=\"500\"\n search-and-close-on-no-content\n >\n <BaseKeyboardNavigation>\n <QuerySuggestions />\n <PopularSearches />\n <HistoryQueries />\n </BaseKeyboardNavigation>\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}
1	+ {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpenAndHasContent\"\n ref=\"empathizeRef\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/*\n Component containing the empathize. It has a required slot to define its content.\n \n @public\n /\nexport 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 /* Whether the empathize has content or not. As it is only known in the client, it is a prop. /\n hasContent: {\n type: Boolean,\n default: true,\n },\n /* Fallback flag to trigger a search and close the empathize when has no-content. /\n searchAndCloseOnNoContent: {\n type: Boolean,\n default: false,\n },\n /* Debounce time in milliseconds to search and close the empathize when has no-content. /\n searchAndCloseDebounceInMs: {\n type: Number,\n default: 1000,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const empathizeRef = ref<HTMLDivElement \| null>(null)\n const isOpen = ref(false)\n const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n /* Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. /\n watch(isOpenAndHasContent, () => {\n const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n })\n\n /* Debounce function to change the state `isOpen` to the new value. /\n const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n /\n Open empathize. This function will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n * element.\n /\n function open() {\n changeOpenDebounced(true)\n }\n\n /\n Close empathize. This function will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n * element.\n /\n function close() {\n const activeElement = getActiveElement()\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpenDebounced(false)\n }\n }\n\n /* Events subscriptions to open and close empathize. /\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n /* Debounced function to unwatch the search-box query and also search and close empathize. /\n const searchAndCloseDebounced = useDebounce(async () => {\n if (isOpen.value) {\n unwatchSearchBoxQuery()\n await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n close()\n }\n }, props.searchAndCloseDebounceInMs)\n\n /\n Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n * with the following casuistics:\n * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n * search fallback when the user types in the search-box during debounced time.\n */\n watch(\n () => props.hasContent,\n () => {\n if (props.searchAndCloseOnNoContent) {\n if (props.hasContent) {\n unwatchSearchBoxQuery()\n searchAndCloseDebounced.cancel()\n } else {\n unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n immediate: true,\n })\n }\n }\n },\n )\n\n return { empathizeRef, isOpenAndHasContent, open, close }\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` and `hasContent` to `true`.\n The event 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` and `hasContent` to `true`.\n The event 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`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n <Empathize>\n <BaseKeyboardNavigation>\n <QuerySuggestions />\n <PopularSearches />\n <HistoryQueries />\n </BaseKeyboardNavigation>\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\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<template>\n <Empathize\n :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n >\n Please, type a query in the Search Box.\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\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` and a slot inside:\n\n```vue\n<template>\n <Empathize :animation=\"collapseFromTop\">\n <PopularSearches />\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n <Empathize\n :animation=\"empathizeAnimation\"\n :events-to-close-empathize=\"empathizeCloseEvents\"\n :has-content=\"showEmpathize\"\n :search-and-close-debounce-in-ms=\"500\"\n search-and-close-on-no-content\n >\n <BaseKeyboardNavigation>\n <QuerySuggestions />\n <PopularSearches />\n <HistoryQueries />\n </BaseKeyboardNavigation>\n </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}

package/js/x-modules/queries-preview/components/query-preview-button.vue2.js CHANGED Viewed

@@ -89,6 +89,10 @@ import 'rxjs';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/sort/sort-dropdown.vue2.js';
+import '../../../components/sort/sort-list.vue2.js';
+import '../../../components/sort/sort-list.vue3.js';
+import '../../../components/sort/sort-picker-list.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';

package/js/x-modules/queries-preview/components/query-preview-button.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n <BaseEventButton\n :events=\"events\"\n :metadata=\"metadata\"\n class=\"x-query-preview-button xds:button\"\n data-test=\"query-preview-button\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot :query-preview-info=\"fullQueryPreviewInfo\">\n {{ queryPreviewInfo.query }}\n </slot>\n </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/*\n Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n \n It has a default slot to customize its contents.\n \n @public\n /\nexport default defineComponent({\n name: 'QueryPreviewButton',\n xModule: queriesPreviewXModule.name,\n components: { BaseEventButton },\n props: {\n /\n The information about the request of the query preview.\n \n @public\n /\n queryPreviewInfo: {\n type: Object as PropType<QueryPreviewInfo>,\n required: true,\n },\n /\n The metadata property for the request on each query preview.\n \n @public\n /\n metadata: {\n type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n },\n },\n setup(props) {\n /\n We use the module extra params to combine them with the query preview's extra params.\n /\n const { params } = useState('queriesPreview')\n\n /\n The provided query preview with the base extra params from the module merged in.\n \n @returns The query preview info with the base extra params merged in.\n * @public\n /\n const fullQueryPreviewInfo = computed(\n (): QueryPreviewInfo => ({\n ...props.queryPreviewInfo,\n extraParams: {\n ...params.value,\n ...props.queryPreviewInfo.extraParams,\n },\n filters: props.queryPreviewInfo.filters,\n }),\n )\n\n /\n List of events to emit by the BaseEventButton.\n \n @returns An object with the event and payload.\n \n @internal\n */\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n )\n\n return {\n fullQueryPreviewInfo,\n events,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default.\n\n```vue\n<template>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'shoes' })\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot.\n\n```vue\n<template>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n {{ `Search for: ${queryPreviewInfo.query}` }}\n </QueryPreviewButton>\n</template>\n\n<script setup>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'shoes' })\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAoD;AAC3D,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;QACF,MAAM,EAAE,QAAO,GAAI,QAAQ,CAAC,gBAAgB,CAAA;AAE5C;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW;AACtC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO;AACxC,SAAA,CAAC,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,KAAI,EAAG,CAAC,CAC1F;QAEA,OAAO;YACL,oBAAoB;YACpB,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n <BaseEventButton\n :events=\"events\"\n :metadata=\"metadata\"\n class=\"x-query-preview-button xds:button\"\n data-test=\"query-preview-button\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot :query-preview-info=\"fullQueryPreviewInfo\">\n {{ queryPreviewInfo.query }}\n </slot>\n </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/*\n Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n \n It has a default slot to customize its contents.\n \n @public\n /\nexport default defineComponent({\n name: 'QueryPreviewButton',\n xModule: queriesPreviewXModule.name,\n components: { BaseEventButton },\n props: {\n /\n The information about the request of the query preview.\n \n @public\n /\n queryPreviewInfo: {\n type: Object as PropType<QueryPreviewInfo>,\n required: true,\n },\n /\n The metadata property for the request on each query preview.\n \n @public\n /\n metadata: {\n type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n },\n },\n setup(props) {\n /\n We use the module extra params to combine them with the query preview's extra params.\n /\n const { params } = useState('queriesPreview')\n\n /\n The provided query preview with the base extra params from the module merged in.\n \n @returns The query preview info with the base extra params merged in.\n * @public\n /\n const fullQueryPreviewInfo = computed(\n (): QueryPreviewInfo => ({\n ...props.queryPreviewInfo,\n extraParams: {\n ...params.value,\n ...props.queryPreviewInfo.extraParams,\n },\n filters: props.queryPreviewInfo.filters,\n }),\n )\n\n /\n List of events to emit by the BaseEventButton.\n \n @returns An object with the event and payload.\n \n @internal\n */\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n )\n\n return {\n fullQueryPreviewInfo,\n events,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default.\n\n```vue\n<template>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'shoes' })\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot.\n\n```vue\n<template>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n {{ `Search for: ${queryPreviewInfo.query}` }}\n </QueryPreviewButton>\n</template>\n\n<script setup>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'shoes' })\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAoD;AAC3D,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;QACF,MAAM,EAAE,QAAO,GAAI,QAAQ,CAAC,gBAAgB,CAAA;AAE5C;;;;;AAKE;AACF,QAAA,MAAM,oBAAmB,GAAI,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW;AACtC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO;AACxC,SAAA,CAAC,CACJ;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,KAAI,EAAG,CAAC,CAC1F;QAEA,OAAO;YACL,oBAAoB;YACpB,MAAM;SACR;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/queries-preview/components/query-preview.vue2.js CHANGED Viewed

@@ -90,6 +90,10 @@ import { useXBus } from '../../../composables/use-x-bus.js';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/sort/sort-dropdown.vue2.js';
+import '../../../components/sort/sort-list.vue2.js';
+import '../../../components/sort/sort-list.vue3.js';
+import '../../../components/sort/sort-picker-list.vue2.js';
 import '../../../components/suggestions/base-suggestion.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';