@empathyco/x-components 6.0.0-alpha.1 → 6.0.0-alpha.3

package/js/x-modules/facets/components/filters/simple-filter.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n    :filter=\"filter\"\n    :clickEvents=\"innerClickEvents\"\n    :cssClasses=\"innerCssClasses\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        isDisabled,\n        cssClasses\n      }\"\n    >\n      <button\n        @click=\"clickFilter\"\n        :aria-checked=\"filter.selected.toString()\"\n        :class=\"cssClasses\"\n        :disabled=\"isDisabled\"\n        data-test=\"filter\"\n        role=\"checkbox\"\n      >\n        <!--\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        -->\n        <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a simple filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SimpleFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<SimpleFilterModel>,\n        required: true\n      },\n      /** Additional events, with their payload, to emit when the filter is clicked. */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup(props) {\n      /** The {@link XEventsTypes} to emit. */\n      const innerClickEvents = computed(() => ({\n        UserClickedASimpleFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      /** CSS classes to apply to the element. */\n      const innerCssClasses = computed(() => [\n        'x-simple-filter',\n        { 'x-simple-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](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, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n  <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n  <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n    <label :class=\"cssClasses\">\n      <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n      {{ filter.label }}\n    </label>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\">\n    <template #label=\"{ filter }\">\n      <img :src=\"`imgs/filters/${filter.id}.png`\" />\n      <span>{{ filter.label }}</span>\n    </template>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;AAkDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,wBAAwB,EAAE,KAAK,CAAC,MAAM;YACtC,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;;AAGH,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,iBAAiB;AACjB,YAAA,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YACzD,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"simple-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue"],"sourcesContent":["<template>\n  <RenderlessFilter\n    v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\"\n    :filter=\"filter\"\n    :clickEvents=\"innerClickEvents\"\n    :cssClasses=\"innerCssClasses\"\n  >\n    <!--\n      @slot The control element to render\n      @binding {Filter} filter - The filter data\n      @binding {() => void} clickFilter - Method that will invoke the needed actions after the user\n      clicks the filter.\n      @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the\n      user\n      @binding {Object} cssClasses - Object containing CSS classes to add to the button\n    -->\n    <slot\n      v-bind=\"{\n        filter,\n        clickFilter,\n        isDisabled,\n        cssClasses\n      }\"\n    >\n      <button\n        @click=\"clickFilter\"\n        :aria-checked=\"filter.selected.toString()\"\n        :class=\"cssClasses\"\n        :disabled=\"isDisabled\"\n        data-test=\"filter\"\n        role=\"checkbox\"\n        v-bind=\"$attrs\"\n      >\n        <!--\n          @slot The content to render inside the button\n          @binding {Filter} filter - The filter data\n        -->\n        <slot :filter=\"filter\" name=\"label\">{{ filter.label }}</slot>\n      </button>\n    </slot>\n  </RenderlessFilter>\n</template>\n\n<script lang=\"ts\">\n  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a simple filter, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SimpleFilter',\n    xModule: facetsXModule.name,\n    components: { RenderlessFilter },\n    inheritAttrs: false,\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<SimpleFilterModel>,\n        required: true\n      },\n      /** Additional events, with their payload, to emit when the filter is clicked. */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      }\n    },\n    setup(props) {\n      /** The {@link XEventsTypes} to emit. */\n      const innerClickEvents = computed(() => ({\n        UserClickedASimpleFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      /** CSS classes to apply to the element. */\n      const innerCssClasses = computed(() => [\n        'x-simple-filter',\n        { 'x-simple-filter--is-selected': props.filter.selected },\n        ...props.cssClasses\n      ]);\n\n      return {\n        innerClickEvents,\n        innerCssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button, using the `filter` prop as its payload.\n- [`UserClickedASimpleFilter`](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, using the `filter` prop as its payload.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and the\n`UserClickedASimpleFilter` events. By default, it renders a `button` with the `filter.label`\nproperty as text.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n  <SimpleFilter :clickEvents=\"{ UserClickedASimpleFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Rendering an input\n\nYou can change the rendered control using the default slot. Note that because of the current Vue\nlimitations, you must only render one single root node in this slot. There you will receive all the\ndata and methods needed:\n\n```vue\n<template>\n  <SimpleFilter v-slot=\"{ filter, clickFilter, isDisabled, cssClasses }\" :filter=\"filter\">\n    <label :class=\"cssClasses\">\n      <input :checked=\"filter.selected\" type=\"checkbox\" @change=\"clickFilter\" />\n      {{ filter.label }}\n    </label>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Changing default button content\n\nYou can change the content rendered by the default button using the `label` slot. There you will\nreceive the filter data.\n\n```vue\n<template>\n  <SimpleFilter :filter=\"filter\">\n    <template #label=\"{ filter }\">\n      <img :src=\"`imgs/filters/${filter.id}.png`\" />\n      <span>{{ filter.label }}</span>\n    </template>\n  </SimpleFilter>\n</template>\n\n<script>\n  import { SimpleFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'SimpleFilterTest',\n    components: {\n      SimpleFilter\n    },\n    data() {\n      return {\n        filter: {\n          modelName: 'SimpleFilter',\n          selected: false,\n          id: 'category:shirts',\n          value: 'category:shirts',\n          facetId: 'category',\n          label: 'Shirts',\n          totalResults: 10\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;AAmDE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,oBAAEA,WAAe,EAAG;AAChC,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAqC;AAC3C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AAClB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,wBAAwB,EAAE,KAAK,CAAC,MAAM;YACtC,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;;AAGH,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,iBAAiB;AACjB,YAAA,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;YACzD,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,gBAAgB;YAChB,eAAc;SACf,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/facets/composables/use-facets.js

@@ -26,7 +26,9 @@ function useFacets(props) {
         if (props.facetsIds) {
             return props.facetsIds.reduce((selectedFilters, facetId) => [
                 ...selectedFilters,
-                ...selectedFiltersByFacet.value[facetId]
+                ...(Array.isArray(selectedFiltersByFacet.value[facetId])
+                    ? selectedFiltersByFacet.value[facetId]
+                    : [])
             ], []);
         }
         return selectedFiltersGetter.value;

package/js/x-modules/facets/composables/use-facets.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-facets.js","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"sourcesContent":["import { Facet, Filter } from '@empathyco/x-types';\nimport { computed, ComputedRef } from 'vue';\nimport { useGetter } from '../../../composables/use-getter';\nimport { isArrayEmpty } from '../../../utils/array';\nimport { FiltersByFacet } from '../store/types';\n\n/**\n * Composable to share Facets logic.\n *\n * @param props - Composable props.\n * @returns Composable.\n *\n * @public\n */\nexport function useFacets(props: {\n  /** Array of facets ids used to get the selected filters for those facets. */\n  facetsIds?: Array<Facet['id']>;\n  /** Flag to render the component even if there are no filters selected. */\n  alwaysVisible?: boolean;\n}) {\n  const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets', [\n    'selectedFiltersByFacet',\n    'selectedFilters'\n  ]) as {\n    /** Dictionary of filters {@link FiltersByFacet} filtered by facet id. */\n    selectedFiltersByFacet: ComputedRef<FiltersByFacet>;\n    /** Get the selected filters from store. */\n    selectedFilters: ComputedRef<Filter[]>;\n  };\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   */\n  const selectedFilters = computed<Filter[]>(() => {\n    if (props.facetsIds) {\n      return (props.facetsIds as string[]).reduce(\n        (selectedFilters, facetId) => [\n          ...selectedFilters,\n          ...selectedFiltersByFacet.value[facetId]\n        ],\n        [] as Filter[]\n      );\n    }\n\n    return selectedFiltersGetter.value;\n  });\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are selected filters.\n   */\n  const hasSelectedFilters = computed<boolean>(() => !isArrayEmpty(selectedFilters.value));\n\n  /**\n   * Flag representing if the component should be visible/rendered or not.\n   *\n   * @returns True whenever alwaysVisible is true or has selected filters. False\n   * otherwise.\n   */\n  const isVisible = computed<boolean>(() => !!props.alwaysVisible || hasSelectedFilters.value);\n\n  return {\n    selectedFiltersByFacet,\n    selectedFilters,\n    hasSelectedFilters,\n    isVisible\n  };\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,KAKzB,EAAA;IACC,MAAM,EAAE,sBAAsB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE;QAC7F,wBAAwB;QACxB,iBAAiB;AAClB,KAAA,CAKA,CAAC;AAEF;;;;;;AAMG;AACH,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAW,MAAK;QAC9C,IAAI,KAAK,CAAC,SAAS,EAAE;AACnB,YAAA,OAAQ,KAAK,CAAC,SAAsB,CAAC,MAAM,CACzC,CAAC,eAAe,EAAE,OAAO,KAAK;AAC5B,gBAAA,GAAG,eAAe;AAClB,gBAAA,GAAG,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC;aACzC,EACD,EAAc,CACf,CAAC;AACH,SAAA;QAED,OAAO,qBAAqB,CAAC,KAAK,CAAC;AACrC,KAAC,CAAC,CAAC;AAEH;;;;AAIG;AACH,IAAA,MAAM,kBAAkB,GAAG,QAAQ,CAAU,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;AAEzF;;;;;AAKG;AACH,IAAA,MAAM,SAAS,GAAG,QAAQ,CAAU,MAAM,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE7F,OAAO;QACL,sBAAsB;QACtB,eAAe;QACf,kBAAkB;QAClB,SAAS;KACV,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-facets.js","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"sourcesContent":["import { Facet, Filter } from '@empathyco/x-types';\nimport { computed, ComputedRef } from 'vue';\nimport { useGetter } from '../../../composables/use-getter';\nimport { isArrayEmpty } from '../../../utils/array';\nimport { FiltersByFacet } from '../store/types';\n\n/**\n * Composable to share Facets logic.\n *\n * @param props - Composable props.\n * @returns Composable.\n *\n * @public\n */\nexport function useFacets(props: {\n  /** Array of facets ids used to get the selected filters for those facets. */\n  facetsIds?: Array<Facet['id']>;\n  /** Flag to render the component even if there are no filters selected. */\n  alwaysVisible?: boolean;\n}) {\n  const { selectedFiltersByFacet, selectedFilters: selectedFiltersGetter } = useGetter('facets', [\n    'selectedFiltersByFacet',\n    'selectedFilters'\n  ]) as {\n    /** Dictionary of filters {@link FiltersByFacet} filtered by facet id. */\n    selectedFiltersByFacet: ComputedRef<FiltersByFacet>;\n    /** Get the selected filters from store. */\n    selectedFilters: ComputedRef<Filter[]>;\n  };\n\n  /**\n   * Get selected filters.\n   * If there are facets ids, get selected filters whose facet id match with some of facets ids.\n   * If there aren't facets ids, get selected filters.\n   *\n   * @returns Array of selected filters depends on there are facets ids or not.\n   */\n  const selectedFilters = computed<Filter[]>(() => {\n    if (props.facetsIds) {\n      return (props.facetsIds as string[]).reduce(\n        (selectedFilters, facetId) => [\n          ...selectedFilters,\n          ...(Array.isArray(selectedFiltersByFacet.value[facetId])\n            ? selectedFiltersByFacet.value[facetId]\n            : [])\n        ],\n        [] as Filter[]\n      );\n    }\n\n    return selectedFiltersGetter.value;\n  });\n\n  /**\n   * Check if there are selected filters.\n   *\n   * @returns True or false depends on if there are selected filters.\n   */\n  const hasSelectedFilters = computed<boolean>(() => !isArrayEmpty(selectedFilters.value));\n\n  /**\n   * Flag representing if the component should be visible/rendered or not.\n   *\n   * @returns True whenever alwaysVisible is true or has selected filters. False\n   * otherwise.\n   */\n  const isVisible = computed<boolean>(() => !!props.alwaysVisible || hasSelectedFilters.value);\n\n  return {\n    selectedFiltersByFacet,\n    selectedFilters,\n    hasSelectedFilters,\n    isVisible\n  };\n}\n"],"names":[],"mappings":";;;;AAMA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,KAKzB,EAAA;IACC,MAAM,EAAE,sBAAsB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,QAAQ,EAAE;QAC7F,wBAAwB;QACxB,iBAAiB;AAClB,KAAA,CAKA,CAAC;AAEF;;;;;;AAMG;AACH,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAW,MAAK;QAC9C,IAAI,KAAK,CAAC,SAAS,EAAE;AACnB,YAAA,OAAQ,KAAK,CAAC,SAAsB,CAAC,MAAM,CACzC,CAAC,eAAe,EAAE,OAAO,KAAK;AAC5B,gBAAA,GAAG,eAAe;gBAClB,IAAI,KAAK,CAAC,OAAO,CAAC,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACtD,sBAAE,sBAAsB,CAAC,KAAK,CAAC,OAAO,CAAC;sBACrC,EAAE;aACP,EACD,EAAc,CACf,CAAC;AACH,SAAA;QAED,OAAO,qBAAqB,CAAC,KAAK,CAAC;AACrC,KAAC,CAAC,CAAC;AAEH;;;;AAIG;AACH,IAAA,MAAM,kBAAkB,GAAG,QAAQ,CAAU,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;AAEzF;;;;;AAKG;AACH,IAAA,MAAM,SAAS,GAAG,QAAQ,CAAU,MAAM,CAAC,CAAC,KAAK,CAAC,aAAa,IAAI,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE7F,OAAO;QACL,sBAAsB;QACtB,eAAe;QACf,kBAAkB;QAClB,SAAS;KACV,CAAC;AACJ;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue.js

@@ -5,10 +5,10 @@ import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseSwitch = resolveComponent("BaseSwitch");
   return openBlock(), createBlock(_component_BaseSwitch, {
-    onChange: _ctx.toggle,
-    value: _ctx.isEnabled,
+    "onUpdate:modelValue": _ctx.toggle,
+    modelValue: _ctx.isEnabled,
     "aria-label": "Queries' history"
-  }, null, 8, ["onChange", "value"]);
+  }, null, 8, ["onUpdate:modelValue", "modelValue"]);
 }
 var historyQueriesSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAgF,CAAA,YAAA,CAAA,CAAA;AAA7C,EAAA,OAAAC,SAAA,EAAW,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,QAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,SAAA;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAgG,CAAA,YAAA,CAAA,CAAA;AAAvD,EAAA,OAAAC,SAAA,EAAqB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,qBAAW,EAAA,IAAA,CAAA,MAAA;AAAA,IAAA,UAAA,EAAA,IAAA,CAAA,SAAA;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAA,CAC3D,CAAA;QAED,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAwC,CAC7C,CAAA;AAED;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAM,GAAE,iCAAiC,CAAC,CAAA;AACnF,SAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"history-queries-switch.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @update:modelValue=\"toggle\" :modelValue=\"isEnabled\" aria-label=\"Queries' history\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * History Queries Switch is a component to activate or deactivate the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HistoryQueriesSwitch',\n    xModule: historyQueriesXModule.name,\n    components: {\n      BaseSwitch\n    },\n    setup() {\n      const $x = use$x();\n\n      /**\n       * An object with the isEnabled value and the history queries coming from the store state.\n       *\n       * @internal\n       */\n      const { isEnabled, historyQueries } = useState('historyQueries', [\n        'isEnabled',\n        'historyQueries'\n      ]);\n\n      /**\n       * Checks if there are history queries.\n       *\n       * @returns True if there are history queries; false otherwise.\n       */\n      const hasHistoryQueries = computed(\n        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])\n      );\n\n      const disableEvent = computed(() =>\n        hasHistoryQueries.value\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n      );\n\n      /**\n       * Emits an event based on the switch state.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');\n      };\n\n      return {\n        toggle,\n        isEnabled\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;AAaE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;AAIE;QACF,MAAM,EAAE,SAAS,EAAE,gBAAiB,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YAC/D,WAAW;YACX,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAAuB,CAAA,CAC3D,CAAA;QAED,MAAM,YAAW,GAAI,QAAQ,CAAC,MAC5B,iBAAiB,CAAC,KAAI;AACpB,cAAE,kCAAiC;cACjC,yCAAwC,CAC7C,CAAA;AAED;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAI,GAAI,YAAY,CAAC,KAAM,GAAE,iCAAiC,CAAC,CAAA;AACnF,SAAC,CAAA;QAED,OAAO;YACL,MAAM;YACN,SAAQ;SACT,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/next-queries/components/next-queries-list.vue.js

@@ -1,10 +1,10 @@
 import { defineComponent, inject, computed, provide, h } from 'vue';
 import ItemsList from '../../../components/items-list.vue.js';
+import { useState } from '../../../composables/use-state.js';
 import { groupItemsBy } from '../../../utils/array.js';
 import { nextQueriesXModule } from '../x-module.js';
 import { QUERY_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import { AnimationProp } from '../../../types/animation-prop.js';
-import { use$x } from '../../../composables/use-_x.js';
 import { useGetter } from '../../../composables/use-getter.js';
 
 /**
@@ -49,7 +49,7 @@ var _sfc_main = defineComponent({
         }
     },
     setup(props, { slots }) {
-        const $x = use$x();
+        const { query, status } = useState('nextQueries', ['query', 'status']);
         /** The state next queries. */
         const nextQueries = useGetter('nextQueries', [
             'nextQueries'
@@ -78,7 +78,7 @@ var _sfc_main = defineComponent({
          * @returns True if the next queries are outdated, false if not.
          */
         const nextQueriesAreOutdated = computed(() => !!injectedQuery?.value &&
-            ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success'));
+            (query.value !== injectedQuery.value || status.value !== 'success'));
         /**
          * Checks if the number of items is smaller than the offset so a group
          * should be added to the injected items list.
@@ -123,7 +123,8 @@ var _sfc_main = defineComponent({
         provide(LIST_ITEMS_KEY, items);
         return () => {
             const innerProps = { items: items.value, animation: props.animation };
-            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
     }
 });

package/js/x-modules/next-queries/components/next-queries-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import ItemsList from '../../../components/items-list.vue';\n  import { groupItemsBy } from '../../../utils/array';\n  import { ListItem } from '../../../utils/types';\n  import { NextQueriesGroup } from '../types';\n  import { nextQueriesXModule } from '../x-module';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * Component that inserts groups of next queries in different positions of the injected search\n   * items list, based on the provided configuration.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueriesList',\n    xModule: nextQueriesXModule.name,\n    props: {\n      /** Animation component that will be used to animate the next queries groups. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** The first index to insert a group of next queries at. */\n      offset: {\n        type: Number,\n        default: 24\n      },\n      /** The items cycle size to keep inserting next queries groups at. */\n      frequency: {\n        type: Number,\n        default: 24\n      },\n      /** The maximum amount of next queries to add in a single group. */\n      maxNextQueriesPerGroup: {\n        type: Number,\n        default: 4\n      },\n      /** The maximum number of groups to insert into the injected list items list. */\n      maxGroups: Number,\n      /**\n       * Determines if a group is added to the injected items list in case the number\n       * of items is smaller than the offset.\n       */\n      showOnlyAfterOffset: {\n        type: Boolean,\n        default: false\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The state next queries. */\n      const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n        'nextQueries'\n      ]).nextQueries;\n\n      /** Injected query, updated when the related request(s) have succeeded. */\n      const injectedQuery = inject<Ref<string>>(QUERY_KEY as string);\n\n      /** Indicates if there are more available results than the injected. */\n      const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);\n\n      /**\n       * The grouped next queries based on the given config.\n       *\n       * @returns A list of next queries groups.\n       */\n      const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n        Object.values(\n          groupItemsBy(nextQueries?.value, (_, index) =>\n            Math.floor(index / props.maxNextQueriesPerGroup)\n          )\n        )\n          .slice(0, props.maxGroups)\n          .map(nextQueries => ({\n            modelName: 'NextQueriesGroup' as const,\n            id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n            nextQueries\n          }))\n      );\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * Checks if the next queries are outdated taking into account the injected query.\n       *\n       * @returns True if the next queries are outdated, false if not.\n       */\n      const nextQueriesAreOutdated = computed(\n        () =>\n          !!injectedQuery?.value &&\n          ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success')\n      );\n\n      /**\n       * Checks if the number of items is smaller than the offset so a group\n       * should be added to the injected items list.\n       *\n       * @returns True if a group should be added, false if not.\n       */\n      const hasNotEnoughListItems = computed(\n        () =>\n          !props.showOnlyAfterOffset &&\n          !hasMoreItems?.value &&\n          injectedListItems !== undefined &&\n          injectedListItems.value.length > 0 &&\n          props.offset > injectedListItems.value.length\n      );\n\n      /**\n       * New list of {@link ListItem}s to render.\n       *\n       * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value) {\n          return nextQueriesGroups.value;\n        }\n        if (nextQueriesAreOutdated.value) {\n          return injectedListItems.value;\n        }\n        if (hasNotEnoughListItems.value) {\n          return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? []);\n        }\n        return nextQueriesGroups?.value.reduce(\n          (items, nextQueriesGroup, index) => {\n            const targetIndex = props.offset + props.frequency * index;\n            if (targetIndex <= items.length) {\n              items.splice(targetIndex, 0, nextQueriesGroup);\n            }\n            return items;\n          },\n          [...injectedListItems.value]\n        );\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\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      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\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: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      BaseGrid,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import ItemsList from '../../../components/items-list.vue';\n  import { useState } from '../../../composables/use-state';\n  import { groupItemsBy } from '../../../utils/array';\n  import { ListItem } from '../../../utils/types';\n  import { NextQueriesGroup } from '../types';\n  import { nextQueriesXModule } from '../x-module';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * Component that inserts groups of next queries in different positions of the injected search\n   * items list, based on the provided configuration.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'NextQueriesList',\n    xModule: nextQueriesXModule.name,\n    props: {\n      /** Animation component that will be used to animate the next queries groups. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /** The first index to insert a group of next queries at. */\n      offset: {\n        type: Number,\n        default: 24\n      },\n      /** The items cycle size to keep inserting next queries groups at. */\n      frequency: {\n        type: Number,\n        default: 24\n      },\n      /** The maximum amount of next queries to add in a single group. */\n      maxNextQueriesPerGroup: {\n        type: Number,\n        default: 4\n      },\n      /** The maximum number of groups to insert into the injected list items list. */\n      maxGroups: Number,\n      /**\n       * Determines if a group is added to the injected items list in case the number\n       * of items is smaller than the offset.\n       */\n      showOnlyAfterOffset: {\n        type: Boolean,\n        default: false\n      }\n    },\n    setup(props, { slots }) {\n      const { query, status } = useState('nextQueries', ['query', 'status']);\n\n      /** The state next queries. */\n      const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n        'nextQueries'\n      ]).nextQueries;\n\n      /** Injected query, updated when the related request(s) have succeeded. */\n      const injectedQuery = inject<Ref<string>>(QUERY_KEY as string);\n\n      /** Indicates if there are more available results than the injected. */\n      const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);\n\n      /**\n       * The grouped next queries based on the given config.\n       *\n       * @returns A list of next queries groups.\n       */\n      const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n        Object.values(\n          groupItemsBy(nextQueries?.value, (_, index) =>\n            Math.floor(index / props.maxNextQueriesPerGroup)\n          )\n        )\n          .slice(0, props.maxGroups)\n          .map(nextQueries => ({\n            modelName: 'NextQueriesGroup' as const,\n            id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n            nextQueries\n          }))\n      );\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * Checks if the next queries are outdated taking into account the injected query.\n       *\n       * @returns True if the next queries are outdated, false if not.\n       */\n      const nextQueriesAreOutdated = computed(\n        () =>\n          !!injectedQuery?.value &&\n          (query.value !== injectedQuery.value || status.value !== 'success')\n      );\n\n      /**\n       * Checks if the number of items is smaller than the offset so a group\n       * should be added to the injected items list.\n       *\n       * @returns True if a group should be added, false if not.\n       */\n      const hasNotEnoughListItems = computed(\n        () =>\n          !props.showOnlyAfterOffset &&\n          !hasMoreItems?.value &&\n          injectedListItems !== undefined &&\n          injectedListItems.value.length > 0 &&\n          props.offset > injectedListItems.value.length\n      );\n\n      /**\n       * New list of {@link ListItem}s to render.\n       *\n       * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value) {\n          return nextQueriesGroups.value;\n        }\n        if (nextQueriesAreOutdated.value) {\n          return injectedListItems.value;\n        }\n        if (hasNotEnoughListItems.value) {\n          return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? []);\n        }\n        return nextQueriesGroups?.value.reduce(\n          (items, nextQueriesGroup, index) => {\n            const targetIndex = props.offset + props.frequency * index;\n            if (targetIndex <= items.length) {\n              items.splice(targetIndex, 0, nextQueriesGroup);\n            }\n            return items;\n          },\n          [...injectedListItems.value]\n        );\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\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 emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      SearchInput\n    }\n  };\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\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      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\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: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      BaseGrid,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -94,7 +94,8 @@ var _sfc_main = defineComponent({
         provide(LIST_ITEMS_KEY, items);
         return () => {
             const innerProps = { items: items.value, animation: props.animation };
-            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
     }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Banner } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, isRef, provide, ref, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { FeatureLocation } from '../../../types/origin';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n   *\n   * The component provides a default slot which wraps the whole component with the `banners`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BannersList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the banners. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The banners to render from the state. */\n      const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;\n\n      /** The provided {@link FeatureLocation} for the component. */\n      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location');\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;\n\n      /** Number of columns the grid is being divided into. */\n      let columnsNumber = ref(0);\n\n      /**\n       * Handler to update the number of columns when it changes.\n       *\n       * @param newColumnsNumber - The new columns value.\n       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n       */\n      $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n        if (metadata.location === location) {\n          columnsNumber.value = eventPayload;\n        }\n      });\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        let index = 0,\n          previousBannerRow = -1;\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let row = position - 1;\n          if (row <= previousBannerRow) {\n            row = previousBannerRow + 1;\n          }\n          const rowsDiff = row - previousBannerRow;\n          if (rowsDiff > 1) {\n            index += (rowsDiff - 1) * columnsNumber.value;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n          index++;\n          previousBannerRow = row;\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);\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 BannersList 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    <BannersList />\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { BannersList } 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: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\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    <BannersList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #banner=\"{ item }\">\n          <span>Banner: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ item.title }}\n      </span>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\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\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <BannersList>\n        <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </BannersList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"banners-list.vue.js","sources":["../../../../../src/x-modules/search/components/banners-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Banner } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, isRef, provide, ref, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { FeatureLocation } from '../../../types/origin';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.\n   *\n   * The component provides a default slot which wraps the whole component with the `banners`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BannersList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the banners. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The banners to render from the state. */\n      const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;\n\n      /** The provided {@link FeatureLocation} for the component. */\n      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location');\n      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;\n\n      /** Number of columns the grid is being divided into. */\n      let columnsNumber = ref(0);\n\n      /**\n       * Handler to update the number of columns when it changes.\n       *\n       * @param newColumnsNumber - The new columns value.\n       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.\n       */\n      $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {\n        if (metadata.location === location) {\n          columnsNumber.value = eventPayload;\n        }\n      });\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        let index = 0,\n          previousBannerRow = -1;\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let row = position - 1;\n          if (row <= previousBannerRow) {\n            row = previousBannerRow + 1;\n          }\n          const rowsDiff = row - previousBannerRow;\n          if (rowsDiff > 1) {\n            index += (rowsDiff - 1) * columnsNumber.value;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n          index++;\n          previousBannerRow = row;\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\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 BannersList 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    <BannersList />\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { BannersList } 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: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\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    <BannersList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #banner=\"{ item }\">\n          <span>Banner: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Overriding banner content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <BannersList #banner=\"{ item }\">\n      <span class=\"banner\">\n        {{ item.title }}\n      </span>\n    </BannersList>\n  </div>\n</template>\n\n<script>\n  import { BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      BannersList\n    }\n  };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of results and\nbanners in order to be injected by the `BaseGrid` (or components that extend it).\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\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <BannersList>\n        <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </BannersList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, BannersList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'BannersListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      BannersList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -71,7 +71,8 @@ var _sfc_main = defineComponent({
         provide(LIST_ITEMS_KEY, items);
         return () => {
             const innerProps = { items: items.value, animation: props.animation };
-            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
     }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Promoted } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n   *\n   * The component provides a default slot which wraps the whole component with the `promoteds`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PromotedsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the promoteds. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The promoteds to render from the state. */\n      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let index = position - 1;\n          while (items.at(index)?.modelName === 'Promoted') {\n            index++;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);\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 PromotedsList 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\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } 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: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,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;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;;AAGlB,QAAA,MAAM,UAAU,GAA4B,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;;AAGvF,QAAA,MAAM,iBAAkB,GAAE,MAAM,CAAkB,cAAwB,CAAC,CAAA;AAE3E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAK,CAAA;AACzB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC1C,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAO,GAAI,IAAI,CAAC,QAAO,IAAK,CAAC,CAAA;AACnC,gBAAA,IAAI,KAAM,GAAE,QAAO,GAAI,CAAC,CAAA;gBACxB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAE,CAAA;AACT,iBAAA;AACA,gBAAA,MAAM,oBAAmB,GAAI,KAAI,IAAK,KAAK,CAAC,MAAM,CAAA;gBAClD,MAAM,iBAAkB,GAAE,EAAE,CAAC,OAAO,CAAC,MAAK,KAAM,EAAE,CAAC,YAAY,CAAA;AAC/D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAK;AACP,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAC9B,aAAA;AACA,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AAEF;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAC,CAAA;AAExC,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;AACrE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,IAAK,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;AACnE,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { Promoted } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import ItemsList from '../../../components/items-list.vue';\n  import { ListItem } from '../../../utils/types';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n\n  /**\n   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.\n   *\n   * The component provides a default slot which wraps the whole component with the `promoteds`\n   * plus the `injectedListItems` which also contains the injected list items from\n   * the ancestor.\n   *\n   * It also provides the parent slots to customize the items.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'PromotedsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the promoteds. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    setup(props, { slots }) {\n      const $x = use$x();\n\n      /** The promoteds to render from the state. */\n      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;\n\n      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);\n\n      /**\n       * The `stateItems` concatenated with the `injectedListItems` if there are.\n       *\n       * @remarks This computed defines the merging strategy of the `stateItems` and the\n       * `injectedListItems`.\n       *\n       * @returns List of {@link ListItem}.\n       */\n      const items = computed(() => {\n        if (!injectedListItems?.value!.length) {\n          return stateItems.value;\n        }\n        const items = [...injectedListItems.value];\n        for (const item of stateItems.value) {\n          const position = item.position ?? 1;\n          let index = position - 1;\n          while (items.at(index)?.modelName === 'Promoted') {\n            index++;\n          }\n          const isIndexInLoadedPages = index <= items.length;\n          const areAllPagesLoaded = $x.results.length === $x.totalResults;\n          if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n            break;\n          }\n          items.splice(index, 0, item);\n        }\n        return items;\n      });\n\n      /**\n       * The computed list items of the entity that uses the mixin.\n       *\n       * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n       * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n       * @returns An empty array as fallback in case it is not overridden.\n       */\n      provide(LIST_ITEMS_KEY as string, items);\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 PromotedsList 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\n    <PromotedsList />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\n    }\n  };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList :animation=\"fadeAndSlide\" />\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { FadeAndSlide } from '@empathyco/x-components/animations';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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    <PromotedsList #default=\"{ items, animation }\">\n      <BaseGrid :items=\"items\" :animation=\"animation\">\n        <template #promoted=\"{ item }\">\n          <span>Promoted: {{ item.title }}</span>\n        </template>\n        <template #default=\"{ item }\">\n          <span>Default: {{ item }}</span>\n        </template>\n      </BaseGrid>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } 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: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList,\n      BaseGrid\n    }\n  };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <PromotedsList #promoted=\"{ item }\">\n      <span class=\"promoted\">\n        {{ item.title }}\n      </span>\n    </PromotedsList>\n  </div>\n</template>\n\n<script>\n  import { PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      PromotedsList\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\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <PromotedsList>\n        <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n        <template #result=\"{ item }\">Result: {{ item.id }}</template>\n      </PromotedsList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\n  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'PromotedsListDemo',\n    components: {\n      SearchInput,\n      ResultsList,\n      PromotedsList\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAWE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,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;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;;AAGlB,QAAA,MAAM,UAAU,GAA4B,QAAQ,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAA;;AAGvF,QAAA,MAAM,iBAAkB,GAAE,MAAM,CAAkB,cAAwB,CAAC,CAAA;AAE3E;;;;;;;AAOE;AACF,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAM;AAC3B,YAAA,IAAI,CAAC,iBAAiB,EAAE,KAAM,CAAC,MAAM,EAAE;gBACrC,OAAO,UAAU,CAAC,KAAK,CAAA;AACzB,aAAA;YACA,MAAM,KAAM,GAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC1C,YAAA,KAAK,MAAM,IAAG,IAAK,UAAU,CAAC,KAAK,EAAE;AACnC,gBAAA,MAAM,QAAO,GAAI,IAAI,CAAC,QAAO,IAAK,CAAC,CAAA;AACnC,gBAAA,IAAI,KAAM,GAAE,QAAO,GAAI,CAAC,CAAA;gBACxB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAQ,KAAM,UAAU,EAAE;AAChD,oBAAA,KAAK,EAAE,CAAA;AACT,iBAAA;AACA,gBAAA,MAAM,oBAAmB,GAAI,KAAI,IAAK,KAAK,CAAC,MAAM,CAAA;gBAClD,MAAM,iBAAkB,GAAE,EAAE,CAAC,OAAO,CAAC,MAAK,KAAM,EAAE,CAAC,YAAY,CAAA;AAC/D,gBAAA,IAAI,CAAC,oBAAqB,IAAG,CAAC,iBAAiB,EAAE;oBAC/C,MAAK;AACP,iBAAA;gBACA,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAA;AAC9B,aAAA;AACA,YAAA,OAAO,KAAK,CAAA;AACd,SAAC,CAAC,CAAA;AAEF;;;;;;AAME;AACF,QAAA,OAAO,CAAC,cAAwB,EAAE,KAAK,CAAC,CAAA;AAExC,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/results-list.vue.js

@@ -69,7 +69,8 @@ var _sfc_main = defineComponent({
         watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });
         return () => {
             const innerProps = { items: items.value, animation: props.animation };
-            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
         };
     }
 });

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        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);\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;AACrE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA,IAAK,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;AACnE,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 { 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;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.3",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -54,9 +54,9 @@
     "lint": "eslint . --ext .ts,.vue",
     "test:unit": "jest --silent",
     "test:unit-jest": "jest",
-    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
+    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
     "test:e2e:firefox": "start-server-and-test serve http://localhost:8080 cypress:open:firefox",
     "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:run:ci",
@@ -137,5 +137,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "701cfef5b869a46966240c38bcaa53c56e9db1aa"
+  "gitHead": "56dc02262147b22e22d8a0918abe19be0c90f07f"
 }

package/report/x-components.api.json

@@ -11110,7 +11110,7 @@
             },
             {
               "kind": "Content",
-              "text": ", (\"change\" | \"update:modelValue\")[], \"change\" | \"update:modelValue\", import(\"vue\")."
+              "text": ", \"update:modelValue\"[], \"update:modelValue\", import(\"vue\")."
             },
             {
               "kind": "Reference",
@@ -11146,7 +11146,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n        default: boolean;\n    };\n}>> & {\n    onChange?: ((...args: any[]) => any) | undefined;\n    \"onUpdate:modelValue\"?: ((...args: any[]) => any) | undefined;\n}, {\n    modelValue: boolean;\n}, {}>"
+              "text": ";\n        default: boolean;\n    };\n}>> & {\n    \"onUpdate:modelValue\"?: ((...args: any[]) => any) | undefined;\n}, {\n    modelValue: boolean;\n}, {}>"
             }
           ],
           "fileUrlPath": "dist/types/components/base-switch.vue.d.ts",

package/report/x-components.api.md

@@ -1343,13 +1343,12 @@ default: boolean;
 }, {
 cssClasses: Ref<string | Dictionary<boolean> | (string | Dictionary<boolean>)[]>;
 toggle: () => void;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", PublicProps, Readonly<ExtractPropTypes<    {
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", PublicProps, Readonly<ExtractPropTypes<    {
 modelValue: {
 type: BooleanConstructor;
 default: boolean;
 };
 }>> & {
-onChange?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
 modelValue: boolean;

package/types/components/base-switch.vue.d.ts

@@ -13,13 +13,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
     toggle: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;

package/types/components/base-switch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAIE;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;;;;;;AA/B3B,wBA+CG"}
+{"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAIE;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;;;;;AA/B3B,wBA8CG"}

package/types/x-modules/facets/components/filters/number-range-filter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-range-filter.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACE,OAAO,EAA6B,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;;IAMC,iCAAiC;;;;;IAKjC;;;;OAIG;;IAEH,+BAA+B;;;;;;;;;IAX/B,iCAAiC;;;;;IAKjC;;;;OAIG;;IAEH,+BAA+B;;;;;;;;AAhBnC,wBAmDG"}
+{"version":3,"file":"number-range-filter.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/number-range-filter.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACE,OAAO,EAA6B,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;;IAOC,iCAAiC;;;;;IAKjC;;;;OAIG;;IAEH,+BAA+B;;;;;;;;;IAX/B,iCAAiC;;;;;IAKjC;;;;OAIG;;IAEH,+BAA+B;;;;;;;;AAjBnC,wBAoDG"}

package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-filter.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAA6B,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;;IAMC,iCAAiC;;;;;IAKjC,iFAAiF;;IAEjF,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAP/B,iCAAiC;;;;;IAKjC,iFAAiF;;IAEjF,+BAA+B;;;;;;;;AAZnC,wBAqCG"}
+{"version":3,"file":"simple-filter.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/simple-filter.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAA6B,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAI/D;;;;GAIG;;IAOC,iCAAiC;;;;;IAKjC,iFAAiF;;IAEjF,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAP/B,iCAAiC;;;;;IAKjC,iFAAiF;;IAEjF,+BAA+B;;;;;;;;AAbnC,wBAsCG"}

package/types/x-modules/facets/composables/use-facets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-facets.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,WAAW,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;;;;EAqDA"}
+{"version":3,"file":"use-facets.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/facets/composables/use-facets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,WAAW,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;;;;EAuDA"}

package/types/x-modules/next-queries/components/next-queries-list.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-queries-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAiBE;;;;;GAKG;;IAKC,gFAAgF;;;;;IAKhF,4DAA4D;;;;;IAK5D,qEAAqE;;;;;IAKrE,mEAAmE;;;;;IAKnE,gFAAgF;;IAEhF;;;OAGG;;;;;;;;IAzBH,gFAAgF;;;;;IAKhF,4DAA4D;;;;;IAK5D,qEAAqE;;;;;IAKrE,mEAAmE;;;;;IAKnE,gFAAgF;;IAEhF;;;OAGG;;;;;;;;;;;;AA7BP,wBA0IG"}
+{"version":3,"file":"next-queries-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAiBE;;;;;GAKG;;IAKC,gFAAgF;;;;;IAKhF,4DAA4D;;;;;IAK5D,qEAAqE;;;;;IAKrE,mEAAmE;;;;;IAKnE,gFAAgF;;IAEhF;;;OAGG;;;;;;;;IAzBH,gFAAgF;;;;;IAKhF,4DAA4D;;;;;IAK5D,qEAAqE;;;;;IAKrE,mEAAmE;;;;;IAKnE,gFAAgF;;IAEhF;;;OAGG;;;;;;;;;;;;AA7BP,wBA2IG"}

package/types/x-modules/search/components/banners-list.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banners-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/banners-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAYE;;;;;;;;;;GAUG;;IAKC,oEAAoE;;;;;;;;IAApE,oEAAoE;;;;;;;;AAJxE,wBAyFG"}
+{"version":3,"file":"banners-list.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/banners-list.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAYE;;;;;;;;;;GAUG;;IAKC,oEAAoE;;;;;;;;IAApE,oEAAoE;;;;;;;;AAJxE,wBA0FG"}