@empathyco/x-components 6.0.0-alpha.155 → 6.0.0-alpha.157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/docs/API-reference/api/x-components.aioverview.md +1 -0
  3. package/docs/API-reference/api/x-components.empathizexevents.empathizegotnocontent.md +13 -0
  4. package/docs/API-reference/api/x-components.empathizexevents.md +1 -0
  5. package/docs/API-reference/api/x-components.hierarchicalfilter.md +1 -0
  6. package/docs/API-reference/api/x-components.simplefilter.md +1 -0
  7. package/docs/API-reference/api/x-components.snippetcallbacks.md +1 -0
  8. package/js/x-modules/ai/components/ai-overview.vue.js +240 -233
  9. package/js/x-modules/ai/components/ai-overview.vue.js.map +1 -1
  10. package/js/x-modules/ai/components/ai-overview.vue2.js +6 -1
  11. package/js/x-modules/ai/components/ai-overview.vue2.js.map +1 -1
  12. package/js/x-modules/empathize/components/empathize.vue.js.map +1 -1
  13. package/js/x-modules/empathize/components/empathize.vue2.js +1 -1
  14. package/js/x-modules/empathize/components/empathize.vue2.js.map +1 -1
  15. package/js/x-modules/search/wiring.js +4 -0
  16. package/js/x-modules/search/wiring.js.map +1 -1
  17. package/package.json +2 -2
  18. package/report/x-components.api.json +59 -5
  19. package/report/x-components.api.md +15 -6
  20. package/types/components/snippet-callbacks.vue.d.ts +1 -0
  21. package/types/components/snippet-callbacks.vue.d.ts.map +1 -1
  22. package/types/x-modules/ai/components/ai-overview.vue.d.ts +1 -0
  23. package/types/x-modules/ai/components/ai-overview.vue.d.ts.map +1 -1
  24. package/types/x-modules/empathize/events.types.d.ts +5 -0
  25. package/types/x-modules/empathize/events.types.d.ts.map +1 -1
  26. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts +1 -0
  27. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts.map +1 -1
  28. package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts +1 -0
  29. package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts.map +1 -1
  30. package/types/x-modules/search/wiring.d.ts +4 -0
  31. package/types/x-modules/search/wiring.d.ts.map +1 -1
package/js/x-modules/ai/components/ai-overview.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ai-overview.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"!isNoResults\" class=\"x-ai-overview\" data-test=\"ai-overview-wrapper\">\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\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <p>{{ responseText }}</p>\n </div>\n </ChangeHeight>\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, tagging: suggestionTagging },\n 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 :query-tagging=\"suggestionTagging.query\"\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 </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=\"onExpandButtonClick(!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=\"onExpandButtonClick(!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 type { PropType } from 'vue'\nimport { computed, defineComponent, 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 /**\n * The text displayed when the question ended loading\n *\n * @public\n */\n title: {\n type: String as PropType<string>,\n },\n /**\n * The text displayed when the question is loading.\n *\n * @public\n */\n titleLoading: {\n type: String as PropType<string>,\n default: 'Generating with Empathy AI',\n },\n /**\n * The text displayed on the toggle button when collapsed.\n *\n * @public\n */\n expandText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n /**\n * The text displayed on the toggle button when expanded.\n *\n * @public\n */\n collapseText: {\n type: String as PropType<string>,\n default: 'Show less',\n },\n\n /**\n * The classes added to each sliding panel for each query.\n *\n * @public\n */\n slidingPanelsClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel container of each query.\n *\n * @public\n */\n slidingPanelContainersClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel buttons of each query.\n *\n * @public\n */\n slidingPanelButtonsClasses: {\n type: String as PropType<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 expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function onExpandButtonClick(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n setExpanded(newValue)\n }\n\n function setExpanded(newValue: boolean) {\n expanded.value = newValue\n !expanded.value && (shouldAnimateSuggestion.value = false)\n }\n\n watch(query, () => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n return {\n buttonText,\n emptyTaggingRequest,\n expanded,\n responseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n setExpanded,\n onExpandButtonClick,\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}\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 {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\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","_normalizeStyle","_withDirectives","_Fragment","_renderList","_normalizeClass","_vShow","_withModifiers"],"mappings":"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"}
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\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <p>{{ responseText }}</p>\n </div>\n </ChangeHeight>\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, tagging: suggestionTagging },\n 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 :query-tagging=\"suggestionTagging.query\"\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 </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=\"onExpandButtonClick(!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=\"onExpandButtonClick(!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 type { PropType } from 'vue'\nimport { computed, defineComponent, 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 /**\n * The text displayed when the question ended loading\n *\n * @public\n */\n title: {\n type: String as PropType<string>,\n },\n /**\n * The text displayed when the question is loading.\n *\n * @public\n */\n titleLoading: {\n type: String as PropType<string>,\n default: 'Generating with Empathy AI',\n },\n /**\n * The text displayed on the toggle button when collapsed.\n *\n * @public\n */\n expandText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n /**\n * The text displayed on the toggle button when expanded.\n *\n * @public\n */\n collapseText: {\n type: String as PropType<string>,\n default: 'Show less',\n },\n\n /**\n * The classes added to each sliding panel for each query.\n *\n * @public\n */\n slidingPanelsClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel container of each query.\n *\n * @public\n */\n slidingPanelContainersClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel buttons of each query.\n *\n * @public\n */\n slidingPanelButtonsClasses: {\n type: String as PropType<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 const aiOverviewRef = ref<HTMLDivElement | null>(null)\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function onExpandButtonClick(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n setExpanded(newValue)\n }\n\n function setExpanded(newValue: boolean) {\n expanded.value = newValue\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n watch(query, () => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n responseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n setExpanded,\n onExpandButtonClick,\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}\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 {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\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","_normalizeStyle","_withDirectives","_Fragment","_renderList","_normalizeClass","_vShow","_withModifiers"],"mappings":"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"}
package/js/x-modules/ai/components/ai-overview.vue2.js CHANGED
@@ -194,6 +194,7 @@ var _sfc_main = defineComponent({
194
194
  const $x = use$x();
195
195
  const { query } = useGetter('ai');
196
196
  const { suggestionText, responseText, suggestionsSearch, suggestionsLoading, tagging, isNoResults, queries, } = useState('ai');
197
+ const aiOverviewRef = ref(null);
197
198
  const emptyTaggingRequest = { url: '', params: {} };
198
199
  const expanded = ref(false);
199
200
  const shouldAnimateSuggestion = ref(true);
@@ -207,13 +208,17 @@ var _sfc_main = defineComponent({
207
208
  }
208
209
  function setExpanded(newValue) {
209
210
  expanded.value = newValue;
210
- !expanded.value && (shouldAnimateSuggestion.value = false);
211
+ if (!expanded.value) {
212
+ aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' });
213
+ shouldAnimateSuggestion.value = false;
214
+ }
211
215
  }
212
216
  watch(query, () => {
213
217
  expanded.value = false;
214
218
  shouldAnimateSuggestion.value = true;
215
219
  });
216
220
  return {
221
+ aiOverviewRef,
217
222
  buttonText,
218
223
  emptyTaggingRequest,
219
224
  expanded,
package/js/x-modules/ai/components/ai-overview.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ai-overview.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-overview.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"!isNoResults\" class=\"x-ai-overview\" data-test=\"ai-overview-wrapper\">\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\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <p>{{ responseText }}</p>\n </div>\n </ChangeHeight>\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, tagging: suggestionTagging },\n 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 :query-tagging=\"suggestionTagging.query\"\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 </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=\"onExpandButtonClick(!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=\"onExpandButtonClick(!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 type { PropType } from 'vue'\nimport { computed, defineComponent, 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 /**\n * The text displayed when the question ended loading\n *\n * @public\n */\n title: {\n type: String as PropType<string>,\n },\n /**\n * The text displayed when the question is loading.\n *\n * @public\n */\n titleLoading: {\n type: String as PropType<string>,\n default: 'Generating with Empathy AI',\n },\n /**\n * The text displayed on the toggle button when collapsed.\n *\n * @public\n */\n expandText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n /**\n * The text displayed on the toggle button when expanded.\n *\n * @public\n */\n collapseText: {\n type: String as PropType<string>,\n default: 'Show less',\n },\n\n /**\n * The classes added to each sliding panel for each query.\n *\n * @public\n */\n slidingPanelsClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel container of each query.\n *\n * @public\n */\n slidingPanelContainersClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel buttons of each query.\n *\n * @public\n */\n slidingPanelButtonsClasses: {\n type: String as PropType<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 expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function onExpandButtonClick(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n setExpanded(newValue)\n }\n\n function setExpanded(newValue: boolean) {\n expanded.value = newValue\n !expanded.value && (shouldAnimateSuggestion.value = false)\n }\n\n watch(query, () => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n return {\n buttonText,\n emptyTaggingRequest,\n expanded,\n responseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n setExpanded,\n onExpandButtonClick,\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}\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 {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\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":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
1
+ {"version":3,"file":"ai-overview.vue2.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\" data-test=\"ai-overview-content\">\n <span v-if=\"title\">{{ suggestionText }}</span>\n <p>{{ responseText }}</p>\n </div>\n </ChangeHeight>\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, tagging: suggestionTagging },\n 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 :query-tagging=\"suggestionTagging.query\"\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 </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=\"onExpandButtonClick(!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=\"onExpandButtonClick(!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 type { PropType } from 'vue'\nimport { computed, defineComponent, 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 /**\n * The text displayed when the question ended loading\n *\n * @public\n */\n title: {\n type: String as PropType<string>,\n },\n /**\n * The text displayed when the question is loading.\n *\n * @public\n */\n titleLoading: {\n type: String as PropType<string>,\n default: 'Generating with Empathy AI',\n },\n /**\n * The text displayed on the toggle button when collapsed.\n *\n * @public\n */\n expandText: {\n type: String as PropType<string>,\n default: 'Show more',\n },\n /**\n * The text displayed on the toggle button when expanded.\n *\n * @public\n */\n collapseText: {\n type: String as PropType<string>,\n default: 'Show less',\n },\n\n /**\n * The classes added to each sliding panel for each query.\n *\n * @public\n */\n slidingPanelsClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel container of each query.\n *\n * @public\n */\n slidingPanelContainersClasses: {\n type: String as PropType<string>,\n },\n /**\n * The classes added to each sliding panel buttons of each query.\n *\n * @public\n */\n slidingPanelButtonsClasses: {\n type: String as PropType<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 const aiOverviewRef = ref<HTMLDivElement | null>(null)\n\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const expanded = ref(false)\n const shouldAnimateSuggestion = ref(true)\n\n const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))\n\n function onExpandButtonClick(newValue: boolean) {\n $x.emit('UserClickedAiOverviewExpandButton', expanded.value, {\n suggestionText: suggestionText.value,\n toolingDisplayClick: tagging.value?.toolingDisplayClick,\n })\n setExpanded(newValue)\n }\n\n function setExpanded(newValue: boolean) {\n expanded.value = newValue\n if (!expanded.value) {\n aiOverviewRef.value?.scrollIntoView({ behavior: 'smooth' })\n shouldAnimateSuggestion.value = false\n }\n }\n\n watch(query, () => {\n expanded.value = false\n shouldAnimateSuggestion.value = true\n })\n\n return {\n aiOverviewRef,\n buttonText,\n emptyTaggingRequest,\n expanded,\n responseText,\n suggestionsLoading,\n suggestionsSearch,\n suggestionText,\n setExpanded,\n onExpandButtonClick,\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}\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 {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25rem;\n gap: 0.5rem;\n}\n\n.x-ai-overview-content span {\n font-weight: 500;\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":["DisplayEmitter","DisplayClickProvider"],"mappings":"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"}
package/js/x-modules/empathize/components/empathize.vue.js.map CHANGED
@@ -1 +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 unwatchSearchBoxQuery()\n await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n close()\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;;;;;;"}
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 unwatchSearchBoxQuery()\n await $x.emit('EmpathizeGotNoContent', $x.query.searchBox)\n close()\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;;;;;;"}
package/js/x-modules/empathize/components/empathize.vue2.js CHANGED
@@ -194,7 +194,7 @@ var _sfc_main = defineComponent({
194
194
  /** Debounced function to unwatch the search-box query and also search and close empathize. */
195
195
  const searchAndCloseDebounced = useDebounce(async () => {
196
196
  unwatchSearchBoxQuery();
197
- await $x.emit('UserAcceptedAQuery', $x.query.searchBox);
197
+ await $x.emit('EmpathizeGotNoContent', $x.query.searchBox);
198
198
  close();
199
199
  }, props.searchAndCloseDebounceInMs);
200
200
  /**
package/js/x-modules/empathize/components/empathize.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpenAndHasContent\"\n ref=\"empathizeRef\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /** Array of {@link XEvent} to open the empathize. */\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n },\n /** Array of {@link XEvent} to close the empathize. */\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox',\n ],\n },\n /** Animation component that will be used to animate the empathize. */\n animation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n hasContent: {\n type: Boolean,\n default: true,\n },\n /** Fallback flag to trigger a search and close the empathize when has no-content. */\n searchAndCloseOnNoContent: {\n type: Boolean,\n default: false,\n },\n /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n searchAndCloseDebounceInMs: {\n type: Number,\n default: 1000,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const empathizeRef = ref<HTMLDivElement | null>(null)\n const isOpen = ref(false)\n const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n watch(isOpenAndHasContent, () => {\n const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n })\n\n /** Debounce function to change the state `isOpen` to the new value. */\n const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n /**\n * Open empathize. This function will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n * element.\n */\n function open() {\n changeOpenDebounced(true)\n }\n\n /**\n * Close empathize. This function will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement()\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpenDebounced(false)\n }\n }\n\n /** Events subscriptions to open and close empathize. */\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n /** Debounced function to unwatch the search-box query and also search and close empathize. */\n const searchAndCloseDebounced = useDebounce(async () => {\n unwatchSearchBoxQuery()\n await $x.emit('UserAcceptedAQuery', $x.query.searchBox)\n close()\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":["NoAnimation"],"mappings":"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"}
1
+ {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpenAndHasContent\"\n ref=\"empathizeRef\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { XEvent } from '../../../wiring'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { NoAnimation } from '../../../components'\nimport { use$x, useDebounce } from '../../../composables'\nimport { AnimationProp } from '../../../types'\nimport { getActiveElement } from '../../../utils'\nimport { empathizeXModule } from '../x-module'\n\n/**\n * Component containing the empathize. It has a required slot to define its content.\n *\n * @public\n */\nexport default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /** Array of {@link XEvent} to open the empathize. */\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'],\n },\n /** Array of {@link XEvent} to close the empathize. */\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox',\n ],\n },\n /** Animation component that will be used to animate the empathize. */\n animation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /** Whether the empathize has content or not. As it is only known in the client, it is a prop. */\n hasContent: {\n type: Boolean,\n default: true,\n },\n /** Fallback flag to trigger a search and close the empathize when has no-content. */\n searchAndCloseOnNoContent: {\n type: Boolean,\n default: false,\n },\n /** Debounce time in milliseconds to search and close the empathize when has no-content. */\n searchAndCloseDebounceInMs: {\n type: Number,\n default: 1000,\n },\n },\n setup(props) {\n const $x = use$x()\n\n const empathizeRef = ref<HTMLDivElement | null>(null)\n const isOpen = ref(false)\n const isOpenAndHasContent = computed(() => isOpen.value && props.hasContent)\n\n /** Emit 'EmpathizeOpened' or 'EmpathizeClosed' event when computed changes. */\n watch(isOpenAndHasContent, () => {\n const empathizeEvent = isOpenAndHasContent.value ? 'EmpathizeOpened' : 'EmpathizeClosed'\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value })\n })\n\n /** Debounce function to change the state `isOpen` to the new value. */\n const changeOpenDebounced = useDebounce((newOpen: boolean) => (isOpen.value = newOpen), 0)\n\n /**\n * Open empathize. This function will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on the Empathize root\n * element.\n */\n function open() {\n changeOpenDebounced(true)\n }\n\n /**\n * Close empathize. This function will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on the Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement()\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpenDebounced(false)\n }\n }\n\n /** Events subscriptions to open and close empathize. */\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open))\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close))\n\n let unwatchSearchBoxQuery: WatchStopHandle = () => {}\n\n /** Debounced function to unwatch the search-box query and also search and close empathize. */\n const searchAndCloseDebounced = useDebounce(async () => {\n unwatchSearchBoxQuery()\n await $x.emit('EmpathizeGotNoContent', $x.query.searchBox)\n close()\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":["NoAnimation"],"mappings":"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"}
package/js/x-modules/search/wiring.js CHANGED
@@ -191,6 +191,10 @@ const searchWiring = createWiring({
191
191
  setSearchQuery,
192
192
  saveOriginWire,
193
193
  },
194
+ EmpathizeGotNoContent: {
195
+ setSearchQuery,
196
+ saveOriginWire,
197
+ },
194
198
  UserAcceptedSpellcheckQuery: {
195
199
  resetSpellcheckQuery,
196
200
  },
package/js/x-modules/search/wiring.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import type { WirePayload } from '../../wiring'\nimport type { InternalSearchRequest } from './types'\nimport { createRawFilters } from '../../utils'\nimport {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload,\n} from '../../wiring'\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search'\n\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/**\n * WireCommit without Payload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveSearchResponse',\n)\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse')\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '')\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags')\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery')\n\n/**\n * Clears the search state `query`.\n *\n * @public\n */\nexport const clearSearchQuery = wireCommit('setQuery', '')\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters')\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort')\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams')\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage')\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams')\n\n/**\n * Resets the search state to reload the current search.\n *\n * @public\n */\nexport const resetStateForReloadWire = wireCommitWithoutPayload('resetStateForReload')\n\n/**\n * Resets the search state `isNoResults`.\n *\n * @public\n */\nexport const resetIsNoResults = wireCommit('setIsNoResults', false)\n\n/**\n * Resets the search state `fromNoResultsWithFilters`.\n *\n * @public\n */\nexport const resetFromNoResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false)\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResultsWire = wireDispatchWithoutPayload(\n 'increasePageAppendingResults',\n)\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false)\n\n/**\n * Resets the {@link SearchGetters.request} parameters when refining request and before the actual\n * request is launched.\n *\n * @public\n */\nexport const resetRequestOnRefinementWire = wireDispatch(\n 'resetRequestOnRefinement',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalSearchRequest,\n }),\n)\n\n/**\n * Resets the search state when the request is changed to null. See the\n * {@link SearchXStoreModule} for details.\n *\n * @public\n */\nexport const resetStateIfNoRequestWire = filterTruthyPayload<InternalSearchRequest | null>(\n wireCommitWithoutPayload('resetState'),\n)\n\n/**\n * Sets the search state `query` with the selectedQueryPreview's query.\n *\n * @public\n */\nexport const setSearchQueryFromPreview = wireCommit(\n 'setQuery',\n ({ eventPayload: { query } }) => query,\n)\n\n/**\n * Sets the search state `params` with the selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setSearchExtraParamsFromPreview = wireCommit(\n 'setParams',\n ({ eventPayload: { extraParams } }) => extraParams,\n)\n\n/**\n * Sets the search state `selectedFilters` with the selectedQueryPreview's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromPreview = wireCommit(\n 'setSelectedFilters',\n ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : []),\n)\n\n/**\n * Sets the search state `selectedFilters` with a selectedHistoryQuery's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromHistoryQuery = wireCommit(\n 'setSelectedFilters',\n ({ eventPayload: { selectedFilters } }) => selectedFilters ?? [],\n)\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams,\n saveOriginWire,\n },\n UserAcceptedAQuery: {\n setSearchQuery,\n saveOriginWire,\n },\n UserAcceptedSpellcheckQuery: {\n resetSpellcheckQuery,\n },\n UserClearedQuery: {\n setSearchQuery,\n cancelFetchAndSaveSearchResponseWire,\n resetFromNoResultsWithFilters,\n resetIsNoResults,\n },\n UserClickedASort: {\n setSort,\n },\n UserPickedARelatedTag: {\n saveOriginWire,\n },\n UserReachedResultsListEnd: {\n increasePageAppendingResultsWire,\n },\n SearchRequestUpdated: {\n resetStateIfNoRequestWire,\n fetchAndSaveSearchResponseWire,\n },\n SearchRequestChanged: {\n resetRequestOnRefinementWire,\n },\n SelectedRelatedTagsChanged: {\n setRelatedTags,\n },\n SelectedFiltersForRequestChanged: {\n setSelectedFilters,\n },\n ResultsChanged: {\n resetAppending,\n },\n ReloadSearchRequested: {\n resetStateForReloadWire,\n },\n SelectedSortProvided: {\n setSort,\n },\n ExtraParamsChanged: {\n setSearchExtraParams,\n },\n UserClickedCloseX: {\n clearSearchQuery,\n },\n UserClickedOutOfMainModal: {\n clearSearchQuery,\n },\n UserAcceptedAQueryPreview: {\n setSearchQueryFromPreview,\n setSearchExtraParamsFromPreview,\n setSearchSelectedFiltersFromPreview,\n saveOriginWire,\n },\n QueryPreviewUnselected: {\n setSearchExtraParams,\n },\n UserSelectedAHistoryQuery: {\n setSearchSelectedFiltersFromHistoryQuery,\n },\n UserSelectedAPage: {\n setSearchPage,\n resetAppending,\n },\n})\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/search/wiring.ts"],"sourcesContent":["import type { WirePayload } from '../../wiring'\nimport type { InternalSearchRequest } from './types'\nimport { createRawFilters } from '../../utils'\nimport {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n namespacedWireDispatchWithoutPayload,\n} from '../../wiring'\n\n/**\n * `search` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'search'\n\n/**\n * WireCommit for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName)\n\n/**\n * WireCommit without Payload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n\n/**\n * WireDispatch for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/**\n * WireDispatchWithoutPayload for {@link SearchXModule}.\n *\n * @internal\n */\nconst wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName)\n\n/**\n * Cancels the {@link SearchActions.fetchAndSaveSearchResponse} request promise.\n *\n * @public\n */\nexport const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(\n 'cancelFetchAndSaveSearchResponse',\n)\n\n/**\n * Sets the search state `origin`.\n *\n * @public\n */\nexport const saveOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/**\n * Requests and stores the search response.\n *\n * @public\n */\nexport const fetchAndSaveSearchResponseWire = wireDispatch('fetchAndSaveSearchResponse')\n\n/**\n * Resets the search state `spellcheckedQuery` to its initial value, an empty string.\n *\n * @public\n */\nexport const resetSpellcheckQuery = wireCommit('setSpellcheck', '')\n\n/**\n * Sets the search state `relatedTags`.\n *\n * @public\n */\nexport const setRelatedTags = wireCommit('setRelatedTags')\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setSearchQuery = wireCommit('setQuery')\n\n/**\n * Clears the search state `query`.\n *\n * @public\n */\nexport const clearSearchQuery = wireCommit('setQuery', '')\n\n/**\n * Sets the search state `selectedFilters`.\n *\n * @public\n */\nexport const setSelectedFilters = wireCommit('setSelectedFilters')\n\n/**\n * Sets the search state `sort`.\n *\n * @public\n */\nexport const setSort = wireCommit('setSort')\n\n/**\n * Sets the search state `query`.\n *\n * @public\n */\nexport const setUrlParams = wireDispatch('setUrlParams')\n\n/**\n * Sets the search state `page`.\n *\n * @public\n */\nexport const setSearchPage = wireCommit('setPage')\n\n/**\n * Sets the search state `params`.\n *\n * @public\n */\nexport const setSearchExtraParams = wireCommit('setParams')\n\n/**\n * Resets the search state to reload the current search.\n *\n * @public\n */\nexport const resetStateForReloadWire = wireCommitWithoutPayload('resetStateForReload')\n\n/**\n * Resets the search state `isNoResults`.\n *\n * @public\n */\nexport const resetIsNoResults = wireCommit('setIsNoResults', false)\n\n/**\n * Resets the search state `fromNoResultsWithFilters`.\n *\n * @public\n */\nexport const resetFromNoResultsWithFilters = wireCommit('setFromNoResultsWithFilters', false)\n\n/**\n * Increases the current search state `page` by one.\n *\n * @public\n */\nexport const increasePageAppendingResultsWire = wireDispatchWithoutPayload(\n 'increasePageAppendingResults',\n)\n\n/**\n * Resets the search state `isAppendingResults`.\n *\n * @public\n */\nexport const resetAppending = wireCommit('setIsAppendResults', false)\n\n/**\n * Resets the {@link SearchGetters.request} parameters when refining request and before the actual\n * request is launched.\n *\n * @public\n */\nexport const resetRequestOnRefinementWire = wireDispatch(\n 'resetRequestOnRefinement',\n ({ eventPayload: newRequest, metadata: { oldValue } }: WirePayload<InternalSearchRequest>) => ({\n newRequest,\n oldRequest: oldValue as InternalSearchRequest,\n }),\n)\n\n/**\n * Resets the search state when the request is changed to null. See the\n * {@link SearchXStoreModule} for details.\n *\n * @public\n */\nexport const resetStateIfNoRequestWire = filterTruthyPayload<InternalSearchRequest | null>(\n wireCommitWithoutPayload('resetState'),\n)\n\n/**\n * Sets the search state `query` with the selectedQueryPreview's query.\n *\n * @public\n */\nexport const setSearchQueryFromPreview = wireCommit(\n 'setQuery',\n ({ eventPayload: { query } }) => query,\n)\n\n/**\n * Sets the search state `params` with the selectedQueryPreview's extraParams.\n *\n * @public\n */\nexport const setSearchExtraParamsFromPreview = wireCommit(\n 'setParams',\n ({ eventPayload: { extraParams } }) => extraParams,\n)\n\n/**\n * Sets the search state `selectedFilters` with the selectedQueryPreview's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromPreview = wireCommit(\n 'setSelectedFilters',\n ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : []),\n)\n\n/**\n * Sets the search state `selectedFilters` with a selectedHistoryQuery's filters.\n *\n * @public\n */\nexport const setSearchSelectedFiltersFromHistoryQuery = wireCommit(\n 'setSelectedFilters',\n ({ eventPayload: { selectedFilters } }) => selectedFilters ?? [],\n)\n\n/**\n * Search wiring.\n *\n * @internal\n */\nexport const searchWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParams,\n saveOriginWire,\n },\n UserAcceptedAQuery: {\n setSearchQuery,\n saveOriginWire,\n },\n EmpathizeGotNoContent: {\n setSearchQuery,\n saveOriginWire,\n },\n UserAcceptedSpellcheckQuery: {\n resetSpellcheckQuery,\n },\n UserClearedQuery: {\n setSearchQuery,\n cancelFetchAndSaveSearchResponseWire,\n resetFromNoResultsWithFilters,\n resetIsNoResults,\n },\n UserClickedASort: {\n setSort,\n },\n UserPickedARelatedTag: {\n saveOriginWire,\n },\n UserReachedResultsListEnd: {\n increasePageAppendingResultsWire,\n },\n SearchRequestUpdated: {\n resetStateIfNoRequestWire,\n fetchAndSaveSearchResponseWire,\n },\n SearchRequestChanged: {\n resetRequestOnRefinementWire,\n },\n SelectedRelatedTagsChanged: {\n setRelatedTags,\n },\n SelectedFiltersForRequestChanged: {\n setSelectedFilters,\n },\n ResultsChanged: {\n resetAppending,\n },\n ReloadSearchRequested: {\n resetStateForReloadWire,\n },\n SelectedSortProvided: {\n setSort,\n },\n ExtraParamsChanged: {\n setSearchExtraParams,\n },\n UserClickedCloseX: {\n clearSearchQuery,\n },\n UserClickedOutOfMainModal: {\n clearSearchQuery,\n },\n UserAcceptedAQueryPreview: {\n setSearchQueryFromPreview,\n setSearchExtraParamsFromPreview,\n setSearchSelectedFiltersFromPreview,\n saveOriginWire,\n },\n QueryPreviewUnselected: {\n setSearchExtraParams,\n },\n UserSelectedAHistoryQuery: {\n setSearchSelectedFiltersFromHistoryQuery,\n },\n UserSelectedAPage: {\n setSearchPage,\n resetAppending,\n },\n})\n"],"names":[],"mappings":";;;;;;AAYA;;;;AAIG;AACH,MAAM,UAAU,GAAG,QAAQ,CAAA;AAE3B;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAA;AAEnD;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC,CAAA;AAE/E;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAA;AAEvD;;;;AAIG;AACH,MAAM,0BAA0B,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAA;AAEnF;;;;AAIG;MACU,oCAAoC,GAAG,0BAA0B,CAC5E,kCAAkC,EACnC;AAED;;;;AAIG;AACU,MAAA,cAAc,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAC;AAEpF;;;;AAIG;MACU,8BAA8B,GAAG,YAAY,CAAC,4BAA4B,EAAC;AAExF;;;;AAIG;AACU,MAAA,oBAAoB,GAAG,UAAU,CAAC,eAAe,EAAE,EAAE,EAAC;AAEnE;;;;AAIG;MACU,cAAc,GAAG,UAAU,CAAC,gBAAgB,EAAC;AAE1D;;;;AAIG;MACU,cAAc,GAAG,UAAU,CAAC,UAAU,EAAC;AAEpD;;;;AAIG;AACU,MAAA,gBAAgB,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAC;AAE1D;;;;AAIG;MACU,kBAAkB,GAAG,UAAU,CAAC,oBAAoB,EAAC;AAElE;;;;AAIG;MACU,OAAO,GAAG,UAAU,CAAC,SAAS,EAAC;AAE5C;;;;AAIG;MACU,YAAY,GAAG,YAAY,CAAC,cAAc,EAAC;AAExD;;;;AAIG;MACU,aAAa,GAAG,UAAU,CAAC,SAAS,EAAC;AAElD;;;;AAIG;MACU,oBAAoB,GAAG,UAAU,CAAC,WAAW,EAAC;AAE3D;;;;AAIG;MACU,uBAAuB,GAAG,wBAAwB,CAAC,qBAAqB,EAAC;AAEtF;;;;AAIG;AACU,MAAA,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,EAAC;AAEnE;;;;AAIG;AACU,MAAA,6BAA6B,GAAG,UAAU,CAAC,6BAA6B,EAAE,KAAK,EAAC;AAE7F;;;;AAIG;MACU,gCAAgC,GAAG,0BAA0B,CACxE,8BAA8B,EAC/B;AAED;;;;AAIG;AACU,MAAA,cAAc,GAAG,UAAU,CAAC,oBAAoB,EAAE,KAAK,EAAC;AAErE;;;;;AAKG;MACU,4BAA4B,GAAG,YAAY,CACtD,0BAA0B,EAC1B,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAsC,MAAM;IAC7F,UAAU;AACV,IAAA,UAAU,EAAE,QAAiC;AAC9C,CAAA,CAAC,EACH;AAED;;;;;AAKG;AACU,MAAA,yBAAyB,GAAG,mBAAmB,CAC1D,wBAAwB,CAAC,YAAY,CAAC,EACvC;AAED;;;;AAIG;MACU,yBAAyB,GAAG,UAAU,CACjD,UAAU,EACV,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,EACvC;AAED;;;;AAIG;MACU,+BAA+B,GAAG,UAAU,CACvD,WAAW,EACX,CAAC,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,EAAE,KAAK,WAAW,EACnD;AAED;;;;AAIG;AACI,MAAM,mCAAmC,GAAG,UAAU,CAC3D,oBAAoB,EACpB,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAC9E;AAED;;;;AAIG;MACU,wCAAwC,GAAG,UAAU,CAChE,oBAAoB,EACpB,CAAC,EAAE,YAAY,EAAE,EAAE,eAAe,EAAE,EAAE,KAAK,eAAe,IAAI,EAAE,EACjE;AAED;;;;AAIG;AACI,MAAM,YAAY,GAAG,YAAY,CAAC;AACvC,IAAA,mBAAmB,EAAE;QACnB,YAAY;QACZ,cAAc;AACf,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,cAAc;QACd,cAAc;AACf,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,cAAc;QACd,cAAc;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,oBAAoB;AACrB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,cAAc;QACd,oCAAoC;QACpC,6BAA6B;QAC7B,gBAAgB;AACjB,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,OAAO;AACR,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,cAAc;AACf,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,gCAAgC;AACjC,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,yBAAyB;QACzB,8BAA8B;AAC/B,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,4BAA4B;AAC7B,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,cAAc;AACf,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,kBAAkB;AACnB,KAAA;AACD,IAAA,cAAc,EAAE;QACd,cAAc;AACf,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,uBAAuB;AACxB,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,OAAO;AACR,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,oBAAoB;AACrB,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,gBAAgB;AACjB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,gBAAgB;AACjB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,yBAAyB;QACzB,+BAA+B;QAC/B,mCAAmC;QACnC,cAAc;AACf,KAAA;AACD,IAAA,sBAAsB,EAAE;QACtB,oBAAoB;AACrB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,wCAAwC;AACzC,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,aAAa;QACb,cAAc;AACf,KAAA;AACF,CAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.155",
3
+ "version": "6.0.0-alpha.157",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -142,5 +142,5 @@
142
142
  "access": "public",
143
143
  "directory": "dist"
144
144
  },
145
- "gitHead": "992e8f67f2cf167fcc450f54aff7fec7f65bbd95"
145
+ "gitHead": "6bcffcec74b0e37c492cbca5eb726c41a01caa43"
146
146
  }
package/report/x-components.api.json CHANGED
@@ -1573,7 +1573,25 @@
1573
1573
  },
1574
1574
  {
1575
1575
  "kind": "Content",
1576
- "text": "<string>;\n };\n}, {\n buttonText: import(\"vue\")."
1576
+ "text": "<string>;\n };\n}, {\n aiOverviewRef: import(\"vue\")."
1577
+ },
1578
+ {
1579
+ "kind": "Reference",
1580
+ "text": "Ref",
1581
+ "canonicalReference": "@vue/reactivity!Ref:interface"
1582
+ },
1583
+ {
1584
+ "kind": "Content",
1585
+ "text": "<"
1586
+ },
1587
+ {
1588
+ "kind": "Reference",
1589
+ "text": "HTMLDivElement",
1590
+ "canonicalReference": "!HTMLDivElement:interface"
1591
+ },
1592
+ {
1593
+ "kind": "Content",
1594
+ "text": " | null>;\n buttonText: import(\"vue\")."
1577
1595
  },
1578
1596
  {
1579
1597
  "kind": "Reference",
@@ -1825,7 +1843,7 @@
1825
1843
  "name": "AiOverview",
1826
1844
  "variableTypeTokenRange": {
1827
1845
  "startIndex": 1,
1828
- "endIndex": 72
1846
+ "endIndex": 76
1829
1847
  }
1830
1848
  },
1831
1849
  {
@@ -19625,6 +19643,33 @@
19625
19643
  "endIndex": 2
19626
19644
  }
19627
19645
  },
19646
+ {
19647
+ "kind": "PropertySignature",
19648
+ "canonicalReference": "@empathyco/x-components!EmpathizeXEvents#EmpathizeGotNoContent:member",
19649
+ "docComment": "/**\n * The empathize reached a state with no content (empty). Payload: The search box query at the time of the event.\n */\n",
19650
+ "excerptTokens": [
19651
+ {
19652
+ "kind": "Content",
19653
+ "text": "EmpathizeGotNoContent: "
19654
+ },
19655
+ {
19656
+ "kind": "Content",
19657
+ "text": "string"
19658
+ },
19659
+ {
19660
+ "kind": "Content",
19661
+ "text": ";"
19662
+ }
19663
+ ],
19664
+ "isReadonly": false,
19665
+ "isOptional": false,
19666
+ "releaseTag": "Public",
19667
+ "name": "EmpathizeGotNoContent",
19668
+ "propertyTypeTokenRange": {
19669
+ "startIndex": 1,
19670
+ "endIndex": 2
19671
+ }
19672
+ },
19628
19673
  {
19629
19674
  "kind": "PropertySignature",
19630
19675
  "canonicalReference": "@empathyco/x-components!EmpathizeXEvents#EmpathizeOpened:member",
@@ -29390,7 +29435,7 @@
29390
29435
  },
29391
29436
  {
29392
29437
  "kind": "Content",
29393
- "text": " | undefined;\n DeviceProvided?: string | null | undefined;\n EmpathizeClosed?: void | undefined;\n EmpathizeOpened?: void | undefined;\n UserClosedEmpathize?: void | undefined;\n UserChangedExtraParams?: "
29438
+ "text": " | undefined;\n DeviceProvided?: string | null | undefined;\n EmpathizeClosed?: void | undefined;\n EmpathizeOpened?: void | undefined;\n UserClosedEmpathize?: void | undefined;\n EmpathizeGotNoContent?: string | undefined;\n UserChangedExtraParams?: "
29394
29439
  },
29395
29440
  {
29396
29441
  "kind": "Reference",
@@ -65064,7 +65109,7 @@
65064
65109
  },
65065
65110
  {
65066
65111
  "kind": "Content",
65067
- "text": " | undefined;\n DeviceProvided?: string | null | undefined;\n EmpathizeClosed?: void | undefined;\n EmpathizeOpened?: void | undefined;\n UserClosedEmpathize?: void | undefined;\n UserChangedExtraParams?: "
65112
+ "text": " | undefined;\n DeviceProvided?: string | null | undefined;\n EmpathizeClosed?: void | undefined;\n EmpathizeOpened?: void | undefined;\n UserClosedEmpathize?: void | undefined;\n EmpathizeGotNoContent?: string | undefined;\n UserChangedExtraParams?: "
65068
65113
  },
65069
65114
  {
65070
65115
  "kind": "Reference",
@@ -67168,6 +67213,15 @@
67168
67213
  "text": "WireMetadata",
67169
67214
  "canonicalReference": "@empathyco/x-components!WireMetadata:interface"
67170
67215
  },
67216
+ {
67217
+ "kind": "Content",
67218
+ "text": ") => unknown;\n EmpathizeGotNoContent: (payload: string, metadata: "
67219
+ },
67220
+ {
67221
+ "kind": "Reference",
67222
+ "text": "WireMetadata",
67223
+ "canonicalReference": "@empathyco/x-components!WireMetadata:interface"
67224
+ },
67171
67225
  {
67172
67226
  "kind": "Content",
67173
67227
  "text": ") => unknown;\n UserChangedExtraParams: (payload: import(\"@empathyco/x-utils\")."
@@ -69051,7 +69105,7 @@
69051
69105
  "name": "SnippetCallbacks",
69052
69106
  "variableTypeTokenRange": {
69053
69107
  "startIndex": 1,
69054
- "endIndex": 520
69108
+ "endIndex": 522
69055
69109
  }
69056
69110
  },
69057
69111
  {