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

package/js/x-modules/scroll/components/scroll-to-top.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { NoAnimation, BaseEventButton } from '../../../components';\n  import { XEventsTypes } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n  import { useState } from '../../../composables';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ScrollToTop',\n    xModule: scrollXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /**\n       * Animation to use for showing/hiding the button.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * Threshold in pixels from the top to show the button.\n       *\n       * @public\n       */\n      thresholdPx: Number,\n      /**\n       * Id of the target scroll component.\n       *\n       * @public\n       */\n      scrollId: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      /**\n       * State of all the scroll components in this module.\n       *\n       * @internal\n       */\n      // TODO: Directly retrieve the needed data in this computed property\n      const { data } = useState('scroll', ['data']);\n\n      /**\n       * The scroll data retrieved for this component.\n       *\n       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n       * passed. Otherwise it returns `null`.\n       * @internal\n       */\n      const scrollData = computed(() => {\n        return props.scrollId && data.value[props.scrollId]\n          ? data.value[props.scrollId]\n          : {\n              position: 0,\n              direction: 'UP',\n              hasReachedStart: false,\n              hasAlmostReachedEnd: false,\n              hasReachedEnd: false\n            };\n      });\n\n      /**\n       * Event that will be emitted when the scroll to top is clicked.\n       *\n       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n      );\n\n      /**\n       * Checks if the thresholdPx prop has been provided and if it is a number.\n       *\n       * @returns If the thresholdPx is a number or not.\n       * @internal\n       */\n      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n      /**\n       * Checks if the threshold has been reached in case the threshold strategy is in use.\n       *\n       * @returns If the scrollTop is bigger than the thresholdPx.\n       * @internal\n       */\n      const isThresholdReached = computed(\n        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n      );\n\n      /**\n       * Returns if the scroll has almost reached its end or not.\n       *\n       * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n       * @internal\n       */\n      const hasAlmostReachedScrollEnd = computed(\n        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n      );\n\n      /**\n       * Whether if the button is visible or not depending on the strategy being used.\n       *\n       * @returns If the button should be visible or not.\n       * @internal\n       */\n      const isVisible = computed(() =>\n        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n      );\n\n      return {\n        events,\n        isVisible\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"scroll-to-top.vue2.js","sources":["../../../../../src/x-modules/scroll/components/scroll-to-top.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <BaseEventButton\n      v-if=\"isVisible\"\n      class=\"x-scroll-to-top x-button\"\n      data-test=\"scroll-to-top\"\n      aria-label=\"Scroll to top\"\n      :events=\"events\"\n    >\n      <!-- @slot (Required) Button content with a text, an icon or both -->\n      <slot />\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { NoAnimation, BaseEventButton } from '../../../components';\n  import { XEventsTypes } from '../../../wiring';\n  import { scrollXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n  import { useState } from '../../../composables';\n  import { MainScrollId } from './scroll.const';\n\n  /**\n   * The `ScrollToTop` component is a button that the user can click to make a container scroll\n   * up to its initial position.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ScrollToTop',\n    xModule: scrollXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /**\n       * Animation to use for showing/hiding the button.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /**\n       * Threshold in pixels from the top to show the button.\n       *\n       * @public\n       */\n      thresholdPx: Number,\n      /**\n       * Id of the target scroll component.\n       *\n       * @public\n       */\n      scrollId: {\n        type: String,\n        default: MainScrollId\n      }\n    },\n    setup(props) {\n      /**\n       * State of all the scroll components in this module.\n       *\n       * @internal\n       */\n      // TODO: Directly retrieve the needed data in this computed property\n      const { data } = useState('scroll', ['data']);\n\n      /**\n       * The scroll data retrieved for this component.\n       *\n       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been\n       * passed. Otherwise it returns `null`.\n       * @internal\n       */\n      const scrollData = computed(() => {\n        return props.scrollId && data.value[props.scrollId]\n          ? data.value[props.scrollId]\n          : {\n              position: 0,\n              direction: 'UP',\n              hasReachedStart: false,\n              hasAlmostReachedEnd: false,\n              hasReachedEnd: false\n            };\n      });\n\n      /**\n       * Event that will be emitted when the scroll to top is clicked.\n       *\n       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.\n       * @internal\n       */\n      const events = computed(\n        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })\n      );\n\n      /**\n       * Checks if the thresholdPx prop has been provided and if it is a number.\n       *\n       * @returns If the thresholdPx is a number or not.\n       * @internal\n       */\n      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');\n\n      /**\n       * Checks if the threshold has been reached in case the threshold strategy is in use.\n       *\n       * @returns If the scrollTop is bigger than the thresholdPx.\n       * @internal\n       */\n      const isThresholdReached = computed(\n        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!\n      );\n\n      /**\n       * Returns if the scroll has almost reached its end or not.\n       *\n       * @returns True if the scroll has almost reached the end and the user is still scrolling down.\n       * @internal\n       */\n      const hasAlmostReachedScrollEnd = computed(\n        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'\n      );\n\n      /**\n       * Whether if the button is visible or not depending on the strategy being used.\n       *\n       * @returns If the button should be visible or not.\n       * @internal\n       */\n      const isVisible = computed(() =>\n        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value\n      );\n\n      return {\n        events,\n        isVisible\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedScrollToTop`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the id of the scroll\n  that it going to be scrolled.\n\n## Examples\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and scrolls to top the scroll\nwith an id `scrollId`.\n\nIt also receives an optional threshold in pixels. When the threshold is reached from the top, the\ncomponent will be shown once the user scrolls `UP`.\n\nIf this parameter is not provided the button will be visible when the user almost reaches the end of\nthe scroll.\n\n```vue\n<template>\n  <div>\n    <ScrollToTop scroll-id=\"scrollId\" :threshold-px=\"1000\">\n      <span>Scroll to top</span>\n    </ScrollToTop>\n  </div>\n</template>\n\n<script>\n  import { ScrollToTop } from '@empathyco/x-components/scroll';\n\n  export default {\n    name: 'ScrollToTopTest',\n    components: {\n      ScrollToTop\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC1B,SAAA;AACD;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,YAAW;AACtB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;;AAEF,QAAA,MAAM,EAAE,IAAK,EAAA,GAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;AAE7C;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM;YAChC,OAAO,KAAK,CAAC,QAAO,IAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;kBAC9C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;AAC3B,kBAAE;AACE,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,SAAS,EAAE,IAAI;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,mBAAmB,EAAE,KAAK;AAC1B,oBAAA,aAAa,EAAE,KAAI;iBACpB,CAAA;AACP,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAA,CACzE,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,uBAAuB,QAAQ,CAAC,MAAM,OAAO,KAAK,CAAC,WAAU,KAAM,QAAQ,CAAC,CAAA;AAElF;;;;;AAKE;QACF,MAAM,kBAAmB,GAAE,QAAQ,CACjC,MAAM,oBAAoB,CAAC,SAAS,UAAU,CAAC,KAAK,CAAC,QAAS,GAAE,KAAK,CAAC,WAAW,CAClF,CAAA;AAED;;;;;AAKE;QACF,MAAM,yBAA0B,GAAE,QAAQ,CACxC,MAAM,UAAU,CAAC,KAAK,CAAC,mBAAkB,IAAK,UAAU,CAAC,KAAK,CAAC,SAAU,KAAI,MAAK,CACnF,CAAA;AAED;;;;;AAKE;QACF,MAAM,YAAY,QAAQ,CAAC,MACzB,oBAAoB,CAAC,KAAM,GAAE,kBAAkB,CAAC,KAAI,GAAI,yBAAyB,CAAC,KAAI,CACvF,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

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

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

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

package/js/x-modules/search/components/partial-results-list.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './partial-results-list.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode } from 'vue';
 import './partial-results-list.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -20,7 +20,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "x-partial-result",
             "data-test": "partial-result"
           }, [
-            createCommentVNode("\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      "),
             renderSlot(_ctx.$slots, "default", { partialResult }, void 0, true)
           ]);
         }),

package/js/x-modules/search/components/partial-results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;AAE1B,YAAA,WAAA,EAAA,gBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,mIAAA,CAAA;;;AAlBN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"partial-results-list.vue.js","sources":["../../../../../src/x-modules/search/components/partial-results-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"partialResults.length\"\n    class=\"x-partial-results-list\"\n    data-test=\"partial-results\"\n    tag=\"ul\"\n  >\n    <li\n      v-for=\"(partialResult, index) in partialResults\"\n      :key=\"`${partialResult.query}-${index}`\"\n      class=\"x-partial-result\"\n      data-test=\"partial-result\"\n    >\n      <!--\n       @slot (Required) Partial results item content\n           @binding {Partial} partialResult - Partial Result data\n      -->\n      <slot :partialResult=\"partialResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { PartialResult } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * It renders a list of partial results from {@link SearchState.partialResults} by default.\n   * It also provides the partial result slot to customize the item with the partial result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PartialResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the partial results.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n\n      /**\n       * Maximum number of partial results to show.\n       *\n       * @public\n       */\n      maxItemsToRender: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * The partials results from the search state.\n       *\n       * @public\n       */\n      const items: ComputedRef<PartialResult[]> = useState('search', [\n        'partialResults'\n      ]).partialResults;\n\n      /**\n       * A limited number of partial results.\n       *\n       * @returns The partial results sliced by the maxItemsToRender.\n       *\n       * @internal\n       */\n      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));\n\n      return {\n        partialResults\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-partial-results-list {\n    display: flex;\n    flex-flow: column nowrap;\n    list-style-type: none;\n    padding: 0;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component loops through an array of partials an exposed a slot to use customize each partial.\n\n### Basic example\n\nIt renders a list of partial results using the default slot:\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Configuring the number of partials\n\nIt sets the maximum partials to show to 3.\n\n```vue\n<template>\n  <PartialResultsList :maxItemsToRender=\"3\">\n    <template #default=\"{ partialResult }\">\n      <ResultsList :results=\"partialResult.results\" />\n    </template>\n  </PartialResultsList>\n</template>\n```\n\n### Rendering usage\n\nIt renders a list of partial results using the default slot. It will show the query, the partial\nresults and a button to update the query with the partial one.\n\n```vue\n<template>\n  <PartialResultsList>\n    <template #default=\"{ partialResult }\">\n      <span>{{ partialResult.query }}</span>\n      <BaseGrid :columns=\"4\" :items=\"partialResult.results\">\n        <template #result=\"{ item }\">\n          <BaseResultLink :result=\"item\">\n            <template #default=\"{ item }\">\n              <BaseResultImage :result=\"item\" />\n              <span class=\"x-result__title\">{{ item.name }}</span>\n            </template>\n          </BaseResultLink>\n        </template>\n      </BaseGrid>\n      <PartialQueryButton :query=\"partialResult.query\">\n        <template #default=\"{ query }\">Ver todos {{ query }}</template>\n      </PartialQueryButton>\n    </template>\n  </PartialResultsList>\n</template>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MAESA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;AAFT,EAAA,OAAA,IAAA,CAAA,cAAA,CAAA,MAAA,IAAAC,SAAA,EAIkC,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAC9B,GAAA,EAAA,CAAA;AAAA,IACA,KAAI,EAAA,wBAAA;AAAA,IAAA,WAAA,EAAA,iBAAA;AANR,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;AAUe,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAuBC,QAAA;AAAA,QAAK,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,aAAA,EAAA,KAAA,KAAA;AAChC,UAAA,OAAAL,SAAA,EAAmB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YACxB,sBAAU,KAAgB,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA;AAAA,YAAA,KAAA,EAAA,kBAAA;YAM1B,WAAuC,EAAA,gBAAA;AAAA,WAAA,EAAA;;;AAlB7C,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/search/components/results-list.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent, provide, ref, computed, watch, h } from 'vue';
 import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { animationProp } from '../../../utils/options-api.js';
 import { useState } from '../../../composables/use-state.js';
 import { searchXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 
 /**
  * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the results. */
         animation: {
-            type: animationProp,
+            type: AnimationProp,
             default: 'ul'
         }
     },

package/js/x-modules/search/components/results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { animationProp } from '../../../utils/options-api';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\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\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\n\n  /**\n   * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n   * default.\n   *\n   * The component provides a default slot which wraps the whole component with the `results` bound.\n   *\n   * It also provides the slot result to customize the item, which is within the default slot, with\n   * the result bound.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\n      /**\n       * The results to render from the state.\n       *\n       * @remarks The results list are provided with `items` key. It can be\n       * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n       * `BaseGrid` or any component that injects the list.\n       */\n      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\n\n      /**\n       * Updates the query to be provided to the child components\n       * when the search request has succeeded.\n       *\n       * @param status - The status of the search request.\n       */\n      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\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\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    },\n    data() {\n      return {\n        fadeAndSlide: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #result=\"{ item }\">\n          <span>Result: {{ item.name }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <BannersList>\n          <template #result=\"{ item }\">Result: {{ item.id }}</template>\n          <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n          <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        </BannersList>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'ResultsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import _sfc_main from './sort-dropdown.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -15,7 +15,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": "Select sorting"
   }, {
     toggle: withCtx(({ isOpen, item }) => [
-      createCommentVNode("\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      "),
       renderSlot(_ctx.$slots, "toggle", normalizeProps(guardReactiveProps({ isOpen, item })), () => [
         createTextVNode(
           toDisplayString(item),
@@ -25,7 +24,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     item: withCtx(({ item, isHighlighted, isSelected }) => [
-      createCommentVNode("\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      "),
       renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps({ item, isHighlighted, isSelected })), () => [
         createTextVNode(
           toDisplayString(item),

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
       ])