npm - @empathyco/x-components - Versions diffs - 6.1.3 → 6.2.0 - Mend

@empathyco/x-components 6.1.3 → 6.2.0

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

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

@@ -1,5 +1,5 @@
 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 { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
 import './ai-carousel.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
@@ -8,15 +8,26 @@ const _hoisted_1 = {
   class: "x-ai-carousel"
 };
 const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = { class: "x-ai-carousel-suggestion" };
-const _hoisted_4 = { class: "x-ai-carousel-suggestion-results" };
+const _hoisted_3 = {
+  key: 1,
+  class: "x-ai-carousel-suggestions",
+  "data-test": "ai-carousel-suggestions-container"
+};
+const _hoisted_4 = {
+  class: "x-ai-carousel-suggestion",
+  "data-test": "ai-carousel-suggestion"
+};
+const _hoisted_5 = { 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_AiGroupedCarousel = resolveComponent("AiGroupedCarousel");
+  const _component_ArrowRightIcon = resolveComponent("ArrowRightIcon");
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
   const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
   const _component_CollapseHeight = resolveComponent("CollapseHeight");
   return openBlock(), createBlock(_component_CollapseHeight, null, {
     default: withCtx(() => [
@@ -74,68 +85,112 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 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"])
-        ]),
+        _ctx.group ? (openBlock(), createBlock(_component_AiGroupedCarousel, { key: 0 }, {
+          "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")
+          ]),
+          result: withCtx(({ result }) => [
+            renderSlot(_ctx.$slots, "result", { result })
+          ]),
+          _: 3
+          /* FORWARDED */
+        })) : (openBlock(), createElementBlock("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }) => {
+              return openBlock(), createBlock(_component_DisplayEmitter, {
+                key: suggestionQuery,
+                payload: _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplay ?? _ctx.emptyTaggingRequest,
+                "event-metadata": {
+                  feature: "ai_carousel",
+                  displayOriginalQuery: _ctx.query || "ai-carousel-without-query",
+                  replaceable: false
+                },
+                "data-test": "ai-carousel-query-display-emitter"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_component_BaseEventButton, {
+                      class: "x-ai-carousel-suggestion-query-btn",
+                      events: { UserAcceptedAQuery: suggestionQuery }
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(
+                          toDisplayString(suggestionQuery) + " ",
+                          1
+                          /* TEXT */
+                        ),
+                        createVNode(_component_ArrowRightIcon, { class: "x-ai-carousel-suggestion-query-btn-icon" })
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["events"]),
+                    createVNode(_component_DisplayClickProvider, {
+                      "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayClick,
+                      "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart,
+                      "result-feature": "ai_carousel"
+                    }, {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
+                          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("ul", _hoisted_5, [
+                                (openBlock(true), createElementBlock(
+                                  Fragment,
+                                  null,
+                                  renderList(queriesResults, (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, ["class", "scroll-container-class", "button-class"])
+                        ])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"])
+                  ])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["payload", "event-metadata"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          renderSlot(_ctx.$slots, "suggestions-extra-content")
+        ])),
         renderSlot(_ctx.$slots, "extra-content"),
         renderSlot(_ctx.$slots, "cta-button")
       ])) : createCommentVNode("v-if", true)

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

	@@ -1 +1 @@
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-ai-carousel-suggestion\">\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 <!-- @slot (required) result card -->\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, onMounted, 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 onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\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\n.x-ai-carousel-suggestion {\n display: flex;\n gap: 8px;\n}\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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"}
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\n <AiGroupedCarousel v-if=\"group\">\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 <template #result=\"{ result }\">\n <slot name=\"result\" :result=\"result\" />\n </template>\n </AiGroupedCarousel>\n\n <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n <DisplayEmitter\n v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].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-query-display-emitter\"\n >\n <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n <BaseEventButton\n class=\"x-ai-carousel-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\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 <ul class=\"x-ai-carousel-suggestion-results\">\n <li\n v-for=\"result in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n\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, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n AiGroupedCarousel,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: String,\n / Controls whether the carousel should group results or display N carousels per N queries. /\n group: {\n type: Boolean,\n default: true,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, 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 onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n\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\n.x-ai-carousel-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.x-ai-carousel-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 cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\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","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ 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 BaseEventButton from '../../../components/base-event-button.vue.js';
 import '../../../components/base-grid.vue2.js';
 import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
@@ -44,6 +44,7 @@ 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 ArrowRightIcon from '../../../components/icons/arrow-right.vue.js';
 import ChevronDownIcon from '../../../components/icons/chevron-down.vue.js';
 import '../../../components/items-list.vue2.js';
 import '../../../components/location-provider.vue.js';
@@ -96,39 +97,40 @@ import '../../../plugins/x-plugin.js';
 import 'rxjs';
 import { useState } from '../../../composables/use-state.js';
 import { aiXModule } from '../x-module.js';
+import AiGroupedCarousel from './ai-grouped-carousel.vue.js';
 var _sfc_main = defineComponent({
     xModule: aiXModule.name,
     components: {
+        AIStarIcon,
+        AiGroupedCarousel,
+        ArrowRightIcon,
+        BaseEventButton,
         ChangeHeight,
+        ChevronDownIcon,
+        CollapseHeight,
         DisplayClickProvider: _sfc_main$2,
         DisplayEmitter: _sfc_main$1,
-        CollapseHeight,
-        AIStarIcon,
-        ChevronDownIcon,
         SlidingPanel,
     },
     props: {
         /* The title text displayed */
-        title: {
-            type: String,
-        },
+        title: String,
         /* The classes added to the sliding panel. */
-        slidingPanelClasses: {
-            type: String,
-        },
+        slidingPanelClasses: String,
         /* The classes added to the sliding panel container. */
-        slidingPanelContainerClasses: {
-            type: String,
-        },
+        slidingPanelContainerClasses: String,
         /* The classes added to the sliding panel buttons. */
-        slidingPanelButtonsClasses: {
-            type: String,
+        slidingPanelButtonsClasses: String,
+        /* Controls whether the carousel should group results or display N carousels per N queries. */
+        group: {
+            type: Boolean,
+            default: true,
         },
     },
     setup(props) {
         const $x = use$x();
-        const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai');
+        const { query, suggestionsSearch, queries, tagging } = useState('ai');
         const emptyTaggingRequest = { url: '', params: {} };
         const titleRef = ref(null);
         const titleExpanded = ref(false);
@@ -173,7 +175,6 @@ var _sfc_main = defineComponent({
         useResizeObserver(titleRef, updateTitleOverflow);
         return {
             emptyTaggingRequest,
-            isNoResults,
             isTitleOverflowing,
             queries,
             query,

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

	@@ -1 +1 @@
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-ai-carousel-suggestion\">\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 <!-- @slot (required) result card -->\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, onMounted, 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 onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\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\n.x-ai-carousel-suggestion {\n display: flex;\n gap: 8px;\n}\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":"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"}
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\n <AiGroupedCarousel v-if=\"group\">\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 <template #result=\"{ result }\">\n <slot name=\"result\" :result=\"result\" />\n </template>\n </AiGroupedCarousel>\n\n <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n <DisplayEmitter\n v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n :key=\"suggestionQuery\"\n :payload=\"tagging?.searchQueries[suggestionQuery].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-query-display-emitter\"\n >\n <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n <BaseEventButton\n class=\"x-ai-carousel-suggestion-query-btn\"\n :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n >\n {{ suggestionQuery }}\n <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n </BaseEventButton>\n\n <DisplayClickProvider\n :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"\n tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n \"\n result-feature=\"ai_carousel\"\n >\n <slot name=\"sliding-panel\" :results=\"queriesResults\">\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 <ul class=\"x-ai-carousel-suggestion-results\">\n <li\n v-for=\"result in queriesResults\"\n :key=\"result.id\"\n data-test=\"ai-carousel-suggestion-result\"\n >\n <!-- @slot (required) result card -->\n <slot name=\"result\" :result=\"result\" />\n </li>\n </ul>\n </SlidingPanel>\n </slot>\n </DisplayClickProvider>\n </div>\n </DisplayEmitter>\n <slot name=\"suggestions-extra-content\" />\n </div>\n\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, onMounted, ref, watch } from 'vue'\nimport {\n AIStarIcon,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n xModule: aiXModule.name,\n components: {\n AIStarIcon,\n AiGroupedCarousel,\n ArrowRightIcon,\n BaseEventButton,\n ChangeHeight,\n ChevronDownIcon,\n CollapseHeight,\n DisplayClickProvider,\n DisplayEmitter,\n SlidingPanel,\n },\n props: {\n /* The title text displayed /\n title: String,\n / The classes added to the sliding panel. /\n slidingPanelClasses: String,\n / The classes added to the sliding panel container. /\n slidingPanelContainerClasses: String,\n / The classes added to the sliding panel buttons. /\n slidingPanelButtonsClasses: String,\n / Controls whether the carousel should group results or display N carousels per N queries. /\n group: {\n type: Boolean,\n default: true,\n },\n },\n setup(props) {\n const $x = use$x()\n const { query, 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 onMounted(() => {\n $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n })\n\n useResizeObserver(titleRef, updateTitleOverflow)\n\n return {\n emptyTaggingRequest,\n isTitleOverflowing,\n queries,\n query,\n suggestionsSearch,\n tagging,\n title,\n titleExpanded,\n titleRef,\n toggleTitleExpansion,\n }\n },\n})\n</script>\n\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\n.x-ai-carousel-suggestions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.x-ai-carousel-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 cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n height: 1rem;\n aspect-ratio: 1 / 1;\n}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJA,gBAAe,eAAe,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,iBAAiB;QACjB,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;QACf,cAAc;8BACdA,WAAoB;wBACpBC,WAAc;QACd,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;;AAElC,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QACpE,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;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAY,EAAG,CAAA;AACrE,QAAA,CAAC,CAAA;AAED,QAAA,iBAAiB,CAAC,QAAQ,EAAE,mBAAmB,CAAA;QAE/C,OAAO;YACL,mBAAmB;YACnB,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 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{display:flex;gap:8px}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
+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-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-carousel-suggestion{display:flex;flex-direction:column;gap:8px}.x-ai-carousel-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;cursor:pointer;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-carousel-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
 injectCss(css);
 export { css };

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

@@ -0,0 +1,68 @@
+import _sfc_main from './ai-grouped-carousel.vue2.js';
+import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createElementBlock, Fragment, renderList, renderSlot } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+const _hoisted_1 = { class: "x-ai-carousel-suggestion-results" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  return openBlock(), createBlock(_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("ul", _hoisted_1, [
+        (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"]);
+}
+var AiGroupedCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { AiGroupedCarousel as default };
+//# sourceMappingURL=ai-grouped-carousel.vue.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ai-grouped-carousel.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\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 <ul class=\"x-ai-carousel-suggestion-results\">\n <DisplayClickProvider\n v-for=\"suggestion in suggestionsSearch\"\n :key=\"suggestion.query\"\n :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\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 </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n components: {\n DisplayClickProvider,\n SlidingPanel,\n },\n props: {\n /* The title text displayed */\n title: String,\n /* The classes added to the sliding panel. */\n slidingPanelClasses: String,\n /* The classes added to the sliding panel container. */\n slidingPanelContainerClasses: String,\n /* The classes added to the sliding panel buttons. */\n slidingPanelButtonsClasses: String,\n },\n setup() {\n const { suggestionsSearch, tagging } = useState('ai')\n\n return {\n suggestionsSearch,\n tagging,\n }\n },\n})\n</script>\n"],"names":["_createBlock","_normalizeClass","_withCtx","_renderSlot","_createElementVNode","_openBlock","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;AAgBQ,MAAA,UAAA,GAAA,EAAA,KAAA,EAAM,kCAAA,EAAkC;;;;sBAf9CA,WAAA,CAiCe,uBAAA,EAAA;AAAA,IAhCZ,KAAA,EAAKC,eAAE,IAAA,CAAA,mBAAmB,CAAA;AAAA,IAC1B,wBAAA,EAAwB,IAAA,CAAA,4BAAA;AAAA,IACxB,cAAA,EAAc,IAAA,CAAA,0BAAA;AAAA,IACd,yBAAA,EAAyB;AAAA,GAAA,EAAA;IAEf,sBAAA,EAAoBC,OAAA,CAC7B,CAAmE,EADlC,YAAA,EAAY,KAAA;AAAA,MAC7CC,UAAA,CAAmE,wCAA/B,YAAA,EAA2B;AAAA,KAAA,CAAA;AAEtD,IAAA,2BAAA,EAAyBD,QAClC,MAA0C;AAAA,MAA1CC,UAAA,CAA0C,IAAA,CAAA,MAAA,EAAA,4BAAA;AAAA,KAAA,CAAA;AAEjC,IAAA,4BAAA,EAA0BD,QACnC,MAA2C;AAAA,MAA3CC,UAAA,CAA2C,IAAA,CAAA,MAAA,EAAA,6BAAA;AAAA,KAAA,CAAA;qBAE7C,MAiBK;AAAA,MAjBLC,kBAAA,CAiBK,MAjBL,UAAA,EAiBK;AAAA,SAAAC,SAAA,CAAA,IAAA,CAAA,EAhBHC,kBAAA;AAAA,UAeuBC,QAAA;AAAA,UAAA,IAAA;AAAA,UAAAC,UAAA,CAdA,IAAA,CAAA,iBAAA,EAAiB,CAA/B,UAAA,KAAU;gCADnBR,WAAA,CAeuB,+BAAA,EAAA;AAAA,cAbpB,KAAK,UAAA,CAAW,KAAA;AAAA,cAChB,yBAAA,EAAyB,IAAA,CAAA,OAAA,EAAS,aAAA,CAAc,UAAA,CAAW,KAAK,CAAA,CAAE,mBAAA;AAAA,cAClE,2BAAA,EAA2B,IAAA,CAAA,OAAA,EAAS,aAAA,CAAc,UAAA,CAAW,KAAK,CAAA,CAAE,sBAAA;AAAA,cACrE,gBAAA,EAAe;AAAA,aAAA,EAAA;+BAGb,MAAoC;AAAA,iBAAAK,SAAA,CAAA,IAAA,CAAA,EADtCC,kBAAA;AAAA,kBAOKC,QAAA;AAAA,kBAAA,IAAA;AAAA,kBAAAC,UAAA,CANc,UAAA,CAAW,OAAA,EAAO,CAA5B,MAAA,KAAM;wCADfF,kBAAA,CAOK,IAAA,EAAA;AAAA,sBALF,KAAK,MAAA,CAAO,EAAA;AAAA,sBACb,WAAA,EAAU;AAAA,qBAAA,EAAA;AAGV,sBAAAH,UAAA,CAAuC,yBAAlB,MAAA,EAAc;AAAA,qBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}