@empathyco/x-components 6.0.0-alpha.36 → 6.0.0-alpha.38

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js

@@ -1,78 +1,86 @@
 import _sfc_main from './related-prompts-tag-list.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createVNode, withCtx, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, mergeProps } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, normalizeClass, normalizeStyle } from 'vue';
 import './related-prompts-tag-list.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
+const _hoisted_1 = ["data-index"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_RelatedPrompt = resolveComponent("RelatedPrompt");
+  const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
   const _component_SlidingPanel = resolveComponent("SlidingPanel");
-  return openBlock(), createElementBlock("div", null, [
-    _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : createCommentVNode("v-if", true),
-    createVNode(_component_SlidingPanel, {
-      "reset-on-content-change": true,
-      "button-class": _ctx.buttonClass,
-      "scroll-container-class": _ctx.selectedPrompt === -1 ? "desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm" : ""
-    }, {
-      "sliding-panel-left-button": withCtx(() => [
-        renderSlot(_ctx.$slots, "sliding-panel-left-button")
-      ]),
-      "sliding-panel-right-button": withCtx(() => [
-        renderSlot(_ctx.$slots, "sliding-panel-right-button")
-      ]),
-      default: withCtx(() => [
-        renderSlot(_ctx.$slots, "sliding-panel-content", {}, () => [
-          createElementVNode(
-            "div",
-            {
-              ref: "slidingPanelContent",
-              class: normalizeClass(["x-related-prompt__sliding-panel-content", { "x-related-prompt__sliding-panel-content-selected": _ctx.selectedPrompt !== -1 }])
-            },
-            [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(_ctx.relatedPrompts, (suggestion, index) => {
-                  return openBlock(), createElementBlock(
-                    "div",
-                    {
-                      key: index,
-                      style: normalizeStyle({
-                        animationDelay: `${index * 0.4 + 0.05}s`
-                      }),
-                      class: normalizeClass(["x-related-prompt x-staggered-initial", [
-                        { "x-staggered-animation": _ctx.arePromptsVisible },
-                        { "x-hidden": _ctx.hidePrompt(index) },
-                        { "x-related-prompt-selected": _ctx.isSelected(index) }
-                      ]]),
-                      "data-test": "related-prompt-item"
-                    },
-                    [
-                      renderSlot(_ctx.$slots, "related-prompt-button", mergeProps({ ref_for: true }, { suggestion, index, arePromptsVisible: _ctx.arePromptsVisible, isSelected: _ctx.isSelected }), () => [
-                        createVNode(_component_RelatedPrompt, {
-                          "related-prompt": suggestion,
-                          index,
-                          "is-prompt-visible": _ctx.arePromptsVisible,
-                          "is-selected": _ctx.isSelected(index)
-                        }, null, 8, ["related-prompt", "index", "is-prompt-visible", "is-selected"])
-                      ])
-                    ],
-                    6
-                    /* CLASS, STYLE */
-                  );
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ],
-            2
-            /* CLASS */
-          )
-        ])
-      ]),
-      _: 3
-      /* FORWARDED */
-    }, 8, ["button-class", "scroll-container-class"])
-  ]);
+  return openBlock(), createBlock(_component_SlidingPanel, {
+    key: _ctx.x.query.search,
+    "reset-on-content-change": false,
+    "button-class": _ctx.buttonClass,
+    "scroll-container-class": "x-related-prompts-tag-list-scroll-container"
+  }, {
+    "sliding-panel-left-button": withCtx(() => [
+      renderSlot(_ctx.$slots, "sliding-panel-left-button")
+    ]),
+    "sliding-panel-right-button": withCtx(() => [
+      renderSlot(_ctx.$slots, "sliding-panel-right-button")
+    ]),
+    default: withCtx(() => [
+      createVNode(TransitionGroup, {
+        onBeforeEnter: _ctx.onBeforeEnter,
+        onEnter: _ctx.onEnter,
+        onLeave: _ctx.onLeave,
+        class: "x-related-prompts-tag-list",
+        css: false,
+        tag: "ul",
+        appear: ""
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.visibleRelatedPrompts, ({ index, ...relatedPrompt }) => {
+              return openBlock(), createElementBlock("li", {
+                ref_for: true,
+                ref: "listItems",
+                key: relatedPrompt.suggestionText,
+                class: normalizeClass(["x-related-prompts-tag-list-item", [_ctx.tagClass, _ctx.tagColors && _ctx.tagColors[index % _ctx.tagColors.length]]]),
+                "data-index": index,
+                style: normalizeStyle(_ctx.isAnimating && { pointerEvents: "none" }),
+                "data-test": "related-prompts-tag-list-item"
+              }, [
+                renderSlot(_ctx.$slots, "default", {
+                  relatedPrompt,
+                  onSelect: () => _ctx.onSelect(index),
+                  isSelected: _ctx.isSelected(index)
+                }, () => [
+                  createVNode(_component_DisplayEmitter, {
+                    payload: relatedPrompt.toolingDisplayTagging,
+                    eventMetadata: {
+                      feature: "related-prompts",
+                      displayOriginalQuery: _ctx.x.query.searchBox,
+                      replaceable: false
+                    }
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_RelatedPrompt, {
+                        onClick: ($event) => _ctx.onSelect(index),
+                        "related-prompt": relatedPrompt,
+                        selected: _ctx.isSelected(index)
+                      }, null, 8, ["onClick", "related-prompt", "selected"])
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["payload", "eventMetadata"])
+                ])
+              ], 14, _hoisted_1);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["onBeforeEnter", "onEnter", "onLeave"])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["button-class"]);
 }
 var relatedPromptsTagList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <div>\n    <template v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </template>\n    <SlidingPanel\n      :reset-on-content-change=\"true\"\n      :button-class=\"buttonClass\"\n      :scroll-container-class=\"\n        selectedPrompt === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''\n      \"\n    >\n      <template #sliding-panel-left-button>\n        <slot name=\"sliding-panel-left-button\" />\n      </template>\n\n      <slot name=\"sliding-panel-content\">\n        <div\n          ref=\"slidingPanelContent\"\n          class=\"x-related-prompt__sliding-panel-content\"\n          :class=\"{ 'x-related-prompt__sliding-panel-content-selected': selectedPrompt !== -1 }\"\n        >\n          <div\n            v-for=\"(suggestion, index) in relatedPrompts\"\n            :key=\"index\"\n            :style=\"{\n              animationDelay: `${index * 0.4 + 0.05}s`\n            }\"\n            class=\"x-related-prompt x-staggered-initial\"\n            :class=\"[\n              { 'x-staggered-animation': arePromptsVisible },\n              { 'x-hidden': hidePrompt(index) },\n              { 'x-related-prompt-selected': isSelected(index) }\n            ]\"\n            data-test=\"related-prompt-item\"\n          >\n            <slot\n              name=\"related-prompt-button\"\n              v-bind=\"{ suggestion, index, arePromptsVisible, isSelected }\"\n            >\n              <RelatedPrompt\n                :related-prompt=\"suggestion\"\n                :index=\"index\"\n                :is-prompt-visible=\"arePromptsVisible\"\n                :is-selected=\"isSelected(index)\"\n              />\n            </slot>\n          </div>\n        </div>\n      </slot>\n\n      <template #sliding-panel-right-button>\n        <slot name=\"sliding-panel-right-button\" />\n      </template>\n    </SlidingPanel>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { useState } from '../../../composables/index';\n  import RelatedPrompt from './related-prompt.vue';\n\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { RelatedPrompt, SlidingPanel },\n    props: {\n      buttonClass: String\n    },\n    setup() {\n      const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const slidingPanelContent = ref<Element>();\n      const arePromptsVisible = ref(false);\n\n      const observer = new IntersectionObserver(([entry]) => {\n        arePromptsVisible.value = entry.isIntersecting;\n      });\n\n      onMounted(() => {\n        observer.observe(slidingPanelContent.value as Element);\n      });\n\n      onUnmounted(() => {\n        observer.disconnect();\n      });\n\n      const isSelected = (index: number): boolean => selectedPrompt.value === index;\n\n      const hidePrompt = (index: number): boolean =>\n        selectedPrompt.value !== -1 && selectedPrompt.value !== index;\n\n      return {\n        arePromptsVisible,\n        hidePrompt,\n        isSelected,\n        relatedPrompts,\n        selectedPrompt,\n        slidingPanelContent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-related-prompt__sliding-panel-content {\n    display: flex;\n    gap: 8px;\n  }\n\n  .x-related-prompt__sliding-panel-content-selected {\n    width: calc(100%);\n  }\n\n  .x-related-prompt {\n    display: flex;\n    flex-direction: column;\n    border-radius: 12px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    min-height: 112px;\n    height: 100%;\n    width: 303px;\n  }\n\n  .x-related-prompt-selected {\n    width: 100% !important;\n    min-height: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n\n    &__button {\n      width: 100% !important;\n    }\n  }\n\n  .x-related-prompt__button {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    justify-content: space-between;\n    align-items: start;\n    text-align: start;\n    padding: 16px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    flex-grow: 1;\n    width: 303px;\n  }\n\n  .x-related-prompt__button-info {\n    display: flex;\n    min-height: 32px;\n  }\n\n  @media (max-width: 743px) {\n    .x-related-prompt {\n      width: 204px;\n      &__button {\n        width: 204px;\n      }\n    }\n  }\n\n  .x-no-scrollbar::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-no-scrollbar {\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  .x-typewritter-initial {\n    color: #0000;\n    background: linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,\n      linear-gradient(#575757 0 0) 0 0;\n    background-size: 0 200%;\n    -webkit-background-clip: padding-box, text;\n    background-clip: padding-box, text;\n    background-repeat: no-repeat;\n  }\n\n  .x-typewritter-animation {\n    animation: typewritter calc(var(--suggestion-text-length) * 0.05s)\n      steps(var(--suggestion-text-length)) forwards;\n  }\n\n  @keyframes typewritter {\n    from {\n      background-size: 0 200%;\n    }\n    to {\n      background-size: calc(var(--suggestion-text-length) * 1ch) 200%;\n    }\n  }\n\n  .x-staggered-initial {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  .x-staggered-animation {\n    animation: fadeInUp 0.6s forwards;\n  }\n\n  @keyframes fadeInUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createVNode","selectedPrompt","_withCtx","_createElementVNode","_normalizeClass","relatedPrompts","_Fragment","_renderList","hidePrompt","isSelected","_mergeProps"],"mappings":";;;;;;;kCACEA,gBAsDM,CAAA,cAAA,CAAA,CAAA;AApDF,EAAA,OAAAC,SAAA,EAHN,EAAAC,kBAAA,CAAA,KAAA,EAAA,IAAA,EAAA;AAAA,IAKI,IAAA,CAAA,MAAA,CAAA,MAAA,GAAAC,UAAA,CAiDe,IAhDZ,CAAA,MAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,GAAAC,kBAAA,CAAA,MAAA,EAAyB,IAAI,CAAA;AAAA,IAAAC,WAAA,CAC7B,uBAAyB,EAAA;AAAA,MACzB,yBAAsB,EAAA,IAAA;AAAA,MAAA,cAAA,EAAWC,IAAc,CAAA,WAAA;AAAA,MAAA,wBAAA,EAAA,IAAA,CAAA,cAAA,KAAA,CAAA,CAAA,GAAA,8DAAA,GAAA,EAAA;;;QA2CrCH,UACiC,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,CAAA;AAAA,OAAA,CAAA;;QApDlDA,UAiDa,CAAA,IAAA,CAAA,MAAA,EAAA,4BAAA,CAAA;AAAA,OAAA,CAAA;eAhCLI,OA+BM,CAAA,MAAA;AAAA,QAAAJ,UAAA,CA9BA,IAAqB,CAAA,MAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,MAAA;AAAA,UAAAK,kBAAA;AAlBnC,YAAA,KAAA;AAAA,YAmBgB;AAAA,cAAA,GAAA,EAAA,qBAAA;AAGN,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,yCAAA,EAtBV,EAuB0CC,kDAAL,EAAA,IAAA,CAAA,cAAA,KAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,aAAA;;yBACnB,IAAK,CAAA,EAAAR,kBAAA;AAAA,gBAAAS,QAAA;AAAA,gBAAA,IAAA;AAAA,gBAAAC,UAAA,CAAA,IAAA,CAAA,cAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;yBACLX,SAzBlB,EAAA,EAAAC,kBAAA;AAAA,oBAAA,KAAA;AAAA,oBAAA;AAAA,sBAAA,GAAA,EAAA,KAAA;;wCAAA,CA4BkB,EAAA,KAAA,GAAA,GAAA,GAAA,IAAA,CAAA,CAAA,CAAA;AAAA,uBAAA,CAAA;4CAC8FW,CAAgB,sCAAA,EAAA;AAAA,wBAAA,EAAA,uBAAA,EAAA,IAAA,CAAkDC,iBAAW,EAAA;AAAA,wBAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA;AAKjL,wBAAA,EAAA,2BAAA,EAAU,IAAqB,CAAA,UAAA,CAAA,KAAA,CAAA,EAAA;AAAA,uBAAA,CAAA,CAAA;sBAE/B,WAUO,EAAA,qBAAA;AAAA,qBAAA;;AALF,sBAAAX,UAAA,CAAA,IAAA,CAAA,MAAA,EAAgB,uBAAU,EAAAY,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA;AAAA,wBAAAV,WAAA,CACnB,wBAAK,EAAA;AAAA,0BACZ,gBAAA,EAAA,UAAA;AAAA,0BACA,KAAA;AAAA,0BAAA,mBAAA,EAAA,IAAA,CAAA,iBAAA;;;;;;;;;;;;;;;;AA5CjB,SAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"related-prompts-tag-list.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    scroll-container-class=\"x-related-prompts-tag-list-scroll-container\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"isAnimating && { pointerEvents: 'none' }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :relatedPrompt=\"relatedPrompt\"\n          :onSelect=\"() => onSelect(index)\"\n          :isSelected=\"isSelected(index)\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.toolingDisplayTagging\"\n            :eventMetadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false\n            }\"\n          >\n            <RelatedPrompt\n              @click=\"onSelect(index)\"\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"isSelected(index)\"\n            />\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, ref, watch } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { use$x, useState } from '../../../composables';\n  import DisplayEmitter from '../../../components/display-emitter.vue';\n  import RelatedPrompt from './related-prompt.vue';\n\n  /**\n   * This component shows the list of `RelatedPrompts` components.\n   *\n   * If the default slot is reimplemented in the consumer, `onSelect` function will be\n   * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n    props: {\n      /**\n       * The CSS class for the left and right button of the sliding panel.\n       *\n       * @public\n       */\n      buttonClass: String,\n      /**\n       * The CSS class for all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      tagClass: String,\n      /**\n       * Array of colors to apply to the related prompts. It will be applied to tag\n       * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n       *\n       * @public\n       */\n      tagColors: Array as PropType<string[]>,\n      /**\n       * The duration of the total animation in milliseconds.\n       *\n       * @public\n       */\n      animationDurationInMs: {\n        type: Number,\n        default: 700\n      }\n    },\n    setup(props) {\n      const x = use$x();\n      const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const clickedListItemIndex = ref<number | null>(null);\n      const initialOffsetLefts: Record<number, number> = {};\n      const isAnimating = ref(false);\n      const listItems = ref<HTMLElement[]>([]);\n\n      const sortedListItems = computed<HTMLElement[]>(() =>\n        [...listItems.value].sort(\n          (a: HTMLElement, b: HTMLElement) =>\n            Number.parseInt(b.getAttribute('data-index')!) -\n            Number.parseInt(a.getAttribute('data-index')!)\n        )\n      );\n\n      // The duration of a single animation (enter or leave) in milliseconds\n      // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n      // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n      const singleAnimationDurationInMs = computed(\n        () =>\n          props.animationDurationInMs /\n          (clickedListItemIndex.value !== null\n            ? relatedPrompts.value.length - 1\n            : relatedPrompts.value.length)\n      );\n\n      const indexRelatedPrompts = computed(() =>\n        (relatedPrompts.value as RelatedPromptModel[]).map(\n          (relatedPrompt: RelatedPromptModel, index: number) => ({\n            ...relatedPrompt,\n            index\n          })\n        )\n      );\n\n      const visibleRelatedPrompts = computed(() => {\n        return selectedPromptIndex.value !== -1\n          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n          : indexRelatedPrompts.value;\n      });\n\n      let timeOutId: number;\n      const resetTransitionStyle = () => {\n        if (timeOutId) {\n          clearTimeout(timeOutId);\n        }\n\n        isAnimating.value = true;\n        timeOutId = +setTimeout(() => {\n          isAnimating.value = false;\n          clickedListItemIndex.value = null;\n\n          sortedListItems.value.forEach(element => {\n            element.style.cssText\n              .split(';')\n              .map(rule => rule.split(':')[0]?.trim())\n              .forEach(property => {\n                if (property !== 'width') {\n                  element.style.removeProperty(property);\n                }\n              });\n          });\n        }, props.animationDurationInMs);\n      };\n\n      const onSelect = (selectedIndex: number): void => {\n        resetTransitionStyle();\n\n        clickedListItemIndex.value = selectedIndex;\n        const selected: HTMLElement = sortedListItems.value.find(\n          element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n        )!;\n\n        // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n        if (selectedPromptIndex.value === -1) {\n          // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n          // sorted in descending order by index.\n          sortedListItems.value.forEach(element => {\n            const index = Number.parseInt(element.getAttribute('data-index')!);\n\n            initialOffsetLefts[index] = element.offsetLeft;\n            element.style.left = `${element.offsetLeft}px`;\n            element.style.position = 'absolute';\n            element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n            if (index !== selectedIndex) {\n              element.style.opacity = '1';\n              element.style.transitionDelay = `${\n                (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n              }ms`;\n            }\n          });\n\n          // Synchronize the transition delay of the selected element with the last\n          // element to leave\n          selected.style.transitionDelay = `${\n            (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n            singleAnimationDurationInMs.value\n          }ms`;\n\n          // Trigger the animation (selecting) for the selected element\n          requestAnimationFrame(() => {\n            const maxWidth = getComputedStyle(selected).maxWidth;\n\n            selected.style.left = '0px';\n            selected.style.setProperty(\n              'width',\n              `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n              'important'\n            );\n          });\n        } else {\n          // Prepare the selected element for the deselecting animation\n          selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n          selected.style.left = '0px';\n          selected.style.position = 'absolute';\n\n          // Trigger the animation (deselecting) for the selected element\n          selected.style.removeProperty('width');\n          requestAnimationFrame(() => {\n            selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n          });\n        }\n\n        x.emit('UserSelectedARelatedPrompt', selectedIndex);\n      };\n\n      const onBeforeEnter = (el: Element) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Prepare the element for the enter animation\n        element.style.opacity = '0';\n        element.style.transform = 'translateY(5px)';\n        element.style.transitionDelay = `${\n          (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n            ? index - 1\n            : index) * singleAnimationDurationInMs.value\n        }ms`;\n        element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n      };\n\n      const onEnter = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Also part of the preparation for the enter animation, but it needs to be done\n        // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n        element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n        // trigger enter animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '1';\n          element.style.position = 'absolute';\n          element.style.transform = 'translateY(0)';\n        });\n\n        done();\n      };\n\n      const onLeave = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n\n        // trigger leave animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '0';\n          element.style.transform = 'translateY(5px)';\n        });\n\n        // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n        setTimeout(done, props.animationDurationInMs);\n      };\n\n      const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n      // Changing the query will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n      return {\n        isSelected,\n        onSelect,\n        onBeforeEnter,\n        onEnter,\n        onLeave,\n        selectedPromptIndex,\n        visibleRelatedPrompts,\n        listItems,\n        isAnimating,\n        x\n      };\n    }\n  });\n</script>\n<style lang=\"css\">\n  .x-related-prompts-tag-list-scroll-container {\n    height: 100%;\n    position: relative;\n  }\n  .x-related-prompts-tag-list {\n    display: flex;\n    gap: 16px;\n    min-width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":"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"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import { relatedPromptsXModule } from '../x-module.js';
 import '../../../composables/create-use-device.js';
+import { use$x } from '../../../composables/use-_x.js';
 import '@vue/devtools-api';
 import '../../../plugins/devtools/timeline.devtools.js';
 import '@empathyco/x-utils';
@@ -13,40 +14,193 @@ import '../../../plugins/x-plugin.js';
 import 'vuex';
 import '@vueuse/core';
 import { useState } from '../../../composables/use-state.js';
+import _sfc_main$1 from '../../../components/display-emitter.vue.js';
 import RelatedPrompt from './related-prompt.vue.js';
 
+/**
+ * This component shows the list of `RelatedPrompts` components.
+ *
+ * If the default slot is reimplemented in the consumer, `onSelect` function will be
+ * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
+ *
+ * @public
+ */
 var _sfc_main = defineComponent({
     name: 'RelatedPromptsTagList',
     xModule: relatedPromptsXModule.name,
-    components: { RelatedPrompt, SlidingPanel },
+    components: { DisplayEmitter: _sfc_main$1, RelatedPrompt, SlidingPanel },
     props: {
-        buttonClass: String
+        /**
+         * The CSS class for the left and right button of the sliding panel.
+         *
+         * @public
+         */
+        buttonClass: String,
+        /**
+         * The CSS class for all the related prompt wrapper elements.
+         *
+         * @public
+         */
+        tagClass: String,
+        /**
+         * Array of colors to apply to the related prompts. It will be applied to tag
+         * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.
+         *
+         * @public
+         */
+        tagColors: Array,
+        /**
+         * The duration of the total animation in milliseconds.
+         *
+         * @public
+         */
+        animationDurationInMs: {
+            type: Number,
+            default: 700
+        }
     },
-    setup() {
-        const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [
+    setup(props) {
+        const x = use$x();
+        const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [
             'relatedPrompts',
             'selectedPrompt'
         ]);
-        const slidingPanelContent = ref();
-        const arePromptsVisible = ref(false);
-        const observer = new IntersectionObserver(([entry]) => {
-            arePromptsVisible.value = entry.isIntersecting;
+        const clickedListItemIndex = ref(null);
+        const initialOffsetLefts = {};
+        const isAnimating = ref(false);
+        const listItems = ref([]);
+        const sortedListItems = computed(() => [...listItems.value].sort((a, b) => Number.parseInt(b.getAttribute('data-index')) -
+            Number.parseInt(a.getAttribute('data-index'))));
+        // The duration of a single animation (enter or leave) in milliseconds
+        // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related
+        // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)
+        const singleAnimationDurationInMs = computed(() => props.animationDurationInMs /
+            (clickedListItemIndex.value !== null
+                ? relatedPrompts.value.length - 1
+                : relatedPrompts.value.length));
+        const indexRelatedPrompts = computed(() => relatedPrompts.value.map((relatedPrompt, index) => ({
+            ...relatedPrompt,
+            index
+        })));
+        const visibleRelatedPrompts = computed(() => {
+            return selectedPromptIndex.value !== -1
+                ? [indexRelatedPrompts.value[selectedPromptIndex.value]]
+                : indexRelatedPrompts.value;
         });
-        onMounted(() => {
-            observer.observe(slidingPanelContent.value);
-        });
-        onUnmounted(() => {
-            observer.disconnect();
-        });
-        const isSelected = (index) => selectedPrompt.value === index;
-        const hidePrompt = (index) => selectedPrompt.value !== -1 && selectedPrompt.value !== index;
+        let timeOutId;
+        const resetTransitionStyle = () => {
+            if (timeOutId) {
+                clearTimeout(timeOutId);
+            }
+            isAnimating.value = true;
+            timeOutId = +setTimeout(() => {
+                isAnimating.value = false;
+                clickedListItemIndex.value = null;
+                sortedListItems.value.forEach(element => {
+                    element.style.cssText
+                        .split(';')
+                        .map(rule => rule.split(':')[0]?.trim())
+                        .forEach(property => {
+                        if (property !== 'width') {
+                            element.style.removeProperty(property);
+                        }
+                    });
+                });
+            }, props.animationDurationInMs);
+        };
+        const onSelect = (selectedIndex) => {
+            resetTransitionStyle();
+            clickedListItemIndex.value = selectedIndex;
+            const selected = sortedListItems.value.find(element => Number.parseInt(element.getAttribute('data-index')) === selectedIndex);
+            // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'
+            if (selectedPromptIndex.value === -1) {
+                // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are
+                // sorted in descending order by index.
+                sortedListItems.value.forEach(element => {
+                    const index = Number.parseInt(element.getAttribute('data-index'));
+                    initialOffsetLefts[index] = element.offsetLeft;
+                    element.style.left = `${element.offsetLeft}px`;
+                    element.style.position = 'absolute';
+                    element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+                    if (index !== selectedIndex) {
+                        element.style.opacity = '1';
+                        element.style.transitionDelay = `${(index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value}ms`;
+                    }
+                });
+                // Synchronize the transition delay of the selected element with the last
+                // element to leave
+                selected.style.transitionDelay = `${(relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *
+                    singleAnimationDurationInMs.value}ms`;
+                // Trigger the animation (selecting) for the selected element
+                requestAnimationFrame(() => {
+                    const maxWidth = getComputedStyle(selected).maxWidth;
+                    selected.style.left = '0px';
+                    selected.style.setProperty('width', `${maxWidth !== 'none' ? maxWidth : '100%'}`, 'important');
+                });
+            }
+            else {
+                // Prepare the selected element for the deselecting animation
+                selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+                selected.style.left = '0px';
+                selected.style.position = 'absolute';
+                // Trigger the animation (deselecting) for the selected element
+                selected.style.removeProperty('width');
+                requestAnimationFrame(() => {
+                    selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;
+                });
+            }
+            x.emit('UserSelectedARelatedPrompt', selectedIndex);
+        };
+        const onBeforeEnter = (el) => {
+            const element = el;
+            const index = Number.parseInt(element.getAttribute('data-index'));
+            // Prepare the element for the enter animation
+            element.style.opacity = '0';
+            element.style.transform = 'translateY(5px)';
+            element.style.transitionDelay = `${(clickedListItemIndex.value !== null && index > clickedListItemIndex.value
+                ? index - 1
+                : index) * singleAnimationDurationInMs.value}ms`;
+            element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+        };
+        const onEnter = (el, done) => {
+            const element = el;
+            const index = Number.parseInt(element.getAttribute('data-index'));
+            // Also part of the preparation for the enter animation, but it needs to be done
+            // once the element is inserted in DOM (if not the offsetLeft will be always 0)
+            element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;
+            // trigger enter animation
+            requestAnimationFrame(() => {
+                element.style.opacity = '1';
+                element.style.position = 'absolute';
+                element.style.transform = 'translateY(0)';
+            });
+            done();
+        };
+        const onLeave = (el, done) => {
+            const element = el;
+            // trigger leave animation
+            requestAnimationFrame(() => {
+                element.style.opacity = '0';
+                element.style.transform = 'translateY(5px)';
+            });
+            // Wait for the animation to finish (done() exectution extracts the element from the DOM)
+            setTimeout(done, props.animationDurationInMs);
+        };
+        const isSelected = (index) => selectedPromptIndex.value === index;
+        // Changing the query will trigger the appear animation, so we need to reset the
+        // style after it finishes
+        watch(() => x.query.search, resetTransitionStyle, { immediate: true });
         return {
-            arePromptsVisible,
-            hidePrompt,
             isSelected,
-            relatedPrompts,
-            selectedPrompt,
-            slidingPanelContent
+            onSelect,
+            onBeforeEnter,
+            onEnter,
+            onLeave,
+            selectedPromptIndex,
+            visibleRelatedPrompts,
+            listItems,
+            isAnimating,
+            x
         };
     }
 });

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <div>\n    <template v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </template>\n    <SlidingPanel\n      :reset-on-content-change=\"true\"\n      :button-class=\"buttonClass\"\n      :scroll-container-class=\"\n        selectedPrompt === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''\n      \"\n    >\n      <template #sliding-panel-left-button>\n        <slot name=\"sliding-panel-left-button\" />\n      </template>\n\n      <slot name=\"sliding-panel-content\">\n        <div\n          ref=\"slidingPanelContent\"\n          class=\"x-related-prompt__sliding-panel-content\"\n          :class=\"{ 'x-related-prompt__sliding-panel-content-selected': selectedPrompt !== -1 }\"\n        >\n          <div\n            v-for=\"(suggestion, index) in relatedPrompts\"\n            :key=\"index\"\n            :style=\"{\n              animationDelay: `${index * 0.4 + 0.05}s`\n            }\"\n            class=\"x-related-prompt x-staggered-initial\"\n            :class=\"[\n              { 'x-staggered-animation': arePromptsVisible },\n              { 'x-hidden': hidePrompt(index) },\n              { 'x-related-prompt-selected': isSelected(index) }\n            ]\"\n            data-test=\"related-prompt-item\"\n          >\n            <slot\n              name=\"related-prompt-button\"\n              v-bind=\"{ suggestion, index, arePromptsVisible, isSelected }\"\n            >\n              <RelatedPrompt\n                :related-prompt=\"suggestion\"\n                :index=\"index\"\n                :is-prompt-visible=\"arePromptsVisible\"\n                :is-selected=\"isSelected(index)\"\n              />\n            </slot>\n          </div>\n        </div>\n      </slot>\n\n      <template #sliding-panel-right-button>\n        <slot name=\"sliding-panel-right-button\" />\n      </template>\n    </SlidingPanel>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { useState } from '../../../composables/index';\n  import RelatedPrompt from './related-prompt.vue';\n\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { RelatedPrompt, SlidingPanel },\n    props: {\n      buttonClass: String\n    },\n    setup() {\n      const { relatedPrompts, selectedPrompt } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const slidingPanelContent = ref<Element>();\n      const arePromptsVisible = ref(false);\n\n      const observer = new IntersectionObserver(([entry]) => {\n        arePromptsVisible.value = entry.isIntersecting;\n      });\n\n      onMounted(() => {\n        observer.observe(slidingPanelContent.value as Element);\n      });\n\n      onUnmounted(() => {\n        observer.disconnect();\n      });\n\n      const isSelected = (index: number): boolean => selectedPrompt.value === index;\n\n      const hidePrompt = (index: number): boolean =>\n        selectedPrompt.value !== -1 && selectedPrompt.value !== index;\n\n      return {\n        arePromptsVisible,\n        hidePrompt,\n        isSelected,\n        relatedPrompts,\n        selectedPrompt,\n        slidingPanelContent\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-related-prompt__sliding-panel-content {\n    display: flex;\n    gap: 8px;\n  }\n\n  .x-related-prompt__sliding-panel-content-selected {\n    width: calc(100%);\n  }\n\n  .x-related-prompt {\n    display: flex;\n    flex-direction: column;\n    border-radius: 12px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    min-height: 112px;\n    height: 100%;\n    width: 303px;\n  }\n\n  .x-related-prompt-selected {\n    width: 100% !important;\n    min-height: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n\n    &__button {\n      width: 100% !important;\n    }\n  }\n\n  .x-related-prompt__button {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    justify-content: space-between;\n    align-items: start;\n    text-align: start;\n    padding: 16px;\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    flex-grow: 1;\n    width: 303px;\n  }\n\n  .x-related-prompt__button-info {\n    display: flex;\n    min-height: 32px;\n  }\n\n  @media (max-width: 743px) {\n    .x-related-prompt {\n      width: 204px;\n      &__button {\n        width: 204px;\n      }\n    }\n  }\n\n  .x-no-scrollbar::-webkit-scrollbar {\n    display: none;\n  }\n\n  .x-no-scrollbar {\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  .x-typewritter-initial {\n    color: #0000;\n    background: linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,\n      linear-gradient(#575757 0 0) 0 0;\n    background-size: 0 200%;\n    -webkit-background-clip: padding-box, text;\n    background-clip: padding-box, text;\n    background-repeat: no-repeat;\n  }\n\n  .x-typewritter-animation {\n    animation: typewritter calc(var(--suggestion-text-length) * 0.05s)\n      steps(var(--suggestion-text-length)) forwards;\n  }\n\n  @keyframes typewritter {\n    from {\n      background-size: 0 200%;\n    }\n    to {\n      background-size: calc(var(--suggestion-text-length) * 1ch) 200%;\n    }\n  }\n\n  .x-staggered-initial {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  .x-staggered-animation {\n    animation: fadeInUp 0.6s forwards;\n  }\n\n  @keyframes fadeInUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgEE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,EAAE,aAAa,EAAE,cAAc;AAC3C,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAK;AACnB,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,cAAc,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE;YACpE,gBAAgB;YAChB,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,mBAAkB,GAAI,GAAG,EAAW,CAAA;AAC1C,QAAA,MAAM,iBAAgB,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;QAEpC,MAAM,QAAS,GAAE,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;AACrD,YAAA,iBAAiB,CAAC,KAAM,GAAE,KAAK,CAAC,cAAc,CAAA;AAChD,SAAC,CAAC,CAAA;QAEF,SAAS,CAAC,MAAM;AACd,YAAA,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAgB,CAAC,CAAA;AACxD,SAAC,CAAC,CAAA;QAEF,WAAW,CAAC,MAAM;YAChB,QAAQ,CAAC,UAAU,EAAE,CAAA;AACvB,SAAC,CAAC,CAAA;AAEF,QAAA,MAAM,UAAW,GAAE,CAAC,KAAa,KAAc,cAAc,CAAC,KAAI,KAAM,KAAK,CAAA;AAE7E,QAAA,MAAM,UAAW,GAAE,CAAC,KAAa,KAC/B,cAAc,CAAC,KAAI,KAAM,CAAC,CAAA,IAAK,cAAc,CAAC,KAAM,KAAI,KAAK,CAAA;QAE/D,OAAO;YACL,iBAAiB;YACjB,UAAU;YACV,UAAU;YACV,cAAc;YACd,cAAc;YACd,mBAAkB;SACnB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-prompts-tag-list.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompts-tag-list.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    scroll-container-class=\"x-related-prompts-tag-list-scroll-container\"\n  >\n    <template #sliding-panel-left-button>\n      <!--\n      @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-left-button\" />\n    </template>\n    <transition-group\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\n      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n    >\n      <li\n        v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n        ref=\"listItems\"\n        :key=\"relatedPrompt.suggestionText\"\n        class=\"x-related-prompts-tag-list-item\"\n        :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n        :data-index=\"index\"\n        :style=\"isAnimating && { pointerEvents: 'none' }\"\n        data-test=\"related-prompts-tag-list-item\"\n      >\n        <!--\n         @slot - The slot to render related prompt information.\n         @prop {Object} relatedPrompt - The related prompt object.\n         @prop {Function} onSelect - The function to select the related prompt.\n         @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n         -->\n        <slot\n          :relatedPrompt=\"relatedPrompt\"\n          :onSelect=\"() => onSelect(index)\"\n          :isSelected=\"isSelected(index)\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.toolingDisplayTagging\"\n            :eventMetadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false\n            }\"\n          >\n            <RelatedPrompt\n              @click=\"onSelect(index)\"\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"isSelected(index)\"\n            />\n          </DisplayEmitter>\n        </slot>\n      </li>\n    </transition-group>\n    <template #sliding-panel-right-button>\n      <!--\n      @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n      -->\n      <slot name=\"sliding-panel-right-button\" />\n    </template>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, ref, watch } from 'vue';\n  import SlidingPanel from '../../../components/sliding-panel.vue';\n  import { relatedPromptsXModule } from '../x-module';\n  import { use$x, useState } from '../../../composables';\n  import DisplayEmitter from '../../../components/display-emitter.vue';\n  import RelatedPrompt from './related-prompt.vue';\n\n  /**\n   * This component shows the list of `RelatedPrompts` components.\n   *\n   * If the default slot is reimplemented in the consumer, `onSelect` function will be\n   * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPromptsTagList',\n    xModule: relatedPromptsXModule.name,\n    components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n    props: {\n      /**\n       * The CSS class for the left and right button of the sliding panel.\n       *\n       * @public\n       */\n      buttonClass: String,\n      /**\n       * The CSS class for all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      tagClass: String,\n      /**\n       * Array of colors to apply to the related prompts. It will be applied to tag\n       * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n       *\n       * @public\n       */\n      tagColors: Array as PropType<string[]>,\n      /**\n       * The duration of the total animation in milliseconds.\n       *\n       * @public\n       */\n      animationDurationInMs: {\n        type: Number,\n        default: 700\n      }\n    },\n    setup(props) {\n      const x = use$x();\n      const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n        'relatedPrompts',\n        'selectedPrompt'\n      ]);\n\n      const clickedListItemIndex = ref<number | null>(null);\n      const initialOffsetLefts: Record<number, number> = {};\n      const isAnimating = ref(false);\n      const listItems = ref<HTMLElement[]>([]);\n\n      const sortedListItems = computed<HTMLElement[]>(() =>\n        [...listItems.value].sort(\n          (a: HTMLElement, b: HTMLElement) =>\n            Number.parseInt(b.getAttribute('data-index')!) -\n            Number.parseInt(a.getAttribute('data-index')!)\n        )\n      );\n\n      // The duration of a single animation (enter or leave) in milliseconds\n      // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n      // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n      const singleAnimationDurationInMs = computed(\n        () =>\n          props.animationDurationInMs /\n          (clickedListItemIndex.value !== null\n            ? relatedPrompts.value.length - 1\n            : relatedPrompts.value.length)\n      );\n\n      const indexRelatedPrompts = computed(() =>\n        (relatedPrompts.value as RelatedPromptModel[]).map(\n          (relatedPrompt: RelatedPromptModel, index: number) => ({\n            ...relatedPrompt,\n            index\n          })\n        )\n      );\n\n      const visibleRelatedPrompts = computed(() => {\n        return selectedPromptIndex.value !== -1\n          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n          : indexRelatedPrompts.value;\n      });\n\n      let timeOutId: number;\n      const resetTransitionStyle = () => {\n        if (timeOutId) {\n          clearTimeout(timeOutId);\n        }\n\n        isAnimating.value = true;\n        timeOutId = +setTimeout(() => {\n          isAnimating.value = false;\n          clickedListItemIndex.value = null;\n\n          sortedListItems.value.forEach(element => {\n            element.style.cssText\n              .split(';')\n              .map(rule => rule.split(':')[0]?.trim())\n              .forEach(property => {\n                if (property !== 'width') {\n                  element.style.removeProperty(property);\n                }\n              });\n          });\n        }, props.animationDurationInMs);\n      };\n\n      const onSelect = (selectedIndex: number): void => {\n        resetTransitionStyle();\n\n        clickedListItemIndex.value = selectedIndex;\n        const selected: HTMLElement = sortedListItems.value.find(\n          element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n        )!;\n\n        // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n        if (selectedPromptIndex.value === -1) {\n          // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n          // sorted in descending order by index.\n          sortedListItems.value.forEach(element => {\n            const index = Number.parseInt(element.getAttribute('data-index')!);\n\n            initialOffsetLefts[index] = element.offsetLeft;\n            element.style.left = `${element.offsetLeft}px`;\n            element.style.position = 'absolute';\n            element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n            if (index !== selectedIndex) {\n              element.style.opacity = '1';\n              element.style.transitionDelay = `${\n                (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value\n              }ms`;\n            }\n          });\n\n          // Synchronize the transition delay of the selected element with the last\n          // element to leave\n          selected.style.transitionDelay = `${\n            (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) *\n            singleAnimationDurationInMs.value\n          }ms`;\n\n          // Trigger the animation (selecting) for the selected element\n          requestAnimationFrame(() => {\n            const maxWidth = getComputedStyle(selected).maxWidth;\n\n            selected.style.left = '0px';\n            selected.style.setProperty(\n              'width',\n              `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n              'important'\n            );\n          });\n        } else {\n          // Prepare the selected element for the deselecting animation\n          selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n          selected.style.left = '0px';\n          selected.style.position = 'absolute';\n\n          // Trigger the animation (deselecting) for the selected element\n          selected.style.removeProperty('width');\n          requestAnimationFrame(() => {\n            selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n          });\n        }\n\n        x.emit('UserSelectedARelatedPrompt', selectedIndex);\n      };\n\n      const onBeforeEnter = (el: Element) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Prepare the element for the enter animation\n        element.style.opacity = '0';\n        element.style.transform = 'translateY(5px)';\n        element.style.transitionDelay = `${\n          (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n            ? index - 1\n            : index) * singleAnimationDurationInMs.value\n        }ms`;\n        element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n      };\n\n      const onEnter = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n        const index = Number.parseInt(element.getAttribute('data-index')!);\n\n        // Also part of the preparation for the enter animation, but it needs to be done\n        // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n        element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n        // trigger enter animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '1';\n          element.style.position = 'absolute';\n          element.style.transform = 'translateY(0)';\n        });\n\n        done();\n      };\n\n      const onLeave = (el: Element, done: () => void) => {\n        const element = el as HTMLElement;\n\n        // trigger leave animation\n        requestAnimationFrame(() => {\n          element.style.opacity = '0';\n          element.style.transform = 'translateY(5px)';\n        });\n\n        // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n        setTimeout(done, props.animationDurationInMs);\n      };\n\n      const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n      // Changing the query will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n      return {\n        isSelected,\n        onSelect,\n        onBeforeEnter,\n        onEnter,\n        onLeave,\n        selectedPromptIndex,\n        visibleRelatedPrompts,\n        listItems,\n        isAnimating,\n        x\n      };\n    }\n  });\n</script>\n<style lang=\"css\">\n  .x-related-prompts-tag-list-scroll-container {\n    height: 100%;\n    position: relative;\n  }\n  .x-related-prompts-tag-list {\n    display: flex;\n    gap: 16px;\n    min-width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n  }\n</style>\n"],"names":["DisplayEmitter"],"mappings":";;;;;;;;;;;;;;;;;;;AA8EE;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,kBAAEA,WAAc,EAAE,aAAa,EAAE,YAAW,EAAG;AAC3D,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,SAAS,EAAE,KAA2B;AACtC;;;;AAIE;AACF,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;QACjB,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAoB,EAAA,GAAI,QAAQ,CAAC,gBAAgB,EAAE;YACzF,gBAAgB;YAChB,gBAAe;AAChB,SAAA,CAAC,CAAA;AAEF,QAAA,MAAM,uBAAuB,GAAG,CAAgB,IAAI,CAAC,CAAA;QACrD,MAAM,kBAAkB,GAA2B,EAAE,CAAA;AACrD,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AAC9B,QAAA,MAAM,SAAU,GAAE,GAAG,CAAgB,EAAE,CAAC,CAAA;AAExC,QAAA,MAAM,eAAc,GAAI,QAAQ,CAAgB,MAC9C,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CACvB,CAAC,CAAc,EAAE,CAAc,KAC7B,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAE;AAC/C,YAAA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA,CACjD,CACD,CAAA;;;;QAKD,MAAM,2BAA4B,GAAE,QAAQ,CAC1C,MACE,KAAK,CAAC,qBAAsB;AAC5B,aAAC,oBAAoB,CAAC,KAAI,KAAM,IAAG;AACjC,kBAAE,cAAc,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA;kBAC9B,cAAc,CAAC,KAAK,CAAC,MAAM,CAAA,CAClC,CAAA;QAED,MAAM,mBAAoB,GAAE,QAAQ,CAAC,MAClC,cAAc,CAAC,KAA8B,CAAC,GAAG,CAChD,CAAC,aAAiC,EAAE,KAAa,MAAM;AACrD,YAAA,GAAG,aAAa;YAChB,KAAI;SACL,CAAA,CACH,CACD,CAAA;AAED,QAAA,MAAM,qBAAsB,GAAE,QAAQ,CAAC,MAAM;AAC3C,YAAA,OAAO,mBAAmB,CAAC,KAAI,KAAM,CAAC,CAAA;kBAClC,CAAC,mBAAmB,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;AACvD,kBAAE,mBAAmB,CAAC,KAAK,CAAA;AAC/B,SAAC,CAAC,CAAA;AAEF,QAAA,IAAI,SAAiB,CAAA;QACrB,MAAM,oBAAmB,GAAI,MAAM;AACjC,YAAA,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAA;AACzB,aAAA;AAEA,YAAA,WAAW,CAAC,KAAI,GAAI,IAAI,CAAA;AACxB,YAAA,SAAQ,GAAI,CAAC,UAAU,CAAC,MAAM;AAC5B,gBAAA,WAAW,CAAC,KAAI,GAAI,KAAK,CAAA;AACzB,gBAAA,oBAAoB,CAAC,KAAM,GAAE,IAAI,CAAA;AAEjC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAK;oBACvC,OAAO,CAAC,KAAK,CAAC,OAAM;yBACjB,KAAK,CAAC,GAAG,CAAA;AACT,yBAAA,GAAG,CAAC,IAAK,IAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAA;yBACtC,OAAO,CAAC,QAAO,IAAK;wBACnB,IAAI,QAAO,KAAM,OAAO,EAAE;AACxB,4BAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxC,yBAAA;AACF,qBAAC,CAAC,CAAA;AACN,iBAAC,CAAC,CAAA;AACJ,aAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAA;AACjC,SAAC,CAAA;AAED,QAAA,MAAM,WAAW,CAAC,aAAqB,KAAW;AAChD,YAAA,oBAAoB,EAAE,CAAA;AAEtB,YAAA,oBAAoB,CAAC,KAAM,GAAE,aAAa,CAAA;YAC1C,MAAM,QAAQ,GAAgB,eAAe,CAAC,KAAK,CAAC,IAAI,CACtD,OAAQ,IAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAE,KAAI,aAAY,CAChF,CAAA;;AAGF,YAAA,IAAI,mBAAmB,CAAC,KAAI,KAAM,CAAC,CAAC,EAAE;;;AAGpC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAK;AACvC,oBAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CAAA;AAElE,oBAAA,kBAAkB,CAAC,KAAK,IAAI,OAAO,CAAC,UAAU,CAAA;oBAC9C,OAAO,CAAC,KAAK,CAAC,IAAK,GAAE,GAAG,OAAO,CAAC,UAAU,CAAA,EAAA,CAAI,CAAA;AAC9C,oBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAU,CAAA;oBACnC,OAAO,CAAC,KAAK,CAAC,kBAAmB,GAAE,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAI,CAAA;oBAE3E,IAAI,KAAI,KAAM,aAAa,EAAE;AAC3B,wBAAA,OAAO,CAAC,KAAK,CAAC,OAAQ,GAAE,GAAG,CAAA;wBAC3B,OAAO,CAAC,KAAK,CAAC,eAAgB,GAAE,CAC9B,EAAA,CAAC,KAAM,GAAE,aAAY,GAAI,KAAM,GAAE,QAAQ,CAAC,IAAI,2BAA2B,CAAC,KAC5E,CAAA,EAAA,CAAI,CAAA;AACN,qBAAA;AACF,iBAAC,CAAC,CAAA;;;AAIF,gBAAA,QAAQ,CAAC,KAAK,CAAC,eAAgB,GAAE,CAAA,EAC/B,CAAC,cAAc,CAAC,KAAK,CAAC,MAAO,GAAE,CAAE,GAAE,cAAc,CAAC,KAAK,CAAC,MAAO,GAAE,CAAE,GAAE,CAAC;oBACtE,2BAA2B,CAAC,KAC9B,CAAA,EAAA,CAAI,CAAA;;gBAGJ,qBAAqB,CAAC,MAAM;oBAC1B,MAAM,QAAS,GAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAA;AAEpD,oBAAA,QAAQ,CAAC,KAAK,CAAC,IAAG,GAAI,KAAK,CAAA;oBAC3B,QAAQ,CAAC,KAAK,CAAC,WAAW,CACxB,OAAO,EACP,CAAG,EAAA,QAAO,KAAM,MAAO,GAAE,QAAO,GAAI,MAAM,CAAE,CAAA,EAC5C,WAAU,CACX,CAAA;AACH,iBAAC,CAAC,CAAA;AACF,aAAA;AAAK,iBAAA;;gBAEL,QAAQ,CAAC,KAAK,CAAC,kBAAmB,GAAE,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAI,CAAA;AAC5E,gBAAA,QAAQ,CAAC,KAAK,CAAC,IAAG,GAAI,KAAK,CAAA;AAC3B,gBAAA,QAAQ,CAAC,KAAK,CAAC,QAAO,GAAI,UAAU,CAAA;;AAGpC,gBAAA,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAA;gBACtC,qBAAqB,CAAC,MAAM;oBAC1B,QAAQ,CAAC,KAAK,CAAC,IAAK,GAAE,CAAG,EAAA,kBAAkB,CAAC,aAAa,CAAC,CAAA,EAAA,CAAI,CAAA;AAChE,iBAAC,CAAC,CAAA;AACJ,aAAA;AAEA,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,CAAC,CAAA;AACrD,SAAC,CAAA;AAED,QAAA,MAAM,aAAY,GAAI,CAAC,EAAW,KAAK;YACrC,MAAM,OAAM,GAAI,EAAiB,CAAA;AACjC,YAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CAAA;;AAGlE,YAAA,OAAO,CAAC,KAAK,CAAC,OAAQ,GAAE,GAAG,CAAA;AAC3B,YAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAiB,CAAA;AAC3C,YAAA,OAAO,CAAC,KAAK,CAAC,eAAgB,GAAE,GAC9B,CAAC,oBAAoB,CAAC,KAAM,KAAI,IAAK,IAAG,KAAI,GAAI,oBAAoB,CAAC,KAAI;kBACrE,QAAQ,CAAA;kBACR,KAAK,IAAI,2BAA2B,CAAC,KAC3C,IAAI,CAAA;YACJ,OAAO,CAAC,KAAK,CAAC,kBAAmB,GAAE,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAI,CAAA;AAC7E,SAAC,CAAA;AAED,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAK;YACjD,MAAM,OAAM,GAAI,EAAiB,CAAA;AACjC,YAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CAAA;;;AAIlE,YAAA,OAAO,CAAC,KAAK,CAAC,IAAK,GAAE,CAAG,EAAA,kBAAkB,CAAC,KAAK,CAAE,IAAG,OAAO,CAAC,UAAU,IAAI,CAAA;;YAG3E,qBAAqB,CAAC,MAAM;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAQ,GAAE,GAAG,CAAA;AAC3B,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAU,CAAA;AACnC,gBAAA,OAAO,CAAC,KAAK,CAAC,SAAU,GAAE,eAAe,CAAA;AAC3C,aAAC,CAAC,CAAA;AAEF,YAAA,IAAI,EAAE,CAAA;AACR,SAAC,CAAA;AAED,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAK;YACjD,MAAM,OAAM,GAAI,EAAiB,CAAA;;YAGjC,qBAAqB,CAAC,MAAM;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAQ,GAAE,GAAG,CAAA;AAC3B,gBAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAiB,CAAA;AAC7C,aAAC,CAAC,CAAA;;AAGF,YAAA,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAA;AAC/C,SAAC,CAAA;AAED,QAAA,MAAM,aAAa,CAAC,KAAa,KAAc,mBAAmB,CAAC,KAAM,KAAI,KAAK,CAAA;;;AAIlF,QAAA,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,oBAAoB,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;QAEtE,OAAO;YACL,UAAU;YACV,QAAQ;YACR,aAAa;YACb,OAAO;YACP,OAAO;YACP,mBAAmB;YACnB,qBAAqB;YACrB,SAAS;YACT,WAAW;YACX,CAAA;SACD,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue3.js

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-related-prompt__sliding-panel-content{display:flex;gap:8px}.x-related-prompt__sliding-panel-content-selected{width:100%}.x-related-prompt{border-radius:12px;display:flex;flex-direction:column;height:100%;min-height:112px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:303px}.x-related-prompt-selected{border-bottom-left-radius:0;border-bottom-right-radius:0;min-height:0;width:100%!important}.x-related-prompt-selected__button{width:100%!important}[dir=ltr] .x-related-prompt__button{text-align:left}[dir=rtl] .x-related-prompt__button{text-align:right}.x-related-prompt__button{align-items:start;display:flex;flex-direction:row;flex-grow:1;gap:12px;justify-content:space-between;padding:16px;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:303px}.x-related-prompt__button-info{display:flex;min-height:32px}@media (max-width:743px){.x-related-prompt,.x-related-prompt__button{width:204px}}.x-no-scrollbar::-webkit-scrollbar{display:none}.x-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.x-typewritter-initial{background:linear-gradient(-90deg,transparent 5px,#0000 0) 10px 0,linear-gradient(#575757 0 0) 0 0;background-clip:padding-box,text;background-repeat:no-repeat;background-size:0 200%;color:#0000}.x-typewritter-animation{animation:typewritter calc(var(--suggestion-text-length)*.05s) steps(var(--suggestion-text-length)) forwards}@keyframes typewritter{0%{background-size:0 200%}to{background-size:calc(var(--suggestion-text-length)*1ch) 200%}}.x-staggered-initial{opacity:0;transform:translateY(20px)}.x-staggered-animation{animation:fadeInUp .6s forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}";
+var css = ".x-related-prompts-tag-list-scroll-container{height:100%;position:relative}.x-related-prompts-tag-list{display:flex;gap:16px;min-width:100%}.x-related-prompts-tag-list-item{height:100%}";
 injectCss(css);
 
 export { css, css as default };

package/js/x-modules/tagging/store/module.js

@@ -16,7 +16,11 @@ const taggingXStoreModule = {
         },
         consent: null,
         noResultsTaggingEnabled: false,
-        queryTaggingInfo: null
+        queryTaggingInfo: null,
+        toolingTaggingInfo: {
+            toolingDisplayClick: null,
+            toolingDisplayAdd2Cart: null
+        }
     }),
     getters: {},
     mutations: {

package/js/x-modules/tagging/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingRequest } from '@empathyco/x-types';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { track } from './actions/track.action';\nimport { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {\n      sessionTTLMs: 30 * 60 * 1000,\n      queryTaggingDebounceMs: 2000,\n      clickedResultStorageKey: null,\n      clickedResultStorageTTLMs: null\n    },\n    consent: null,\n    noResultsTaggingEnabled: false,\n    queryTaggingInfo: null\n  }),\n  getters: {},\n  mutations: {\n    setConsent(state, consent) {\n      state.consent = consent;\n    },\n    setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n      state.queryTaggingInfo = queryTaggingInfo;\n    },\n    setNoResultsTaggingEnabled(state, module) {\n      if (module === 'semanticQueries') {\n        state.noResultsTaggingEnabled = true;\n      }\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    track\n  }\n};\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,uBAAuB,EAAE,IAAI;AAC7B,YAAA,yBAAyB,EAAE,IAAI;AAChC,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;KACvB,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;SAC3C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;YACtC,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAChC,gBAAA,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACtC,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,KAAK;AACN,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingRequest } from '@empathyco/x-types';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { track } from './actions/track.action';\nimport { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {\n      sessionTTLMs: 30 * 60 * 1000,\n      queryTaggingDebounceMs: 2000,\n      clickedResultStorageKey: null,\n      clickedResultStorageTTLMs: null\n    },\n    consent: null,\n    noResultsTaggingEnabled: false,\n    queryTaggingInfo: null,\n    toolingTaggingInfo: {\n      toolingDisplayClick: null,\n      toolingDisplayAdd2Cart: null\n    }\n  }),\n  getters: {},\n  mutations: {\n    setConsent(state, consent) {\n      state.consent = consent;\n    },\n    setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n      state.queryTaggingInfo = queryTaggingInfo;\n    },\n    setNoResultsTaggingEnabled(state, module) {\n      if (module === 'semanticQueries') {\n        state.noResultsTaggingEnabled = true;\n      }\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    track\n  }\n};\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,uBAAuB,EAAE,IAAI;AAC7B,YAAA,yBAAyB,EAAE,IAAI;AAChC,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE;AAClB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,sBAAsB,EAAE,IAAI;AAC7B,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;SAC3C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;YACtC,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAChC,gBAAA,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACtC,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,KAAK;AACN,KAAA;;;;;"}

package/js/x-modules/tagging/wiring.js

@@ -135,6 +135,18 @@ const trackAddToCartWire = createTrackWire('add2cart');
  * @public
  */
 const trackDisplayClickedWire = createTrackDisplayWire('displayClick');
+/**
+ * Performs a track of a display result being clicked.
+ *
+ * @public
+ */
+const trackToolingDisplayClickedWire = createTrackToolingDisplayWire();
+/**
+ * Performs a track of a display result being clicked.
+ *
+ * @public
+ */
+const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire();
 /**
  * Performs a track of a display element appearing.
  *
@@ -198,6 +210,51 @@ function createTrackDisplayWire(property) {
         return taggingInfo;
     }), ({ eventPayload: { tagging } }) => !!tagging?.[property]);
 }
+/**
+ * Update the tooling tagging params with the result information.
+ *
+ * @param taggingRequest - The tooling tagging request to be updated.
+ * @param result - The clicked result.
+ * @returns The tagging request updated.
+ *
+ * @internal
+ */
+function updateToolingTaggingWithResult(taggingRequest, result) {
+    taggingRequest.params.productId = result.id;
+    taggingRequest.params.title = result.name;
+    taggingRequest.params.url = result.url;
+    return taggingRequest;
+}
+/**
+ * Factory helper to create a wire for the track of the tooling display click.
+ *
+ * @returns A new wire for the tooling display click of the taggable element.
+ *
+ * @public
+ */
+function createTrackToolingDisplayWire() {
+    return filter(wireDispatch('track', ({ eventPayload, metadata }) => {
+        const taggingInfo = metadata.toolingTagging;
+        const resultInfo = eventPayload;
+        updateToolingTaggingWithResult(taggingInfo, resultInfo);
+        return taggingInfo;
+    }), ({ metadata }) => !!metadata?.toolingTagging);
+}
+/**
+ * Factory helper to create a wire for the track of the tooling display click.
+ *
+ * @returns A new wire for the tooling display add to cart of the taggable element.
+ *
+ * @public
+ */
+function createTrackToolingAdd2CartWire() {
+    return filter(wireDispatch('track', ({ eventPayload, metadata }) => {
+        const taggingInfo = metadata.toolingAdd2CartTagging;
+        const resultInfo = eventPayload;
+        updateToolingTaggingWithResult(taggingInfo, resultInfo);
+        return taggingInfo;
+    }), ({ metadata }) => !!metadata?.toolingAdd2CartTagging);
+}
 /**
  * Factory helper to create a wire to set the queryTagging.
  *
@@ -261,8 +318,14 @@ const taggingWiring = createWiring({
     },
     ModuleRegistered: {
         setNoResultsTaggingEnabledWire
+    },
+    UserClickedARelatedPromptResult: {
+        trackToolingDisplayClickedWire
+    },
+    UserClickedARelatedPromptAdd2Cart: {
+        trackToolingAdd2CartWire
     }
 });
 
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire };
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
 //# sourceMappingURL=wiring.js.map