@empathyco/x-components 6.0.0-alpha.184 → 6.0.0-alpha.186

package/js/components/suggestions/base-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n    },\n  },\n}\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [\n            {\n              id: 'exampleFacet',\n              label: 'exampleFacet',\n              modelName: 'SimpleFacet',\n              filters: [\n                {\n                  facetId: 'exampleFacet',\n                  id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                  label: 'EXAMPLE',\n                  selected: false,\n                  totalResults: 10,\n                  modelName: 'SimpleFilter',\n                },\n              ],\n            },\n          ],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;;SACmC,IAAY,CAAA,WAAA,CAAA,MAAA,IAAAA,SAAA,EAAA,EAA7CC,WAgBY,CAAAC,uBAAA,CAhBI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAD3B,GAAA,EAAA,CAAA;AAAA,IACuD,GAAI,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,eAAA;AAAA,GAAA,EAAA;AADtE,IAAA,OAAA,EAAAC,OAAA,CAGM,MAAkD;AAAA,OADpDH,SAAA,CAAA,IAAA,CAAA,EAAAI,kBAAA;AAAA,QAcKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAhBTC,UAGoC,CAAA,IAAA,CAAA,mBAAA,EAHpC,CAGc,UAAA,EAAY,KAAK,KAAA;AAD3B,UAAA,OAAAN,SAAA,EAAA,EAAAI,kBAAA;AAAA,YAcK,IAAA;AAAA,YAAA;AAAA,cAZF,GAAA,EAAK,qBAAgB,KAAK,CAAA;AAAA,cAC3B,KAAA,EALNG,cAKY,CAAA,CAAA,qBAAA,EACE,IAAmB,CAAA,mBAAA,CAAA,CAAA;AAAA,cAC3B,WAAU,EAAA,iBAAA;AAAA,aAAA;;cAQVC,UAAgF,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAhFC,WAAgF,EAftF,OAAA,EAAA,IAAA,EAAA,EAAA,EAesB,YAAY,KAAK,EAAA,MAAA,EAAU,yBAAoB,UAAU,CAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,aAAA;;;;;;;;;AAf/E,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n    },\n  },\n}\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [\n            {\n              id: 'exampleFacet',\n              label: 'exampleFacet',\n              modelName: 'SimpleFacet',\n              filters: [\n                {\n                  facetId: 'exampleFacet',\n                  id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                  label: 'EXAMPLE',\n                  selected: false,\n                  totalResults: 10,\n                  modelName: 'SimpleFilter',\n                },\n              ],\n            },\n          ],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps"],"mappings":";;;;;;SACmC,IAAY,CAAA,WAAA,CAAA,MAAA,IAAAA,SAAA,EAAA,EAA7CC,WAgBY,CAAAC,uBAAA,CAhBI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAA4B,GAAI,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,eAAA;AAAA,GAAA,EAAA;qBAEhE,MAAkD;AAAA,OADpDF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAcKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAb2BC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAmB,CAAzC,UAAA,EAAY,KAAK,KAAA;AAD3B,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAcK,IAAA;AAAA,YAAA;AAAA,cAZF,GAAA,EAAK,qBAAgB,KAAK,CAAA;AAAA,cAC3B,KAAA,EAAKG,cAAC,CAAA,CAAA,qBAAA,EACE,IAAmB,CAAA,mBAAA,CAAA,CAAA;AAAA,cAC3B,WAAU,EAAA,iBAAA;AAAA,aAAA;;AAQV,cAAAC,UAAA,CAAgF,wBAAhFC,UAAgF,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAhE,YAAY,KAAK,EAAA,MAAA,EAAU,yBAAoB,UAAU,CAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,aAAA;;;;;;;;;;;;;;;;;"}

package/js/composables/use-on-display.js

@@ -13,7 +13,7 @@ import { useXBus } from './use-x-bus.js';
  * @public
  */
 function useOnDisplay({ element, callback, triggerOnce = true, }) {
-    const isElementVisible = useElementVisibility(element);
+    const isElementVisible = useElementVisibility(element, { threshold: 0.1 });
     const unwatchDisplay = watch(isElementVisible, newValue => {
         if (newValue) {
             callback();

package/js/composables/use-on-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { Ref, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { useElementVisibility } from '@vueuse/core'\nimport { watch } from 'vue'\nimport { useXBus } from './use-x-bus'\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true,\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element)\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback()\n      if (triggerOnce) {\n        unwatchDisplay()\n      }\n    }\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {},\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus()\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      void bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata,\n      )\n    },\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayOptions {\n  element: HTMLElement | Ref<HTMLElement | null>\n  callback: () => void\n  triggerOnce?: boolean\n}\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayReturn {\n  isElementVisible: Ref<boolean>\n  unwatchDisplay: WatchStopHandle\n}\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ninterface UseEmitDisplayEventOptions {\n  element: UseOnDisplayOptions['element']\n  taggingRequest: TaggingRequest\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n}\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;AASG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,GACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAA;IAEtD,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;QACxD,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAA;YACV,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAA;aACjB;SACF;AACH,KAAC,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,GACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAA;AAErB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,KAAK,GAAG,CAAC,IAAI,CACX,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAA;SACF;AACF,KAAA,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH;;;;"}
+{"version":3,"file":"use-on-display.js","sources":["../../../src/composables/use-on-display.ts"],"sourcesContent":["import type { TaggingRequest } from '@empathyco/x-types'\nimport type { Ref, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { useElementVisibility } from '@vueuse/core'\nimport { watch } from 'vue'\nimport { useXBus } from './use-x-bus'\n\n/**\n * Composable that triggers a callback whenever the provided element appears in the viewport.\n * It can trigger the first time only or every time the element appears in the viewport.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched, the callback to trigger and if the callback should be triggered only once\n * or every time the element appears in the viewport, true by default.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useOnDisplay({\n  element,\n  callback,\n  triggerOnce = true,\n}: UseOnDisplayOptions): UseOnDisplayReturn {\n  const isElementVisible = useElementVisibility(element, { threshold: 0.1 })\n\n  const unwatchDisplay = watch(isElementVisible, newValue => {\n    if (newValue) {\n      callback()\n      if (triggerOnce) {\n        unwatchDisplay()\n      }\n    }\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Composable that emits a `TrackableElementDisplayed` event whenever the provided element\n * appears in the viewport for the first time.\n *\n * @param options - The options to customize the behavior of the composable. The element that\n * will be watched and the tagging request to emit.\n * @returns If the element is currently visible in the viewport or not and the watcher stop handle.\n * @public\n */\nexport function useEmitDisplayEvent({\n  element,\n  taggingRequest,\n  eventMetadata = {},\n}: UseEmitDisplayEventOptions): UseOnDisplayReturn {\n  const bus = useXBus()\n\n  const { isElementVisible, unwatchDisplay } = useOnDisplay({\n    element,\n    callback: () => {\n      void bus.emit(\n        'TrackableElementDisplayed',\n        { tagging: { display: taggingRequest } },\n        eventMetadata,\n      )\n    },\n  })\n\n  return {\n    isElementVisible,\n    unwatchDisplay,\n  }\n}\n\n/**\n * Options for the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayOptions {\n  element: HTMLElement | Ref<HTMLElement | null>\n  callback: () => void\n  triggerOnce?: boolean\n}\n\n/**\n * Return type of the {@link useOnDisplay} composable.\n */\ninterface UseOnDisplayReturn {\n  isElementVisible: Ref<boolean>\n  unwatchDisplay: WatchStopHandle\n}\n\n/**\n * Options for the {@link useEmitDisplayEvent} composable.\n */\ninterface UseEmitDisplayEventOptions {\n  element: UseOnDisplayOptions['element']\n  taggingRequest: TaggingRequest\n  eventMetadata?: Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>\n}\n"],"names":[],"mappings":";;;;AAOA;;;;;;;;;AASG;AACG,SAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,IAAI,GACE,EAAA;AACpB,IAAA,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAA;IAE1E,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,IAAG;QACxD,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAA;YACV,IAAI,WAAW,EAAE;AACf,gBAAA,cAAc,EAAE,CAAA;aACjB;SACF;AACH,KAAC,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH,CAAC;AAED;;;;;;;;AAQG;AACG,SAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,cAAc,EACd,aAAa,GAAG,EAAE,GACS,EAAA;AAC3B,IAAA,MAAM,GAAG,GAAG,OAAO,EAAE,CAAA;AAErB,IAAA,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC;QACxD,OAAO;QACP,QAAQ,EAAE,MAAK;AACb,YAAA,KAAK,GAAG,CAAC,IAAI,CACX,2BAA2B,EAC3B,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EACxC,aAAa,CACd,CAAA;SACF;AACF,KAAA,CAAC,CAAA;IAEF,OAAO;QACL,gBAAgB;QAChB,cAAc;KACf,CAAA;AACH;;;;"}

package/js/directives/infinite-scroll.js

@@ -78,7 +78,7 @@ function getRoot(element, id) {
  * @public
  */
 const infiniteScroll = {
-    mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {
+    mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {}, }) {
         /*
          * This hack allows the root element to always contain the observed element.
          * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome

package/js/directives/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import type { Directive } from 'vue'\nimport { XPlugin } from '../plugins'\n\nconst VIEWPORT_ID = 'viewport'\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {}\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null\n    case 'body':\n      return document.body\n    case VIEWPORT_ID:\n      return null\n    default:\n      return element.closest(`#${id}`)!\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`\n    const root = getRoot(element, id)\n    const xBus = XPlugin.bus\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void xBus.emit('UserReachedResultsListEnd', undefined)\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root,\n      },\n    )\n\n    state[id].observe(element)\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect()\n      delete state[id]\n    }\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAA;AAEtD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;IAC/C,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAA;AACb,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAA;AACb,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAA;KACpC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAA;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;AAExB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;AACV,YAAA,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,KAAK,IAAI,CAAC,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAA;aACvD;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAA;QAED,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KAC3B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;AACtB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;SACjB;KACF;;;;;"}
+{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import type { Directive } from 'vue'\nimport { XPlugin } from '../plugins'\n\nconst VIEWPORT_ID = 'viewport'\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {}\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null\n    case 'body':\n      return document.body\n    case VIEWPORT_ID:\n      return null\n    default:\n      return element.closest(`#${id}`)!\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(\n    element,\n    {\n      arg: id = VIEWPORT_ID,\n      value: { margin = 200 } = {},\n    }: { arg?: string; value?: { margin?: number } },\n  ) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`\n    const root = getRoot(element, id)\n    const xBus = XPlugin.bus\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void xBus.emit('UserReachedResultsListEnd', undefined)\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root,\n      },\n    )\n\n    state[id].observe(element)\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }: { arg?: string }) {\n    if (state[id]) {\n      state[id].disconnect()\n      delete state[id]\n    }\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAA;AAEtD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;IAC/C,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAA;AACb,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAA;AACb,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAA;KACpC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CACL,OAAO,EACP,EACE,GAAG,EAAE,EAAE,GAAG,WAAW,EACrB,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,GACkB,EAAA;AAEhD;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAA;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;AAExB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;AACV,YAAA,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,KAAK,IAAI,CAAC,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAA;aACvD;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAA;QAED,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KAC3B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAoB,EAAA;AACtD,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;AACtB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;SACjB;KACF;;;;;"}

package/js/directives/typing.js.map

@@ -1 +1 @@
-{"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue'\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n  /**\n   * The text (plain or html) that will be typed into the target element.\n   */\n  text: string\n  /**\n   * The typing speed in milliseconds per character.\n   *\n   */\n  speed?: number\n  /**\n   * The attribute of the HTML element where the typed text will be placed.\n   * If not specified, the text will be set as content (innerHTML).\n   *\n   * @example 'placeholder'\n   */\n  targetAttr?: string\n}\n\ninterface TypingHTMLElement extends HTMLElement {\n  __timeoutId?: number\n}\n\n/**\n * Typing directive.\n *\n * @public\n */\nexport const typing: Directive<TypingHTMLElement, TypingOptions> = {\n  mounted(el, binding) {\n    execute(el, binding.value)\n  },\n\n  updated(el, binding) {\n    if (binding.value.text !== binding.oldValue?.text) {\n      clearTimeout(el.__timeoutId)\n      execute(el, binding.value)\n    }\n  },\n\n  unmounted(el) {\n    clearTimeout(el.__timeoutId)\n  },\n}\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n  const { text, speed = 1, targetAttr = '' } = options\n\n  if (!text) {\n    console.error('v-typing: \"text\" is required.')\n    return\n  }\n\n  let index = 0\n\n  const updateContent = (value: string) => {\n    if (targetAttr) {\n      el.setAttribute(targetAttr, value)\n    } else {\n      el.innerHTML = value\n    }\n  }\n\n  const type = () => {\n    if (index < text.length) {\n      updateContent(text.slice(0, index + 1))\n      index++\n      el.__timeoutId = setTimeout(type, speed) as unknown as number\n    } else {\n      updateContent(text)\n      clearTimeout(el.__timeoutId)\n      el.__timeoutId = undefined\n    }\n  }\n\n  type()\n}\n"],"names":[],"mappings":"AA8BA;;;;AAIG;AACU,MAAA,MAAM,GAAgD;IACjE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;KAC3B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;SAC3B;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC7B;EACF;AAED;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAA;IAEpD,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAA;QAC9C,OAAM;KACP;IAED,IAAI,KAAK,GAAG,CAAC,CAAA;AAEb,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;QACtC,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;SACnC;aAAM;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAA;SACrB;AACH,KAAC,CAAA;IAED,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;AACvC,YAAA,KAAK,EAAE,CAAA;YACP,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAA;SAC9D;aAAM;YACL,aAAa,CAAC,IAAI,CAAC,CAAA;AACnB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAA;SAC3B;AACH,KAAC,CAAA;AAED,IAAA,IAAI,EAAE,CAAA;AACR;;;;"}
+{"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue'\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n  /**\n   * The text (plain or html) that will be typed into the target element.\n   */\n  text: string\n  /**\n   * The typing speed in milliseconds per character.\n   *\n   */\n  speed?: number\n  /**\n   * The attribute of the HTML element where the typed text will be placed.\n   * If not specified, the text will be set as content (innerHTML).\n   *\n   * @example 'placeholder'\n   */\n  targetAttr?: string\n}\n\nexport interface TypingHTMLElement extends HTMLElement {\n  __timeoutId?: number\n}\n\n/**\n * Typing directive.\n *\n * @public\n */\nexport const typing: Directive<TypingHTMLElement, TypingOptions> = {\n  mounted(el, binding) {\n    execute(el, binding.value)\n  },\n\n  updated(el, binding) {\n    if (binding.value.text !== binding.oldValue?.text) {\n      clearTimeout(el.__timeoutId)\n      execute(el, binding.value)\n    }\n  },\n\n  unmounted(el) {\n    clearTimeout(el.__timeoutId)\n  },\n}\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n  const { text, speed = 1, targetAttr = '' } = options\n\n  if (!text) {\n    console.error('v-typing: \"text\" is required.')\n    return\n  }\n\n  let index = 0\n\n  const updateContent = (value: string) => {\n    if (targetAttr) {\n      el.setAttribute(targetAttr, value)\n    } else {\n      el.innerHTML = value\n    }\n  }\n\n  const type = () => {\n    if (index < text.length) {\n      updateContent(text.slice(0, index + 1))\n      index++\n      el.__timeoutId = setTimeout(type, speed) as unknown as number\n    } else {\n      updateContent(text)\n      clearTimeout(el.__timeoutId)\n      el.__timeoutId = undefined\n    }\n  }\n\n  type()\n}\n"],"names":[],"mappings":"AA8BA;;;;AAIG;AACU,MAAA,MAAM,GAAgD;IACjE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;KAC3B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;SAC3B;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAC7B;EACF;AAED;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAA;IAEpD,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAA;QAC9C,OAAM;KACP;IAED,IAAI,KAAK,GAAG,CAAC,CAAA;AAEb,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;QACtC,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;SACnC;aAAM;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAA;SACrB;AACH,KAAC,CAAA;IAED,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;AACvC,YAAA,KAAK,EAAE,CAAA;YACP,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAA;SAC9D;aAAM;YACL,aAAa,CAAC,IAAI,CAAC,CAAA;AACnB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;AAC5B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAA;SAC3B;AACH,KAAC,CAAA;AAED,IAAA,IAAI,EAAE,CAAA;AACR;;;;"}

package/js/x-modules/ai/components/ai-overview.vue.js

@@ -15,39 +15,32 @@ const _hoisted_3 = {
   class: "x-ai-overview-title-loading",
   "data-test": "ai-overview-title-loading"
 };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode(
-  "span",
-  { class: "x-ai-overview-title-loading-indicator" },
-  null,
-  -1
-  /* HOISTED */
-);
-const _hoisted_5 = {
+const _hoisted_4 = {
   class: "x-ai-overview-title-loading-text",
   "data-test": "ai-overview-title-loading-text"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   class: "x-ai-overview-title",
   "data-test": "ai-overview-title"
 };
-const _hoisted_7 = { class: "x-ai-overview-content-wrapper" };
-const _hoisted_8 = {
+const _hoisted_6 = { class: "x-ai-overview-content-wrapper" };
+const _hoisted_7 = {
   key: 0,
   class: "x-ai-overview-content-title",
   "data-test": "ai-overview-content-title"
 };
-const _hoisted_9 = ["innerHTML"];
-const _hoisted_10 = {
+const _hoisted_8 = ["innerHTML"];
+const _hoisted_9 = {
   key: 1,
   class: "x-ai-overview-suggestions",
   "data-test": "ai-overview-suggestions-container"
 };
-const _hoisted_11 = { class: "x-ai-overview-suggestion-results" };
-const _hoisted_12 = {
+const _hoisted_10 = { class: "x-ai-overview-suggestion-results" };
+const _hoisted_11 = {
   class: "x-ai-overview-gradient",
   "data-test": "ai-overview-gradient"
 };
-const _hoisted_13 = { class: "x-ai-overview-toggle-wrapper" };
+const _hoisted_12 = { class: "x-ai-overview-toggle-wrapper" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_AIStarIcon = resolveComponent("AIStarIcon");
   const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
@@ -70,8 +63,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             createVNode(_component_Fade, { mode: "out-in" }, {
               default: withCtx(() => [
                 _ctx.suggestionsLoading ? (openBlock(), createElementBlock("span", _hoisted_3, [
-                  _hoisted_4,
-                  createElementVNode("span", _hoisted_5, [
+                  _cache[2] || (_cache[2] = createElementVNode(
+                    "span",
+                    { class: "x-ai-overview-title-loading-indicator" },
+                    null,
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("span", _hoisted_4, [
                     renderSlot(_ctx.$slots, "title-loading", {}, () => [
                       createTextVNode(
                         toDisplayString(_ctx.titleLoading),
@@ -91,7 +90,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   "data-test": "ai-overview-display-emitter"
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("span", _hoisted_6, [
+                    createElementVNode("span", _hoisted_5, [
                       createVNode(_component_AIStarIcon, { class: "x-ai-overview-title-icon" }),
                       createTextVNode(
                         toDisplayString(!!_ctx.title ? _ctx.title : _ctx.suggestionText),
@@ -109,10 +108,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             createVNode(_component_ChangeHeight, null, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", _hoisted_6, [
                   _ctx.title ? (openBlock(), createElementBlock(
                     "span",
-                    _hoisted_8,
+                    _hoisted_7,
                     toDisplayString(_ctx.suggestionText),
                     1
                     /* TEXT */
@@ -121,7 +120,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     class: normalizeClass(_ctx.contentClasses),
                     "data-test": "ai-overview-content",
                     innerHTML: _ctx.parsedResponseText
-                  }, null, 10, _hoisted_9)
+                  }, null, 10, _hoisted_8)
                 ])
               ]),
               _: 1
@@ -144,7 +143,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     key: 0,
                     class: "x-ai-overview-suggestions-loading",
                     "data-test": "ai-overview-suggestions-loading"
-                  })) : (openBlock(), createElementBlock("div", _hoisted_10, [
+                  })) : (openBlock(), createElementBlock("div", _hoisted_9, [
                     (openBlock(true), createElementBlock(
                       Fragment,
                       null,
@@ -208,7 +207,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                                           renderSlot(_ctx.$slots, "sliding-panels-right-button")
                                         ]),
                                         default: withCtx(() => [
-                                          createElementVNode("ul", _hoisted_11, [
+                                          createElementVNode("ul", _hoisted_10, [
                                             (openBlock(true), createElementBlock(
                                               Fragment,
                                               null,
@@ -279,14 +278,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, [
                 withDirectives(createElementVNode(
                   "div",
-                  _hoisted_12,
+                  _hoisted_11,
                   null,
                   512
                   /* NEED_PATCH */
                 ), [
                   [vShow, !_ctx.expanded]
                 ]),
-                createElementVNode("div", _hoisted_13, [
+                createElementVNode("div", _hoisted_12, [
                   createElementVNode("button", {
                     class: "x-ai-overview-toggle-btn",
                     "data-test": "ai-overview-toggle-button",

package/js/x-modules/ai/components/ai-overview.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-overview.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div\n      v-if=\"!isNoResults\"\n      ref=\"aiOverviewRef\"\n      class=\"x-ai-overview\"\n      data-test=\"ai-overview-wrapper\"\n    >\n      <div class=\"x-ai-overview-main\">\n        <Fade mode=\"out-in\">\n          <span\n            v-if=\"suggestionsLoading\"\n            class=\"x-ai-overview-title-loading\"\n            data-test=\"ai-overview-title-loading\"\n          >\n            <span class=\"x-ai-overview-title-loading-indicator\" />\n            <span\n              class=\"x-ai-overview-title-loading-text\"\n              data-test=\"ai-overview-title-loading-text\"\n            >\n              <slot name=\"title-loading\">\n                {{ titleLoading }}\n              </slot>\n            </span>\n          </span>\n          <DisplayEmitter\n            v-else\n            :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n            :event-metadata=\"{\n              feature: 'overview',\n              displayOriginalQuery: query || 'overview-without-query',\n              replaceable: false,\n            }\"\n            data-test=\"ai-overview-display-emitter\"\n          >\n            <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n              <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n            </span>\n          </DisplayEmitter>\n        </Fade>\n        <ChangeHeight>\n          <div class=\"x-ai-overview-content-wrapper\">\n            <span\n              v-if=\"title\"\n              class=\"x-ai-overview-content-title\"\n              data-test=\"ai-overview-content-title\"\n              >{{ suggestionText }}\n            </span>\n            <div\n              :class=\"contentClasses\"\n              data-test=\"ai-overview-content\"\n              v-html=\"parsedResponseText\"\n            />\n          </div>\n        </ChangeHeight>\n        <slot name=\"extra-content\" />\n      </div>\n      <CollapseHeight\n        :style=\"{\n          '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n        }\"\n        data-test=\"ai-overview-collapse-height-suggestions\"\n      >\n        <div v-show=\"expanded\">\n          <SpinnerIcon\n            v-if=\"!suggestionsSearch.length\"\n            class=\"x-ai-overview-suggestions-loading\"\n            data-test=\"ai-overview-suggestions-loading\"\n          />\n          <div\n            v-else\n            class=\"x-ai-overview-suggestions\"\n            data-test=\"ai-overview-suggestions-container\"\n          >\n            <DisplayEmitter\n              v-for=\"(\n                { query: suggestionQuery, results: queriesResults }, suggestionIndex\n              ) in suggestionsSearch\"\n              :key=\"suggestionQuery\"\n              :payload=\"\n                tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n              \"\n              :event-metadata=\"{\n                feature: 'overview',\n                displayOriginalQuery: query || 'overview-without-query',\n                replaceable: false,\n              }\"\n              data-test=\"ai-overview-query-display-emitter\"\n            >\n              <div\n                class=\"x-ai-overview-suggestion\"\n                data-test=\"ai-overview-suggestion\"\n                :class=\"{\n                  'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                }\"\n                :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n              >\n                <BaseEventButton\n                  class=\"x-ai-overview-suggestion-query-btn\"\n                  :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n                >\n                  {{ suggestionQuery }}\n                  <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n                </BaseEventButton>\n\n                <DisplayClickProvider\n                  :tooling-display-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n                  \"\n                  :tooling-add2-cart-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n                  \"\n                  result-feature=\"overview\"\n                >\n                  <slot name=\"sliding-panel\" :results=\"queriesResults\">\n                    <SlidingPanel\n                      :class=\"slidingPanelsClasses\"\n                      :scroll-container-class=\"slidingPanelContainersClasses\"\n                      :button-class=\"slidingPanelButtonsClasses\"\n                      :reset-on-content-change=\"false\"\n                    >\n                      <template #sliding-panel-addons=\"{ arrivedState }\">\n                        <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n                      </template>\n                      <template #sliding-panel-left-button>\n                        <slot name=\"sliding-panels-left-button\" />\n                      </template>\n                      <template #sliding-panel-right-button>\n                        <slot name=\"sliding-panels-right-button\" />\n                      </template>\n                      <ul class=\"x-ai-overview-suggestion-results\">\n                        <li\n                          v-for=\"(result, resultIndex) in queriesResults\"\n                          :key=\"result.id\"\n                          data-test=\"ai-overview-suggestion-result\"\n                          :class=\"{\n                            'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                          }\"\n                          :style=\"{\n                            animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n                          }\"\n                        >\n                          <!-- @slot (required) result card -->\n                          <slot name=\"result\" :result=\"result\" />\n                        </li>\n                      </ul>\n                    </SlidingPanel>\n                  </slot>\n                </DisplayClickProvider>\n              </div>\n            </DisplayEmitter>\n            <slot name=\"suggestions-extra-content\" />\n          </div>\n        </div>\n      </CollapseHeight>\n\n      <Fade>\n        <div\n          v-if=\"queries.length\"\n          class=\"x-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\n            <button\n              class=\"x-ai-overview-toggle-btn\"\n              data-test=\"ai-overview-toggle-button\"\n              @click.stop=\"emitAndSetExpand(!expanded)\"\n            >\n              {{ buttonText }}\n              <ChevronDownIcon\n                class=\"x-ai-overview-toggle-btn-icon\"\n                :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n              />\n            </button>\n          </div>\n        </div>\n      </Fade>\n    </div>\n  </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  Fade,\n  SlidingPanel,\n  SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n  directives: {\n    typing,\n  },\n  xModule: aiXModule.name,\n  components: {\n    AIStarIcon,\n    ArrowRightIcon,\n    BaseEventButton,\n    ChevronDownIcon,\n    CollapseHeight,\n    ChangeHeight,\n    Fade,\n    SlidingPanel,\n    SpinnerIcon,\n    DisplayEmitter,\n    DisplayClickProvider,\n  },\n  props: {\n    /* The text displayed when the question ended loading */\n    title: {\n      type: String,\n    },\n    /* The text displayed when the question is loading. */\n    titleLoading: {\n      type: String,\n      default: 'Generating with Empathy AI',\n    },\n    /* The text displayed on the toggle button when collapsed. */\n    expandText: {\n      type: String,\n      default: 'Show more',\n    },\n    /* The text displayed on the toggle button when expanded. */\n    collapseText: {\n      type: String,\n      default: 'Show less',\n    },\n    /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n    autoExpandInSearchNoResults: {\n      type: Boolean,\n      default: true,\n    },\n    /* The classes added to the parsed response text container. */\n    contentClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel for each query. */\n    slidingPanelsClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel container of each query. */\n    slidingPanelContainersClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel button of each query. */\n    slidingPanelButtonsClasses: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const {\n      suggestionText,\n      responseText,\n      suggestionsSearch,\n      suggestionsLoading,\n      tagging,\n      isNoResults,\n      queries,\n    } = useState('ai')\n\n    const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n    const aiOverviewRef = ref<HTMLDivElement | null>(null)\n    const expanded = ref(false)\n    const shouldAnimateSuggestion = ref(true)\n    const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function emitAndSetExpand(isExpanded: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n\n      expanded.value = isExpanded\n      if (!expanded.value) {\n        aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n        shouldAnimateSuggestion.value = false\n      }\n    }\n\n    /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n    the request for suggestions has ended; there are queries in AI and no-results in search. */\n    watch([suggestionsLoading, () => $x.noResults], () => {\n      if (\n        props.autoExpandInSearchNoResults &&\n        !suggestionsLoading.value &&\n        queries.value.length &&\n        $x.noResults\n      ) {\n        emitAndSetExpand(true)\n      }\n    })\n\n    $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n      expanded.value = false\n      shouldAnimateSuggestion.value = true\n    })\n\n    onMounted(() => {\n      $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n    })\n\n    return {\n      aiOverviewRef,\n      buttonText,\n      emptyTaggingRequest,\n      expanded,\n      parsedResponseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      emitAndSetExpand,\n      shouldAnimateSuggestion,\n      query,\n      tagging,\n      isNoResults,\n      queries,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n  --color: var(--x-ai-overview-color, #bbc9cf);\n  --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n  position: relative;\n  border-radius: 1.5rem;\n  background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n  padding: 1rem;\n  max-width: var(--x-ai-overview-main-max-width, none);\n  margin: 0 auto;\n}\n\n.x-ai-overview-title {\n  display: flex;\n  font-size: 0.875rem;\n  font-weight: 700;\n  gap: 0.25rem;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n  width: 0.75rem;\n  height: 0.75rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  border-radius: 9999px;\n  background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  color: var(--color);\n  flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n  border-radius: 1.5rem;\n  cursor: pointer;\n  content: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n  border-color: var(--button-color-50, #283034);\n  background-color: #ffffff;\n  color: var(--button-color-50, #283034);\n  border-radius: 9999px;\n  width: 100%;\n  margin: auto;\n  padding-right: 1rem;\n  padding-left: 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-style: solid;\n  border-width: 1px;\n  font-weight: 700;\n  min-height: 2.5rem;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n  border-color: var(--button-color-50, #283034);\n  background-color: var(--button-color-50, #283034);\n  color: #ffffff;\n}\n\n@media (min-width: 640px) {\n  .x-ai-overview-toggle-btn {\n    transition-property: all;\n    transition-duration: 500ms;\n    transform: translateY(50%);\n    width: var(--expand-button-width, 200px);\n  }\n}\n\n.x-ai-overview-toggle-btn-icon {\n  transform: rotate(0deg);\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  transition-property: all;\n  transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n  transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n  border-color: transparent;\n  background-color: transparent;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  font-weight: 700;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n  width: 2.5rem;\n  height: 2.5rem;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n  display: flex;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n@keyframes x-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n</style>\n"],"names":["_createElementVNode","_createBlock","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_withCtx","_createCommentVNode","_normalizeClass","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"ai-overview.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div\n      v-if=\"!isNoResults\"\n      ref=\"aiOverviewRef\"\n      class=\"x-ai-overview\"\n      data-test=\"ai-overview-wrapper\"\n    >\n      <div class=\"x-ai-overview-main\">\n        <Fade mode=\"out-in\">\n          <span\n            v-if=\"suggestionsLoading\"\n            class=\"x-ai-overview-title-loading\"\n            data-test=\"ai-overview-title-loading\"\n          >\n            <span class=\"x-ai-overview-title-loading-indicator\" />\n            <span\n              class=\"x-ai-overview-title-loading-text\"\n              data-test=\"ai-overview-title-loading-text\"\n            >\n              <slot name=\"title-loading\">\n                {{ titleLoading }}\n              </slot>\n            </span>\n          </span>\n          <DisplayEmitter\n            v-else\n            :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n            :event-metadata=\"{\n              feature: 'overview',\n              displayOriginalQuery: query || 'overview-without-query',\n              replaceable: false,\n            }\"\n            data-test=\"ai-overview-display-emitter\"\n          >\n            <span class=\"x-ai-overview-title\" data-test=\"ai-overview-title\">\n              <AIStarIcon class=\"x-ai-overview-title-icon\" />{{ !!title ? title : suggestionText }}\n            </span>\n          </DisplayEmitter>\n        </Fade>\n        <ChangeHeight>\n          <div class=\"x-ai-overview-content-wrapper\">\n            <span\n              v-if=\"title\"\n              class=\"x-ai-overview-content-title\"\n              data-test=\"ai-overview-content-title\"\n              >{{ suggestionText }}\n            </span>\n            <div\n              :class=\"contentClasses\"\n              data-test=\"ai-overview-content\"\n              v-html=\"parsedResponseText\"\n            />\n          </div>\n        </ChangeHeight>\n        <slot name=\"extra-content\" />\n      </div>\n      <CollapseHeight\n        :style=\"{\n          '--x-collapse-height-transition-duration': `${300 * suggestionsSearch.length}ms`,\n        }\"\n        data-test=\"ai-overview-collapse-height-suggestions\"\n      >\n        <div v-show=\"expanded\">\n          <SpinnerIcon\n            v-if=\"!suggestionsSearch.length\"\n            class=\"x-ai-overview-suggestions-loading\"\n            data-test=\"ai-overview-suggestions-loading\"\n          />\n          <div\n            v-else\n            class=\"x-ai-overview-suggestions\"\n            data-test=\"ai-overview-suggestions-container\"\n          >\n            <DisplayEmitter\n              v-for=\"(\n                { query: suggestionQuery, results: queriesResults }, suggestionIndex\n              ) in suggestionsSearch\"\n              :key=\"suggestionQuery\"\n              :payload=\"\n                tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\n              \"\n              :event-metadata=\"{\n                feature: 'overview',\n                displayOriginalQuery: query || 'overview-without-query',\n                replaceable: false,\n              }\"\n              data-test=\"ai-overview-query-display-emitter\"\n            >\n              <div\n                class=\"x-ai-overview-suggestion\"\n                data-test=\"ai-overview-suggestion\"\n                :class=\"{\n                  'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                }\"\n                :style=\"{ animationDelay: `${suggestionIndex * 300}ms` }\"\n              >\n                <BaseEventButton\n                  class=\"x-ai-overview-suggestion-query-btn\"\n                  :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n                >\n                  {{ suggestionQuery }}\n                  <ArrowRightIcon class=\"x-ai-overview-suggestion-query-btn-icon\" />\n                </BaseEventButton>\n\n                <DisplayClickProvider\n                  :tooling-display-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayClick\n                  \"\n                  :tooling-add2-cart-tagging=\"\n                    tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n                  \"\n                  result-feature=\"overview\"\n                >\n                  <slot name=\"sliding-panel\" :results=\"queriesResults\">\n                    <SlidingPanel\n                      :class=\"slidingPanelsClasses\"\n                      :scroll-container-class=\"slidingPanelContainersClasses\"\n                      :button-class=\"slidingPanelButtonsClasses\"\n                      :reset-on-content-change=\"false\"\n                    >\n                      <template #sliding-panel-addons=\"{ arrivedState }\">\n                        <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n                      </template>\n                      <template #sliding-panel-left-button>\n                        <slot name=\"sliding-panels-left-button\" />\n                      </template>\n                      <template #sliding-panel-right-button>\n                        <slot name=\"sliding-panels-right-button\" />\n                      </template>\n                      <ul class=\"x-ai-overview-suggestion-results\">\n                        <li\n                          v-for=\"(result, resultIndex) in queriesResults\"\n                          :key=\"result.id\"\n                          data-test=\"ai-overview-suggestion-result\"\n                          :class=\"{\n                            'x-ai-overview-result-animation': shouldAnimateSuggestion,\n                          }\"\n                          :style=\"{\n                            animationDelay: `${suggestionIndex * 300 + resultIndex * 300}ms`,\n                          }\"\n                        >\n                          <!-- @slot (required) result card -->\n                          <slot name=\"result\" :result=\"result\" />\n                        </li>\n                      </ul>\n                    </SlidingPanel>\n                  </slot>\n                </DisplayClickProvider>\n              </div>\n            </DisplayEmitter>\n            <slot name=\"suggestions-extra-content\" />\n          </div>\n        </div>\n      </CollapseHeight>\n\n      <Fade>\n        <div\n          v-if=\"queries.length\"\n          class=\"x-cursor-pointer\"\n          data-test=\"ai-overview-toggle-button-wrapper\"\n          @click=\"emitAndSetExpand(!expanded)\"\n        >\n          <div v-show=\"!expanded\" class=\"x-ai-overview-gradient\" data-test=\"ai-overview-gradient\" />\n          <div class=\"x-ai-overview-toggle-wrapper\">\n            <button\n              class=\"x-ai-overview-toggle-btn\"\n              data-test=\"ai-overview-toggle-button\"\n              @click.stop=\"emitAndSetExpand(!expanded)\"\n            >\n              {{ buttonText }}\n              <ChevronDownIcon\n                class=\"x-ai-overview-toggle-btn-icon\"\n                :class=\"{ 'x-ai-overview-toggle-btn-icon-expanded': expanded }\"\n              />\n            </button>\n          </div>\n        </div>\n      </Fade>\n    </div>\n  </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { marked } from 'marked'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  Fade,\n  SlidingPanel,\n  SpinnerIcon,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useGetter, useState } from '../../../composables'\nimport { typing } from '../../../directives'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n  directives: {\n    typing,\n  },\n  xModule: aiXModule.name,\n  components: {\n    AIStarIcon,\n    ArrowRightIcon,\n    BaseEventButton,\n    ChevronDownIcon,\n    CollapseHeight,\n    ChangeHeight,\n    Fade,\n    SlidingPanel,\n    SpinnerIcon,\n    DisplayEmitter,\n    DisplayClickProvider,\n  },\n  props: {\n    /* The text displayed when the question ended loading */\n    title: {\n      type: String,\n    },\n    /* The text displayed when the question is loading. */\n    titleLoading: {\n      type: String,\n      default: 'Generating with Empathy AI',\n    },\n    /* The text displayed on the toggle button when collapsed. */\n    expandText: {\n      type: String,\n      default: 'Show more',\n    },\n    /* The text displayed on the toggle button when expanded. */\n    collapseText: {\n      type: String,\n      default: 'Show less',\n    },\n    /* Auto expand the AI Overview when there are queries in AI and no-results in search. */\n    autoExpandInSearchNoResults: {\n      type: Boolean,\n      default: true,\n    },\n    /* The classes added to the parsed response text container. */\n    contentClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel for each query. */\n    slidingPanelsClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel container of each query. */\n    slidingPanelContainersClasses: {\n      type: String,\n    },\n    /* The classes added to each sliding panel button of each query. */\n    slidingPanelButtonsClasses: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query } = useGetter('ai')\n    const {\n      suggestionText,\n      responseText,\n      suggestionsSearch,\n      suggestionsLoading,\n      tagging,\n      isNoResults,\n      queries,\n    } = useState('ai')\n\n    const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n    const aiOverviewRef = ref<HTMLDivElement | null>(null)\n    const expanded = ref(false)\n    const shouldAnimateSuggestion = ref(true)\n    const parsedResponseText = computed(() => marked.parse(responseText.value))\n\n    const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n    function emitAndSetExpand(isExpanded: boolean) {\n      $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n        suggestionText: suggestionText.value,\n        toolingDisplayClick: tagging.value?.toolingDisplayClick,\n      })\n\n      expanded.value = isExpanded\n      if (!expanded.value) {\n        aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n        shouldAnimateSuggestion.value = false\n      }\n    }\n\n    /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,\n    the request for suggestions has ended; there are queries in AI and no-results in search. */\n    watch([suggestionsLoading, () => $x.noResults], () => {\n      if (\n        props.autoExpandInSearchNoResults &&\n        !suggestionsLoading.value &&\n        queries.value.length &&\n        $x.noResults\n      ) {\n        emitAndSetExpand(true)\n      }\n    })\n\n    $x.on('AiSuggestionsRequestUpdated', false).subscribe(() => {\n      expanded.value = false\n      shouldAnimateSuggestion.value = true\n    })\n\n    onMounted(() => {\n      $x.emit('AiOverviewMounted', undefined, { feature: 'overview' })\n    })\n\n    return {\n      aiOverviewRef,\n      buttonText,\n      emptyTaggingRequest,\n      expanded,\n      parsedResponseText,\n      suggestionsLoading,\n      suggestionsSearch,\n      suggestionText,\n      emitAndSetExpand,\n      shouldAnimateSuggestion,\n      query,\n      tagging,\n      isNoResults,\n      queries,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-overview {\n  --color: var(--x-ai-overview-color, #bbc9cf);\n  --color-lighter: var(--x-ai-overview-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n  position: relative;\n  border-radius: 1.5rem;\n  background-color: var(--color-lighter);\n}\n\n.x-ai-overview-main {\n  padding: 1rem;\n  max-width: var(--x-ai-overview-main-max-width, none);\n  margin: 0 auto;\n}\n\n.x-ai-overview-title {\n  display: flex;\n  font-size: 0.875rem;\n  font-weight: 700;\n  gap: 0.25rem;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  margin-bottom: 0.5rem;\n}\n\n.x-ai-overview-title-loading-indicator {\n  width: 0.75rem;\n  height: 0.75rem;\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  border-radius: 9999px;\n  background-color: var(--color);\n}\n\n.x-ai-overview-title-loading-text {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  font-size: 0.75rem;\n}\n\n.x-ai-overview-title-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  color: var(--color);\n  flex-shrink: 0;\n}\n\n.x-ai-overview-content-wrapper {\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  line-height: 1.25rem;\n}\n\n.x-ai-overview-content-title {\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n\n.x-ai-overview-gradient {\n  border-radius: 1.5rem;\n  cursor: pointer;\n  content: none;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  bottom: 0;\n  background-image: linear-gradient(to bottom, transparent 0%, var(--color-lighter) 100%);\n}\n\n.x-ai-overview-toggle-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.x-ai-overview-toggle-btn {\n  border-color: var(--button-color-50, #283034);\n  background-color: #ffffff;\n  color: var(--button-color-50, #283034);\n  border-radius: 9999px;\n  width: 100%;\n  margin: auto;\n  padding-right: 1rem;\n  padding-left: 1rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-style: solid;\n  border-width: 1px;\n  font-weight: 700;\n  min-height: 2.5rem;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n}\n\n.x-ai-overview-toggle-btn:hover {\n  border-color: var(--button-color-50, #283034);\n  background-color: var(--button-color-50, #283034);\n  color: #ffffff;\n}\n\n@media (min-width: 640px) {\n  .x-ai-overview-toggle-btn {\n    transition-property: all;\n    transition-duration: 500ms;\n    transform: translateY(50%);\n    width: var(--expand-button-width, 200px);\n  }\n}\n\n.x-ai-overview-toggle-btn-icon {\n  transform: rotate(0deg);\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  transition-property: all;\n  transition-duration: 300ms;\n}\n\n.x-ai-overview-toggle-btn-icon-expanded {\n  transform: rotate(180deg);\n}\n\n.x-ai-overview-suggestion-query-btn {\n  border-color: transparent;\n  background-color: transparent;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  font-weight: 700;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.x-ai-overview-suggestion-query-btn-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n}\n\n.x-ai-overview-suggestions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n}\n\n.x-ai-overview-suggestions-loading {\n  width: 2.5rem;\n  height: 2.5rem;\n  margin: auto;\n  animation: x-spin 1s linear infinite;\n}\n\n.x-ai-overview-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.x-ai-overview-suggestion-results {\n  display: flex;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n@keyframes x-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n</style>\n"],"names":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_normalizeClass","_normalizeStyle","_withDirectives","_Fragment","_renderList","_vShow","_withModifiers"],"mappings":"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"}

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACuB,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAAA,EAArBC,WAAkF,CAAA,uBAAA,EAAA;AAAA,IADpF,GAAA,EAAA,CAAA;AAAA,IAC8B,MAAO,EAAA,QAAA;AAAA,IAAU,QAAQ,EAAA,IAAA,CAAA,yBAAA;AAAA,GADvD,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" target=\"window\" @resize=\"throttledStoreWindowWidth\" />\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, Ref } from 'vue'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport { GlobalEvents } from 'vue-global-events'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { throttle } from '../../../utils/throttle'\nimport { deviceXModule } from '../x-module'\n\n/** Alias just to improve code readiness. */\ntype Device = string\n/** Alias just to improve code readiness. */\ntype MaxWidth = number\n\n/**\n * This component helps to detect or setting a device, that can be used later to create\n * different layouts optimized for different devices. This detected device is available under\n * the {@link XComponentAliasAPI.device} property.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'DeviceDetector',\n  xModule: deviceXModule.name,\n  components: { GlobalEvents },\n  props: {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    breakpoints: {\n      type: Object as PropType<Record<Device, MaxWidth>>,\n      default: () => ({}),\n    },\n    /**\n     * Forces a device, ignoring the breakpoints prop.\n     *\n     * @public\n     */\n    force: String as PropType<Device>,\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    throttleMs: {\n      type: Number,\n      default: 100,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    const windowWidthPx: Ref<number | null> = ref(null)\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    const storeWindowWidth = (): void => {\n      windowWidthPx.value = window.innerWidth\n    }\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    let throttledStoreWindowWidth = storeWindowWidth\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n      Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth),\n    )\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    const detectedDevice = computed((): string | null => {\n      if (props.force) {\n        return props.force\n      } else if (windowWidthPx.value === null) {\n        return null\n      } else {\n        return (\n          sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n        )\n      }\n    })\n\n    watch(\n      detectedDevice,\n      device => {\n        xBus.emit('DeviceProvided', device)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    watch(\n      () => props.throttleMs,\n      throttleMs => {\n        throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs)\n      },\n      { immediate: true },\n    )\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    onMounted(() => {\n      storeWindowWidth()\n    })\n\n    return {\n      throttledStoreWindowWidth,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\nimport { DeviceDetector } from '@empathyco/x-components/device'\n\nexport default {\n  name: 'DeviceDemo',\n  components: {\n    DeviceDetector,\n  },\n  data() {\n    return {\n      device: 'unknown',\n      breakpoints: {\n        mobile: 600,\n        tablet: 900,\n        desktop: Number.POSITIVE_INFINITY,\n      },\n    }\n  },\n  methods: {\n    storeDevice(device) {\n      this.device = device\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;;AACuB,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAAA,EAArBC,WAAkF,CAAA,uBAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAAtD,MAAO,EAAA,QAAA;AAAA,IAAU,QAAQ,EAAA,IAAA,CAAA,yBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"empathize.vue.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`, `UserPressedEnter` and 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\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<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\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` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n\n### Advance examples\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 has no-content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not.\nIt also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the\nempathize when has no-content.\n\n```vue\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```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withDirectives","_createElementVNode","_withModifiers","_renderSlot"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAaYC,wBAbI,IAAS,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAD3B,iBAEI,MAWM;AAAA,MAXNC,cAAA,CAAAC,kBAAA;AAAA,QAWM,KAAA;AAAA,QAAA;AAAA,UATJ,GAAI,EAAA,cAAA;AAAA,UACJ,KAAM,EAAA,aAAA;AAAA,UACN,WAAU,EAAA,WAAA;AAAA,UACT,WAAA,EAAS,0BAPhBC,aAOM,CAAA,MAAA;AAAA,WAAkB,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACjB,WAAO,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACT,YAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;UAGXC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA;;;;gBATA,IAAmB,CAAA,mBAAA,CAAA;AAAA,OAAA,CAAA;;AAHjC,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"empathize.vue.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`, `UserPressedEnter` and 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n  <template #default>\n    <BaseKeyboardNavigation>\n      <QuerySuggestions/>\n      <PopularSearches/>\n      <HistoryQueries/>\n    </BaseKeyboardNavigation>\n  </template>\n</Empathize>\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<Empathize\n  :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n  :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n  <template #default>\n    Please, type a query in the Search Box.\n  </template>\n</Empathize>\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` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n  <template #default>\n    <PopularSearches/>\n  </template>\n</Empathize>\n```\n\n### Advance examples\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 has no-content as fallback behaviour. To do that, `hasContent` prop must be reactive to know\nif the empathize has content or not.\nIt also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the\nempathize when has no-content.\n\n```vue\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```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","_renderSlot"],"mappings":";;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAaYC,wBAbI,IAAS,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CACvB,MAWM;AAAA,MAXNC,cAAA,CAAAC,kBAAA;AAAA,QAWM,KAAA;AAAA,QAAA;AAAA,UATJ,GAAI,EAAA,cAAA;AAAA,UACJ,KAAM,EAAA,aAAA;AAAA,UACN,WAAU,EAAA,WAAA;AAAA,UACT,aAAS,MAAV,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAkB,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACjB,WAAO,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACT,YAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,SAAA;;UAGXC,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA;;;;gBATA,IAAmB,CAAA,mBAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/facets/components/clear-filters.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\n    }))\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_normalizeClass","_withCtx","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;AAEU,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EADRC,WASkB,CAAA,0BAAA,EAAA;AAAA,IAVpB,GAAA,EAAA,CAAA;AAAA,IAGI,KAAA,EAHJC,cAGU,CAAA,CAAA,0BAAA,EAIE,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,IAHlB,WAAU,EAAA,eAAA;AAAA,IACT,UAAQ,CAAG,IAAA,CAAA,kBAAA;AAAA,IACX,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AANb,IAAA,OAAA,EAAAC,OAAA,CASI,MAA6F;AAAA,MAA7FC,UAA6F,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAtF,eAAkB,EAAA,IAAA,CAAA,eAAA,IAAzB,MAA6F;AAAA,QATjGC,eAAA;AAAA,UAS8C,iBAAe,GAAAC,eAAA,CAAG,IAAgB,CAAA,eAAA,CAAA,MAAM,CAAG,GAAA,GAAA;AAAA,UAAC,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;AAT1F,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,OAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\n    }))\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AAEU,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EADRC,WASkB,CAAA,0BAAA,EAAA;AAAA,IAAA,GAAA,EAAA,CAAA;IAPhB,KAAK,EAAAC,cAAA,CAAA,CAAC,4BAIE,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,IAHlB,WAAU,EAAA,eAAA;AAAA,IACT,UAAQ,CAAG,IAAA,CAAA,kBAAA;AAAA,IACX,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;qBAGT,MAA6F;AAAA,MAA7FC,UAA6F,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAtF,eAAkB,EAAA,IAAA,CAAA,eAAA,IAAzB,MAA6F;AAAA,QAAAC,eAAA;UAAnD,iBAAe,GAAAC,eAAA,CAAG,IAAgB,CAAA,eAAA,CAAA,MAAM,CAAG,GAAA,GAAA;AAAA,UAAC,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}