@empathyco/x-components 6.0.0-alpha.5 → 6.0.0-alpha.51

package/js/x-modules/search/components/sort-dropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    @update:modelValue=\"emitUserClickedASort\"\n    :items=\"items\"\n    :modelValue=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { defineComponent, PropType, ref, watch } from 'vue';\n\n  import BaseDropdown from '../../../components/base-dropdown.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * The `SortDropdown` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortDropdown',\n    xModule: searchXModule.name,\n    components: { BaseDropdown },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for opening and closing the dropdown. */\n      animation: [String, Object] as PropType<string | typeof Vue>\n    },\n    emits: ['change'],\n    setup(_, { emit }) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n      const rootRef = ref<typeof BaseDropdown>();\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Emits the events related to the selection of a sort value.\n       *\n       * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n       * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n       *\n       * @param sort - The selected sort.\n       */\n      function emitUserClickedASort(sort: Sort) {\n        $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });\n        emit('change', sort);\n      }\n\n      return {\n        emitUserClickedASort,\n        rootRef,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` 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 be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` 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 both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\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 suggest, 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  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","emitUserClickedASort","selectedSort","animation","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;AA3BZ,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAmBC,uBAAoB,EAAA;AAAA,IACvC,GAAK,EAAA,SAAA;AAAA,IACL,qBAAYC,EAAAA,IAAAA,CAAAA,oBAAAA;AAAAA,IACZ,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,UAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IAAA,WAAA,EAAA,eAAA;IAEW,YAAM,EAAA,gBAAA;AAAA,GAAA,EAAA;AAOf,IAAA,MAAA,EAAAC,OAAA,CAA+D,CAlBrE,EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,MAkB2DC,kBAAA,CAAA,sSAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAE5C,OAAA,CAAA;AAAA,KAAA,CAAA;AAQT,IAAA,IAAA,EAAAJ,OAAA,CAAgF,CA5BtF,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,KAAA;AAAA,MA4B4EC,kBAAA,CAAA,2WAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AA5B5E,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    @update:modelValue=\"emitUserClickedASort\"\n    :items=\"items\"\n    :modelValue=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\n  import { Sort } from '@empathyco/x-types';\n  import Vue, { defineComponent, PropType, ref, watch } from 'vue';\n\n  import BaseDropdown from '../../../components/base-dropdown.vue';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * The `SortDropdown` component allows user to select the search results order. This component\n   * also allows to change the selected sort programmatically.\n   */\n  export default defineComponent({\n    name: 'SortDropdown',\n    xModule: searchXModule.name,\n    components: { BaseDropdown },\n    props: {\n      /** The list of possible sort values. */\n      items: {\n        type: Array as PropType<Sort[]>,\n        required: true\n      },\n      /** The transition to use for opening and closing the dropdown. */\n      animation: [String, Object] as PropType<string | typeof Vue>\n    },\n    emits: ['change'],\n    setup(_, { emit }) {\n      const $x = use$x();\n\n      const { sort: selectedSort } = useState('search', ['sort']);\n      const rootRef = ref<typeof BaseDropdown>();\n\n      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n        immediate: true\n      });\n\n      /**\n       * Emits the events related to the selection of a sort value.\n       *\n       * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n       * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n       *\n       * @param sort - The selected sort.\n       */\n      function emitUserClickedASort(sort: Sort) {\n        $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });\n        emit('change', sort);\n      }\n\n      return {\n        emitUserClickedASort,\n        rootRef,\n        selectedSort\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` 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 be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `value` 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 both the toggle button and each one of the possible sort\nvalues. This can be done with the`toggle` and `item` slots.\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 suggest, 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  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return { sortValues: ['Relevance', 'Price asc', 'Price desc'] };\n    }\n  };\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script>\n  import { SortDropdown } from '@empathyco/x-components/search';\n\n  export default {\n    components: {\n      SortDropdown\n    },\n    data() {\n      return {\n        selectedSort: 'Price asc',\n        sortValues: ['Relevance', 'Price asc', 'Price desc']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","emitUserClickedASort","selectedSort","animation","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;kCACEA,gBA6Be,CAAA,cAAA,CAAA,CAAA;AA3BZ,EAAA,OAAAC,SAAA,EAAA,EAAAC,WAAA,CAAmBC,uBAAoB,EAAA;AAAA,IACvC,GAAK,EAAA,SAAA;AAAA,IACL,qBAAYC,EAAAA,IAAAA,CAAAA,oBAAAA;AAAAA,IACZ,KAAWC,EAAAA,IAAAA,CAAAA,KAAAA;AAAAA,IACZ,UAAM,EAAA,IAAA,CAAA,YAAA;AAAA,IACN,WAAS,IAAC,CAAA,SAAA;AAAA,IACV,KAAA,EAAA,iBAAA;AAAA,IAAA,WAAA,EAAA,eAAA;IAEW,YAAM,EAAA,gBAAA;AAAA,GAAA,EAAA;YAXrBC,OAkBuD,CAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,KAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AAExC,OAAA,CAAA;AAAA,KAAA,CAAA;AApBf,IAAA,IAAA,EAAAH,OAAA,CAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EA4BwE,UAAI,EAAA,KAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,IAAA,EAAA,aAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;;;;;;AA5B5E,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js

@@ -24,13 +24,20 @@ const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions({
  */
 function enrichRequest(request, state) {
     const { page, ...restRequest } = request;
-    const { config: { pageSize }, origin, results } = state;
-    const start = page === 1 ? 0 : results.length;
+    const { config: { pageSize, pageMode }, origin, results } = state;
+    let start;
+    if (pageMode === 'infinite_scroll') {
+        start = page === 1 ? 0 : results.length;
+    }
+    else {
+        start = state.config.pageSize * (page - 1);
+    }
+    const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;
     return {
         ...restRequest,
         ...(origin && { origin }),
         start,
-        rows: pageSize * page - start
+        rows
     };
 }
 /**

package/js/x-modules/search/store/actions/fetch-and-save-search-response.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchRequest, SearchResponse } from '@empathyco/x-types';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  SearchActionContext,\n  InternalSearchRequest | null,\n  SearchResponse | null\n>({\n  fetch({ dispatch, state }, request) {\n    return request\n      ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n      : Promise.resolve(null);\n  },\n  onSuccess({ dispatch }, response) {\n    if (response !== null) {\n      dispatch('saveSearchResponse', response);\n    }\n  }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n  const { page, ...restRequest } = request;\n  const {\n    config: { pageSize },\n    origin,\n    results\n  } = state;\n  const start = page === 1 ? 0 : results.length;\n\n  return {\n    ...restRequest,\n    ...(origin && { origin }),\n    start,\n    rows: pageSize * page - start\n  };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AAChC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;AAC1C,SAAA;KACF;AACF,CAAA,CAAC,CAAC;AAEH;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;AACzC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,EACpB,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;AACV,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9C,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;AACL,QAAA,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK;KAC9B,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAa;AAEvD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}
+{"version":3,"file":"fetch-and-save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/fetch-and-save-search-response.action.ts"],"sourcesContent":["import { SearchRequest, SearchResponse } from '@empathyco/x-types';\nimport { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';\nimport { InternalSearchRequest } from '../../types';\nimport { SearchActionContext, SearchState } from '../types';\n\nconst { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<\n  SearchActionContext,\n  InternalSearchRequest | null,\n  SearchResponse | null\n>({\n  fetch({ dispatch, state }, request) {\n    return request\n      ? dispatch('fetchSearchResponse', enrichRequest(request, state))\n      : Promise.resolve(null);\n  },\n  onSuccess({ dispatch }, response) {\n    if (response !== null) {\n      dispatch('saveSearchResponse', response);\n    }\n  }\n});\n\n/**\n * Enriches the {@link SearchRequest} object with the origin and page properties taken from the\n * {@link SearchState | search state}.\n *\n * @param request - The {@link InternalSearchRequest}.\n * @param state - {@link SearchState}.\n *\n * @returns The search request.\n * @internal\n */\nfunction enrichRequest(request: InternalSearchRequest, state: SearchState): SearchRequest {\n  const { page, ...restRequest } = request;\n  const {\n    config: { pageSize, pageMode },\n    origin,\n    results\n  } = state;\n\n  let start;\n  if (pageMode === 'infinite_scroll') {\n    start = page === 1 ? 0 : results.length;\n  } else {\n    start = state.config.pageSize * (page - 1);\n  }\n\n  const rows = pageMode === 'infinite_scroll' ? pageSize * page - start : pageSize;\n\n  return {\n    ...restRequest,\n    ...(origin && { origin }),\n    start,\n    rows\n  };\n}\n\n/**\n * Default implementation for {@link SearchActions.fetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponse = fetchAndSave;\n\n/**\n * Default implementation for {@link SearchActions.cancelFetchAndSaveSearchResponse} action.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponse = cancelPrevious;\n"],"names":[],"mappings":";;AAKA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,yBAAyB,CAIhE;AACA,IAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAA;AAChC,QAAA,OAAO,OAAO;cACV,QAAQ,CAAC,qBAAqB,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAChE,cAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KAC3B;AACD,IAAA,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAA;QAC9B,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;AAC1C,SAAA;KACF;AACF,CAAA,CAAC,CAAC;AAEH;;;;;;;;;AASG;AACH,SAAS,aAAa,CAAC,OAA8B,EAAE,KAAkB,EAAA;IACvE,MAAM,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC;AACzC,IAAA,MAAM,EACJ,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC9B,MAAM,EACN,OAAO,EACR,GAAG,KAAK,CAAC;AAEV,IAAA,IAAI,KAAK,CAAC;IACV,IAAI,QAAQ,KAAK,iBAAiB,EAAE;AAClC,QAAA,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;AACzC,KAAA;AAAM,SAAA;AACL,QAAA,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC;AAC5C,KAAA;AAED,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAK,iBAAiB,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEjF,OAAO;AACL,QAAA,GAAG,WAAW;AACd,QAAA,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE;QACxB,KAAK;QACL,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,0BAA0B,GAAG,aAAa;AAEvD;;;;AAIG;AACI,MAAM,gCAAgC,GAAG;;;;"}

package/js/x-modules/search/store/actions/save-search-response.action.js

@@ -7,10 +7,11 @@
  *
  * @public
  */
-const saveSearchResponse = ({ commit, state, getters }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging, displayTagging }) => {
+const saveSearchResponse = ({ commit, state, getters }, { results, partialResults, facets, banners, promoteds, totalResults, spellcheck, redirections, queryTagging, displayTagging, stats }) => {
     if (totalResults === 0) {
         commit('setIsNoResults', true);
         if (getters.request && Object.keys(getters.request.filters).length > 0) {
+            commit('setSelectedFilters', []);
             commit('setFromNoResultsWithFilters', true);
         }
     }
@@ -38,6 +39,7 @@ const saveSearchResponse = ({ commit, state, getters }, { results, partialResult
     }
     commit('setTotalResults', totalResults);
     commit('setSpellcheck', spellcheck ?? '');
+    commit('setStats', stats);
 };
 
 export { saveSearchResponse };

package/js/x-modules/search/store/actions/save-search-response.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/save-search-response.action.ts"],"sourcesContent":["import { SearchXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchActions.saveSearchResponse}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param response - The {@link @empathyco/x-types#SearchResponse} to save.\n *\n * @public\n */\nexport const saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse'] = (\n  { commit, state, getters },\n  {\n    results,\n    partialResults,\n    facets,\n    banners,\n    promoteds,\n    totalResults,\n    spellcheck,\n    redirections,\n    queryTagging,\n    displayTagging\n  }\n) => {\n  if (totalResults === 0) {\n    commit('setIsNoResults', true);\n    if (getters.request && Object.keys(getters.request.filters!).length > 0) {\n      commit('setFromNoResultsWithFilters', true);\n    }\n  } else {\n    commit('setIsNoResults', false);\n  }\n\n  if (state.isAppendResults) {\n    commit('appendResults', results);\n  } else {\n    commit('setResults', results);\n    commit('setBanners', banners ?? []);\n    commit('setPromoteds', promoteds ?? []);\n    commit('setRedirections', redirections ?? []);\n  }\n\n  commit('setPartialResults', partialResults ?? []);\n\n  if (facets) {\n    commit('setFacets', facets);\n  }\n\n  if (queryTagging) {\n    commit('setQueryTagging', queryTagging);\n  }\n\n  if (displayTagging) {\n    commit('setDisplayTagging', displayTagging);\n  }\n\n  commit('setTotalResults', totalResults);\n  commit('setSpellcheck', spellcheck ?? '');\n};\n"],"names":[],"mappings":"AAEA;;;;;;;;AAQG;AACI,MAAM,kBAAkB,GAAwD,CACrF,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1B,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACf,KACC;IACF,IAAI,YAAY,KAAK,CAAC,EAAE;AACtB,QAAA,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAC/B,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AACvE,YAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC;AAC7C,SAAA;AACF,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AACjC,KAAA;IAED,IAAI,KAAK,CAAC,eAAe,EAAE;AACzB,QAAA,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAClC,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAC9B,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,CAAC,cAAc,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;AACxC,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;AAC/C,KAAA;AAED,IAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;AAElD,IAAA,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAC7B,KAAA;AAED,IAAA,IAAI,YAAY,EAAE;AAChB,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACzC,KAAA;AAED,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAC7C,KAAA;AAED,IAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACxC,IAAA,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;AAC5C;;;;"}
+{"version":3,"file":"save-search-response.action.js","sources":["../../../../../../src/x-modules/search/store/actions/save-search-response.action.ts"],"sourcesContent":["import { Stats } from '@empathyco/x-types';\nimport { SearchXStoreModule } from '../types';\n\n/**\n * Default implementation for the {@link SearchActions.saveSearchResponse}.\n *\n * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,\n * provided by Vuex.\n * @param response - The {@link @empathyco/x-types#SearchResponse} to save.\n *\n * @public\n */\nexport const saveSearchResponse: SearchXStoreModule['actions']['saveSearchResponse'] = (\n  { commit, state, getters },\n  {\n    results,\n    partialResults,\n    facets,\n    banners,\n    promoteds,\n    totalResults,\n    spellcheck,\n    redirections,\n    queryTagging,\n    displayTagging,\n    stats\n  }\n) => {\n  if (totalResults === 0) {\n    commit('setIsNoResults', true);\n    if (getters.request && Object.keys(getters.request.filters!).length > 0) {\n      commit('setSelectedFilters', []);\n      commit('setFromNoResultsWithFilters', true);\n    }\n  } else {\n    commit('setIsNoResults', false);\n  }\n\n  if (state.isAppendResults) {\n    commit('appendResults', results);\n  } else {\n    commit('setResults', results);\n    commit('setBanners', banners ?? []);\n    commit('setPromoteds', promoteds ?? []);\n    commit('setRedirections', redirections ?? []);\n  }\n\n  commit('setPartialResults', partialResults ?? []);\n\n  if (facets) {\n    commit('setFacets', facets);\n  }\n\n  if (queryTagging) {\n    commit('setQueryTagging', queryTagging);\n  }\n\n  if (displayTagging) {\n    commit('setDisplayTagging', displayTagging);\n  }\n\n  commit('setTotalResults', totalResults);\n  commit('setSpellcheck', spellcheck ?? '');\n  commit('setStats', stats as Stats);\n};\n"],"names":[],"mappings":"AAGA;;;;;;;;AAQG;AACU,MAAA,kBAAkB,GAAwD,CACrF,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1B,EACE,OAAO,EACP,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,KAAK,EACN,KACC;IACF,IAAI,YAAY,KAAK,CAAC,EAAE;AACtB,QAAA,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAC/B,QAAA,IAAI,OAAO,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AACvE,YAAA,MAAM,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;AACjC,YAAA,MAAM,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC;AAC7C,SAAA;AACF,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;AACjC,KAAA;IAED,IAAI,KAAK,CAAC,eAAe,EAAE;AACzB,QAAA,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAClC,KAAA;AAAM,SAAA;AACL,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAC9B,QAAA,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;AACpC,QAAA,MAAM,CAAC,cAAc,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;AACxC,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC;AAC/C,KAAA;AAED,IAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC;AAElD,IAAA,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAC7B,KAAA;AAED,IAAA,IAAI,YAAY,EAAE;AAChB,QAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACzC,KAAA;AAED,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,MAAM,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAC7C,KAAA;AAED,IAAA,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;AACxC,IAAA,MAAM,CAAC,eAAe,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;AAC1C,IAAA,MAAM,CAAC,UAAU,EAAE,KAAc,CAAC,CAAC;AACrC;;;;"}

package/js/x-modules/search/store/emitters.js

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

package/js/x-modules/search/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search module.\n *\n * @internal\n */\nexport const searchEmitters = createStoreEmitters(searchXStoreModule, {\n  FacetsChanged: {\n    selector: state => state.facets,\n    filter(newValue, oldValue): boolean {\n      return newValue.length !== 0 || oldValue.length !== 0;\n    }\n  },\n  PageChanged: state => state.page,\n  ResultsChanged: state => state.results,\n  SearchRequestChanged: (_, getters) => getters.request,\n  SearchRequestUpdated: (_, getters) => getters.request,\n  SearchResponseChanged: {\n    selector: (state, getters) => {\n      return {\n        request: getters.request!,\n        status: state.status,\n        banners: state.banners,\n        facets: state.facets,\n        partialResults: state.partialResults,\n        promoteds: state.promoteds,\n        queryTagging: state.queryTagging,\n        displayTagging: state.displayTagging,\n        redirections: state.redirections,\n        results: state.results,\n        spellcheck: state.spellcheckedQuery,\n        totalResults: state.totalResults\n      };\n    },\n    filter: (newValue, oldValue) => {\n      return (\n        newValue.status !== oldValue.status && oldValue.status === 'loading' && !!newValue.request\n      );\n    }\n  },\n  SearchTaggingChanged: {\n    selector: state => state.queryTagging,\n    filter: ({ url }) => !isStringEmpty(url)\n  },\n  SpellcheckChanged: state => state.spellcheckedQuery,\n  SortChanged: state => state.sort\n});\n"],"names":[],"mappings":";;;;AAIA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;AACpE,IAAA,aAAa,EAAE;AACb,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;QAC/B,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAA;YACvB,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;SACvD;AACF,KAAA;AACD,IAAA,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI;AAChC,IAAA,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO;IACtC,oBAAoB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;IACrD,oBAAoB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AACrD,IAAA,qBAAqB,EAAE;AACrB,QAAA,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAI;YAC3B,OAAO;gBACL,OAAO,EAAE,OAAO,CAAC,OAAQ;gBACzB,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,UAAU,EAAE,KAAK,CAAC,iBAAiB;gBACnC,YAAY,EAAE,KAAK,CAAC,YAAY;aACjC,CAAC;SACH;AACD,QAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAI;YAC7B,QACE,QAAQ,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,EAC1F;SACH;AACF,KAAA;AACD,IAAA,oBAAoB,EAAE;AACpB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,YAAY;AACrC,QAAA,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;AACzC,KAAA;AACD,IAAA,iBAAiB,EAAE,KAAK,IAAI,KAAK,CAAC,iBAAiB;AACnD,IAAA,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI;AACjC,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search module.\n *\n * @internal\n */\nexport const searchEmitters = createStoreEmitters(searchXStoreModule, {\n  FacetsChanged: {\n    selector: state => state.facets,\n    filter(newValue, oldValue): boolean {\n      return newValue.length !== 0 || oldValue.length !== 0;\n    }\n  },\n  PageChanged: state => state.page,\n  ResultsChanged: state => state.results,\n  SearchRequestChanged: (_, getters) => getters.request,\n  SearchRequestUpdated: (_, getters) => getters.request,\n  SearchResponseChanged: {\n    selector: (state, getters) => {\n      return {\n        request: getters.request!,\n        status: state.status,\n        banners: state.banners,\n        facets: state.facets,\n        partialResults: state.partialResults,\n        promoteds: state.promoteds,\n        queryTagging: state.queryTagging,\n        displayTagging: state.displayTagging,\n        redirections: state.redirections,\n        results: state.results,\n        spellcheck: state.spellcheckedQuery,\n        totalResults: state.totalResults\n      };\n    },\n    filter: (newValue, oldValue) => {\n      return (\n        newValue.status !== oldValue.status && oldValue.status === 'loading' && !!newValue.request\n      );\n    }\n  },\n  SearchTaggingChanged: {\n    selector: state => state.queryTagging,\n    filter: ({ url }) => !isStringEmpty(url)\n  },\n  SpellcheckChanged: state => state.spellcheckedQuery,\n  SortChanged: state => state.sort\n});\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,cAAc,GAAG,mBAAmB,CAAC,kBAAkB,EAAE;AACpE,IAAA,aAAa,EAAE;AACb,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;QAC/B,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAA;YACvB,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;SACvD;AACF,KAAA;AACD,IAAA,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI;AAChC,IAAA,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO;IACtC,oBAAoB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;IACrD,oBAAoB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AACrD,IAAA,qBAAqB,EAAE;AACrB,QAAA,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAI;YAC3B,OAAO;gBACL,OAAO,EAAE,OAAO,CAAC,OAAQ;gBACzB,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,UAAU,EAAE,KAAK,CAAC,iBAAiB;gBACnC,YAAY,EAAE,KAAK,CAAC,YAAY;aACjC,CAAC;SACH;AACD,QAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAI;YAC7B,QACE,QAAQ,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,EAC1F;SACH;AACF,KAAA;AACD,IAAA,oBAAoB,EAAE;AACpB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,YAAY;AACrC,QAAA,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;AACzC,KAAA;AACD,IAAA,iBAAiB,EAAE,KAAK,IAAI,KAAK,CAAC,iBAAiB;AACnD,IAAA,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI;AACjC,CAAA;;;;"}

package/js/x-modules/search/store/module.js

@@ -1,8 +1,9 @@
 import { isFacetFilter } from '@empathyco/x-types';
 import { setQuery } from '../../../store/utils/query.utils.js';
+import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
+import '@empathyco/x-utils';
 import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { groupItemsBy } from '../../../utils/array.js';
-import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils.js';
 import { UNKNOWN_FACET_KEY } from '../../facets/store/constants.js';
 import { cancelFetchAndSaveSearchResponse, fetchAndSaveSearchResponse } from './actions/fetch-and-save-search-response.action.js';
 import { fetchSearchResponse } from './actions/fetch-search-response.action.js';
@@ -25,7 +26,8 @@ const searchXStoreModule = {
         selectedFilters: {},
         params: {},
         config: {
-            pageSize: 24
+            pageSize: 24,
+            pageMode: 'infinite_scroll'
         },
         status: 'initial',
         isNoResults: false,
@@ -112,6 +114,9 @@ const searchXStoreModule = {
             if (stateResult) {
                 Object.assign(stateResult, result);
             }
+        },
+        setStats(state, stats) {
+            state.stats = stats;
         }
     },
     actions: {
@@ -156,7 +161,8 @@ function resettableState() {
         displayTagging: {
             url: '',
             params: {}
-        }
+        },
+        stats: {}
     };
 }
 

package/js/x-modules/search/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/search/store/module.ts"],"sourcesContent":["import { isFacetFilter } from '@empathyco/x-types';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store';\nimport { groupItemsBy } from '../../../utils/array';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { UNKNOWN_FACET_KEY } from '../../facets/store/constants';\nimport {\n  cancelFetchAndSaveSearchResponse,\n  fetchAndSaveSearchResponse,\n  fetchSearchResponse,\n  increasePageAppendingResults,\n  resetRequestOnRefinement,\n  saveSearchResponse\n} from './actions';\nimport { saveOrigin } from './actions/save-origin.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { query } from './getters/query.getter';\nimport { request } from './getters/request.getter';\nimport { SearchXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the search module.\n *\n * @internal\n */\nexport const searchXStoreModule: SearchXStoreModule = {\n  state: () => ({\n    ...resettableState(),\n    selectedFilters: {},\n    params: {},\n    config: {\n      pageSize: 24\n    },\n    status: 'initial',\n    isNoResults: false,\n    fromNoResultsWithFilters: false\n  }),\n  getters: {\n    request,\n    query\n  },\n  mutations: {\n    appendResults(state, results) {\n      state.results = [...state.results, ...results];\n    },\n    resetState(state) {\n      Object.assign(state, resettableState());\n    },\n    resetStateForReload(state) {\n      const { query, facets, sort, page, ...resettable } = resettableState();\n      Object.assign(state, resettable);\n    },\n    setQuery,\n    setResults(state, results) {\n      state.results = results;\n    },\n    setPartialResults(state, partialResults) {\n      state.partialResults = partialResults;\n    },\n    setFacets(state, facets) {\n      state.facets = facets;\n    },\n    setRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags;\n    },\n    setSelectedFilters(state, selectedFilters) {\n      state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n        isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY\n      );\n    },\n    setBanners(state, banners) {\n      state.banners = banners;\n    },\n    setPromoteds(state, promoteds) {\n      state.promoteds = promoteds;\n    },\n    setSpellcheck(state, spellcheckedQuery) {\n      state.spellcheckedQuery = spellcheckedQuery;\n    },\n    setTotalResults(state, totalResults) {\n      state.totalResults = totalResults;\n    },\n    setSort(state, sort) {\n      state.sort = sort;\n    },\n    setPage(state, page) {\n      state.page = page;\n    },\n    setConfig,\n    mergeConfig,\n    setIsAppendResults(state, isAppendResults) {\n      state.isAppendResults = isAppendResults;\n    },\n    setIsNoResults(state, isNoResults) {\n      state.isNoResults = isNoResults;\n    },\n    setFromNoResultsWithFilters(state, fromNoResultsWithFilters) {\n      state.fromNoResultsWithFilters = fromNoResultsWithFilters;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setOrigin(state, origin = null) {\n      state.origin = origin;\n    },\n    setRedirections(state, redirections) {\n      state.redirections = redirections;\n    },\n    setQueryTagging(state, queryTagging) {\n      state.queryTagging = queryTagging;\n    },\n    setDisplayTagging(state, displayTagging) {\n      state.displayTagging = displayTagging;\n    },\n    updateResult(state, result) {\n      const stateResult = state.results.find(stateResult => result.id === stateResult.id);\n      if (stateResult) {\n        Object.assign(stateResult, result);\n      }\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSearchResponse,\n    fetchSearchResponse,\n    fetchAndSaveSearchResponse,\n    increasePageAppendingResults,\n    resetRequestOnRefinement,\n    saveSearchResponse,\n    setUrlParams,\n    saveOrigin\n  }\n};\n\n/**\n * Function to return the \"resettable\" part of the state. This will be used in the `resetState`\n * mutation to reset to the initial state.\n *\n * @returns The \"resettable\" part of the {@link SearchState}.\n *\n * @internal\n */\nexport function resettableState() {\n  return {\n    query: '',\n    results: [],\n    partialResults: [],\n    facets: [],\n    relatedTags: [],\n    banners: [],\n    promoteds: [],\n    totalResults: 0,\n    spellcheckedQuery: '',\n    sort: '',\n    page: 1,\n    origin: null,\n    isAppendResults: false,\n    redirections: [],\n    queryTagging: {\n      url: '',\n      params: {}\n    },\n    displayTagging: {\n      url: '',\n      params: {}\n    }\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/search/store/module.ts"],"sourcesContent":["import { isFacetFilter, Stats } from '@empathyco/x-types';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { setStatus } from '../../../store';\nimport { groupItemsBy } from '../../../utils/array';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { UNKNOWN_FACET_KEY } from '../../facets/store/constants';\nimport {\n  cancelFetchAndSaveSearchResponse,\n  fetchAndSaveSearchResponse,\n  fetchSearchResponse,\n  increasePageAppendingResults,\n  resetRequestOnRefinement,\n  saveSearchResponse\n} from './actions';\nimport { saveOrigin } from './actions/save-origin.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { query } from './getters/query.getter';\nimport { request } from './getters/request.getter';\nimport { SearchXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the search module.\n *\n * @internal\n */\nexport const searchXStoreModule: SearchXStoreModule = {\n  state: () => ({\n    ...resettableState(),\n    selectedFilters: {},\n    params: {},\n    config: {\n      pageSize: 24,\n      pageMode: 'infinite_scroll'\n    },\n    status: 'initial',\n    isNoResults: false,\n    fromNoResultsWithFilters: false\n  }),\n  getters: {\n    request,\n    query\n  },\n  mutations: {\n    appendResults(state, results) {\n      state.results = [...state.results, ...results];\n    },\n    resetState(state) {\n      Object.assign(state, resettableState());\n    },\n    resetStateForReload(state) {\n      const { query, facets, sort, page, ...resettable } = resettableState();\n      Object.assign(state, resettable);\n    },\n    setQuery,\n    setResults(state, results) {\n      state.results = results;\n    },\n    setPartialResults(state, partialResults) {\n      state.partialResults = partialResults;\n    },\n    setFacets(state, facets) {\n      state.facets = facets;\n    },\n    setRelatedTags(state, relatedTags) {\n      state.relatedTags = relatedTags;\n    },\n    setSelectedFilters(state, selectedFilters) {\n      state.selectedFilters = groupItemsBy(selectedFilters, filter =>\n        isFacetFilter(filter) ? filter.facetId : UNKNOWN_FACET_KEY\n      );\n    },\n    setBanners(state, banners) {\n      state.banners = banners;\n    },\n    setPromoteds(state, promoteds) {\n      state.promoteds = promoteds;\n    },\n    setSpellcheck(state, spellcheckedQuery) {\n      state.spellcheckedQuery = spellcheckedQuery;\n    },\n    setTotalResults(state, totalResults) {\n      state.totalResults = totalResults;\n    },\n    setSort(state, sort) {\n      state.sort = sort;\n    },\n    setPage(state, page) {\n      state.page = page;\n    },\n    setConfig,\n    mergeConfig,\n    setIsAppendResults(state, isAppendResults) {\n      state.isAppendResults = isAppendResults;\n    },\n    setIsNoResults(state, isNoResults) {\n      state.isNoResults = isNoResults;\n    },\n    setFromNoResultsWithFilters(state, fromNoResultsWithFilters) {\n      state.fromNoResultsWithFilters = fromNoResultsWithFilters;\n    },\n    setStatus,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setOrigin(state, origin = null) {\n      state.origin = origin;\n    },\n    setRedirections(state, redirections) {\n      state.redirections = redirections;\n    },\n    setQueryTagging(state, queryTagging) {\n      state.queryTagging = queryTagging;\n    },\n    setDisplayTagging(state, displayTagging) {\n      state.displayTagging = displayTagging;\n    },\n    updateResult(state, result) {\n      const stateResult = state.results.find(stateResult => result.id === stateResult.id);\n      if (stateResult) {\n        Object.assign(stateResult, result);\n      }\n    },\n    setStats(state, stats) {\n      state.stats = stats;\n    }\n  },\n  actions: {\n    cancelFetchAndSaveSearchResponse,\n    fetchSearchResponse,\n    fetchAndSaveSearchResponse,\n    increasePageAppendingResults,\n    resetRequestOnRefinement,\n    saveSearchResponse,\n    setUrlParams,\n    saveOrigin\n  }\n};\n\n/**\n * Function to return the \"resettable\" part of the state. This will be used in the `resetState`\n * mutation to reset to the initial state.\n *\n * @returns The \"resettable\" part of the {@link SearchState}.\n *\n * @internal\n */\nexport function resettableState() {\n  return {\n    query: '',\n    results: [],\n    partialResults: [],\n    facets: [],\n    relatedTags: [],\n    banners: [],\n    promoteds: [],\n    totalResults: 0,\n    spellcheckedQuery: '',\n    sort: '',\n    page: 1,\n    origin: null,\n    isAppendResults: false,\n    redirections: [],\n    queryTagging: {\n      url: '',\n      params: {}\n    },\n    displayTagging: {\n      url: '',\n      params: {}\n    },\n    stats: {} as Stats\n  };\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/search/wiring.js

@@ -251,6 +251,10 @@ const searchWiring = createWiring({
     },
     UserSelectedAHistoryQuery: {
         setSearchSelectedFiltersFromHistoryQuery
+    },
+    UserSelectedAPage: {
+        setSearchPage,
+        resetAppending
     }
 });
 

package/js/x-modules/search/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import {\n  createWiring,\n  filterTruthyPayload,\n  namespacedWireCommit,\n  namespacedWireCommitWithoutPayload,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload,\n  WirePayload\n} from '../../wiring';\nimport { createRawFilters } from '../../utils';\nimport { InternalSearchRequest } from './types';\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search';\n\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireCommit without Payload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveSearchResponse'\n);\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse');\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '');\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery');\n\n/**\n * Clears the search state `query`.\n *\n * @public\n */\nexport const clearSearchQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters');\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage');\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams');\n\n/**\n * Resets the search state to reload the current search.\n *\n * @public\n */\nexport const resetStateForReloadWire = wireCommitWithoutPayload('resetStateForReload');\n\n/**\n * Resets the search state `isNoResults`.\n *\n * @public\n */\nexport const resetIsNoResults = wireCommit('setIsNoResults', false);\n\n/**\n * Resets the search state `fromNoResultsWithFilters`.\n *\n * @public\n */\nexport const resetFromNoResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false);\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResultsWire = wireDispatchWithoutPayload(\n  'increasePageAppendingResults'\n);\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false);\n\n/**\n * Resets the {@link SearchGetters.request} parameters when refining request and before the actual\n * request is launched.\n *\n * @public\n */\nexport const resetRequestOnRefinementWire = wireDispatch(\n  'resetRequestOnRefinement',\n  ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n    newRequest,\n    oldRequest: oldValue as InternalSearchRequest\n  })\n);\n\n/**\n * Resets the search state when the request is changed to null. See the\n * {@link searchXStoreModule} for details.\n *\n * @public\n */\nexport const resetStateIfNoRequestWire = filterTruthyPayload<InternalSearchRequest | null>(\n  wireCommitWithoutPayload('resetState')\n);\n\n/**\n * Sets the search state `query` with the selectedQueryPreview's query.\n *\n * @public\n */\nexport const setSearchQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query\n);\n\n/**\n * Sets the search state `params` with the selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setSearchExtraParamsFromPreview = wireCommit(\n  'setParams',\n  ({ eventPayload: { extraParams } }) => extraParams\n);\n\n/**\n * Sets the search state `selectedFilters` with the selectedQueryPreview's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromPreview = wireCommit(\n  'setSelectedFilters',\n  ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : [])\n);\n\n/**\n * Sets the search state `selectedFilters` with a selectedHistoryQuery's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromHistoryQuery = wireCommit(\n  'setSelectedFilters',\n  ({ eventPayload: { selectedFilters } }) => selectedFilters ?? []\n);\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n    saveOriginWire\n  },\n  UserAcceptedAQuery: {\n    setSearchQuery,\n    saveOriginWire\n  },\n  UserAcceptedSpellcheckQuery: {\n    resetSpellcheckQuery\n  },\n  UserClearedQuery: {\n    setSearchQuery,\n    cancelFetchAndSaveSearchResponseWire,\n    resetFromNoResultsWithFilters,\n    resetIsNoResults\n  },\n  UserClickedASort: {\n    setSort\n  },\n  UserPickedARelatedTag: {\n    saveOriginWire\n  },\n  UserReachedResultsListEnd: {\n    increasePageAppendingResultsWire\n  },\n  SearchRequestUpdated: {\n    resetStateIfNoRequestWire,\n    fetchAndSaveSearchResponseWire\n  },\n  SearchRequestChanged: {\n    resetRequestOnRefinementWire\n  },\n  SelectedRelatedTagsChanged: {\n    setRelatedTags\n  },\n  SelectedFiltersForRequestChanged: {\n    setSelectedFilters\n  },\n  ResultsChanged: {\n    resetAppending\n  },\n  ReloadSearchRequested: {\n    resetStateForReloadWire\n  },\n  SelectedSortProvided: {\n    setSort\n  },\n  ExtraParamsChanged: {\n    setSearchExtraParams\n  },\n  UserClickedCloseX: {\n    clearSearchQuery\n  },\n  UserClickedOutOfMainModal: {\n    clearSearchQuery\n  },\n  UserAcceptedAQueryPreview: {\n    setSearchQueryFromPreview,\n    setSearchExtraParamsFromPreview,\n    setSearchSelectedFiltersFromPreview,\n    saveOriginWire\n  },\n  QueryPreviewUnselected: {\n    setSearchExtraParams\n  },\n  UserSelectedAHistoryQuery: {\n    setSearchSelectedFiltersFromHistoryQuery\n  }\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import {\n  createWiring,\n  filterTruthyPayload,\n  namespacedWireCommit,\n  namespacedWireCommitWithoutPayload,\n  namespacedWireDispatch,\n  namespacedWireDispatchWithoutPayload,\n  WirePayload\n} from '../../wiring';\nimport { createRawFilters } from '../../utils';\nimport { InternalSearchRequest } from './types';\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search';\n\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireCommit without Payload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n  'cancelFetchAndSaveSearchResponse'\n);\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata);\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse');\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '');\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery');\n\n/**\n * Clears the search state `query`.\n *\n * @public\n */\nexport const clearSearchQuery = wireCommit('setQuery', '');\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters');\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort');\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams');\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage');\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams');\n\n/**\n * Resets the search state to reload the current search.\n *\n * @public\n */\nexport const resetStateForReloadWire = wireCommitWithoutPayload('resetStateForReload');\n\n/**\n * Resets the search state `isNoResults`.\n *\n * @public\n */\nexport const resetIsNoResults = wireCommit('setIsNoResults', false);\n\n/**\n * Resets the search state `fromNoResultsWithFilters`.\n *\n * @public\n */\nexport const resetFromNoResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false);\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResultsWire = wireDispatchWithoutPayload(\n  'increasePageAppendingResults'\n);\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false);\n\n/**\n * Resets the {@link SearchGetters.request} parameters when refining request and before the actual\n * request is launched.\n *\n * @public\n */\nexport const resetRequestOnRefinementWire = wireDispatch(\n  'resetRequestOnRefinement',\n  ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n    newRequest,\n    oldRequest: oldValue as InternalSearchRequest\n  })\n);\n\n/**\n * Resets the search state when the request is changed to null. See the\n * {@link searchXStoreModule} for details.\n *\n * @public\n */\nexport const resetStateIfNoRequestWire = filterTruthyPayload<InternalSearchRequest | null>(\n  wireCommitWithoutPayload('resetState')\n);\n\n/**\n * Sets the search state `query` with the selectedQueryPreview's query.\n *\n * @public\n */\nexport const setSearchQueryFromPreview = wireCommit(\n  'setQuery',\n  ({ eventPayload: { query } }) => query\n);\n\n/**\n * Sets the search state `params` with the selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setSearchExtraParamsFromPreview = wireCommit(\n  'setParams',\n  ({ eventPayload: { extraParams } }) => extraParams\n);\n\n/**\n * Sets the search state `selectedFilters` with the selectedQueryPreview's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromPreview = wireCommit(\n  'setSelectedFilters',\n  ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : [])\n);\n\n/**\n * Sets the search state `selectedFilters` with a selectedHistoryQuery's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromHistoryQuery = wireCommit(\n  'setSelectedFilters',\n  ({ eventPayload: { selectedFilters } }) => selectedFilters ?? []\n);\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n  ParamsLoadedFromUrl: {\n    setUrlParams,\n    saveOriginWire\n  },\n  UserAcceptedAQuery: {\n    setSearchQuery,\n    saveOriginWire\n  },\n  UserAcceptedSpellcheckQuery: {\n    resetSpellcheckQuery\n  },\n  UserClearedQuery: {\n    setSearchQuery,\n    cancelFetchAndSaveSearchResponseWire,\n    resetFromNoResultsWithFilters,\n    resetIsNoResults\n  },\n  UserClickedASort: {\n    setSort\n  },\n  UserPickedARelatedTag: {\n    saveOriginWire\n  },\n  UserReachedResultsListEnd: {\n    increasePageAppendingResultsWire\n  },\n  SearchRequestUpdated: {\n    resetStateIfNoRequestWire,\n    fetchAndSaveSearchResponseWire\n  },\n  SearchRequestChanged: {\n    resetRequestOnRefinementWire\n  },\n  SelectedRelatedTagsChanged: {\n    setRelatedTags\n  },\n  SelectedFiltersForRequestChanged: {\n    setSelectedFilters\n  },\n  ResultsChanged: {\n    resetAppending\n  },\n  ReloadSearchRequested: {\n    resetStateForReloadWire\n  },\n  SelectedSortProvided: {\n    setSort\n  },\n  ExtraParamsChanged: {\n    setSearchExtraParams\n  },\n  UserClickedCloseX: {\n    clearSearchQuery\n  },\n  UserClickedOutOfMainModal: {\n    clearSearchQuery\n  },\n  UserAcceptedAQueryPreview: {\n    setSearchQueryFromPreview,\n    setSearchExtraParamsFromPreview,\n    setSearchSelectedFiltersFromPreview,\n    saveOriginWire\n  },\n  QueryPreviewUnselected: {\n    setSearchExtraParams\n  },\n  UserSelectedAHistoryQuery: {\n    setSearchSelectedFiltersFromHistoryQuery\n  },\n  UserSelectedAPage: {\n    setSearchPage,\n    resetAppending\n  }\n});\n"],"names":[],"mappings":"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"}

package/js/x-modules/search-box/components/clear-search-input.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './clear-search-input.vue2.js';
-import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createCommentVNode, renderSlot, createTextVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, renderSlot, createTextVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10,7 +10,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-test": "clear-search-input"
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot _Required_. Button content (text, icon, or both) "),
       renderSlot(_ctx.$slots, "default", {}, () => [
         createTextVNode("\u2715")
       ])

package/js/x-modules/search-box/components/clear-search-input.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input x-button\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, computed, ref } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearSearchInput',\n    components: { BaseEventButton },\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const { query } = useState('searchBox', ['query']);\n\n      /**\n       * The events dictionary that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearSearchInputEvents = ref({\n        UserPressedClearSearchBoxButton: undefined\n      });\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-clear-search-input--has-empty-query': isQueryEmpty.value\n      }));\n\n      return {\n        dynamicClasses,\n        clearSearchInputEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserClearedQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,sBAAU,CAAoB,+BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,sBAAA;AALlC,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;aAQIC,OAAc,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAR,0DAAC,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AARX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"clear-search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/clear-search-input.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-search-input x-button\"\n    :class=\"dynamicClasses\"\n    :events=\"clearSearchInputEvents\"\n    data-test=\"clear-search-input\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, computed, ref } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to delete the current query.\n   *\n   * @remarks\n   * A button that when pressed emits the {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n   * and {@link SearchBoxXEvents.UserClearedQuery} events, expressing the user intention to clear\n   * the current query.\n   * It also adds `x-clear-search-input--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearSearchInput',\n    components: { BaseEventButton },\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const { query } = useState('searchBox', ['query']);\n\n      /**\n       * The events dictionary that are going to be emitted when the button is pressed.\n       *\n       * @internal\n       */\n      const clearSearchInputEvents = ref({\n        UserPressedClearSearchBoxButton: undefined\n      });\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-clear-search-input--has-empty-query': isQueryEmpty.value\n      }));\n\n      return {\n        dynamicClasses,\n        clearSearchInputEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserPressedClearSearchBoxButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserClearedQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nHere a basic example of how the clear button is rendered.\n\n_Type any term in the input field and then click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, a custom text is passed in the default slot instead of the default text to\ncustomize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <ClearSearchInput>Clear</ClearSearchInput>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message\n“clear” when the clear search input button is clicked.\n\n_Click the Clear button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <ClearSearchInput @UserPressedClearSearchBoxButton=\"message = 'clear'\">Clear</ClearSearchInput>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      ClearSearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `ClearSearchInput`\ncomponent communicates with the [`SearchInput`](./search-input.md), deleting the search term\nentered.\n\n_Type any term in the input field and then click the icon button to try it out!_\n\n```vue live\n<template>\n  <div style=\"display: flex;\">\n    <SearchInput />\n    <ClearSearchInput />\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ClearSearchInputDemo',\n    components: {\n      SearchInput,\n      ClearSearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALT,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,sBAAU,CAAoB,+BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAAA,MAAA,EAAA,IAAA,CAAA,sBAAA;AALlC,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;aAAAC,OAQW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AARX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/search-box/components/search-button.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './search-button.vue2.js';
-import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createElementVNode } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = /* @__PURE__ */ createElementVNode(
@@ -19,7 +19,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-test": "search-button"
     },
     [
-      createCommentVNode(" @slot _Required_. Button content (text, icon, or both) "),
       renderSlot(_ctx.$slots, "default", {}, () => [
         _hoisted_1
       ])

package/js/x-modules/search-box/components/search-button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\n      }));\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACdA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MAEL,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAEzB,MAAA,WAAA,EAAA,eAAA;AAAA,KAAA;AACA,IAAA;AAAA,MAAmCC,kBAAA,CAAA,0DAAA,CAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;;;;;;;;;;;"}
+{"version":3,"file":"search-button.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    @click=\"emitEvents\"\n    class=\"x-search-button x-button\"\n    :class=\"dynamicClasses\"\n    data-test=\"search-button\"\n  >\n    <!-- @slot _Required_. Button content (text, icon, or both) -->\n    <slot><span class=\"x-icon\">⌕</span></slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { searchBoxXModule } from '../x-module';\n\n  /**\n   * This component renders a button to submit the query.\n   *\n   * @remarks\n   * If query is not empty, it emits {@link XEventsTypes.UserAcceptedAQuery} and\n   * {@link SearchBoxXEvents.UserPressedSearchButton} events with the query as payload.\n   * It also adds `x-search-button--has-empty-query` as class when there is no query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SearchButton',\n    xModule: searchBoxXModule.name,\n    setup: function () {\n      const $x = use$x();\n\n      const buttonRef = ref<HTMLElement | null>(null);\n\n      const query: ComputedRef<string> = useState('searchBox', ['query']).query;\n\n      const isQueryEmpty = computed(() => query.value.length === 0);\n\n      const dynamicClasses = computed<VueCSSClasses>(() => ({\n        'x-search-button--has-empty-query': isQueryEmpty.value\n      }));\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n        return {\n          target: buttonRef.value,\n          feature: 'search_box'\n        };\n      }\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      function emitEvents() {\n        if (!isQueryEmpty.value) {\n          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());\n          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());\n        }\n      }\n\n      return {\n        dynamicClasses,\n        buttonRef,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`]https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPressedSearchButton`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n<!-- prettier-ignore-start -->\n:::warning\nNote that no events are emitted if the query is empty.\n:::\n<!-- prettier-ignore-end -->\n\n## Dynamic classes\n\n`SearchButton` uses the `x-search-button--has-empty-query` dynamic CSS class to modify the HTML\nbutton style when the query is empty.\n\n## See it in action\n\nIn this example, a clickable button is rendered.\n\n_Click the Search button to try it out!_\n\n```vue live\n<template>\n  <SearchButton />\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nHere text is passed in the default slot instead of an icon to customize the button content.\n\n_Click the icon button to try it out!_\n\n```vue live\n<template>\n  <SearchButton>Search</SearchButton>\n</template>\n\n<script>\n  import { SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `UserPressedSearchButton` event has been implemented so that when you enter a\nsearch term and click the Search button, the search term is displayed as a message.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton\n        @UserPressedSearchButton=\"\n          query => {\n            message = query;\n          }\n        \"\n      />\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchButton` component\ncommunicates with the [`SearchInput`](./search-input.md) to submit the query. In this example, when\nyou enter a search term and click the Search button, the “Looking for results” message is displayed.\n\n_Type any term in the input field and then click the Search button to try it out!_\n\n```vue live\n<template>\n  <div>\n    <div style=\"display: flex;\">\n      <SearchInput />\n      <SearchButton @UserAcceptedAQuery=\"message = 'looking for results'\">Search</SearchButton>\n    </div>\n    {{ message }}\n  </div>\n</template>\n\n<script>\n  import { SearchButton, SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'SearchButtonDemo',\n    components: {\n      SearchButton,\n      SearchInput\n    },\n    data() {\n      return {\n        message: ''\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;SAEQ,WAAW,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SACdA,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MACR,GAAK,EAAA,WAAA;AAAA,MAEL,gBAAU,CAAe,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;MAGzB,WAA0C,EAAA,eAAA;AAAA,KAAA;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/store/emitters.js

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

package/js/x-modules/search-box/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search-box/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchBoxXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search-box module.\n *\n * @internal\n */\nexport const searchBoxEmitters = createStoreEmitters(searchBoxXStoreModule, {\n  SearchBoxQueryChanged: (_, getters) => getters.trimmedQuery,\n  UserClearedQuery: { selector: state => state.query, filter: isStringEmpty }\n});\n"],"names":[],"mappings":";;;;AAIA;;;;AAIG;AACU,MAAA,iBAAiB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE;IAC1E,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,YAAY;AAC3D,IAAA,gBAAgB,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE;AAC5E,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/search-box/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { isStringEmpty } from '../../../utils/string';\nimport { searchBoxXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the search-box module.\n *\n * @internal\n */\nexport const searchBoxEmitters = createStoreEmitters(searchBoxXStoreModule, {\n  SearchBoxQueryChanged: (_, getters) => getters.trimmedQuery,\n  UserClearedQuery: { selector: state => state.query, filter: isStringEmpty }\n});\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACU,MAAA,iBAAiB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE;IAC1E,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,YAAY;AAC3D,IAAA,gBAAgB,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE;AAC5E,CAAA;;;;"}

package/js/x-modules/semantic-queries/components/semantic-queries.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './semantic-queries.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, createCommentVNode } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,13 +11,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     suggestions: _ctx.suggestions
   }, {
     default: withCtx((baseSuggestionsScope) => [
-      createCommentVNode("\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    "),
       renderSlot(_ctx.$slots, "suggestion", normalizeProps(guardReactiveProps(baseSuggestionsScope)), () => [
         createVNode(_component_SemanticQuery, {
           suggestion: baseSuggestionsScope.suggestion
         }, {
           default: withCtx((baseSuggestionScope) => [
-            createCommentVNode("\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        "),
             renderSlot(_ctx.$slots, "suggestion-content", normalizeProps(guardReactiveProps(baseSuggestionScope)))
           ]),
           _: 2

package/js/x-modules/semantic-queries/components/semantic-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-queries.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n    #default=\"baseSuggestionsScope\"\n  >\n    <!--\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    -->\n    <slot name=\"suggestion\" v-bind=\"baseSuggestionsScope\">\n      <SemanticQuery :suggestion=\"baseSuggestionsScope.suggestion\" #default=\"baseSuggestionScope\">\n        <!--\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        -->\n        <slot name=\"suggestion-content\" v-bind=\"baseSuggestionScope\" />\n      </SemanticQuery>\n    </slot>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { Suggestion } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { useState } from '../../../composables';\n  import SemanticQuery from './semantic-query.vue';\n\n  /**\n   * Retrieves a list of semantic queries from the state and exposes them in the slots.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQueries',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestions, SemanticQuery },\n    setup(_, { slots }) {\n      /** The semantic queries from the state. */\n      const suggestions: ComputedRef<Suggestion[]> = useState('semanticQueries', [\n        'semanticQueries'\n      ]).semanticQueries;\n\n      /**\n       * Maps the list of semantic queries to a list of queries, to make it compatible with\n       * other components.\n       */\n      const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));\n\n      /**\n       * Finds a {@link @empathyco/x-types#Suggestion} given a query.\n       *\n       * @param query - The query to search.\n       * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.\n       */\n      function findSemanticQuery(query: string) {\n        return suggestions.value.find(suggestion => suggestion.query === query);\n      }\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no suggestions, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot or empty string if there are\n       * no suggestions.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          suggestions: suggestions.value,\n          queries: queries.value,\n          findSemanticQuery\n        };\n        return suggestions.value.length ? slots.default?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { suggestions };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nBy default, the `SemanticQueries` component will render a list of semantic queries.\n\n```vue\n<template>\n  <SemanticQueries />\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueriesDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nThe component has the following props:\n\n- maxItemsToRender to limit the number of semantic queries to render.\n- animation to specify the animation to be used to animate the semantic queries.\n\n```vue live\n<template>\n  <SemanticQueries :animation=\"animation\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesPropsDemo',\n    data() {\n      return {\n        animation: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nThe default slot is used to overwrite the whole content of the component.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ suggestions }\">\n    <section>\n      <SlidingPanel>\n        <div v-for=\"suggestion in suggestions\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo',\n    components: {\n      SemanticQueries,\n      SlidingPanel\n    }\n  };\n</script>\n```\n\nThe default slot also exposes an array of semantic queries mapped to strings, and a method to find a\nsemantic query given a string query.\n\nThis is useful if you need an array of string queries, but also need to retrieve the original\nsemantic query to use it in another element.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ queries, findSemanticQuery }\">\n    <section>\n      <QueryPreviewList :queries=\"queries\" #slot=\"{ query, results }\">\n        <div>\n          <SemanticQuery :semanticQuery=\"findSemanticQuery(query)\" #default=\"{ query }\">\n            {{ query.query }} ({{ query.distance }})\n          </SemanticQuery>\n          <ul>\n            <li v-for=\"result in results\" :key=\"result.id\">\n              {{ result.name }}\n            </li>\n          </ul>\n        </div>\n      </QueryPreviewList>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';\n  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo2',\n    components: {\n      SemanticQueries,\n      SemanticQuery,\n      QueryPreviewList\n    }\n  };\n</script>\n```\n\n### Play with the suggestion slot\n\nThe suggestion slot can be used to override each semantic query item.\n\nIn this example, the query will be rendered along with the distance.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with the suggestion content slot\n\nThe suggsetion content slot can be used to override only the content, but keep using the\nSemanticQuery component internally.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion-content=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AAE4B,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAF5B,EAAA,OAAA,IAAA,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAG8B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,GAAA,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;AACA,IAAA,WAAA,EAAO,IAER,CAAA,WAAA;AAAA,GAAA,EAAA;AAKA,IAAA,OAAA,EAAAC,OAAA,CASO,CArBX,oBAAA,KAAA;AAAA,MAoBsBC,kBAAA,CAAA,+KAAA,CAAA;AAAA,MAPAC,UAAA,CAAA,IAAA,CAAY,sBAAqBC,cAAU,CAAAC,kBAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAA,wBAAA,EAAA;AAAG,UAAA,UAAA,EAAO,oBAAE,CAAA,UAAA;AAAA,SAAA,EAAA;mBAMrEL,OAA+D,CAAA,CAAA,mBAAA,KAAA;AAAA,YAAAC,kBAAA,CAAA,sNAAA,CAAA;AAnBvE,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,mBAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,aAAA,CAAA,CAAA,IAAAH,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"semantic-queries.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n    #default=\"baseSuggestionsScope\"\n  >\n    <!--\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    -->\n    <slot name=\"suggestion\" v-bind=\"baseSuggestionsScope\">\n      <SemanticQuery :suggestion=\"baseSuggestionsScope.suggestion\" #default=\"baseSuggestionScope\">\n        <!--\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        -->\n        <slot name=\"suggestion-content\" v-bind=\"baseSuggestionScope\" />\n      </SemanticQuery>\n    </slot>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { Suggestion } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { useState } from '../../../composables';\n  import SemanticQuery from './semantic-query.vue';\n\n  /**\n   * Retrieves a list of semantic queries from the state and exposes them in the slots.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQueries',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestions, SemanticQuery },\n    setup(_, { slots }) {\n      /** The semantic queries from the state. */\n      const suggestions: ComputedRef<Suggestion[]> = useState('semanticQueries', [\n        'semanticQueries'\n      ]).semanticQueries;\n\n      /**\n       * Maps the list of semantic queries to a list of queries, to make it compatible with\n       * other components.\n       */\n      const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));\n\n      /**\n       * Finds a {@link @empathyco/x-types#Suggestion} given a query.\n       *\n       * @param query - The query to search.\n       * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.\n       */\n      function findSemanticQuery(query: string) {\n        return suggestions.value.find(suggestion => suggestion.query === query);\n      }\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no suggestions, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot or empty string if there are\n       * no suggestions.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          suggestions: suggestions.value,\n          queries: queries.value,\n          findSemanticQuery\n        };\n        return suggestions.value.length ? slots.default?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { suggestions };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nBy default, the `SemanticQueries` component will render a list of semantic queries.\n\n```vue\n<template>\n  <SemanticQueries />\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueriesDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nThe component has the following props:\n\n- maxItemsToRender to limit the number of semantic queries to render.\n- animation to specify the animation to be used to animate the semantic queries.\n\n```vue live\n<template>\n  <SemanticQueries :animation=\"animation\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesPropsDemo',\n    data() {\n      return {\n        animation: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nThe default slot is used to overwrite the whole content of the component.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ suggestions }\">\n    <section>\n      <SlidingPanel>\n        <div v-for=\"suggestion in suggestions\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo',\n    components: {\n      SemanticQueries,\n      SlidingPanel\n    }\n  };\n</script>\n```\n\nThe default slot also exposes an array of semantic queries mapped to strings, and a method to find a\nsemantic query given a string query.\n\nThis is useful if you need an array of string queries, but also need to retrieve the original\nsemantic query to use it in another element.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ queries, findSemanticQuery }\">\n    <section>\n      <QueryPreviewList :queries=\"queries\" #slot=\"{ query, results }\">\n        <div>\n          <SemanticQuery :semanticQuery=\"findSemanticQuery(query)\" #default=\"{ query }\">\n            {{ query.query }} ({{ query.distance }})\n          </SemanticQuery>\n          <ul>\n            <li v-for=\"result in results\" :key=\"result.id\">\n              {{ result.name }}\n            </li>\n          </ul>\n        </div>\n      </QueryPreviewList>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';\n  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo2',\n    components: {\n      SemanticQueries,\n      SemanticQuery,\n      QueryPreviewList\n    }\n  };\n</script>\n```\n\n### Play with the suggestion slot\n\nThe suggestion slot can be used to override each semantic query item.\n\nIn this example, the query will be rendered along with the distance.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with the suggestion content slot\n\nThe suggsetion content slot can be used to override only the content, but keep using the\nSemanticQuery component internally.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion-content=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","_createCommentVNode"],"mappings":";;;;;;AAE4B,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAF5B,EAAA,OAAA,IAAA,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAG8B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACzB,GAAA,EAAA,CAAA;AAAA,IAAA,KAAA,EAAA,oBAAA;AACA,IAAA,WAAA,EAAO,IAOR,CAAA,WAAA;AAAA,GAAA,EAAA;aACEC,OAOgB,CAAA,CAAA,oBAAA,KAAA;AAAA,MAPAC,UAAA,CAAA,IAAA,CAAY,sBAAqBC,cAAU,CAAAC,kBAAA,CAAA,oBAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAA,wBAAA,EAAA;AAAG,UAAA,UAAA,EAAO,oBAAE,CAAA,UAAA;AAAA,SAAA,EAAA;;AAb7E,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,mBAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,aAAA,CAAA,CAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/semantic-queries/components/semantic-query.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './semantic-query.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -12,9 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-test": "semantic-query"
   }, {
     default: withCtx((baseScope) => [
-      createCommentVNode(" eslint-disable max-len "),
-      createCommentVNode("\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    "),
-      createCommentVNode(" eslint-enable max-len "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ...baseScope })))
     ]),
     _: 3

package/js/x-modules/semantic-queries/components/semantic-query.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAbd,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,yBAAA,EAAA;AAAA,IACtB,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,IACD,UAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAU,IAAgB,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;IACzB,WAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;AAGR,IAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAAA,MAIAC,kBAA8B,CAAA,0BAAA,CAAA;AAAA,MAC9BA,mBAAkC,kMAAN,CAAA;AAAA,MAAAA,kBAAA,CAAA,yBAAA,CAAA;AAfhC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAbd,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,yBAAA,EAAA;AAAA,IACtB,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,IACD,UAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAU,IAAgB,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;IACzB,WAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;;AAPZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/tagging/components/tagging.vue.js

@@ -14,17 +14,18 @@ var _sfc_main = defineComponent({
     xModule: taggingXModule.name,
     props: {
         /**
-         * The TTL in milliseconds for storing the clicked result info.
+         * The TTL in milliseconds for storing the result info.
          */
-        clickedResultStorageTTLMs: {
+        storageTTLMs: {
             type: Number,
             default: 30000
         },
         /**
-         * The Object key of the {@link @empathyco/x-types#Result} clicked by the user
-         * that will be used as id for the storage. By default, the Result url will be used.
+         * The Object key of the {@link @empathyco/x-types#Result} clicked or added to the cart by the user
+         * that will be used as id for the storage.
+         * By default, the Result url will be used.
          */
-        clickedResultStorageKey: {
+        storageKey: {
             type: String,
             default: 'url'
         },
@@ -70,8 +71,8 @@ var _sfc_main = defineComponent({
             return {
                 queryTaggingDebounceMs: props.queryTaggingDebounceMs,
                 sessionTTLMs: props.sessionTTLMs,
-                clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,
-                clickedResultStorageKey: props.clickedResultStorageKey
+                storageTTLMs: props.storageTTLMs,
+                storageKey: props.storageKey
             };
         });
         /**