@empathyco/x-components 6.0.0-alpha.222 → 6.0.0-alpha.224

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

@@ -98,15 +98,11 @@ import '../../../components/suggestions/base-suggestions.vue2.js';
 import '../../../components/suggestions/base-suggestions.vue3.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
 import { useDebounce } from '../../../composables/use-debounce.js';
 import '@vueuse/core';
+import 'rxjs';
 import { AnimationProp } from '../../../types/animation-prop.js';
 import { getActiveElement } from '../../../utils/html.js';
 import '../../../utils/storage.js';

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

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpenAndHasContent\"\n      ref=\"empathizeRef\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Empathize',\n  xModule: empathizeXModule.name,\n  props: {\n    /** Array of {@link XEvent} to open the empathize. */\n    eventsToOpenEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n    },\n    /** Array of {@link XEvent} to close the empathize. */\n    eventsToCloseEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnterKey',\n        'UserBlurredSearchBox',\n      ],\n    },\n    /** Animation component that will be used to animate the empathize. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n    hasContent: {\n      type: Boolean,\n      default: true,\n    },\n    /** Fallback flag to trigger a search and close the empathize when has no-content. */\n    searchAndCloseOnNoContent: {\n      type: Boolean,\n      default: false,\n    },\n    /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n    searchAndCloseDebounceInMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const empathizeRef = ref<HTMLDivElement | null>(null)\n    const isOpen = ref(false)\n    const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n    /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n    watch(isOpenAndHasContent, () => {\n      const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n      $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n    })\n\n    /** Debounce function to change the state `isOpen` to the new value. */\n    const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n    /**\n     * Open empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n     * element.\n     */\n    function open() {\n      changeOpenDebounced(true)\n    }\n\n    /**\n     * Close empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n     * element.\n     */\n    function close() {\n      const activeElement = getActiveElement()\n      if (!empathizeRef.value?.contains(activeElement)) {\n        changeOpenDebounced(false)\n      }\n    }\n\n    /** Events subscriptions to open and close empathize. */\n    props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n    props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n    let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n    /** Debounced function to unwatch the search-box query and also search and close empathize. */\n    const searchAndCloseDebounced = useDebounce(async () => {\n      if (isOpen.value) {\n        unwatchSearchBoxQuery()\n        await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n        close()\n      }\n    }, props.searchAndCloseDebounceInMs)\n\n    /**\n     * Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n     * with the following casuistics:\n     * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n     * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n     * search fallback when the user types in the search-box during debounced time.\n     */\n    watch(\n      () => props.hasContent,\n      () => {\n        if (props.searchAndCloseOnNoContent) {\n          if (props.hasContent) {\n            unwatchSearchBoxQuery()\n            searchAndCloseDebounced.cancel()\n          } else {\n            unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n              immediate: true,\n            })\n          }\n        }\n      },\n    )\n\n    return { empathizeRef, isOpenAndHasContent, open, close }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n  <Empathize>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\n```\n\nDefining custom values for the events to open and close the Empathize. For example, opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<template>\n  <Empathize\n    :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n    :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n  >\n    Please, type a query in the Search Box.\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation must\nbe a component with a `Transition` and a slot inside:\n\n```vue\n<template>\n  <Empathize :animation=\"collapseFromTop\">\n    <PopularSearches />\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n  <Empathize\n    :animation=\"empathizeAnimation\"\n    :events-to-close-empathize=\"empathizeCloseEvents\"\n    :has-content=\"showEmpathize\"\n    :search-and-close-debounce-in-ms=\"500\"\n    search-and-close-on-no-content\n  >\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC;AACtF,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM;gBACb,qBAAqB;gBACrB,yBAAyB;gBACzB,qBAAqB;gBACrB,sBAAsB;AACvB,aAAA;AACF,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAW;AAC3B,SAAA;;AAED,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,0BAA0B,EAAE;AAC1B,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,YAAW,GAAI,GAAG,CAAwB,IAAI,CAAA;AACpD,QAAA,MAAM,SAAS,GAAG,CAAC,KAAK,CAAA;AACxB,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAI,IAAK,KAAK,CAAC,UAAU,CAAA;;AAG3E,QAAA,KAAK,CAAC,mBAAmB,EAAE,MAAI;AAC7B,YAAA,MAAM,cAAa,GAAI,mBAAmB,CAAC,KAAI,GAAI,oBAAoB,iBAAgB;AACvF,YAAA,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAI,EAAG,CAAA;AACnE,QAAA,CAAC,CAAA;;AAGD,QAAA,MAAM,mBAAkB,GAAI,WAAW,CAAC,CAAC,OAAgB,MAAM,MAAM,CAAC,KAAI,GAAI,OAAO,CAAC,EAAE,CAAC,CAAA;AAEzF;;;;AAIE;AACF,QAAA,SAAS,IAAI,GAAA;YACX,mBAAmB,CAAC,IAAI,CAAA;QAC1B;AAEA;;;;AAIE;AACF,QAAA,SAAS,KAAK,GAAA;AACZ,YAAA,MAAM,aAAY,GAAI,gBAAgB,EAAC;YACvC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,mBAAmB,CAAC,KAAK,CAAA;YAC3B;QACF;;QAGA,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QAChF,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AAElF,QAAA,IAAI,qBAAqB,GAAoB,QAAO,CAAA;;AAGpD,QAAA,MAAM,uBAAsB,GAAI,WAAW,CAAC,YAAU;AACpD,YAAA,IAAI,MAAM,CAAC,KAAK,EAAE;AAChB,gBAAA,qBAAqB,EAAC;AACtB,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAA;AACtD,gBAAA,KAAK,EAAC;YACR;AACF,QAAA,CAAC,EAAE,KAAK,CAAC,0BAA0B,CAAA;AAEnC;;;;;;AAME;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,MAAI;AACF,YAAA,IAAI,KAAK,CAAC,yBAAyB,EAAE;AACnC,gBAAA,IAAI,KAAK,CAAC,UAAU,EAAE;AACpB,oBAAA,qBAAqB,EAAC;oBACtB,uBAAuB,CAAC,MAAM,EAAC;gBACjC;qBAAO;AACL,oBAAA,qBAAoB,GAAI,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,uBAAuB,EAAE;AAC/E,wBAAA,SAAS,EAAE,IAAI;AAChB,qBAAA,CAAA;gBACH;YACF;AACF,QAAA,CAAC,CACH;QAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,IAAI,EAAE,KAAI,EAAE;IAC1D,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\">\n    <div\n      v-show=\"isOpenAndHasContent\"\n      ref=\"empathizeRef\"\n      class=\"x-empathize\"\n      data-test=\"empathize\"\n      @mousedown.prevent\n      @focusin=\"open\"\n      @focusout=\"close\"\n    >\n      <!-- @slot (Required) Modal container content -->\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Empathize',\n  xModule: empathizeXModule.name,\n  props: {\n    /** Array of {@link XEvent} to open the empathize. */\n    eventsToOpenEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n    },\n    /** Array of {@link XEvent} to close the empathize. */\n    eventsToCloseEmpathize: {\n      type: Array as PropType<XEvent[]>,\n      default: () => [\n        'UserClosedEmpathize',\n        'UserSelectedASuggestion',\n        'UserPressedEnterKey',\n        'UserBlurredSearchBox',\n      ],\n    },\n    /** Animation component that will be used to animate the empathize. */\n    animation: {\n      type: AnimationProp,\n      default: () => NoAnimation,\n    },\n    /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n    hasContent: {\n      type: Boolean,\n      default: true,\n    },\n    /** Fallback flag to trigger a search and close the empathize when has no-content. */\n    searchAndCloseOnNoContent: {\n      type: Boolean,\n      default: false,\n    },\n    /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n    searchAndCloseDebounceInMs: {\n      type: Number,\n      default: 1000,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const empathizeRef = ref<HTMLDivElement | null>(null)\n    const isOpen = ref(false)\n    const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n    /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n    watch(isOpenAndHasContent, () => {\n      const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n      $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n    })\n\n    /** Debounce function to change the state `isOpen` to the new value. */\n    const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n    /**\n     * Open empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n     * element.\n     */\n    function open() {\n      changeOpenDebounced(true)\n    }\n\n    /**\n     * Close empathize. This function will be executed on any event in\n     * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n     * element.\n     */\n    function close() {\n      const activeElement = getActiveElement()\n      if (!empathizeRef.value?.contains(activeElement)) {\n        changeOpenDebounced(false)\n      }\n    }\n\n    /** Events subscriptions to open and close empathize. */\n    props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n    props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n    let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n    /** Debounced function to unwatch the search-box query and also search and close empathize. */\n    const searchAndCloseDebounced = useDebounce(async () => {\n      if (isOpen.value) {\n        unwatchSearchBoxQuery()\n        await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n        close()\n      }\n    }, props.searchAndCloseDebounceInMs)\n\n    /**\n     * Watcher triggered when `hasContent` change and the `searchAndCloseOnNoContent` flag is active\n     * with the following casuistics:\n     * 1. Empathize has content: unwatch the search-box query and cancel debounced search&close.\n     * 2. Empathize has NO content: create a watcher for the search-box query. It is to debounce the\n     * search fallback when the user types in the search-box during debounced time.\n     */\n    watch(\n      () => props.hasContent,\n      () => {\n        if (props.searchAndCloseOnNoContent) {\n          if (props.hasContent) {\n            unwatchSearchBoxQuery()\n            searchAndCloseDebounced.cancel()\n          } else {\n            unwatchSearchBoxQuery = watch(() => $x.query.searchBox, searchAndCloseDebounced, {\n              immediate: true,\n            })\n          }\n        }\n      },\n    )\n\n    return { empathizeRef, isOpenAndHasContent, open, close }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `true` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after receiving an event to change the state `isOpen` to `false` and `hasContent` to `true`.\n  The event payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`\n\n### Basic example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<template>\n  <Empathize>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\n</script>\n```\n\nDefining custom values for the events to open and close the Empathize. For example, opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<template>\n  <Empathize\n    :events-to-open-empathize=\"['UserBlurredSearchBox']\"\n    :events-to-close-empathize=\"['UserFocusedSearchBox']\"\n  >\n    Please, type a query in the Search Box.\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\n</script>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation must\nbe a component with a `Transition` and a slot inside:\n\n```vue\n<template>\n  <Empathize :animation=\"collapseFromTop\">\n    <PopularSearches />\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nconst animation = CollapseFromTop\n</script>\n```\n\n### Advanced example\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize\nwhen it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.\n\n```vue\n<template>\n  <Empathize\n    :animation=\"empathizeAnimation\"\n    :events-to-close-empathize=\"empathizeCloseEvents\"\n    :has-content=\"showEmpathize\"\n    :search-and-close-debounce-in-ms=\"500\"\n    search-and-close-on-no-content\n  >\n    <BaseKeyboardNavigation>\n      <QuerySuggestions />\n      <PopularSearches />\n      <HistoryQueries />\n    </BaseKeyboardNavigation>\n  </Empathize>\n</template>\n\n<script setup>\nimport Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'\nimport BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'\nimport QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'\nimport PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'\nimport HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'\nimport CollapseFromTop from './collapseFromTop.vue'\nimport { ref } from 'vue'\nconst empathizeAnimation = CollapseFromTop\nconst empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']\nconst showEmpathize = ref(true)\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}

package/js/x-modules/experience-controls/x-module.js

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { experienceControlsEmitters } from './store/emitters.js';
 import { experienceControlsXStoreModule } from './store/module.js';

package/js/x-modules/experience-controls/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/experience-controls/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { ExperienceControlsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/index'\nimport { experienceControlsEmitters } from './store/emitters'\nimport { experienceControlsXStoreModule } from './store/module'\nimport { experienceControlsWiring } from './wiring'\n\n/**\n * Search {@link XModule} alias.\n *\n * @public\n */\nexport type ExperienceControlsXModule = XModule<ExperienceControlsXStoreModule>\n\n/**\n * Search {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `x-controls` entry point.\n *\n * @public\n */\nexport const experienceControlsXModule: ExperienceControlsXModule = {\n  name: 'experienceControls',\n  storeModule: experienceControlsXStoreModule,\n  storeEmitters: experienceControlsEmitters,\n  wiring: experienceControlsWiring,\n}\n\nXPlugin.registerXModule(experienceControlsXModule)\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA;;;;;AAKG;AACI,MAAM,yBAAyB,GAA8B;AAClE,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,8BAA8B;AAC3C,IAAA,aAAa,EAAE,0BAA0B;AACzC,IAAA,MAAM,EAAE,wBAAwB;;AAGlC,OAAO,CAAC,eAAe,CAAC,yBAAyB,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/experience-controls/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { ExperienceControlsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/index'\nimport { experienceControlsEmitters } from './store/emitters'\nimport { experienceControlsXStoreModule } from './store/module'\nimport { experienceControlsWiring } from './wiring'\n\n/**\n * Search {@link XModule} alias.\n *\n * @public\n */\nexport type ExperienceControlsXModule = XModule<ExperienceControlsXStoreModule>\n\n/**\n * Search {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `x-controls` entry point.\n *\n * @public\n */\nexport const experienceControlsXModule: ExperienceControlsXModule = {\n  name: 'experienceControls',\n  storeModule: experienceControlsXStoreModule,\n  storeEmitters: experienceControlsEmitters,\n  wiring: experienceControlsWiring,\n}\n\nXPlugin.registerXModule(experienceControlsXModule)\n"],"names":[],"mappings":";;;;;;;AAcA;;;;;AAKG;AACI,MAAM,yBAAyB,GAA8B;AAClE,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,8BAA8B;AAC3C,IAAA,aAAa,EAAE,0BAA0B;AACzC,IAAA,MAAM,EAAE,wBAAwB;;AAGlC,OAAO,CAAC,eAAe,CAAC,yBAAyB,CAAC;;;;"}

package/js/x-modules/extra-params/x-module.js

@@ -1,10 +1,5 @@
-import '@vue/devtools-api';
-import '../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { extraParamsEmitters } from './store/emitters.js';
 import { extraParamsXStoreModule } from './store/module.js';

package/js/x-modules/extra-params/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { ExtraParamsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/index'\nimport { extraParamsEmitters } from './store/emitters'\nimport { extraParamsXStoreModule } from './store/module'\nimport { extraParamsWiring } from './wiring'\n\n/**\n * ExtraParams {@link XModule} alias.\n *\n * @public\n */\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>\n\n/**\n * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n *\n * @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n  name: 'extraParams',\n  storeModule: extraParamsXStoreModule,\n  storeEmitters: extraParamsEmitters,\n  wiring: extraParamsWiring,\n}\n\nXPlugin.registerXModule(extraParamsXModule)\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA;;;;;AAKG;AACI,MAAM,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,WAAW,EAAE,uBAAuB;AACpC,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,MAAM,EAAE,iBAAiB;;AAG3B,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { ExtraParamsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/index'\nimport { extraParamsEmitters } from './store/emitters'\nimport { extraParamsXStoreModule } from './store/module'\nimport { extraParamsWiring } from './wiring'\n\n/**\n * ExtraParams {@link XModule} alias.\n *\n * @public\n */\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>\n\n/**\n * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n *\n * @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n  name: 'extraParams',\n  storeModule: extraParamsXStoreModule,\n  storeEmitters: extraParamsEmitters,\n  wiring: extraParamsWiring,\n}\n\nXPlugin.registerXModule(extraParamsXModule)\n"],"names":[],"mappings":";;;;;;;AAcA;;;;;AAKG;AACI,MAAM,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,WAAW,EAAE,uBAAuB;AACpC,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,MAAM,EAAE,iBAAiB;;AAG3B,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;;;;"}

package/js/x-modules/facets/components/filters/editable-number-range-filter.vue2.js

@@ -2,15 +2,11 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import '../../../../composables/create-use-device.js';
 import { use$x } from '../../../../composables/use-_x.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../../plugins/devtools/colors.utils.js';
 import '../../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../../plugins/x-plugin.js';
 import '@vueuse/core';
+import 'rxjs';
 import { facetsXModule } from '../../x-module.js';
 
 /**

package/js/x-modules/facets/components/filters/editable-number-range-filter.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-editable-number-range-filter\"\n    :class=\"cssClasses\"\n    data-test=\"editable-number-range-filter\"\n  >\n    <!--\n        @slot Empty slot used to customize the whole component.\n          @binding {min} number - Component min value.\n          @binding {max} number - Component max value.\n          @binding {setMin} function - Component min setter.\n          @binding {setMax} function - Component max setter.\n          @binding {emitUserModifiedFilter} function - It emits the\n          `UserModifiedEditableNumberRangeFilter` X event.\n          @binding {clearValues} function - It sets component min and max values to null.\n          @binding {hasError} boolean - Returns true when there is an error with component values.\n    -->\n    <slot\n      v-bind=\"{\n        min,\n        max,\n        setMin,\n        setMax,\n        emitUserModifiedFilter,\n        clearValues,\n        hasError,\n        isAnyRange,\n      }\"\n    >\n      <!-- eslint-disable max-len -->\n      <input\n        name=\"min\"\n        type=\"number\"\n        class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input\"\n        :class=\"inputsClass\"\n        :value=\"!isAnyRange ? min : null\"\n        data-test=\"range-min\"\n        :aria-label=\"rangeFilterMin\"\n        @change=\"setMin(($event?.target as HTMLInputElement)?.valueAsNumber)\"\n      />\n\n      <input\n        name=\"max\"\n        type=\"number\"\n        class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input\"\n        :class=\"inputsClass\"\n        :value=\"max\"\n        data-test=\"range-max\"\n        :aria-label=\"rangeFilterMax\"\n        @change=\"setMax(($event?.target as HTMLInputElement)?.valueAsNumber)\"\n      />\n      <!-- eslint-enable max-len -->\n\n      <button\n        v-if=\"!isInstant\"\n        class=\"x-editable-number-range-filter__apply x-button\"\n        :class=\"buttonsClass\"\n        :disabled=\"hasError\"\n        data-test=\"range-apply\"\n        @click=\"emitUserModifiedFilter\"\n      >\n        <!--\n            @slot Slot used to customize the apply button content.\n        -->\n        <slot name=\"apply-content\">✓</slot>\n      </button>\n\n      <button\n        v-if=\"renderClearButton\"\n        class=\"x-editable-number-range-filter__clear x-button\"\n        :class=\"buttonsClass\"\n        data-test=\"range-clear\"\n        @click=\"clearValues\"\n      >\n        <!--\n            @slot Slot used to customize the clear button content.\n        -->\n        <slot name=\"clear-content\">𐄂</slot>\n      </button>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type {\n  EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n  RangeValue,\n} from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../../composables'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'EditableNumberRangeFilter',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * The filter data to render and edit.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<EditableNumberRangeFilterModel>,\n      required: true,\n    },\n    /**\n     * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n     * rendered to confirm to do it. False by default.\n     *\n     * @public\n     */\n    isInstant: Boolean,\n    /**\n     * If `clear` prop is true, clear button, which sets to null component min and max values, is\n     * rendered. True by default.\n     *\n     * @public\n     */\n    hasClearButton: {\n      type: Boolean,\n      default: true,\n    },\n    /** Class inherited by content element. */\n    inputsClass: String,\n    /** Class inherited by content element. */\n    buttonsClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const rangeFilterMin = 'minimum amount'\n    const rangeFilterMax = 'maximum amount'\n    /**\n     * Component min value.\n     *\n     * @internal\n     */\n    const min: Ref<RangeValue['min']> = ref(null)\n    /**\n     * Component max value.\n     *\n     * @internal\n     */\n    const max: Ref<RangeValue['max']> = ref(null)\n\n    /**\n     * Returns {@link @empathyco/x-types#RangeValue} with component min and max\n     * values.\n     *\n     * @returns Range value object with component values.\n     *\n     * @internal\n     */\n    const range = computed((): RangeValue => {\n      return { min: min.value, max: max.value }\n    })\n\n    /**\n     * It checks if component min and max values are valid.\n     *\n     * @returns True if there is any error in the component min and max values.\n     *\n     * @internal\n     */\n    const hasError = computed(\n      () => min.value !== null && max.value !== null && min.value > max.value,\n    )\n\n    /**\n     * It checks if component min and max values are different from the ones within the filter\n     * provided as property.\n     *\n     * @returns True if they are different.\n     *\n     * @internal\n     */\n    const areValuesDifferent = computed(\n      () => min.value !== props.filter.range.min || max.value !== props.filter.range.max,\n    )\n\n    /**\n     * Dynamic CSS classes.\n     *\n     * @returns Object which contains dynamic CSS classes.\n     *\n     * @internal\n     */\n    const cssClasses = computed(() => {\n      return { 'x-editable-number-range-filter--error': hasError.value }\n    })\n\n    /**\n     * Checks if the range of the filter allows any value, which happens when the min is\n     * null or 0 and the max is null.\n     *\n     * @returns True if the range of the filter allows any value.\n     *\n     * @internal\n     */\n    const isAnyRange = computed(() => !min.value && max.value === null)\n\n    /**\n     * It returns true if the property `hasClearButton` is true and there are values to clear.\n     *\n     * @returns True if the clear button has to be rendered.\n     *\n     * @internal\n     */\n    const renderClearButton = computed(() => props.hasClearButton && !isAnyRange.value)\n\n    /**\n     * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n     * errors and component `min` and `max` values are different than `filter.range` ones.\n     *\n     * @internal\n     */\n    const emitUserModifiedFilter = () => {\n      if (!hasError.value && areValuesDifferent.value) {\n        $x.emit('UserModifiedEditableNumberRangeFilter', {\n          ...props.filter,\n          range: range.value,\n        })\n      }\n    }\n\n    /**\n     * It returns the number if possible or null otherwise.\n     *\n     * @param value - Value.\n     * @returns The element value as a number if possible or null.\n     *\n     * @internal\n     */\n    const parseRangeValue = (value: number) => (Number.isNaN(value) ? null : value)\n\n    /**\n     * `min` setter.\n     *\n     * @param value - The component `min` value to be set.\n     *\n     * @internal\n     */\n    const setMin = (value: number) => {\n      min.value = parseRangeValue(value)\n    }\n\n    /**\n     * `max` setter.\n     *\n     * @param value - The component `max` value to be set.\n     *\n     * @internal\n     */\n    const setMax = (value: number) => {\n      max.value = parseRangeValue(value)\n    }\n\n    /**\n     * It sets component `min` and `max` values to null , and it emits the change if component is\n     * working in instant mode.\n     *\n     * @internal\n     */\n    const clearValues = () => {\n      min.value = null\n      max.value = null\n    }\n\n    /**\n     * It resets the min/max range values to null if the\n     * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n     *\n     * @public\n     */\n    $x.on('UserClickedClearAllFilters', false).subscribe(clearValues)\n\n    /**\n     * It watches the filter range values passed as property and updates component range values if\n     * they change.\n     *\n     * @param newRange - New range value.\n     *\n     * @internal\n     */\n    watch(\n      () => props.filter.range,\n      (newRange: RangeValue) => {\n        min.value = newRange.min\n        max.value = newRange.max\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * It watches range values in order to emit the event with the change if `isInstant`\n     * property is true.\n     *\n     * @internal\n     */\n    watch(\n      range,\n      () => {\n        if (props.isInstant) {\n          emitUserModifiedFilter()\n        }\n      },\n      { deep: true },\n    )\n\n    return {\n      rangeFilterMin,\n      rangeFilterMax,\n      cssClasses,\n      min,\n      max,\n      setMin,\n      setMax,\n      emitUserModifiedFilter,\n      clearValues,\n      hasError,\n      isAnyRange,\n      renderClearButton,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-editable-number-range-filter--error .x-editable-number-range-filter__input {\n  border-color: red;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserModifiedEditableNumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  this event is emitted instantly after typing the value or clicking the submit button. The event\n  payload in both cases is an object containing the filter and the new value for the range.\n\n## Example\n\nRenders an editable number range filter. It has two input fields to handle min and max values,\nemitting the needed events when clicked.\n\nIt provides a default slot, with some utils bind, to customize the whole component; and two named\nslots `apply-content` and `clear-content` to override each button content.\n\nIf `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered\nto confirm to do it. False by default.\n\nIf `clear` prop is true, clear button, which sets to null component min and max values, is rendered.\nTrue by default.\n\n### Basic usage\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\" />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Properties\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\" :isInstant=\"true\" :hasClearButton=\"false\" />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing content slots\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\">\n    <template #apply-content>Apply</template>\n    <template #clear-content>Clear</template>\n  </EditableNumberRangeFilter>\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing default slot\n\n```vue\n<template>\n  <EditableNumberRangeFilter\n    :filter=\"editableFilter\"\n    #default=\"{\n      min,\n      max,\n      setMin,\n      setMax,\n      emitUserModifiedFilter,\n      clearValues,\n      hasError,\n      isAnyRange,\n    }\"\n  >\n    <button @click=\"emitUserModifiedFilter\">✅ Apply!</button>\n    <button @click=\"clearValues\">🗑 Clear!</button>\n    <input :value=\"!isAnyRange ? min : null\" @change=\"setMin($event.target.valueAsNumber)\" />\n    <input :value=\"max\" @change=\"setMax($event.target.valueAsNumber)\" />\n    <div class=\"has-error\" v-if=\"hasError\">⚠️ Invalid range values</div>\n  </EditableNumberRangeFilter>\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonsClass` and `inputsClass` props can be used to add classes to the inputs and buttons of\nthe component.\n\n```\n<template>\n  <EditableNumberRangeFilter\n    :filter=\"editableFilter\"\n    :inputsClass=\"'my-inputs-class'\"\n    :buttonsClass=\"'my-buttons-class'\"\n  />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"editable-number-range-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue"],"sourcesContent":["<template>\n  <div\n    class=\"x-editable-number-range-filter\"\n    :class=\"cssClasses\"\n    data-test=\"editable-number-range-filter\"\n  >\n    <!--\n        @slot Empty slot used to customize the whole component.\n          @binding {min} number - Component min value.\n          @binding {max} number - Component max value.\n          @binding {setMin} function - Component min setter.\n          @binding {setMax} function - Component max setter.\n          @binding {emitUserModifiedFilter} function - It emits the\n          `UserModifiedEditableNumberRangeFilter` X event.\n          @binding {clearValues} function - It sets component min and max values to null.\n          @binding {hasError} boolean - Returns true when there is an error with component values.\n    -->\n    <slot\n      v-bind=\"{\n        min,\n        max,\n        setMin,\n        setMax,\n        emitUserModifiedFilter,\n        clearValues,\n        hasError,\n        isAnyRange,\n      }\"\n    >\n      <!-- eslint-disable max-len -->\n      <input\n        name=\"min\"\n        type=\"number\"\n        class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input\"\n        :class=\"inputsClass\"\n        :value=\"!isAnyRange ? min : null\"\n        data-test=\"range-min\"\n        :aria-label=\"rangeFilterMin\"\n        @change=\"setMin(($event?.target as HTMLInputElement)?.valueAsNumber)\"\n      />\n\n      <input\n        name=\"max\"\n        type=\"number\"\n        class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input\"\n        :class=\"inputsClass\"\n        :value=\"max\"\n        data-test=\"range-max\"\n        :aria-label=\"rangeFilterMax\"\n        @change=\"setMax(($event?.target as HTMLInputElement)?.valueAsNumber)\"\n      />\n      <!-- eslint-enable max-len -->\n\n      <button\n        v-if=\"!isInstant\"\n        class=\"x-editable-number-range-filter__apply x-button\"\n        :class=\"buttonsClass\"\n        :disabled=\"hasError\"\n        data-test=\"range-apply\"\n        @click=\"emitUserModifiedFilter\"\n      >\n        <!--\n            @slot Slot used to customize the apply button content.\n        -->\n        <slot name=\"apply-content\">✓</slot>\n      </button>\n\n      <button\n        v-if=\"renderClearButton\"\n        class=\"x-editable-number-range-filter__clear x-button\"\n        :class=\"buttonsClass\"\n        data-test=\"range-clear\"\n        @click=\"clearValues\"\n      >\n        <!--\n            @slot Slot used to customize the clear button content.\n        -->\n        <slot name=\"clear-content\">𐄂</slot>\n      </button>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type {\n  EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n  RangeValue,\n} from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../../../composables'\nimport { facetsXModule } from '../../x-module'\n\n/**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'EditableNumberRangeFilter',\n  xModule: facetsXModule.name,\n  props: {\n    /**\n     * The filter data to render and edit.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<EditableNumberRangeFilterModel>,\n      required: true,\n    },\n    /**\n     * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n     * rendered to confirm to do it. False by default.\n     *\n     * @public\n     */\n    isInstant: Boolean,\n    /**\n     * If `clear` prop is true, clear button, which sets to null component min and max values, is\n     * rendered. True by default.\n     *\n     * @public\n     */\n    hasClearButton: {\n      type: Boolean,\n      default: true,\n    },\n    /** Class inherited by content element. */\n    inputsClass: String,\n    /** Class inherited by content element. */\n    buttonsClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const rangeFilterMin = 'minimum amount'\n    const rangeFilterMax = 'maximum amount'\n    /**\n     * Component min value.\n     *\n     * @internal\n     */\n    const min: Ref<RangeValue['min']> = ref(null)\n    /**\n     * Component max value.\n     *\n     * @internal\n     */\n    const max: Ref<RangeValue['max']> = ref(null)\n\n    /**\n     * Returns {@link @empathyco/x-types#RangeValue} with component min and max\n     * values.\n     *\n     * @returns Range value object with component values.\n     *\n     * @internal\n     */\n    const range = computed((): RangeValue => {\n      return { min: min.value, max: max.value }\n    })\n\n    /**\n     * It checks if component min and max values are valid.\n     *\n     * @returns True if there is any error in the component min and max values.\n     *\n     * @internal\n     */\n    const hasError = computed(\n      () => min.value !== null && max.value !== null && min.value > max.value,\n    )\n\n    /**\n     * It checks if component min and max values are different from the ones within the filter\n     * provided as property.\n     *\n     * @returns True if they are different.\n     *\n     * @internal\n     */\n    const areValuesDifferent = computed(\n      () => min.value !== props.filter.range.min || max.value !== props.filter.range.max,\n    )\n\n    /**\n     * Dynamic CSS classes.\n     *\n     * @returns Object which contains dynamic CSS classes.\n     *\n     * @internal\n     */\n    const cssClasses = computed(() => {\n      return { 'x-editable-number-range-filter--error': hasError.value }\n    })\n\n    /**\n     * Checks if the range of the filter allows any value, which happens when the min is\n     * null or 0 and the max is null.\n     *\n     * @returns True if the range of the filter allows any value.\n     *\n     * @internal\n     */\n    const isAnyRange = computed(() => !min.value && max.value === null)\n\n    /**\n     * It returns true if the property `hasClearButton` is true and there are values to clear.\n     *\n     * @returns True if the clear button has to be rendered.\n     *\n     * @internal\n     */\n    const renderClearButton = computed(() => props.hasClearButton && !isAnyRange.value)\n\n    /**\n     * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n     * errors and component `min` and `max` values are different than `filter.range` ones.\n     *\n     * @internal\n     */\n    const emitUserModifiedFilter = () => {\n      if (!hasError.value && areValuesDifferent.value) {\n        $x.emit('UserModifiedEditableNumberRangeFilter', {\n          ...props.filter,\n          range: range.value,\n        })\n      }\n    }\n\n    /**\n     * It returns the number if possible or null otherwise.\n     *\n     * @param value - Value.\n     * @returns The element value as a number if possible or null.\n     *\n     * @internal\n     */\n    const parseRangeValue = (value: number) => (Number.isNaN(value) ? null : value)\n\n    /**\n     * `min` setter.\n     *\n     * @param value - The component `min` value to be set.\n     *\n     * @internal\n     */\n    const setMin = (value: number) => {\n      min.value = parseRangeValue(value)\n    }\n\n    /**\n     * `max` setter.\n     *\n     * @param value - The component `max` value to be set.\n     *\n     * @internal\n     */\n    const setMax = (value: number) => {\n      max.value = parseRangeValue(value)\n    }\n\n    /**\n     * It sets component `min` and `max` values to null , and it emits the change if component is\n     * working in instant mode.\n     *\n     * @internal\n     */\n    const clearValues = () => {\n      min.value = null\n      max.value = null\n    }\n\n    /**\n     * It resets the min/max range values to null if the\n     * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n     *\n     * @public\n     */\n    $x.on('UserClickedClearAllFilters', false).subscribe(clearValues)\n\n    /**\n     * It watches the filter range values passed as property and updates component range values if\n     * they change.\n     *\n     * @param newRange - New range value.\n     *\n     * @internal\n     */\n    watch(\n      () => props.filter.range,\n      (newRange: RangeValue) => {\n        min.value = newRange.min\n        max.value = newRange.max\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * It watches range values in order to emit the event with the change if `isInstant`\n     * property is true.\n     *\n     * @internal\n     */\n    watch(\n      range,\n      () => {\n        if (props.isInstant) {\n          emitUserModifiedFilter()\n        }\n      },\n      { deep: true },\n    )\n\n    return {\n      rangeFilterMin,\n      rangeFilterMax,\n      cssClasses,\n      min,\n      max,\n      setMin,\n      setMax,\n      emitUserModifiedFilter,\n      clearValues,\n      hasError,\n      isAnyRange,\n      renderClearButton,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-editable-number-range-filter--error .x-editable-number-range-filter__input {\n  border-color: red;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserModifiedEditableNumberRangeFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  this event is emitted instantly after typing the value or clicking the submit button. The event\n  payload in both cases is an object containing the filter and the new value for the range.\n\n## Example\n\nRenders an editable number range filter. It has two input fields to handle min and max values,\nemitting the needed events when clicked.\n\nIt provides a default slot, with some utils bind, to customize the whole component; and two named\nslots `apply-content` and `clear-content` to override each button content.\n\nIf `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered\nto confirm to do it. False by default.\n\nIf `clear` prop is true, clear button, which sets to null component min and max values, is rendered.\nTrue by default.\n\n### Basic usage\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\" />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Properties\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\" :isInstant=\"true\" :hasClearButton=\"false\" />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing content slots\n\n```vue\n<template>\n  <EditableNumberRangeFilter :filter=\"editableFilter\">\n    <template #apply-content>Apply</template>\n    <template #clear-content>Clear</template>\n  </EditableNumberRangeFilter>\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing default slot\n\n```vue\n<template>\n  <EditableNumberRangeFilter\n    :filter=\"editableFilter\"\n    #default=\"{\n      min,\n      max,\n      setMin,\n      setMax,\n      emitUserModifiedFilter,\n      clearValues,\n      hasError,\n      isAnyRange,\n    }\"\n  >\n    <button @click=\"emitUserModifiedFilter\">✅ Apply!</button>\n    <button @click=\"clearValues\">🗑 Clear!</button>\n    <input :value=\"!isAnyRange ? min : null\" @change=\"setMin($event.target.valueAsNumber)\" />\n    <input :value=\"max\" @change=\"setMax($event.target.valueAsNumber)\" />\n    <div class=\"has-error\" v-if=\"hasError\">⚠️ Invalid range values</div>\n  </EditableNumberRangeFilter>\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonsClass` and `inputsClass` props can be used to add classes to the inputs and buttons of\nthe component.\n\n```\n<template>\n  <EditableNumberRangeFilter\n    :filter=\"editableFilter\"\n    :inputsClass=\"'my-inputs-class'\"\n    :buttonsClass=\"'my-buttons-class'\"\n  />\n</template>\n\n<script setup>\nimport { EditableNumberRangeFilter } from '@empathyco/x-components/facets'\nimport { ref } from 'vue'\n\nconst editableFilter = ref({\n  facetId: 'age',\n  id: 'age:primary',\n  label: 'primary',\n  modelName: 'EditableNumberRangeFilter',\n  range: {\n    min: null,\n    max: null,\n  },\n})\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

package/js/x-modules/facets/service/facets.service.js

@@ -1,11 +1,6 @@
 import { isFacetFilter, isHierarchicalFacet } from '@empathyco/x-types';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import { XPlugin } from '../../../plugins/x-plugin.js';
 import { isArrayEmpty, arrayToObject, groupItemsBy } from '../../../utils/array.js';
 import '../../../utils/storage.js';

package/js/x-modules/facets/service/facets.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets.service.js","sources":["../../../../../src/x-modules/facets/service/facets.service.ts"],"sourcesContent":["import type { Facet, Filter } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/index'\nimport type { FilterEntity } from '../entities/types'\nimport type { FacetGroupEntry, FacetsGetters } from '../store/types'\nimport type { FacetsGroup, FacetsService, FiltersMetadata } from './types'\nimport { isFacetFilter, isHierarchicalFacet } from '@empathyco/x-types'\nimport { XPlugin } from '../../../plugins/index'\nimport { arrayToObject, groupItemsBy, isArrayEmpty } from '../../../utils/index'\nimport { FilterEntityFactory } from '../entities/filter-entity.factory'\nimport { flatHierarchicalFilters } from '../utils'\n\n/**\n * Default implementation for the {@link FacetsService}.\n *\n * @public\n */\nexport class DefaultFacetsService implements FacetsService {\n  /**\n   * Global instance of the {@link FacetsService}.\n   */\n  public static instance: FacetsService = new DefaultFacetsService()\n\n  public constructor(\n    protected filterEntityFactory: FilterEntityFactory = FilterEntityFactory.instance,\n  ) {}\n\n  /**\n   * The {@link https://vuex.vuejs.org/ | Vuex} store to use in the service.\n   *\n   * @returns The store.\n   * @internal\n   */\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store\n  }\n\n  setFacets(facetsGroup: FacetsGroup): void {\n    const newFilters = this.updateStore(facetsGroup)\n    /* Ensures that filters are selected with valid values. For example, you can't set a single\n     select facet with 2 or more selected filters */\n    this.updateFiltersSelectedState(newFilters)\n  }\n\n  updateFacets(facetsGroup: FacetsGroup): void {\n    const selectedFilters = this.getSelectedFilters()\n    const newFilters = this.updateStore(facetsGroup)\n    this.updateFiltersSelectedState(newFilters, selectedFilters)\n  }\n\n  updatePreselectedFilters(filters: Filter[]): void {\n    this.setPreselectedFilter(filters)\n  }\n\n  selectPreselectedFilters(): void {\n    this.select(this.store.state.x.facets.preselectedFilters)\n  }\n\n  clearFilters(facetIds?: Array<Facet['id']>, metadata?: FiltersMetadata): void {\n    this.getSelectedFilters()\n      .filter(filter => !facetIds || (isFacetFilter(filter) && facetIds.includes(filter.facetId)))\n      .forEach(filter => this.deselect.bind(this)(filter, metadata))\n  }\n\n  clearFiltersWithMetadata({\n    facetIds,\n    metadata,\n  }: { facetIds?: Array<Facet['id']>; metadata?: FiltersMetadata } = {}): void {\n    this.clearFilters(facetIds, metadata)\n  }\n\n  deselect(filter: Filter, metadata?: Dictionary): void {\n    this.getFilterEntity(filter).deselect(filter, metadata)\n  }\n\n  select(filterOrFilters: Filter | Filter[]): void {\n    const filters = Array.isArray(filterOrFilters) ? filterOrFilters : [filterOrFilters]\n    filters.forEach(filter => this.getFilterEntity(filter).select(filter))\n  }\n\n  toggle(filter: Filter): void {\n    if (filter.selected) {\n      this.deselect(filter)\n    } else {\n      this.select(filter)\n    }\n  }\n\n  /**\n   * Sets the query.\n   *\n   * @param query - The query searched.\n   * @internal\n   */\n  setQuery(query: string): void {\n    this.store.commit('x/facets/setQuery', query)\n  }\n\n  /**\n   * Creates an entity from a filter DTO.\n   *\n   * @param filter - The filter to create an entity from.\n   * @returns The filter entity.\n   * @internal\n   */\n  protected getFilterEntity(filter: Filter): FilterEntity {\n    return this.filterEntityFactory.getFilterEntity(this.store, filter)\n  }\n\n  /**\n   * Sets in the store the Facets, the Filters and the FacetsGroup, without applying any logic\n   * to the selected state.\n   *\n   * @param facetsGroup - The {@link FacetsGroup} to set into the store state.\n   * @returns An array with the new filters.\n   * @internal\n   */\n  protected updateStore(facetsGroup: FacetsGroup): Filter[] {\n    this.removeGroupFacets(facetsGroup.id)\n    this.removeGroupFilters(facetsGroup.id)\n    facetsGroup.facets.forEach(facet => {\n      this.setFacetGroup({ facetId: facet.id, groupId: facetsGroup.id })\n      this.setFacet(facet)\n    })\n    const newFilters = this.flatFilters(facetsGroup)\n    this.setFilters(newFilters)\n    return newFilters\n  }\n\n  /**\n   * This function returns the filters of the facets group flattened in an array. It keeps the\n   * relations between the filters (parent--children).\n   *\n   * @privateRemarks If it is necessary to deal with more cases than the hierarchical, we need to\n   * refactor this logic and maybe move it to the entities, to not make this service dependant of\n   * the facet type. At the moment it is only one `if`, and is ok as long as no more `if`s are\n   * needed.\n   * @param facetsGroup - The facets group from where extract the filters to flat.\n   * @returns An array with the filters flattened.\n   * @internal\n   */\n  protected flatFilters(facetsGroup: FacetsGroup): Filter[] {\n    return facetsGroup.facets.flatMap(facet =>\n      isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters,\n    )\n  }\n\n  /**\n   * Retrieves the selected filters from the store.\n   *\n   * @returns The list of selected filters of the store.\n   * @internal\n   */\n  protected getSelectedFilters(): FacetsGetters['selectedFilters'] {\n    // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return\n    return this.store.getters['x/facets/selectedFilters']\n  }\n\n  /**\n   * Changes the filters selection state to match the store.\n   *\n   * @param newFilters - The list of filters to save.\n   * @param previousFilters - (Optional) The list of old filters, used to set the `newFilters`\n   * selected state.\n   */\n  protected updateFiltersSelectedState(newFilters: Filter[], previousFilters?: Filter[]): void {\n    if (!isArrayEmpty(newFilters)) {\n      const newStateFiltersMap = arrayToObject(previousFilters ?? newFilters, 'id')\n      newFilters.forEach(filter => {\n        const filterEntity = this.getFilterEntity(filter)\n        if (newStateFiltersMap[filter.id]?.selected) {\n          filterEntity.select(filter)\n        } else {\n          filterEntity.deselect(filter)\n        }\n      })\n    }\n  }\n\n  /**\n   * Removes the filters that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the filters that are in the store.\n   *\n   * @returns The removed filters.\n   *\n   * @internal\n   */\n  protected removeGroupFilters(groupId: FacetsGroup['id']): Filter[] {\n    const filtersToRemove =\n      groupItemsBy(Object.values(this.store.state.x.facets.filters), filter =>\n        isFacetFilter(filter)\n          ? this.store.state.x.facets.groups[filter.facetId]\n          : '__unknown-group__',\n      )[groupId] ?? []\n    this.removeFilters(filtersToRemove)\n    return filtersToRemove\n  }\n\n  /**\n   * Removes the facets that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the facets that are in the store.\n   * @returns The removed facets.\n   * @internal\n   */\n  protected removeGroupFacets(groupId: FacetsGroup['id']): Omit<Facet, 'filters'>[] {\n    const facetsToRemove = Object.values(this.store.state.x.facets.facets).filter(\n      facet => this.store.state.x.facets.groups[facet.id] === groupId,\n    )\n    facetsToRemove.forEach(this.removeFacet.bind(this))\n    return facetsToRemove\n  }\n\n  /**\n   * Sets the group that a facet belongs to.\n   *\n   * @param facetGroup - The id of the facet, and the group it belongs to.\n   * @internal\n   */\n  protected setFacetGroup(facetGroup: FacetGroupEntry): void {\n    this.store.commit('x/facets/setFacetGroup', facetGroup)\n  }\n\n  /**\n   * Sets the Facet to the store facets record.\n   *\n   * @param facet - The facet to store.\n   * @internal\n   */\n  protected setFacet({ filters, ...restFacet }: Facet): void {\n    this.store.commit('x/facets/setFacet', restFacet)\n  }\n\n  /**\n   * Removes a facet from the store.\n   *\n   * @param facet - The facet to remove.\n   * @internal\n   */\n  protected removeFacet(facet: Omit<Facet, 'filters'>): void {\n    this.store.commit('x/facets/removeFacet', facet)\n  }\n\n  /**\n   * Saves a list of filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/setFilters', filters)\n  }\n\n  /**\n   * Saves a list of preselected filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setPreselectedFilter(filters: Filter[]): void {\n    this.store.commit('x/facets/setPreselectedFilters', filters)\n  }\n\n  /**\n   * Removes a list of filters from the store.\n   *\n   * @param filters - The filters to remove.\n   * @internal\n   */\n  protected removeFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/removeFilters', filters)\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"facets.service.js","sources":["../../../../../src/x-modules/facets/service/facets.service.ts"],"sourcesContent":["import type { Facet, Filter } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { Store } from 'vuex'\nimport type { RootXStoreState } from '../../../store/index'\nimport type { FilterEntity } from '../entities/types'\nimport type { FacetGroupEntry, FacetsGetters } from '../store/types'\nimport type { FacetsGroup, FacetsService, FiltersMetadata } from './types'\nimport { isFacetFilter, isHierarchicalFacet } from '@empathyco/x-types'\nimport { XPlugin } from '../../../plugins/index'\nimport { arrayToObject, groupItemsBy, isArrayEmpty } from '../../../utils/index'\nimport { FilterEntityFactory } from '../entities/filter-entity.factory'\nimport { flatHierarchicalFilters } from '../utils'\n\n/**\n * Default implementation for the {@link FacetsService}.\n *\n * @public\n */\nexport class DefaultFacetsService implements FacetsService {\n  /**\n   * Global instance of the {@link FacetsService}.\n   */\n  public static instance: FacetsService = new DefaultFacetsService()\n\n  public constructor(\n    protected filterEntityFactory: FilterEntityFactory = FilterEntityFactory.instance,\n  ) {}\n\n  /**\n   * The {@link https://vuex.vuejs.org/ | Vuex} store to use in the service.\n   *\n   * @returns The store.\n   * @internal\n   */\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store\n  }\n\n  setFacets(facetsGroup: FacetsGroup): void {\n    const newFilters = this.updateStore(facetsGroup)\n    /* Ensures that filters are selected with valid values. For example, you can't set a single\n     select facet with 2 or more selected filters */\n    this.updateFiltersSelectedState(newFilters)\n  }\n\n  updateFacets(facetsGroup: FacetsGroup): void {\n    const selectedFilters = this.getSelectedFilters()\n    const newFilters = this.updateStore(facetsGroup)\n    this.updateFiltersSelectedState(newFilters, selectedFilters)\n  }\n\n  updatePreselectedFilters(filters: Filter[]): void {\n    this.setPreselectedFilter(filters)\n  }\n\n  selectPreselectedFilters(): void {\n    this.select(this.store.state.x.facets.preselectedFilters)\n  }\n\n  clearFilters(facetIds?: Array<Facet['id']>, metadata?: FiltersMetadata): void {\n    this.getSelectedFilters()\n      .filter(filter => !facetIds || (isFacetFilter(filter) && facetIds.includes(filter.facetId)))\n      .forEach(filter => this.deselect.bind(this)(filter, metadata))\n  }\n\n  clearFiltersWithMetadata({\n    facetIds,\n    metadata,\n  }: { facetIds?: Array<Facet['id']>; metadata?: FiltersMetadata } = {}): void {\n    this.clearFilters(facetIds, metadata)\n  }\n\n  deselect(filter: Filter, metadata?: Dictionary): void {\n    this.getFilterEntity(filter).deselect(filter, metadata)\n  }\n\n  select(filterOrFilters: Filter | Filter[]): void {\n    const filters = Array.isArray(filterOrFilters) ? filterOrFilters : [filterOrFilters]\n    filters.forEach(filter => this.getFilterEntity(filter).select(filter))\n  }\n\n  toggle(filter: Filter): void {\n    if (filter.selected) {\n      this.deselect(filter)\n    } else {\n      this.select(filter)\n    }\n  }\n\n  /**\n   * Sets the query.\n   *\n   * @param query - The query searched.\n   * @internal\n   */\n  setQuery(query: string): void {\n    this.store.commit('x/facets/setQuery', query)\n  }\n\n  /**\n   * Creates an entity from a filter DTO.\n   *\n   * @param filter - The filter to create an entity from.\n   * @returns The filter entity.\n   * @internal\n   */\n  protected getFilterEntity(filter: Filter): FilterEntity {\n    return this.filterEntityFactory.getFilterEntity(this.store, filter)\n  }\n\n  /**\n   * Sets in the store the Facets, the Filters and the FacetsGroup, without applying any logic\n   * to the selected state.\n   *\n   * @param facetsGroup - The {@link FacetsGroup} to set into the store state.\n   * @returns An array with the new filters.\n   * @internal\n   */\n  protected updateStore(facetsGroup: FacetsGroup): Filter[] {\n    this.removeGroupFacets(facetsGroup.id)\n    this.removeGroupFilters(facetsGroup.id)\n    facetsGroup.facets.forEach(facet => {\n      this.setFacetGroup({ facetId: facet.id, groupId: facetsGroup.id })\n      this.setFacet(facet)\n    })\n    const newFilters = this.flatFilters(facetsGroup)\n    this.setFilters(newFilters)\n    return newFilters\n  }\n\n  /**\n   * This function returns the filters of the facets group flattened in an array. It keeps the\n   * relations between the filters (parent--children).\n   *\n   * @privateRemarks If it is necessary to deal with more cases than the hierarchical, we need to\n   * refactor this logic and maybe move it to the entities, to not make this service dependant of\n   * the facet type. At the moment it is only one `if`, and is ok as long as no more `if`s are\n   * needed.\n   * @param facetsGroup - The facets group from where extract the filters to flat.\n   * @returns An array with the filters flattened.\n   * @internal\n   */\n  protected flatFilters(facetsGroup: FacetsGroup): Filter[] {\n    return facetsGroup.facets.flatMap(facet =>\n      isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters,\n    )\n  }\n\n  /**\n   * Retrieves the selected filters from the store.\n   *\n   * @returns The list of selected filters of the store.\n   * @internal\n   */\n  protected getSelectedFilters(): FacetsGetters['selectedFilters'] {\n    // eslint-disable-next-line ts/no-unsafe-member-access,ts/no-unsafe-return\n    return this.store.getters['x/facets/selectedFilters']\n  }\n\n  /**\n   * Changes the filters selection state to match the store.\n   *\n   * @param newFilters - The list of filters to save.\n   * @param previousFilters - (Optional) The list of old filters, used to set the `newFilters`\n   * selected state.\n   */\n  protected updateFiltersSelectedState(newFilters: Filter[], previousFilters?: Filter[]): void {\n    if (!isArrayEmpty(newFilters)) {\n      const newStateFiltersMap = arrayToObject(previousFilters ?? newFilters, 'id')\n      newFilters.forEach(filter => {\n        const filterEntity = this.getFilterEntity(filter)\n        if (newStateFiltersMap[filter.id]?.selected) {\n          filterEntity.select(filter)\n        } else {\n          filterEntity.deselect(filter)\n        }\n      })\n    }\n  }\n\n  /**\n   * Removes the filters that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the filters that are in the store.\n   *\n   * @returns The removed filters.\n   *\n   * @internal\n   */\n  protected removeGroupFilters(groupId: FacetsGroup['id']): Filter[] {\n    const filtersToRemove =\n      groupItemsBy(Object.values(this.store.state.x.facets.filters), filter =>\n        isFacetFilter(filter)\n          ? this.store.state.x.facets.groups[filter.facetId]\n          : '__unknown-group__',\n      )[groupId] ?? []\n    this.removeFilters(filtersToRemove)\n    return filtersToRemove\n  }\n\n  /**\n   * Removes the facets that belong to the given group.\n   *\n   * @param groupId - The id of the group from whom remove the facets that are in the store.\n   * @returns The removed facets.\n   * @internal\n   */\n  protected removeGroupFacets(groupId: FacetsGroup['id']): Omit<Facet, 'filters'>[] {\n    const facetsToRemove = Object.values(this.store.state.x.facets.facets).filter(\n      facet => this.store.state.x.facets.groups[facet.id] === groupId,\n    )\n    facetsToRemove.forEach(this.removeFacet.bind(this))\n    return facetsToRemove\n  }\n\n  /**\n   * Sets the group that a facet belongs to.\n   *\n   * @param facetGroup - The id of the facet, and the group it belongs to.\n   * @internal\n   */\n  protected setFacetGroup(facetGroup: FacetGroupEntry): void {\n    this.store.commit('x/facets/setFacetGroup', facetGroup)\n  }\n\n  /**\n   * Sets the Facet to the store facets record.\n   *\n   * @param facet - The facet to store.\n   * @internal\n   */\n  protected setFacet({ filters, ...restFacet }: Facet): void {\n    this.store.commit('x/facets/setFacet', restFacet)\n  }\n\n  /**\n   * Removes a facet from the store.\n   *\n   * @param facet - The facet to remove.\n   * @internal\n   */\n  protected removeFacet(facet: Omit<Facet, 'filters'>): void {\n    this.store.commit('x/facets/removeFacet', facet)\n  }\n\n  /**\n   * Saves a list of filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/setFilters', filters)\n  }\n\n  /**\n   * Saves a list of preselected filters to the store without any state change logic applied.\n   *\n   * @param filters - The filters to save.\n   * @internal\n   */\n  protected setPreselectedFilter(filters: Filter[]): void {\n    this.store.commit('x/facets/setPreselectedFilters', filters)\n  }\n\n  /**\n   * Removes a list of filters from the store.\n   *\n   * @param filters - The filters to remove.\n   * @internal\n   */\n  protected removeFilters(filters: Filter[]): void {\n    this.store.commit('x/facets/removeFilters', filters)\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -90,13 +90,9 @@ import '../../../components/result/result-variants-provider.vue.js';
 import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';

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

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

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

@@ -1,14 +1,10 @@
 import { defineComponent, ref, computed, watch } from 'vue';
 import '../../../composables/create-use-device.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
+import '@empathyco/x-utils';
 import '../../../plugins/x-plugin.js';
+import 'rxjs';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
 import { AnimationProp } from '../../../types/animation-prop.js';

package/js/x-modules/queries-preview/components/query-preview-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      :class=\"{ 'padding-block-1': loadWhenVisible }\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :load-when-visible=\"loadWhenVisible\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n     *\n     * @public\n     */\n    loadWhenVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\n     *\n     * It will default to 0 to fit the most common use case (pre-search),\n     * and it would work properly with a 250 value inside empathize.\n     */\n    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview')\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n          ...params.value,\n          ...item.extraParams,\n        })\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.padding-block-1 {\n  padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      :class=\"{ 'padding-block-1': loadWhenVisible }\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :load-when-visible=\"loadWhenVisible\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n     *\n     * @public\n     */\n    loadWhenVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\n     *\n     * It will default to 0 to fit the most common use case (pre-search),\n     * and it would work properly with a 250 value inside empathize.\n     */\n    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview')\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, { ...params.value, ...item.extraParams }),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, {\n          ...params.value,\n          ...item.extraParams,\n        })\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.padding-block-1 {\n  padding-block: 1px;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport SlidingPanel from '@empathyco/x-components/sliding-panel.vue'\nimport Result from '@empathyco/x-components/result.vue'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script setup>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queriesPreviewInfo = reactive([\n  { query: 'sandals' },\n  { query: 'tshirt' },\n  { query: 'jacket' },\n])\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -91,11 +91,6 @@ import '../../../components/result/result-variant-selector.vue3.js';
 import '../../../components/result/result-variants-provider.vue.js';
 import '../../../components/scroll/base-scroll.vue2.js';
 import 'vuex';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
 import '../../../plugins/x-bus.js';
 import '../../../plugins/x-plugin.js';
 import { useXBus } from '../../../composables/use-x-bus.js';

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n  <!-- eslint-disable-next-line vue/no-unused-refs -->\n  <section ref=\"queryPreviewElement\" class=\"x-query-preview-wrapper__default-content\">\n    <ul v-if=\"hasResults\" data-test=\"query-preview\" class=\"x-query-preview\">\n      <li\n        v-for=\"result in queryPreviewResults?.results\"\n        :key=\"result.id\"\n        class=\"x-query-preview__item\"\n        data-test=\"query-preview-item\"\n      >\n        <!--\n          @slot Query Preview result slot.\n          @binding {Result} result - A Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </ul>\n  </section>\n</template>\n\n<script lang=\"ts\">\nimport type { Filter, SearchRequest } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { FeatureLocation, QueryFeature } from '../../../types'\nimport type { DebouncedFunction } from '../../../utils'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { deepEqual } from '@empathyco/x-utils'\nimport { computed, defineComponent, h, inject, onBeforeUnmount, provide, ref, watch } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components'\nimport { useOnDisplay, useState, useXBus } from '../../../composables'\nimport { createOrigin, createRawFilters, debounceFunction } from '../../../utils'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreview',\n  xModule: queriesPreviewXModule.name,\n  props: {\n    /** The information about the request of the query preview. */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /** The origin property for the request. */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /** Number of query preview results to be rendered. */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n     */\n    loadWhenVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests.\n     * It will default to 0 to fit the most common use case (pre-search),\n     * and it would work properly with a 250 value inside empathize.\n     */\n    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     */\n    persistInCache: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['load', 'error'],\n  setup(props, { emit, slots }) {\n    const xBus = useXBus()\n\n    /**\n     * previewResults: The results preview of the queries preview cacheable mounted.\n     * It is a dictionary, indexed by the query preview query.\n     *\n     * params: As the request is handled in this component, we need\n     * the extra params that will be used in the request.\n     *\n     * config: As the request is handled in this component, we need\n     * the config that will be used in the request.\n     */\n    const { queriesPreview: previewResults, params, config } = useState('queriesPreview')\n\n    /**\n     * Template ref for the root element to track visibility.\n     */\n    const queryPreviewElement = ref<HTMLElement | null>(null)\n\n    /**\n     * Query Preview key converted into a unique id.\n     *\n     * @returns The query hash.\n     */\n    const queryPreviewHash = computed(() =>\n      getHashFromQueryPreviewInfo(props.queryPreviewInfo, {\n        ...params.value,\n        ...props.queryPreviewInfo.extraParams,\n      }),\n    )\n\n    provide('queryPreviewHash', queryPreviewHash)\n\n    /**\n     * Gets from the state the results preview of the query preview.\n     *\n     * @returns The results preview of the actual query preview.\n     */\n    const queryPreviewResults = computed(() => {\n      const resultsPreview = previewResults.value[queryPreviewHash.value]\n      return resultsPreview?.results\n        ? {\n            ...resultsPreview,\n            results: resultsPreview.results.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\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     * @returns A list of results.\n     */\n    const results = computed(() => queryPreviewResults.value?.results)\n    provide(LIST_ITEMS_KEY as string, results)\n\n    /**\n     * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n     *\n     * @internal\n     */\n    const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none')\n    const location =\n      typeof injectedLocation === 'object' && 'value' in injectedLocation\n        ? injectedLocation.value\n        : injectedLocation\n\n    /**\n     * The computed request object to be used to retrieve the query preview results.\n     *\n     * @returns The search request object.\n     */\n    const queryPreviewRequest = computed<SearchRequest>(() => {\n      const origin = createOrigin({\n        feature: props.queryFeature,\n        location,\n      })\n      const filters = props.queryPreviewInfo.filters?.reduce(\n        (filtersList, filterId) => {\n          const facetId = filterId.split(':')[0]\n          const rawFilter = createRawFilters([filterId])[0]\n          filtersList[facetId] = filtersList[facetId]\n            ? filtersList[facetId].concat(rawFilter)\n            : [rawFilter]\n\n          return filtersList\n        },\n        {} as Record<string, Filter[]>,\n      )\n\n      return {\n        query: props.queryPreviewInfo.query,\n        rows: config.value.maxItemsToRequest,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters,\n        ...(origin && { origin }),\n      }\n    })\n\n    /**\n     * The debounce method to trigger the request after the debounceTimeMs defined\n     * for cacheable queries.\n     *\n     * @returns The search request object.\n     */\n    const emitQueryPreviewRequestUpdated = computed<DebouncedFunction<[SearchRequest]>>(() =>\n      debounceFunction(request => {\n        xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false })\n      }, props.debounceTimeMs),\n    )\n\n    /**\n     * Initialises watcher to emit debounced requests, and first value for the requests.\n     *\n     * @internal\n     */\n    watch(queryPreviewRequest, (newRequest, oldRequest) => {\n      if (!deepEqual(newRequest, oldRequest) && !props.loadWhenVisible) {\n        emitQueryPreviewRequestUpdated.value(newRequest)\n      }\n    })\n\n    const cachedQueryPreview = previewResults.value[queryPreviewHash.value]\n\n    // If the query has been saved it will emit load instead of the emitting the updated request.\n    if (cachedQueryPreview?.status === 'success') {\n      emit('load', queryPreviewHash.value)\n      xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {\n        priority: 0,\n        replaceable: false,\n      })\n    } else if (!props.loadWhenVisible) {\n      emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value)\n    }\n\n    /**\n     * Watch element visibility and emit request when it becomes visible for the first time\n     * (only when loadWhenVisible is true).\n     */\n    const { unwatchDisplay } = useOnDisplay({\n      element: queryPreviewElement,\n      callback: () => {\n        if (props.loadWhenVisible && cachedQueryPreview?.status !== 'success') {\n          emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value)\n        }\n      },\n    })\n\n    /**\n     * Cancels the (remaining) requests when the component is destroyed\n     * via the `debounce.cancel()` method.\n     * If the prop 'persistInCache' is set to false, it also removes the QueryPreview\n     * from the state when the component is destroyed.\n     */\n    onBeforeUnmount(() => {\n      unwatchDisplay?.()\n      emitQueryPreviewRequestUpdated.value.cancel()\n      xBus.emit(\n        'QueryPreviewUnmounted',\n        { queryPreviewHash: queryPreviewHash.value, cache: props.persistInCache },\n        {\n          priority: 0,\n          replaceable: false,\n        },\n      )\n    })\n\n    /**\n     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n     * prop changes or there is a request in progress that cancels it).\n     *\n     * @param _new - The new debounced function.\n     * @param old - The previous debounced function.\n     * @internal\n     */\n    watch(\n      emitQueryPreviewRequestUpdated,\n      (_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>) => {\n        old.cancel()\n      },\n    )\n\n    const queryPreviewResultsStatus = computed(() => queryPreviewResults.value?.status)\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     */\n    watch(queryPreviewResultsStatus, () => {\n      if (queryPreviewResultsStatus.value === 'success') {\n        emit(results.value?.length ? 'load' : 'error', queryPreviewHash.value)\n      } else if (queryPreviewResultsStatus.value === 'error') {\n        emit('error', queryPreviewHash.value)\n      }\n    })\n\n    const hasResults = computed(() => (queryPreviewResults.value?.totalResults ?? 0) > 0)\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot or empty string if there are no results. Always wrapped in a section\n     * element with the `x-query-preview-wrapper__slot-content` class.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        queryPreviewInfo: props.queryPreviewInfo,\n        results: queryPreviewResults.value?.results,\n        totalResults: queryPreviewResults.value?.totalResults,\n        displayTagging: queryPreviewResults.value?.displayTagging,\n        queryTagging: queryPreviewResults.value?.queryTagging,\n      }\n\n      const slotContent = hasResults.value ? slots.default?.(slotProps)[0] : ''\n\n      return h(\n        'section',\n        { ref: queryPreviewElement, class: 'x-query-preview-wrapper__slot-content' },\n        [slotContent],\n      )\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasResults, queryPreviewResults, queryPreviewElement }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`QueryPreviewRequestUpdated`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted when the component is mounted and when the properties of the request object\n  changes. The event payload is the `queryPreviewRequest` object.\n\n## Vue Events\n\nA list of vue events that the component will emit:\n\n- `load`: the event is emitted when the query results have been loaded.\n- `error`: the event is emitted if there is some error when retrieving the query results.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'sandals' })\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" #default=\"{ totalResults, results }\">\n    <section>\n      <p>Total results: {{ totalResults }}</p>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <article\n          v-for=\"result in results\"\n          :key=\"result.id\"\n          class=\"x-result\"\n          style=\"max-width: 300px; overflow: hidden\"\n        >\n          <BaseResultLink :result=\"result\">\n            <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n          </BaseResultLink>\n          <div class=\"x-result__description\">\n            <BaseResultLink :result=\"result\">\n              <h1 class=\"x-title3\">{{ result.name }}</h1>\n            </BaseResultLink>\n          </div>\n        </article>\n      </SlidingPanel>\n    </section>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n  <QueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :queryPreviewInfo=\"queryPreviewInfo\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst maxItemsToRender = 4\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n</docs>\n"],"names":["debounceFunction"],"mappings":"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"}
+{"version":3,"file":"query-preview.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n  <!-- eslint-disable-next-line vue/no-unused-refs -->\n  <section ref=\"queryPreviewElement\" class=\"x-query-preview-wrapper__default-content\">\n    <ul v-if=\"hasResults\" data-test=\"query-preview\" class=\"x-query-preview\">\n      <li\n        v-for=\"result in queryPreviewResults?.results\"\n        :key=\"result.id\"\n        class=\"x-query-preview__item\"\n        data-test=\"query-preview-item\"\n      >\n        <!--\n          @slot Query Preview result slot.\n          @binding {Result} result - A Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </ul>\n  </section>\n</template>\n\n<script lang=\"ts\">\nimport type { Filter, SearchRequest } from '@empathyco/x-types'\nimport type { PropType, Ref } from 'vue'\nimport type { FeatureLocation, QueryFeature } from '../../../types'\nimport type { DebouncedFunction } from '../../../utils'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { deepEqual } from '@empathyco/x-utils'\nimport { computed, defineComponent, h, inject, onBeforeUnmount, provide, ref, watch } from 'vue'\nimport { LIST_ITEMS_KEY } from '../../../components'\nimport { useOnDisplay, useState, useXBus } from '../../../composables'\nimport { createOrigin, createRawFilters, debounceFunction } from '../../../utils'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreview',\n  xModule: queriesPreviewXModule.name,\n  props: {\n    /** The information about the request of the query preview. */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /** The origin property for the request. */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /** Number of query preview results to be rendered. */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Controls whether the query preview requests should be triggered when the component is visible in the viewport.\n     */\n    loadWhenVisible: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests.\n     * It will default to 0 to fit the most common use case (pre-search),\n     * and it would work properly with a 250 value inside empathize.\n     */\n    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     */\n    persistInCache: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['load', 'error'],\n  setup(props, { emit, slots }) {\n    const xBus = useXBus()\n\n    /**\n     * previewResults: The results preview of the queries preview cacheable mounted.\n     * It is a dictionary, indexed by the query preview query.\n     *\n     * params: As the request is handled in this component, we need\n     * the extra params that will be used in the request.\n     *\n     * config: As the request is handled in this component, we need\n     * the config that will be used in the request.\n     */\n    const { queriesPreview: previewResults, params, config } = useState('queriesPreview')\n\n    /**\n     * Template ref for the root element to track visibility.\n     */\n    const queryPreviewElement = ref<HTMLElement | null>(null)\n\n    /**\n     * Query Preview key converted into a unique id.\n     *\n     * @returns The query hash.\n     */\n    const queryPreviewHash = computed(() =>\n      getHashFromQueryPreviewInfo(props.queryPreviewInfo, {\n        ...params.value,\n        ...props.queryPreviewInfo.extraParams,\n      }),\n    )\n\n    provide('queryPreviewHash', queryPreviewHash)\n\n    /**\n     * Gets from the state the results preview of the query preview.\n     *\n     * @returns The results preview of the actual query preview.\n     */\n    const queryPreviewResults = computed(() => {\n      const resultsPreview = previewResults.value[queryPreviewHash.value]\n      return resultsPreview?.results\n        ? {\n            ...resultsPreview,\n            results: resultsPreview.results.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\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     * @returns A list of results.\n     */\n    const results = computed(() => queryPreviewResults.value?.results)\n    provide(LIST_ITEMS_KEY as string, results)\n\n    /**\n     * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n     *\n     * @internal\n     */\n    const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none')\n    const location =\n      typeof injectedLocation === 'object' && 'value' in injectedLocation\n        ? injectedLocation.value\n        : injectedLocation\n\n    /**\n     * The computed request object to be used to retrieve the query preview results.\n     *\n     * @returns The search request object.\n     */\n    const queryPreviewRequest = computed<SearchRequest>(() => {\n      const origin = createOrigin({\n        feature: props.queryFeature,\n        location,\n      })\n      const filters = props.queryPreviewInfo.filters?.reduce(\n        (filtersList, filterId) => {\n          const facetId = filterId.split(':')[0]\n          const rawFilter = createRawFilters([filterId])[0]\n          filtersList[facetId] = filtersList[facetId]\n            ? filtersList[facetId].concat(rawFilter)\n            : [rawFilter]\n\n          return filtersList\n        },\n        {} as Record<string, Filter[]>,\n      )\n\n      return {\n        query: props.queryPreviewInfo.query,\n        rows: config.value.maxItemsToRequest,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters,\n        ...(origin && { origin }),\n      }\n    })\n\n    /**\n     * The debounce method to trigger the request after the debounceTimeMs defined\n     * for cacheable queries.\n     *\n     * @returns The search request object.\n     */\n    const emitQueryPreviewRequestUpdated = computed<DebouncedFunction<[SearchRequest]>>(() =>\n      debounceFunction(request => {\n        xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false })\n      }, props.debounceTimeMs),\n    )\n\n    /**\n     * Initialises watcher to emit debounced requests, and first value for the requests.\n     *\n     * @internal\n     */\n    watch(queryPreviewRequest, (newRequest, oldRequest) => {\n      if (!deepEqual(newRequest, oldRequest) && !props.loadWhenVisible) {\n        emitQueryPreviewRequestUpdated.value(newRequest)\n      }\n    })\n\n    const cachedQueryPreview = previewResults.value[queryPreviewHash.value]\n\n    // If the query has been saved it will emit load instead of the emitting the updated request.\n    if (cachedQueryPreview?.status === 'success') {\n      emit('load', queryPreviewHash.value)\n      xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {\n        priority: 0,\n        replaceable: false,\n      })\n    } else if (!props.loadWhenVisible) {\n      emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value)\n    }\n\n    /**\n     * Watch element visibility and emit request when it becomes visible for the first time\n     * (only when loadWhenVisible is true).\n     */\n    const { unwatchDisplay } = useOnDisplay({\n      element: queryPreviewElement,\n      callback: () => {\n        if (props.loadWhenVisible && cachedQueryPreview?.status !== 'success') {\n          emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value)\n        }\n      },\n    })\n\n    /**\n     * Cancels the (remaining) requests when the component is destroyed\n     * via the `debounce.cancel()` method.\n     * If the prop 'persistInCache' is set to false, it also removes the QueryPreview\n     * from the state when the component is destroyed.\n     */\n    onBeforeUnmount(() => {\n      unwatchDisplay?.()\n      emitQueryPreviewRequestUpdated.value.cancel()\n      xBus.emit(\n        'QueryPreviewUnmounted',\n        { queryPreviewHash: queryPreviewHash.value, cache: props.persistInCache },\n        {\n          priority: 0,\n          replaceable: false,\n        },\n      )\n    })\n\n    /**\n     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n     * prop changes or there is a request in progress that cancels it).\n     *\n     * @param _new - The new debounced function.\n     * @param old - The previous debounced function.\n     * @internal\n     */\n    watch(\n      emitQueryPreviewRequestUpdated,\n      (_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>) => {\n        old.cancel()\n      },\n    )\n\n    const queryPreviewResultsStatus = computed(() => queryPreviewResults.value?.status)\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     */\n    watch(queryPreviewResultsStatus, () => {\n      if (queryPreviewResultsStatus.value === 'success') {\n        emit(results.value?.length ? 'load' : 'error', queryPreviewHash.value)\n      } else if (queryPreviewResultsStatus.value === 'error') {\n        emit('error', queryPreviewHash.value)\n      }\n    })\n\n    const hasResults = computed(() => (queryPreviewResults.value?.totalResults ?? 0) > 0)\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot or empty string if there are no results. Always wrapped in a section\n     * element with the `x-query-preview-wrapper__slot-content` class.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        queryPreviewInfo: props.queryPreviewInfo,\n        results: queryPreviewResults.value?.results,\n        totalResults: queryPreviewResults.value?.totalResults,\n        displayTagging: queryPreviewResults.value?.displayTagging,\n        queryTagging: queryPreviewResults.value?.queryTagging,\n      }\n\n      const slotContent = hasResults.value ? slots.default?.(slotProps)[0] : ''\n\n      return h(\n        'section',\n        { ref: queryPreviewElement, class: 'x-query-preview-wrapper__slot-content' },\n        [slotContent],\n      )\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasResults, queryPreviewResults, queryPreviewElement }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`QueryPreviewRequestUpdated`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted when the component is mounted and when the properties of the request object\n  changes. The event payload is the `queryPreviewRequest` object.\n\n## Vue Events\n\nA list of vue events that the component will emit:\n\n- `load`: the event is emitted when the query results have been loaded.\n- `error`: the event is emitted if there is some error when retrieving the query results.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" />\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'sandals' })\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" #default=\"{ totalResults, results }\">\n    <section>\n      <p>Total results: {{ totalResults }}</p>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <article\n          v-for=\"result in results\"\n          :key=\"result.id\"\n          class=\"x-result\"\n          style=\"max-width: 300px; overflow: hidden\"\n        >\n          <BaseResultLink :result=\"result\">\n            <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n          </BaseResultLink>\n          <div class=\"x-result__description\">\n            <BaseResultLink :result=\"result\">\n              <h1 class=\"x-title3\">{{ result.name }}</h1>\n            </BaseResultLink>\n          </div>\n        </article>\n      </SlidingPanel>\n    </section>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n  <QueryPreview :queryPreviewInfo=\"queryPreviewInfo\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n  <QueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :queryPreviewInfo=\"queryPreviewInfo\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </QueryPreview>\n</template>\n\n<script setup>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { QueryPreview } from '@empathyco/x-components/queries-preview'\nimport { reactive } from 'vue'\nconst maxItemsToRender = 4\nconst queryPreviewInfo = reactive({ query: 'flip-flops' })\n</script>\n```\n</docs>\n"],"names":["debounceFunction"],"mappings":"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"}