npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.214 → 6.0.0-alpha.216 - Mend

@empathyco/x-components 6.0.0-alpha.214 → 6.0.0-alpha.216

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 (53) hide show

package/js/components/result/base-result-image.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-result-image.vue2.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <div\n class=\"x-result-picture x-picture\"\n data-test=\"result-picture\"\n @mouseenter.once=\"userHasHoveredImage = true\"\n @mouseenter=\"isHovering = true\"\n @mouseleave=\"isHovering = false\"\n >\n <img\n v-if=\"shouldLoadNextImage\"\n loading=\"lazy\"\n :src=\"pendingImages[0]\"\n :style=\"loaderStyles\"\n class=\"x-picture-image\"\n data-test=\"result-picture-loader\"\n alt=\"\"\n role=\"presentation\"\n @load=\"flagImageLoaded\"\n @error=\"flagImageAsFailed\"\n />\n <component :is=\"animation\" class=\"x-picture-image\" :appear=\"false\">\n <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n <img\n v-else\n :key=\"imageSrc\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-result-picture-image\"\n data-test=\"result-picture-image\"\n />\n </component>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType, Ref, StyleValue } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\n\n/*\n Component to be reused that renders an `<img>`.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseResultImage',\n props: {\n /* (Required) The {@link @empathyco/x-types#Result} information. /\n result: {\n type: Object as PropType<Result>,\n required: true,\n },\n /\n Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n /\n loadAnimation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /* Animation to use when switching between the loaded image and the hover image. /\n hoverAnimation: {\n type: AnimationProp,\n },\n /\n Indicates if the next valid image should be displayed on hover.\n \n @public\n /\n showNextImageOnHover: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n /\n Copy of the images of the result.\n \n It is used as a queue of images to load, once an image loads/fails to load, it is removed\n * from this array.\n \n @internal\n /\n const pendingImages: Ref<string[]> = ref([])\n\n /\n Contains the images that have been loaded successfully.\n \n @internal\n /\n const loadedImages: Ref<string[]> = ref([])\n\n /\n Indicates if the user is hovering the image.\n \n @internal\n /\n const isHovering = ref(false)\n\n /\n Indicates if the user has hovered the image.\n \n @internal\n /\n const userHasHoveredImage = ref(false)\n\n /\n Styles to use inline in the image loader, to prevent override from CSS\n \n @internal\n /\n const loaderStyles: StyleValue = {\n // csstype issue: https://github.com/frenic/csstype/issues/160\n position: 'absolute !important' as 'absolute',\n top: '0 !important' as '0',\n left: '0 !important' as '0',\n width: '100% !important' as '100%',\n height: '100% !important' as '100%',\n pointerEvents: 'none !important' as 'none',\n visibility: 'hidden !important' as 'hidden',\n }\n\n /\n Initializes images state and resets when the result's images change.\n \n @internal\n /\n watch(\n () => props.result.images,\n () => {\n pendingImages.value = [...(props.result.images ?? [])]\n loadedImages.value = pendingImages.value.filter(image => loadedImages.value.includes(image))\n },\n { immediate: true },\n )\n\n /\n Animation to be used.\n \n @returns The animation to be used, taking into account if the user has hovered the image.\n \n @internal\n /\n const animation = computed(() => {\n return userHasHoveredImage.value\n ? (props.hoverAnimation ?? props.loadAnimation)\n : props.loadAnimation\n })\n\n /\n Gets the src from the result image.\n \n @returns The result image src.\n \n @internal\n /\n const imageSrc = computed(() => {\n return loadedImages.value[\n !props.showNextImageOnHover \|\| !isHovering.value ? 0 : loadedImages.value.length - 1\n ]\n })\n\n /\n Indicates if the loader should try to load the next image.\n \n @returns True if it should try to load the next image.\n \n @internal\n /\n const shouldLoadNextImage = computed(() => {\n const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage.value ? 2 : 1\n return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad\n })\n\n /\n Sets an image as failed.\n \n @internal\n /\n const flagImageAsFailed = () => {\n pendingImages.value.shift()\n }\n\n /\n Sets an image as loaded.\n \n @internal\n */\n const flagImageLoaded = () => {\n const image = pendingImages.value.shift()\n if (image) {\n loadedImages.value.push(image)\n }\n }\n\n return {\n pendingImages,\n loadedImages,\n isHovering,\n userHasHoveredImage,\n loaderStyles,\n animation,\n imageSrc,\n shouldLoadNextImage,\n flagImageAsFailed,\n flagImageLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-picture {\n position: relative;\n min-width: 1px;\n min-height: 1px;\n}\n\n.x-result-picture-image {\n max-width: 100%;\n max-height: 100%;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<template>\n <BaseResultImage :result=\"result\" />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg'],\n}\n</script>\n```\n\n### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<template>\n <BaseResultImage :result=\"result\" showNextImageOnHover />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],\n}\n</script>\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<template>\n <BaseResultImage :result=\"result\">\n <template #placeholder>\n <img alt=\"Placeholder image\" src=\"./placeholder-image.svg\" />\n </template>\n <template #fallback>\n <img alt=\"Fallback image\" src=\"./fallback-image.svg\" />\n </template>\n </BaseResultImage>\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg'],\n}\n</script>\n```\n\n### Customizing the animations\n\nTwo animations can be used in this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n <BaseResultImage\n :result=\"result\"\n :loadAnimation=\"loadAnimation\"\n :hoverAnimation=\"hoverAnimation\"\n showNextImageOnHover\n />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nimport { CrossFade, CollapseHeight } from '@empathyco/x-components/animations'\nconst loadAnimation = CrossFade\nconst hoverAnimation = CollapseHeight\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}
1	+ {"version":3,"file":"base-result-image.vue2.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <!-- This is a div because using a picture causes the onload event of the image to fire twice. -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <div\n class=\"x-result-picture x-picture\"\n data-test=\"result-picture\"\n @mouseenter.once=\"userHasHoveredImage = true\"\n @mouseenter=\"isHovering = true\"\n @mouseleave=\"isHovering = false\"\n >\n <img\n v-if=\"shouldLoadNextImage\"\n loading=\"lazy\"\n :src=\"pendingImages[0]\"\n :style=\"loaderStyles\"\n class=\"x-picture-image\"\n data-test=\"result-picture-loader\"\n alt=\"\"\n role=\"presentation\"\n @load=\"flagImageLoaded\"\n @error=\"flagImageAsFailed\"\n />\n <component :is=\"animation\" class=\"x-picture-image\" :appear=\"false\">\n <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n <slot v-if=\"!loadedImages.length && !pendingImages.length\" name=\"fallback\" />\n\n <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n <slot v-else-if=\"!loadedImages.length\" name=\"placeholder\" />\n\n <img\n v-else\n :key=\"imageSrc\"\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-result-picture-image\"\n data-test=\"result-picture-image\"\n />\n </component>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropType, Ref, StyleValue } from 'vue'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { NoAnimation } from '../animations'\n\n/*\n Component to be reused that renders an `<img>`.\n \n @public\n /\nexport default defineComponent({\n name: 'BaseResultImage',\n props: {\n /* (Required) The {@link @empathyco/x-types#Result} information. /\n result: {\n type: Object as PropType<Result>,\n required: true,\n },\n /\n Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n /\n loadAnimation: {\n type: AnimationProp,\n default: () => NoAnimation,\n },\n /* Animation to use when switching between the loaded image and the hover image. /\n hoverAnimation: {\n type: AnimationProp,\n },\n /\n Indicates if the next valid image should be displayed on hover.\n \n @public\n /\n showNextImageOnHover: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n /\n Copy of the images of the result.\n \n It is used as a queue of images to load, once an image loads/fails to load, it is removed\n * from this array.\n \n @internal\n /\n const pendingImages: Ref<string[]> = ref([])\n\n /\n Contains the images that have been loaded successfully.\n \n @internal\n /\n const loadedImages: Ref<string[]> = ref([])\n\n /\n Indicates if the user is hovering the image.\n \n @internal\n /\n const isHovering = ref(false)\n\n /\n Indicates if the user has hovered the image.\n \n @internal\n /\n const userHasHoveredImage = ref(false)\n\n /\n Styles to use inline in the image loader, to prevent override from CSS\n \n @internal\n /\n const loaderStyles: StyleValue = {\n // csstype issue: https://github.com/frenic/csstype/issues/160\n position: 'absolute !important' as 'absolute',\n top: '0 !important' as '0',\n left: '0 !important' as '0',\n width: '100% !important' as '100%',\n height: '100% !important' as '100%',\n pointerEvents: 'none !important' as 'none',\n visibility: 'hidden !important' as 'hidden',\n }\n\n /\n Initializes images state and resets when the result's images change.\n \n @internal\n /\n watch(\n () => props.result.images,\n () => {\n pendingImages.value = [...(props.result.images ?? [])]\n loadedImages.value = pendingImages.value.filter(image => loadedImages.value.includes(image))\n },\n { immediate: true },\n )\n\n /\n Animation to be used.\n \n @returns The animation to be used, taking into account if the user has hovered the image.\n \n @internal\n /\n const animation = computed(() => {\n return userHasHoveredImage.value\n ? (props.hoverAnimation ?? props.loadAnimation)\n : props.loadAnimation\n })\n\n /\n Gets the src from the result image.\n \n @returns The result image src.\n \n @internal\n /\n const imageSrc = computed(() => {\n return loadedImages.value[\n !props.showNextImageOnHover \|\| !isHovering.value ? 0 : loadedImages.value.length - 1\n ]\n })\n\n /\n Indicates if the loader should try to load the next image.\n \n @returns True if it should try to load the next image.\n \n @internal\n /\n const shouldLoadNextImage = computed(() => {\n const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage.value ? 2 : 1\n return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad\n })\n\n /\n Sets an image as failed.\n \n @internal\n /\n const flagImageAsFailed = () => {\n pendingImages.value.shift()\n }\n\n /\n Sets an image as loaded.\n \n @internal\n */\n const flagImageLoaded = () => {\n const image = pendingImages.value.shift()\n if (image) {\n loadedImages.value.push(image)\n }\n }\n\n return {\n pendingImages,\n loadedImages,\n isHovering,\n userHasHoveredImage,\n loaderStyles,\n animation,\n imageSrc,\n shouldLoadNextImage,\n flagImageAsFailed,\n flagImageLoaded,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-result-picture {\n position: relative;\n min-width: 1px;\n min-height: 1px;\n}\n\n.x-result-picture-image {\n max-width: 100%;\n max-height: 100%;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<template>\n <BaseResultImage :result=\"result\" />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg'],\n}\n</script>\n```\n\n### Showing the next image on hover\n\nIf a result has multiple images, it can show the next one on hover.\n\n```vue\n<template>\n <BaseResultImage :result=\"result\" showNextImageOnHover />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],\n}\n</script>\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<template>\n <BaseResultImage :result=\"result\">\n <template #placeholder>\n <img alt=\"Placeholder image\" src=\"./placeholder-image.svg\" />\n </template>\n <template #fallback>\n <img alt=\"Fallback image\" src=\"./fallback-image.svg\" />\n </template>\n </BaseResultImage>\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg'],\n}\n</script>\n```\n\n### Customizing the animations\n\nTwo animations can be used in this component.\n\nThe `loadAnimation` is used to transition between the placeholder, the fallback and the image.\n\nThe `hoverAnimation` is used to transition between the image and the hover image, if the\n`showNextImageOnHover` prop is `true`.\n\n`hoverAnimation` will default to `loadAnimation` if it is not provided.\n\n```vue\n<template>\n <BaseResultImage\n :result=\"result\"\n :loadAnimation=\"loadAnimation\"\n :hoverAnimation=\"hoverAnimation\"\n showNextImageOnHover\n />\n</template>\n\n<script setup>\nimport { BaseResultImage } from '@empathyco/x-components'\nimport { CrossFade, CollapseHeight } from '@empathyco/x-components/animations'\nconst loadAnimation = CrossFade\nconst hoverAnimation = CollapseHeight\nconst result = {\n name: 'Jacket',\n images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],\n}\n</script>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":"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"}

package/js/index.js CHANGED Viewed

@@ -199,6 +199,7 @@ export { XPriorityBus } from './x-bus/x-bus.js';
 export { BaseXPriorityQueue, BaseXPriorityQueueNode } from './x-bus/x-priority-queue/x-priority-queue.js';
 export { BaseXAPI } from './x-installer/api/base-api.js';
 export { XInstaller } from './x-installer/x-installer/x-installer.js';
+export { default as AiCarousel } from './x-modules/ai/components/ai-carousel.vue.js';
 export { default as AiOverview } from './x-modules/ai/components/ai-overview.vue.js';
 export { fetchAndSaveAiSuggestionsSearch } from './x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.js';
 export { fetchAndSaveAiSuggestions } from './x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.js';

package/js/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/ai/components/ai-carousel.vue.js ADDED Viewed

@@ -0,0 +1,150 @@
+import _sfc_main from './ai-carousel.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList } from 'vue';
+import './ai-carousel.vue3.js';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+const _hoisted_1 = {
+  key: 0,
+  class: "x-ai-carousel"
+};
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = { class: "x-flex x-gap-8" };
+const _hoisted_4 = { class: "x-ai-carousel-suggestion-results" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_AIStarIcon = resolveComponent("AIStarIcon");
+  const _component_ChangeHeight = resolveComponent("ChangeHeight");
+  const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  const _component_CollapseHeight = resolveComponent("CollapseHeight");
+  return openBlock(), createBlock(_component_CollapseHeight, null, {
+    default: withCtx(() => [
+      _ctx.suggestionsSearch.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_DisplayEmitter, {
+          payload: _ctx.tagging?.toolingDisplay ?? _ctx.emptyTaggingRequest,
+          "event-metadata": {
+            feature: "ai_carousel",
+            displayOriginalQuery: _ctx.query || "ai-carousel-without-query",
+            replaceable: false
+          },
+          "data-test": "ai-carousel-display-emitter"
+        }, {
+          default: withCtx(() => [
+            createElementVNode(
+              "span",
+              {
+                class: normalizeClass(["x-ai-carousel-title", { "x-ai-carousel-title--expanded": _ctx.titleExpanded }]),
+                "data-test": "ai-carousel-title",
+                onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleTitleExpansion && _ctx.toggleTitleExpansion(...args))
+              },
+              [
+                createVNode(_component_AIStarIcon, { class: "x-ai-carousel-title-icon" }),
+                createVNode(_component_ChangeHeight, null, {
+                  default: withCtx(() => [
+                    createElementVNode(
+                      "span",
+                      {
+                        ref: "titleRef",
+                        class: normalizeClass(["x-ai-carousel-title-text", { "x-ai-carousel-title-text--expanded": _ctx.titleExpanded }])
+                      },
+                      toDisplayString(_ctx.title),
+                      3
+                      /* TEXT, CLASS */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }),
+                _ctx.isTitleOverflowing ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  class: "x-ai-carousel-title-button",
+                  "data-test": "ai-carousel-title-button",
+                  "aria-label": _ctx.titleExpanded ? "Collapse" : "Expand"
+                }, [
+                  createVNode(_component_ChevronDownIcon, {
+                    class: normalizeClass(["x-ai-carousel-title-button-icon", { "x-ai-carousel-title-button-icon--expanded": _ctx.titleExpanded }])
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_2)) : createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["payload", "event-metadata"]),
+        renderSlot(_ctx.$slots, "sliding-panel", {
+          suggestions: _ctx.suggestionsSearch,
+          tagging: _ctx.tagging
+        }, () => [
+          createVNode(_component_SlidingPanel, {
+            class: normalizeClass(_ctx.slidingPanelClasses),
+            "scroll-container-class": _ctx.slidingPanelContainerClasses,
+            "button-class": _ctx.slidingPanelButtonsClasses,
+            "reset-on-content-change": false
+          }, {
+            "sliding-panel-addons": withCtx(({ arrivedState }) => [
+              renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
+            ]),
+            "sliding-panel-left-button": withCtx(() => [
+              renderSlot(_ctx.$slots, "sliding-panels-left-button")
+            ]),
+            "sliding-panel-right-button": withCtx(() => [
+              renderSlot(_ctx.$slots, "sliding-panels-right-button")
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("ul", _hoisted_4, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(_ctx.suggestionsSearch, (suggestion) => {
+                      return openBlock(), createBlock(_component_DisplayClickProvider, {
+                        key: suggestion.query,
+                        "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayClick,
+                        "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart,
+                        "result-feature": "ai_carousel"
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(suggestion.results, (result) => {
+                              return openBlock(), createElementBlock("li", {
+                                key: result.id,
+                                "data-test": "ai-carousel-suggestion-result"
+                              }, [
+                                renderSlot(_ctx.$slots, "result", { result })
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ])
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["class", "scroll-container-class", "button-class"])
+        ]),
+        renderSlot(_ctx.$slots, "extra-content"),
+        renderSlot(_ctx.$slots, "cta-button")
+      ])) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var aiCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { aiCarousel as default };
+//# sourceMappingURL=ai-carousel.vue.js.map

package/js/x-modules/ai/components/ai-carousel.vue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ai-carousel.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query || 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\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 <div class=\"x-flex x-gap-8\">\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n \n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </div>\n </SlidingPanel>\n </slot>\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n ChangeHeight,\n DisplayClickProvider,\n DisplayEmitter,\n CollapseHeight,\n AIStarIcon,\n ChevronDownIcon,\n SlidingPanel,\n },\n props: {\n /* The title text displayed */\n title: {\n type: String,\n },\n /* The classes added to the sliding panel. */\n slidingPanelClasses: {\n type: String,\n },\n /* The classes added to the sliding panel container. */\n slidingPanelContainerClasses: {\n type: String,\n },\n /* The classes added to the sliding panel buttons. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement | null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /**\n * Checks if the title is overflowing and updates the state.\n */\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /**\n * Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isNoResults,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createCommentVNode"],"mappings":"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"}

package/js/x-modules/ai/components/ai-carousel.vue2.js ADDED Viewed

@@ -0,0 +1,199 @@
+import { useResizeObserver } from '@vueuse/core';
+import { defineComponent, ref, computed, watch } from 'vue';
+import '../../../components/animations/animate-clip-path/animate-clip-path.style.css.js';
+import '../../../components/animations/animate-scale/animate-scale.style.css.js';
+import '../../../components/animations/animate-translate/animate-translate.style.css.js';
+import '../../../components/animations/animate-width.vue2.js';
+import '../../../components/animations/animate-width.vue3.js';
+import ChangeHeight from '../../../components/animations/change-height.vue.js';
+import CollapseHeight from '../../../components/animations/collapse-height.vue.js';
+import '../../../components/animations/collapse-width.vue2.js';
+import '../../../components/animations/collapse-width.vue3.js';
+import '../../../components/animations/cross-fade.vue2.js';
+import '../../../components/animations/cross-fade.vue3.js';
+import '../../../components/animations/fade-and-slide.vue2.js';
+import '../../../components/animations/fade-and-slide.vue3.js';
+import '../../../components/animations/fade.vue2.js';
+import '../../../components/animations/fade.vue3.js';
+import '../../../components/animations/no-animation.vue.js';
+import '../../../components/animations/staggered-fade-and-slide.vue2.js';
+import '../../../components/animations/staggered-fade-and-slide.vue3.js';
+import '../../../components/auto-progress-bar.vue2.js';
+import '../../../components/auto-progress-bar.vue3.js';
+import '../../../components/base-dropdown.vue2.js';
+import '../../../components/base-dropdown.vue3.js';
+import '../../../components/base-event-button.vue2.js';
+import '../../../components/base-grid.vue2.js';
+import '../../../components/base-grid.vue3.js';
+import '../../../components/base-keyboard-navigation.vue2.js';
+import '../../../components/base-rating.vue2.js';
+import '../../../components/base-rating.vue3.js';
+import '../../../components/base-slider.vue2.js';
+import '../../../components/base-slider.vue3.js';
+import '../../../components/base-switch.vue2.js';
+import '../../../components/base-switch.vue3.js';
+import '../../../components/base-teleport.vue2.js';
+import '../../../components/base-variable-column-grid.vue2.js';
+import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
+import '../../../components/column-picker/base-column-picker-list.vue2.js';
+import '../../../components/currency/base-currency.vue2.js';
+import _sfc_main$2 from '../../../components/display-click-provider.vue.js';
+import _sfc_main$1 from '../../../components/display-emitter.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
+import '../../../components/global-x-bus.vue.js';
+import '../../../components/highlight.vue2.js';
+import AIStarIcon from '../../../components/icons/ai-star.vue.js';
+import ChevronDownIcon from '../../../components/icons/chevron-down.vue.js';
+import '../../../components/items-list.vue2.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue2.js';
+import '../../../components/layouts/fixed-header-and-asides-layout.vue3.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue2.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue3.js';
+import '../../../components/layouts/multi-column-max-width-layout.vue4.js';
+import '../../../components/layouts/single-column-layout.vue2.js';
+import '../../../components/layouts/single-column-layout.vue3.js';
+import '../../../components/location-provider.vue.js';
+import '../../../components/modals/base-events-modal-close.vue2.js';
+import '../../../components/modals/base-events-modal-open.vue2.js';
+import '../../../components/modals/base-events-modal.vue2.js';
+import '../../../components/modals/base-id-modal-close.vue2.js';
+import '../../../components/modals/base-id-modal-open.vue2.js';
+import '../../../components/modals/base-id-modal.vue2.js';
+import '../../../components/modals/base-modal.vue2.js';
+import '../../../components/modals/base-modal.vue3.js';
+import '../../../components/modals/close-main-modal.vue2.js';
+import '../../../components/modals/main-modal.vue2.js';
+import '../../../components/modals/open-main-modal.vue2.js';
+import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
+import '../../../components/page-selector.vue2.js';
+import '../../../components/page-selector.vue3.js';
+import '../../../components/panels/base-header-toggle-panel.vue2.js';
+import '../../../components/panels/base-header-toggle-panel.vue3.js';
+import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
+import '../../../components/panels/base-id-toggle-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue2.js';
+import '../../../components/panels/base-tabs-panel.vue3.js';
+import '../../../components/panels/base-toggle-panel.vue2.js';
+import '../../../components/result/base-result-add-to-cart.vue2.js';
+import '../../../components/result/base-result-current-price.vue2.js';
+import '../../../components/result/base-result-image.vue2.js';
+import '../../../components/result/base-result-image.vue3.js';
+import '../../../components/result/base-result-link.vue2.js';
+import '../../../components/result/base-result-link.vue3.js';
+import '../../../components/result/base-result-previous-price.vue2.js';
+import '../../../components/result/base-result-rating.vue2.js';
+import '../../../components/result/base-result-rating.vue3.js';
+import '../../../components/result/result-variant-selector.vue2.js';
+import '../../../components/result/result-variant-selector.vue3.js';
+import '../../../components/result/result-variants-provider.vue.js';
+import '../../../components/scroll/base-scroll.vue2.js';
+import '@empathyco/x-utils';
+import { use$x } from '../../../composables/use-_x.js';
+import SlidingPanel from '../../../components/sliding-panel.vue.js';
+import '../../../components/snippet-callbacks.vue2.js';
+import '../../../components/suggestions/base-suggestion.vue2.js';
+import '../../../components/suggestions/base-suggestions.vue2.js';
+import '../../../components/suggestions/base-suggestions.vue3.js';
+import '../../../composables/create-use-device.js';
+import 'vuex';
+import '@vue/devtools-api';
+import '../../../plugins/devtools/timeline.devtools.js';
+import 'rxjs/operators';
+import 'rxjs';
+import '../../../plugins/devtools/colors.utils.js';
+import '../../../plugins/x-bus.js';
+import '../../../plugins/x-plugin.js';
+import { useState } from '../../../composables/use-state.js';
+import { aiXModule } from '../x-module.js';
+var _sfc_main = defineComponent({
+    xModule: aiXModule.name,
+    components: {
+        ChangeHeight,
+        DisplayClickProvider: _sfc_main$2,
+        DisplayEmitter: _sfc_main$1,
+        CollapseHeight,
+        AIStarIcon,
+        ChevronDownIcon,
+        SlidingPanel,
+    },
+    props: {
+        /* The title text displayed */
+        title: {
+            type: String,
+        },
+        /* The classes added to the sliding panel. */
+        slidingPanelClasses: {
+            type: String,
+        },
+        /* The classes added to the sliding panel container. */
+        slidingPanelContainerClasses: {
+            type: String,
+        },
+        /* The classes added to the sliding panel buttons. */
+        slidingPanelButtonsClasses: {
+            type: String,
+        },
+    },
+    setup(props) {
+        const $x = use$x();
+        const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai');
+        const emptyTaggingRequest = { url: '', params: {} };
+        const titleRef = ref(null);
+        const titleExpanded = ref(false);
+        const isTitleOverflowing = ref(false);
+        /**
+         * Checks if the title is overflowing and updates the state.
+         */
+        function updateTitleOverflow() {
+            if (titleExpanded.value) {
+                return;
+            }
+            if (titleRef.value) {
+                isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth;
+            }
+        }
+        /**
+         * Toggles the title expanded state if it is overflowing.
+         */
+        function toggleTitleExpansion() {
+            if (isTitleOverflowing.value) {
+                titleExpanded.value = !titleExpanded.value;
+            }
+        }
+        const title = computed(() => {
+            if (!props.title) {
+                const queriesList = new Intl.ListFormat('en', {
+                    style: 'long',
+                    type: 'conjunction',
+                }).format(queries.value.map(({ query }) => query));
+                return `Searching for ${queriesList}`;
+            }
+            return props.title;
+        });
+        watch(queries, () => {
+            if (queries.value.length > 0) {
+                $x.emit('AiSuggestionsSearchRequestUpdated');
+            }
+        });
+        useResizeObserver(titleRef, updateTitleOverflow);
+        return {
+            emptyTaggingRequest,
+            isNoResults,
+            isTitleOverflowing,
+            queries,
+            query,
+            suggestionsSearch,
+            tagging,
+            title,
+            titleExpanded,
+            titleRef,
+            toggleTitleExpansion,
+        };
+    },
+});
+export { _sfc_main as default };
+//# sourceMappingURL=ai-carousel.vue2.js.map

package/js/x-modules/ai/components/ai-carousel.vue2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n <CollapseHeight>\n <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n <DisplayEmitter\n :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n :event-metadata=\"{\n feature: 'ai_carousel',\n displayOriginalQuery: query || 'ai-carousel-without-query',\n replaceable: false,\n }\"\n data-test=\"ai-carousel-display-emitter\"\n >\n <span\n class=\"x-ai-carousel-title\"\n :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n data-test=\"ai-carousel-title\"\n @click=\"toggleTitleExpansion\"\n >\n <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n <ChangeHeight>\n <span\n ref=\"titleRef\"\n class=\"x-ai-carousel-title-text\"\n :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n >\n {{ title }}\n </span>\n </ChangeHeight>\n <button\n v-if=\"isTitleOverflowing\"\n class=\"x-ai-carousel-title-button\"\n data-test=\"ai-carousel-title-button\"\n :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n >\n <ChevronDownIcon\n class=\"x-ai-carousel-title-button-icon\"\n :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n />\n </button>\n </span>\n </DisplayEmitter>\n <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\n <SlidingPanel\n :class=\"slidingPanelClasses\"\n :scroll-container-class=\"slidingPanelContainerClasses\"\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 <div class=\"x-flex x-gap-8\">\n <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayClick\n \"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <li\n v-for=\"result in suggestion.results\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n \n <slot name=\"result\" :result=\"result\" />\n </li>\n </DisplayClickProvider>\n </ul>\n </div>\n </SlidingPanel>\n </slot>\n <slot name=\"extra-content\" />\n <slot name=\"cta-button\" />\n </div>\n </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n ChangeHeight,\n DisplayClickProvider,\n DisplayEmitter,\n CollapseHeight,\n AIStarIcon,\n ChevronDownIcon,\n SlidingPanel,\n },\n props: {\n /* The title text displayed */\n title: {\n type: String,\n },\n /* The classes added to the sliding panel. */\n slidingPanelClasses: {\n type: String,\n },\n /* The classes added to the sliding panel container. */\n slidingPanelContainerClasses: {\n type: String,\n },\n /* The classes added to the sliding panel buttons. */\n slidingPanelButtonsClasses: {\n type: String,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai')\n const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n const titleRef = ref<HTMLElement | null>(null)\n const titleExpanded = ref(false)\n const isTitleOverflowing = ref(false)\n\n /**\n * Checks if the title is overflowing and updates the state.\n */\n function updateTitleOverflow() {\n if (titleExpanded.value) {\n return\n }\n if (titleRef.value) {\n isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n }\n }\n\n /**\n * Toggles the title expanded state if it is overflowing.\n */\n function toggleTitleExpansion() {\n if (isTitleOverflowing.value) {\n titleExpanded.value = !titleExpanded.value\n }\n }\n\n const title = computed(() => {\n if (!props.title) {\n const queriesList = new Intl.ListFormat('en', {\n style: 'long',\n type: 'conjunction',\n }).format(queries.value.map(({ query }) => query))\n return `Searching for ${queriesList}`\n }\n return props.title\n })\n\n watch(queries, () => {\n if (queries.value.length > 0) {\n $x.emit('AiSuggestionsSearchRequestUpdated')\n }\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isNoResults,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n<style lang=\"css\">\n.x-ai-carousel {\n --color: var(--x-ai-carousel-color, #bbc9cf);\n --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n padding: 8px 0;\n position: relative;\n border-radius: 1.5rem;\n background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n display: flex;\n font-size: 12px;\n gap: 8px;\n align-items: flex-start;\n margin: 0 14px 8px;\n cursor: pointer;\n}\n.x-ai-carousel-title-text {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n white-space: normal;\n}\n.x-ai-carousel-title-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n color: var(--color);\n flex-shrink: 0;\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color);\n margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n transform: rotate(180deg);\n}\n.x-ai-carousel-suggestion-results {\n display: flex;\n gap: 1rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,gBAAe,eAAe,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,YAAY;8BACZA,WAAoB;wBACpBC,WAAc;QACd,cAAc;QACd,UAAU;QACV,eAAe;QACf,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,4BAA4B,EAAE;AAC5B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;;AAED,QAAA,0BAA0B,EAAE;AAC1B,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QACjF,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,QAAO,GAAI,GAAG,CAAqB,IAAI,CAAA;AAC7C,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,KAAK,CAAA;AAC/B,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;AAEE;AACF,QAAA,SAAS,mBAAmB,GAAA;AAC1B,YAAA,IAAI,aAAa,CAAC,KAAK,EAAE;gBACvB;YACF;AACA,YAAA,IAAI,QAAQ,CAAC,KAAK,EAAE;AAClB,gBAAA,kBAAkB,CAAC,KAAI,GAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,WAAU;YACnF;QACF;AAEA;;AAEE;AACF,QAAA,SAAS,oBAAoB,GAAA;AAC3B,YAAA,IAAI,kBAAkB,CAAC,KAAK,EAAE;AAC5B,gBAAA,aAAa,CAAC,KAAI,GAAI,CAAC,aAAa,CAAC,KAAI;YAC3C;QACF;AAEA,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAI;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBAChB,MAAM,WAAU,GAAI,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AAC5C,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,aAAa;AACpB,iBAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,CAAA;gBACjD,OAAO,CAAA,cAAA,EAAiB,WAAW,CAAA,CAAC;YACtC;YACA,OAAO,KAAK,CAAC,KAAI;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CAAC,OAAO,EAAE,MAAI;YACjB,IAAI,OAAO,CAAC,KAAK,CAAC,MAAK,GAAI,CAAC,EAAE;AAC5B,gBAAA,EAAE,CAAC,IAAI,CAAC,mCAAmC,CAAA;YAC7C;AACF,QAAA,CAAC,CAAA;AAED,QAAA,iBAAiB,CAAC,QAAQ,EAAE,mBAAmB,CAAA;QAE/C,OAAO;YACL,mBAAmB;YACnB,WAAW;YACX,kBAAkB;YAClB,OAAO;YACP,KAAK;YACL,iBAAiB;YACjB,OAAO;YACP,KAAK;YACL,aAAa;YACb,QAAQ;YACR,oBAAoB;SACtB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/ai/components/ai-carousel.vue3.js ADDED Viewed

@@ -0,0 +1,7 @@
+import injectCss from '../../../../tools/inject-css.js';
+var css = ".x-ai-carousel{--color:var(--x-ai-carousel-color,#bbc9cf);--color-lighter:var(--x-ai-carousel-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;padding:8px 0;position:relative}.x-ai-carousel-title{align-items:flex-start;cursor:pointer;display:flex;font-size:12px;gap:8px;margin:0 14px 8px}.x-ai-carousel-title-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-ai-carousel-title-text--expanded{white-space:normal}.x-ai-carousel-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem;margin-bottom:auto}.x-ai-carousel-title-button{align-items:center;background:none;border:none;color:var(--color);cursor:pointer;display:flex;justify-content:center;margin-bottom:auto;padding:0}.x-ai-carousel-title-button-icon{aspect-ratio:1/1;height:1rem;transition:transform .3s ease}.x-ai-carousel-title-button-icon--expanded{transform:rotate(180deg)}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
+injectCss(css);
+export { css };
+//# sourceMappingURL=ai-carousel.vue3.js.map

package/js/x-modules/ai/components/ai-carousel.vue3.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ai-carousel.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/ai/wiring.js CHANGED Viewed

@@ -21,7 +21,9 @@ const setAiQueryFromPreviewWire = wireCommit('setQuery', ({ eventPayload: { quer
 /** Fetches the AI suggestions streaming response. */
 const fetchAndSaveAiSuggestionsWire = wireDispatch('fetchAndSaveAiSuggestions');
 /** Fetches and save the AI suggestions search response. */
-const fetchAndSaveAiSuggestionsSearchWire = filterTruthyPayload(wireDispatch('fetchAndSaveAiSuggestionsSearch'));
+const fetchAndSaveAiSuggestionsSearchWire = wireDispatch('fetchAndSaveAiSuggestionsSearch', true);
+/** Fetches and save the AI suggestions search response. */
+const fetchAndSaveAiSuggestionsSearchIfExpandedWire = filterTruthyPayload(wireDispatch('fetchAndSaveAiSuggestionsSearch'));
 /** Sets the AI state `relatedTags`.*/
 const setAiRelatedTagsWire = wireCommit('setAiRelatedTags');
 /** Resets the related prompts state. */
@@ -55,10 +57,12 @@ const aiWiring = createWiring({
         resetAiStateWire,
         fetchAndSaveAiSuggestionsWire,
     },
-    // Formerly AiSuggestionsSearchRequestUpdated
-    UserClickedAiOverviewExpandButton: {
+    AiSuggestionsSearchRequestUpdated: {
         fetchAndSaveAiSuggestionsSearchWire,
     },
+    UserClickedAiOverviewExpandButton: {
+        fetchAndSaveAiSuggestionsSearchIfExpandedWire,
+    },
     SelectedRelatedTagsChanged: {
         setAiRelatedTagsWire,
     },

package/js/x-modules/ai/wiring.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/ai/wiring.ts"],"sourcesContent":["import {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n} from '../../wiring'\n\n/** AI XModule name. /\nconst moduleName = 'ai'\n/* WireCommit for AiXModule. /\nconst wireCommit = namespacedWireCommit(moduleName)\n/* WireCommitWithoutPayload for AiXModule. /\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n/* WireDispatch for AiXModule./\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/* Sets the AI state from URL data. /\nconst setUrlParamsWire = wireDispatch('setUrlParams')\n/* Sets the AI state `params`. /\nconst setExtraParamsWire = wireCommit('setParams')\n\n/* Sets the AI state `query`. /\nconst setAiQueryWire = wireCommit('setQuery')\n\n/* Sets the AI state `query` with the selectedQueryPreview's query. /\nconst setAiQueryFromPreviewWire = wireCommit('setQuery', ({ eventPayload: { query } }) => query)\n\n/* Fetches the AI suggestions streaming response. /\nconst fetchAndSaveAiSuggestionsWire = wireDispatch('fetchAndSaveAiSuggestions')\n\n/* Fetches and save the AI suggestions search response. /\nconst fetchAndSaveAiSuggestionsSearchWire = filterTruthyPayload(\n wireDispatch('fetchAndSaveAiSuggestionsSearch'),\n)\n\n/* Sets the AI state `relatedTags`./\nconst setAiRelatedTagsWire = wireCommit('setAiRelatedTags')\n\n/* Resets the related prompts state. /\nconst resetAiStateWire = wireCommitWithoutPayload('resetAiState')\n\n/* Sets the origin for the AI requests. /\nconst saveAiOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/* Sets the AI state `selectedFilters`. /\nconst setSelectedFiltersWire = wireCommit('setSelectedFilters')\n\n/\n Wiring configuration for the {@link AiXModule \| AI module}.\n \n @internal\n */\nexport const aiWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParamsWire,\n },\n ExtraParamsChanged: {\n setExtraParamsWire,\n },\n UserAcceptedAQuery: {\n setAiQueryWire,\n },\n UserAcceptedAQueryPreview: {\n setAiQueryFromPreviewWire,\n },\n UserClearedQuery: {\n setAiQueryWire,\n },\n AiSuggestionsRequestUpdated: {\n resetAiStateWire,\n fetchAndSaveAiSuggestionsWire,\n },\n // ~~Formerly AiSuggestionsSearchRequestUpdated~~\n UserClickedAiOverviewExpandButton: {\n ~~fetchAndSaveAiSuggestionsSearchWire~~,\n },\n SelectedRelatedTagsChanged: {\n setAiRelatedTagsWire,\n },\n SelectedFiltersForRequestChanged: {\n setSelectedFiltersWire,\n },\n AiOverviewMounted: {\n saveAiOriginWire,\n },\n})\n"],"names":[],"mappings":";;;;AAQA;AACA,MAAM,UAAU,GAAG,IAAI;AACvB;AACA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC;AACnD;AACA,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC;AAC/E;AACA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEvD;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,cAAc,CAAC;AACrD;AACA,MAAM,kBAAkB,GAAG,UAAU,CAAC,WAAW,CAAC;AAElD;AACA,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU,CAAC;AAE7C;AACA,MAAM,yBAAyB,GAAG,UAAU,CAAC,UAAU,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CAAC;AAEhG;AACA,MAAM,6BAA6B,GAAG,YAAY,CAAC,2BAA2B,CAAC;AAE/E;AACA,MAAM,mCAAmC,GAAG,mBAAmB,~~CAC7D~~,YAAY,CAAC,iCAAiC,CAAC,CAChD;AAED;AACA,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,CAAC;AAE3D;AACA,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,cAAc,CAAC;AAEjE;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAC;AAE/E;AACA,MAAM,sBAAsB,GAAG,UAAU,CAAC,oBAAoB,CAAC;AAE/D;;;;AAIG;AACI,MAAM,QAAQ,GAAG,YAAY,CAAC;AACnC,IAAA,mBAAmB,EAAE;QACnB,gBAAgB;AACjB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,kBAAkB;AACnB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,cAAc;AACf,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,yBAAyB;AAC1B,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,cAAc;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,gBAAgB;QAChB,6BAA6B;AAC9B,KAAA~~;;AAED~~,IAAA,iCAAiC,EAAE;QACjC,mCAAmC;AACpC,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,oBAAoB;AACrB,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,sBAAsB;AACvB,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,gBAAgB;AACjB,KAAA;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/ai/wiring.ts"],"sourcesContent":["import {\n createWiring,\n filterTruthyPayload,\n namespacedWireCommit,\n namespacedWireCommitWithoutPayload,\n namespacedWireDispatch,\n} from '../../wiring'\n\n/** AI XModule name. /\nconst moduleName = 'ai'\n/* WireCommit for AiXModule. /\nconst wireCommit = namespacedWireCommit(moduleName)\n/* WireCommitWithoutPayload for AiXModule. /\nconst wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)\n/* WireDispatch for AiXModule./\nconst wireDispatch = namespacedWireDispatch(moduleName)\n\n/* Sets the AI state from URL data. /\nconst setUrlParamsWire = wireDispatch('setUrlParams')\n/* Sets the AI state `params`. /\nconst setExtraParamsWire = wireCommit('setParams')\n\n/* Sets the AI state `query`. /\nconst setAiQueryWire = wireCommit('setQuery')\n\n/* Sets the AI state `query` with the selectedQueryPreview's query. /\nconst setAiQueryFromPreviewWire = wireCommit('setQuery', ({ eventPayload: { query } }) => query)\n\n/* Fetches the AI suggestions streaming response. /\nconst fetchAndSaveAiSuggestionsWire = wireDispatch('fetchAndSaveAiSuggestions')\n\n/* Fetches and save the AI suggestions search response. /\nconst fetchAndSaveAiSuggestionsSearchWire = wireDispatch('fetchAndSaveAiSuggestionsSearch', true)\n\n/* Fetches and save the AI suggestions search response. /\nconst fetchAndSaveAiSuggestionsSearchIfExpandedWire = filterTruthyPayload(\n wireDispatch('fetchAndSaveAiSuggestionsSearch'),\n)\n\n/* Sets the AI state `relatedTags`./\nconst setAiRelatedTagsWire = wireCommit('setAiRelatedTags')\n\n/* Resets the related prompts state. /\nconst resetAiStateWire = wireCommitWithoutPayload('resetAiState')\n\n/* Sets the origin for the AI requests. /\nconst saveAiOriginWire = wireDispatch('saveOrigin', ({ metadata }) => metadata)\n\n/* Sets the AI state `selectedFilters`. /\nconst setSelectedFiltersWire = wireCommit('setSelectedFilters')\n\n/\n Wiring configuration for the {@link AiXModule \| AI module}.\n \n @internal\n */\nexport const aiWiring = createWiring({\n ParamsLoadedFromUrl: {\n setUrlParamsWire,\n },\n ExtraParamsChanged: {\n setExtraParamsWire,\n },\n UserAcceptedAQuery: {\n setAiQueryWire,\n },\n UserAcceptedAQueryPreview: {\n setAiQueryFromPreviewWire,\n },\n UserClearedQuery: {\n setAiQueryWire,\n },\n AiSuggestionsRequestUpdated: {\n resetAiStateWire,\n fetchAndSaveAiSuggestionsWire,\n },\n AiSuggestionsSearchRequestUpdated: {\n fetchAndSaveAiSuggestionsSearchWire,\n },\n UserClickedAiOverviewExpandButton: {\n fetchAndSaveAiSuggestionsSearchIfExpandedWire,\n },\n SelectedRelatedTagsChanged: {\n setAiRelatedTagsWire,\n },\n SelectedFiltersForRequestChanged: {\n setSelectedFiltersWire,\n },\n AiOverviewMounted: {\n saveAiOriginWire,\n },\n})\n"],"names":[],"mappings":";;;;AAQA;AACA,MAAM,UAAU,GAAG,IAAI;AACvB;AACA,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC;AACnD;AACA,MAAM,wBAAwB,GAAG,kCAAkC,CAAC,UAAU,CAAC;AAC/E;AACA,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC;AAEvD;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,cAAc,CAAC;AACrD;AACA,MAAM,kBAAkB,GAAG,UAAU,CAAC,WAAW,CAAC;AAElD;AACA,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU,CAAC;AAE7C;AACA,MAAM,yBAAyB,GAAG,UAAU,CAAC,UAAU,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK,CAAC;AAEhG;AACA,MAAM,6BAA6B,GAAG,YAAY,CAAC,2BAA2B,CAAC;AAE/E;AACA,MAAM,mCAAmC,GAAG,YAAY,CAAC,iCAAiC,EAAE,IAAI,CAAC;AAEjG;AACA,MAAM,6CAA6C,GAAG,mBAAmB,CACvE,YAAY,CAAC,iCAAiC,CAAC,CAChD;AAED;AACA,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,CAAC;AAE3D;AACA,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,cAAc,CAAC;AAEjE;AACA,MAAM,gBAAgB,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAC;AAE/E;AACA,MAAM,sBAAsB,GAAG,UAAU,CAAC,oBAAoB,CAAC;AAE/D;;;;AAIG;AACI,MAAM,QAAQ,GAAG,YAAY,CAAC;AACnC,IAAA,mBAAmB,EAAE;QACnB,gBAAgB;AACjB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,kBAAkB;AACnB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,cAAc;AACf,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,yBAAyB;AAC1B,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,cAAc;AACf,KAAA;AACD,IAAA,2BAA2B,EAAE;QAC3B,gBAAgB;QAChB,6BAA6B;AAC9B,KAAA;AACD,IAAA,iCAAiC,EAAE;QACjC,mCAAmC;AACpC,KAAA;AACD,IAAA,iCAAiC,EAAE;QACjC,6CAA6C;AAC9C,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,oBAAoB;AACrB,KAAA;AACD,IAAA,gCAAgC,EAAE;QAChC,sBAAsB;AACvB,KAAA;AACD,IAAA,iBAAiB,EAAE;QACjB,gBAAgB;AACjB,KAAA;AACF,CAAA;;;;"}

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

@@ -5,6 +5,7 @@ import '../../../components/animations/animate-translate/animate-translate.style
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
 import '../../../components/animations/change-height.vue2.js';
+import '../../../components/animations/change-height.vue3.js';
 import '../../../components/animations/collapse-height.vue2.js';
 import '../../../components/animations/collapse-height.vue3.js';
 import '../../../components/animations/collapse-width.vue2.js';