@empathyco/x-components 6.0.0-alpha.55 → 6.0.0-alpha.56

package/docs/API-reference/api/x-components.globalxbus.md

@@ -173,6 +173,7 @@ _default: import("vue").DefineComponent<{
             PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: import("..").WireMetadata) => unknown;
+            SelectedRelatedPromptChanged: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserSelectedARelatedPrompt: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
@@ -344,6 +345,7 @@ _default: import("vue").DefineComponent<{
             PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: import("..").WireMetadata) => unknown;
             RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: import("..").WireMetadata) => unknown;
+            SelectedRelatedPromptChanged: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserSelectedARelatedPrompt: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;

package/docs/API-reference/api/x-components.hierarchicalfilter.md

@@ -185,6 +185,7 @@ _default: import("vue").DefineComponent<{
         PushableUrlStateUpdated?: import("../../../../types").UrlParams | undefined;
         ReplaceableUrlStateUpdated?: import("../../../../types").UrlParams | undefined;
         RelatedPromptsRequestUpdated?: import("@empathyco/x-types").RelatedPromptsRequest | null | undefined;
+        SelectedRelatedPromptChanged?: number | undefined;
         UserSelectedARelatedPrompt?: number | undefined;
         UserSelectedARelatedPromptQuery?: number | undefined;
         UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;

package/docs/API-reference/api/x-components.md

@@ -614,6 +614,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [setUrlParams](./x-components.seturlparams.md) | Sets the search state <code>query</code>. |
 |  [setUrlParamsFromPreview](./x-components.seturlparamsfrompreview.md) | Sets the extra params of the url module from a selectedQueryPreview's extraParams. |
 |  [setUrlParamsWire](./x-components.seturlparamswire.md) | Saves the params from the url. |
+|  [setUrlPrompt](./x-components.seturlprompt.md) | Sets the related prompt of the URL module. |
 |  [setUrlQuery](./x-components.seturlquery.md) | Sets the query of the url module. |
 |  [setUrlQueryFromPreview](./x-components.seturlqueryfrompreview.md) | Sets the url state <code>query</code> with a selectedQueryPreview's query. |
 |  [setUrlRelatedTags](./x-components.seturlrelatedtags.md) | Sets the [related tags](./x-components.relatedtag.md)<!-- -->. |

package/docs/API-reference/api/x-components.relatedpromptsactions.md

@@ -19,4 +19,5 @@ export interface RelatedPromptsActions
 |  [cancelFetchAndSaveRelatedPrompts()](./x-components.relatedpromptsactions.cancelfetchandsaverelatedprompts.md) | Cancels / interrupt [RelatedPromptsActions.fetchAndSaveRelatedPrompts()](./x-components.relatedpromptsactions.fetchandsaverelatedprompts.md) synchronous promise. |
 |  [fetchAndSaveRelatedPrompts(request)](./x-components.relatedpromptsactions.fetchandsaverelatedprompts.md) | Requests a new set of related prompts and stores them in the module. |
 |  [fetchRelatedPrompts(request)](./x-components.relatedpromptsactions.fetchrelatedprompts.md) | Requests a new set of related prompts for the module query, and returns them. |
+|  [setUrlParams(urlParams)](./x-components.relatedpromptsactions.seturlparams.md) | Checks if the URL has params on it and then updates the state with these values. |
 

package/docs/API-reference/api/x-components.relatedpromptsactions.seturlparams.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsActions](./x-components.relatedpromptsactions.md) &gt; [setUrlParams](./x-components.relatedpromptsactions.seturlparams.md)
+
+## RelatedPromptsActions.setUrlParams() method
+
+Checks if the URL has params on it and then updates the state with these values.
+
+**Signature:**
+
+```typescript
+setUrlParams(urlParams: UrlParams): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  urlParams | [UrlParams](./x-components.urlparams.md) | List of params from the url. |
+
+**Returns:**
+
+void
+

package/docs/API-reference/api/x-components.relatedpromptstaglist.md

@@ -25,13 +25,12 @@ _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
-    isSelected: (index: number) => boolean;
     onSelect: (selectedIndex: number) => void;
     onBeforeEnter: (el: Element) => void;
     onEnter: (el: Element, done: () => void) => void;
     onLeave: (el: Element, done: () => void) => void;
-    selectedPromptIndex: import("vue").ComputedRef<any>;
-    visibleRelatedPrompts: import("vue").ComputedRef<{
+    selectedPromptIndex: ComputedRef<number>;
+    visibleRelatedPrompts: ComputedRef<{
         index: number;
         relatedPromptNextQueries?: import("@empathyco/x-types").RelatedPromptNextQuery[] | undefined;
         nextQueries: string[];

package/docs/API-reference/api/x-components.relatedpromptsxevents.md

@@ -17,6 +17,7 @@ export interface RelatedPromptsXEvents
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [RelatedPromptsRequestUpdated](./x-components.relatedpromptsxevents.relatedpromptsrequestupdated.md) |  | RelatedPromptsRequest \| null | Any property of the related-prompts request has changed Payload: The new related-prompts request or <code>null</code> if there is not enough data in the state to conform a valid request. |
+|  [SelectedRelatedPromptChanged](./x-components.relatedpromptsxevents.selectedrelatedpromptchanged.md) |  | number | Selected Related Prompt has been changed. Payload: Selected Related Prompt index. -1 is deselected. |
 |  [UserClickedARelatedPromptAdd2Cart](./x-components.relatedpromptsxevents.userclickedarelatedpromptadd2cart.md) |  | Result | The user has clicked one add to cart from a prompt. Payload: The result that the user clicked. |
 |  [UserClickedARelatedPromptResult](./x-components.relatedpromptsxevents.userclickedarelatedpromptresult.md) |  | Result | The user has clicked one prompt. Payload: The result that the user clicked. |
 |  [UserSelectedARelatedPrompt](./x-components.relatedpromptsxevents.userselectedarelatedprompt.md) |  | number | The selected prompt has changed. Payload: The index of the prompt in the RelatedPrompts list or -1 to remove selection. |

package/docs/API-reference/api/x-components.relatedpromptsxevents.selectedrelatedpromptchanged.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) &gt; [SelectedRelatedPromptChanged](./x-components.relatedpromptsxevents.selectedrelatedpromptchanged.md)
+
+## RelatedPromptsXEvents.SelectedRelatedPromptChanged property
+
+Selected Related Prompt has been changed. Payload: Selected Related Prompt index. -1 is deselected.
+
+**Signature:**
+
+```typescript
+SelectedRelatedPromptChanged: number;
+```

package/docs/API-reference/api/x-components.seturlprompt.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setUrlPrompt](./x-components.seturlprompt.md)
+
+## setUrlPrompt variable
+
+Sets the related prompt of the URL module.
+
+**Signature:**
+
+```typescript
+setUrlPrompt: import("../..").Wire<number>
+```

package/docs/API-reference/api/x-components.simplefilter.md

@@ -182,6 +182,7 @@ _default: import("vue").DefineComponent<{
         PushableUrlStateUpdated?: import("../../../..").UrlParams | undefined;
         ReplaceableUrlStateUpdated?: import("../../../..").UrlParams | undefined;
         RelatedPromptsRequestUpdated?: import("@empathyco/x-types").RelatedPromptsRequest | null | undefined;
+        SelectedRelatedPromptChanged?: number | undefined;
         UserSelectedARelatedPrompt?: number | undefined;
         UserSelectedARelatedPromptQuery?: number | undefined;
         UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;

package/docs/API-reference/api/x-components.snippetcallbacks.md

@@ -172,6 +172,7 @@ _default: import("vue").DefineComponent<{}, {
         PushableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
         ReplaceableUrlStateUpdated: (payload: import("..").UrlParams, metadata: WireMetadata) => unknown;
         RelatedPromptsRequestUpdated: (payload: import("@empathyco/x-types").RelatedPromptsRequest | null, metadata: WireMetadata) => unknown;
+        SelectedRelatedPromptChanged: (payload: number, metadata: WireMetadata) => unknown;
         UserSelectedARelatedPrompt: (payload: number, metadata: WireMetadata) => unknown;
         UserSelectedARelatedPromptQuery: (payload: number, metadata: WireMetadata) => unknown;
         UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;

package/docs/API-reference/api/x-components.urlmutations.md

@@ -21,6 +21,7 @@ export interface UrlMutations extends QueryMutations
 |  [setInitialExtraParams(extraParams)](./x-components.urlmutations.setinitialextraparams.md) | Sets the initial extra params. |
 |  [setPage(page)](./x-components.urlmutations.setpage.md) | Sets the new page. |
 |  [setParams(params)](./x-components.urlmutations.setparams.md) | Sets the new params. |
+|  [setPrompt(prompt)](./x-components.urlmutations.setprompt.md) | Sets the related prompt. |
 |  [setRelatedTags(relatedTags)](./x-components.urlmutations.setrelatedtags.md) | Sets the related tags. |
 |  [setScroll(scroll)](./x-components.urlmutations.setscroll.md) | Sets the url scroll. |
 |  [setSort(sort)](./x-components.urlmutations.setsort.md) | Sets the new sort. |

package/docs/API-reference/api/x-components.urlmutations.setprompt.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setPrompt](./x-components.urlmutations.setprompt.md)
+
+## UrlMutations.setPrompt() method
+
+Sets the related prompt.
+
+**Signature:**
+
+```typescript
+setPrompt(prompt: number): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  prompt | number | The new related prompt index of the URL. |
+
+**Returns:**
+
+void
+

package/docs/API-reference/api/x-components.urlparams.md

@@ -18,6 +18,7 @@ export interface UrlParams
 |  --- | --- | --- | --- |
 |  [filter](./x-components.urlparams.filter.md) |  | string\[\] |  |
 |  [page](./x-components.urlparams.page.md) |  | number |  |
+|  [prompt](./x-components.urlparams.prompt.md) |  | number |  |
 |  [query](./x-components.urlparams.query.md) |  | string |  |
 |  [scroll](./x-components.urlparams.scroll.md) |  | string |  |
 |  [sort](./x-components.urlparams.sort.md) |  | string |  |

package/docs/API-reference/api/x-components.urlparams.prompt.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlParams](./x-components.urlparams.md) &gt; [prompt](./x-components.urlparams.prompt.md)
+
+## UrlParams.prompt property
+
+**Signature:**
+
+```typescript
+prompt: number;
+```

package/js/index.js

@@ -416,7 +416,7 @@ export { taggingXModule } from './x-modules/tagging/x-module.js';
 export { default as UrlHandler } from './x-modules/url/components/url-handler.vue.js';
 export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';
 export { urlXStoreModule } from './x-modules/url/store/module.js';
-export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
+export { setInitialExtraParams, setParams, setUrlFilters, setUrlPage, setUrlParamsFromPreview, setUrlPrompt, setUrlQuery, setUrlQueryFromPreview, setUrlRelatedTags, setUrlScroll, setUrlSelectedFiltersFromPreview, setUrlSort, urlWiring } from './x-modules/url/wiring.js';
 export { urlXModule } from './x-modules/url/x-module.js';
 export { default as ExperienceControls } from './x-modules/experience-controls/components/experience-controls.vue.js';
 export { cancelFetchAndSaveControls, fetchAndSaveExperienceControlsResponse } from './x-modules/experience-controls/store/actions/fetch-and-save-experience-controls.action.js';

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

@@ -45,13 +45,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 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" }),
+                style: normalizeStyle({
+                  ..._ctx.selectedPromptIndex === index && { width: "100%" },
+                  ..._ctx.isAnimating && { pointerEvents: "none" }
+                }),
                 "data-test": "related-prompts-tag-list-item"
               }, [
                 renderSlot(_ctx.$slots, "default", {
                   relatedPrompt,
                   onSelect: () => _ctx.onSelect(index),
-                  isSelected: _ctx.isSelected(index)
+                  isSelected: _ctx.selectedPromptIndex === index
                 }, () => [
                   createVNode(_component_DisplayEmitter, {
                     payload: relatedPrompt.tagging?.toolingDisplayTagging,
@@ -65,7 +68,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       createVNode(_component_RelatedPrompt, {
                         onClick: ($event) => _ctx.onSelect(index),
                         "related-prompt": relatedPrompt,
-                        selected: _ctx.isSelected(index)
+                        selected: _ctx.selectedPromptIndex === index
                       }, {
                         "related-prompt-extra-content": withCtx(() => [
                           renderSlot(_ctx.$slots, "related-prompt-extra-content", { relatedPrompt })

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  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || ''\n    ]\"\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.tagging?.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              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\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 } 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 boolean prop to handle the visiblity of sliding pannel buttons.\n       *\n       * @public\n       */\n      showButtons: { type: Boolean, default: true },\n      /**\n       * The CSS class for the wrapper of all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      scrollContainerClass: 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 = (excludedProperties: Array<string> = ['width']) => {\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 (!excludedProperties.includes(property)) {\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          relatedPrompt: relatedPrompts.value[selectedIndex],\n          selectedPrompt: selectedPromptIndex.value\n        });\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 request will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      x.on('SearchRequestChanged', false).subscribe(() => {\n        resetTransitionStyle([]);\n      });\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    width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","scrollContainerClass","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":"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"}
+{"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    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || ''\n    ]\"\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=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' })\n        }\"\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=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.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=\"selectedPromptIndex === index\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\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, ComputedRef, defineComponent, PropType, ref } 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 boolean prop to handle the visiblity of sliding pannel buttons.\n       *\n       * @public\n       */\n      showButtons: { type: Boolean, default: true },\n      /**\n       * The CSS class for the wrapper of all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      scrollContainerClass: 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: ComputedRef<RelatedPromptModel[]> = useState('relatedPrompts', [\n        'relatedPrompts'\n      ]).relatedPrompts;\n      const selectedPromptIndex: ComputedRef<number> = useState('relatedPrompts', [\n        'selectedPrompt'\n      ]).selectedPrompt;\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.map((relatedPrompt, index) => ({ ...relatedPrompt, index }))\n      );\n\n      const visibleRelatedPrompts = computed(() =>\n        selectedPromptIndex.value !== -1\n          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n          : indexRelatedPrompts.value\n      );\n\n      let timeOutId: number;\n      const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\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 (!excludedProperties.includes(property)) {\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          relatedPrompt: relatedPrompts.value[selectedIndex],\n          selectedPrompt: selectedPromptIndex.value\n        });\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      // Changing the request will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      x.on('SearchRequestChanged', false).subscribe(() => {\n        resetTransitionStyle([]);\n      });\n\n      return {\n        onSelect,\n        onBeforeEnter,\n        onEnter,\n        onLeave,\n        selectedPromptIndex,\n        visibleRelatedPrompts,\n        listItems,\n        isAnimating,\n        x\n      };\n    }\n  });\n</script>\n\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    width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","scrollContainerClass","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","selectedPromptIndex","isAnimating","_normalizeStyle","onSelect","_createVNode"],"mappings":"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"}

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

@@ -73,10 +73,12 @@ var _sfc_main = defineComponent({
     },
     setup(props) {
         const x = use$x();
-        const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [
-            'relatedPrompts',
+        const relatedPrompts = useState('relatedPrompts', [
+            'relatedPrompts'
+        ]).relatedPrompts;
+        const selectedPromptIndex = useState('relatedPrompts', [
             'selectedPrompt'
-        ]);
+        ]).selectedPrompt;
         const clickedListItemIndex = ref(null);
         const initialOffsetLefts = {};
         const isAnimating = ref(false);
@@ -90,15 +92,10 @@ var _sfc_main = defineComponent({
             (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;
-        });
+        const indexRelatedPrompts = computed(() => relatedPrompts.value.map((relatedPrompt, index) => ({ ...relatedPrompt, index })));
+        const visibleRelatedPrompts = computed(() => selectedPromptIndex.value !== -1
+            ? [indexRelatedPrompts.value[selectedPromptIndex.value]]
+            : indexRelatedPrompts.value);
         let timeOutId;
         const resetTransitionStyle = (excludedProperties = ['width']) => {
             if (timeOutId) {
@@ -201,14 +198,12 @@ var _sfc_main = defineComponent({
             // 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 request will trigger the appear animation, so we need to reset the
         // style after it finishes
         x.on('SearchRequestChanged', false).subscribe(() => {
             resetTransitionStyle([]);
         });
         return {
-            isSelected,
             onSelect,
             onBeforeEnter,
             onEnter,

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  <SlidingPanel\n    :key=\"x.query.search\"\n    :reset-on-content-change=\"false\"\n    :button-class=\"buttonClass\"\n    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || ''\n    ]\"\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.tagging?.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              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\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 } 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 boolean prop to handle the visiblity of sliding pannel buttons.\n       *\n       * @public\n       */\n      showButtons: { type: Boolean, default: true },\n      /**\n       * The CSS class for the wrapper of all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      scrollContainerClass: 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 = (excludedProperties: Array<string> = ['width']) => {\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 (!excludedProperties.includes(property)) {\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          relatedPrompt: relatedPrompts.value[selectedIndex],\n          selectedPrompt: selectedPromptIndex.value\n        });\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 request will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      x.on('SearchRequestChanged', false).subscribe(() => {\n        resetTransitionStyle([]);\n      });\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    width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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"}
+{"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    :show-buttons=\"showButtons && selectedPromptIndex === -1\"\n    :scroll-container-class=\"[\n      'x-related-prompts-tag-list-scroll-container',\n      scrollContainerClass || ''\n    ]\"\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=\"{\n          ...(selectedPromptIndex === index && { width: '100%' }),\n          ...(isAnimating && { pointerEvents: 'none' })\n        }\"\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=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.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=\"selectedPromptIndex === index\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n              </template>\n            </RelatedPrompt>\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, ComputedRef, defineComponent, PropType, ref } 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 boolean prop to handle the visiblity of sliding pannel buttons.\n       *\n       * @public\n       */\n      showButtons: { type: Boolean, default: true },\n      /**\n       * The CSS class for the wrapper of all the related prompt wrapper elements.\n       *\n       * @public\n       */\n      scrollContainerClass: 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: ComputedRef<RelatedPromptModel[]> = useState('relatedPrompts', [\n        'relatedPrompts'\n      ]).relatedPrompts;\n      const selectedPromptIndex: ComputedRef<number> = useState('relatedPrompts', [\n        'selectedPrompt'\n      ]).selectedPrompt;\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.map((relatedPrompt, index) => ({ ...relatedPrompt, index }))\n      );\n\n      const visibleRelatedPrompts = computed(() =>\n        selectedPromptIndex.value !== -1\n          ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n          : indexRelatedPrompts.value\n      );\n\n      let timeOutId: number;\n      const resetTransitionStyle = (excludedProperties: Array<string> = ['width']) => {\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 (!excludedProperties.includes(property)) {\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          relatedPrompt: relatedPrompts.value[selectedIndex],\n          selectedPrompt: selectedPromptIndex.value\n        });\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      // Changing the request will trigger the appear animation, so we need to reset the\n      // style after it finishes\n      x.on('SearchRequestChanged', false).subscribe(() => {\n        resetTransitionStyle([]);\n      });\n\n      return {\n        onSelect,\n        onBeforeEnter,\n        onEnter,\n        onLeave,\n        selectedPromptIndex,\n        visibleRelatedPrompts,\n        listItems,\n        isAnimating,\n        x\n      };\n    }\n  });\n</script>\n\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    width: 100%;\n  }\n  .x-related-prompts-tag-list-item {\n    height: 100%;\n    flex-shrink: 0;\n  }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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"}

package/js/x-modules/related-prompts/store/actions/set-url-params.action.js

@@ -0,0 +1,15 @@
+/**
+ * Default implementation setUrlParams.
+ *
+ * @param context - The context of the actions, provided by Vuex.
+ *
+ * @param urlParams - List of params from the url.
+ * @public
+ */
+const setUrlParams = ({ commit }, { query, prompt }) => {
+    commit('setQuery', query);
+    commit('setSelectedPrompt', prompt);
+};
+
+export { setUrlParams };
+//# sourceMappingURL=set-url-params.action.js.map

package/js/x-modules/related-prompts/store/actions/set-url-params.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-url-params.action.js","sources":["../../../../../../src/x-modules/related-prompts/store/actions/set-url-params.action.ts"],"sourcesContent":["import { RelatedPromptsXStoreModule } from '../types';\n\n/**\n * Default implementation setUrlParams.\n *\n * @param context - The context of the actions, provided by Vuex.\n *\n * @param urlParams - List of params from the url.\n * @public\n */\nexport const setUrlParams: RelatedPromptsXStoreModule['actions']['setUrlParams'] = (\n  { commit },\n  { query, prompt }\n) => {\n  commit('setQuery', query);\n  commit('setSelectedPrompt', prompt);\n};\n"],"names":[],"mappings":"AAEA;;;;;;;AAOG;AACI,MAAM,YAAY,GAA0D,CACjF,EAAE,MAAM,EAAE,EACV,EAAE,KAAK,EAAE,MAAM,EAAE,KACf;AACF,IAAA,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC1B,IAAA,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;AACtC;;;;"}

package/js/x-modules/related-prompts/store/emitters.js

@@ -8,7 +8,8 @@ import { relatedPromptsXStoreModule } from './module.js';
  * @internal
  */
 const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {
-    RelatedPromptsRequestUpdated: (_, getters) => getters.request
+    RelatedPromptsRequestUpdated: (_, getters) => getters.request,
+    SelectedRelatedPromptChanged: state => state.selectedPrompt
 });
 
 export { relatedPromptsStoreEmitters };

package/js/x-modules/related-prompts/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-prompts/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { relatedPromptsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the related-prompts module.\n *\n * @internal\n */\nexport const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {\n  RelatedPromptsRequestUpdated: (_, getters) => getters.request\n});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,2BAA2B,GAAG,mBAAmB,CAAC,0BAA0B,EAAE;IACzF,4BAA4B,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC9D,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/related-prompts/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { relatedPromptsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the related-prompts module.\n *\n * @internal\n */\nexport const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {\n  RelatedPromptsRequestUpdated: (_, getters) => getters.request,\n  SelectedRelatedPromptChanged: state => state.selectedPrompt\n});\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,2BAA2B,GAAG,mBAAmB,CAAC,0BAA0B,EAAE;IACzF,4BAA4B,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO;AAC7D,IAAA,4BAA4B,EAAE,KAAK,IAAI,KAAK,CAAC,cAAc;AAC5D,CAAA;;;;"}

package/js/x-modules/related-prompts/store/module.js

@@ -2,6 +2,7 @@ import { setStatus } from '../../../store/utils/status-store.utils.js';
 import { setQuery } from '../../../store/utils/query.utils.js';
 import { fetchAndSaveRelatedPrompts, cancelFetchAndSaveRelatedPrompts } from './actions/fetch-and-save-related-prompts.action.js';
 import { fetchRelatedPrompts } from './actions/fetch-related-prompts.action.js';
+import { setUrlParams } from './actions/set-url-params.action.js';
 import { request } from './getters/request.getter.js';
 
 /**
@@ -31,12 +32,7 @@ const relatedPromptsXStoreModule = {
             state.relatedPrompts = products;
         },
         setSelectedPrompt(state, selectedPrompt) {
-            if (state.selectedPrompt === selectedPrompt) {
-                state.selectedPrompt = -1;
-            }
-            else {
-                state.selectedPrompt = selectedPrompt;
-            }
+            state.selectedPrompt = state.selectedPrompt === selectedPrompt ? -1 : selectedPrompt;
         },
         setSelectedQuery(state, selectedQuery) {
             state.selectedQuery = selectedQuery;
@@ -53,7 +49,8 @@ const relatedPromptsXStoreModule = {
     actions: {
         fetchRelatedPrompts,
         fetchAndSaveRelatedPrompts,
-        cancelFetchAndSaveRelatedPrompts
+        cancelFetchAndSaveRelatedPrompts,
+        setUrlParams
     }
 };
 

package/js/x-modules/related-prompts/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/related-prompts/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { RelatedPromptsXStoreModule } from './types';\nimport {\n  cancelFetchAndSaveRelatedPrompts,\n  fetchAndSaveRelatedPrompts\n} from './actions/fetch-and-save-related-prompts.action';\nimport { fetchRelatedPrompts } from './actions/fetch-related-prompts.action';\nimport { request } from './getters/request.getter';\n\n/**\n * {@link XStoreModule} For the related prompt module.\n *\n * @internal\n */\nexport const relatedPromptsXStoreModule: RelatedPromptsXStoreModule = {\n  state: () => ({\n    query: '',\n    relatedPrompts: [],\n    selectedPrompt: -1,\n    selectedQuery: -1,\n    status: 'initial',\n    params: {}\n  }),\n  getters: {\n    request\n  },\n  mutations: {\n    setStatus,\n    setQuery,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setRelatedPromptsProducts(state, products) {\n      state.relatedPrompts = products;\n    },\n    setSelectedPrompt(state, selectedPrompt) {\n      if (state.selectedPrompt === selectedPrompt) {\n        state.selectedPrompt = -1;\n      } else {\n        state.selectedPrompt = selectedPrompt;\n      }\n    },\n    setSelectedQuery(state, selectedQuery) {\n      state.selectedQuery = selectedQuery;\n    },\n    resetRelatedPromptsState(state) {\n      state.selectedQuery = -1;\n      state.selectedPrompt = -1;\n      state.relatedPrompts = [];\n    },\n    resetSelectedPrompt(state) {\n      state.selectedPrompt = -1;\n    }\n  },\n  actions: {\n    fetchRelatedPrompts,\n    fetchAndSaveRelatedPrompts,\n    cancelFetchAndSaveRelatedPrompts\n  }\n};\n"],"names":[],"mappings":";;;;;;AAUA;;;;AAIG;AACU,MAAA,0BAA0B,GAA+B;AACpE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,CAAC,CAAC;QAClB,aAAa,EAAE,CAAC,CAAC;AACjB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;AACR,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS;QACT,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,yBAAyB,CAAC,KAAK,EAAE,QAAQ,EAAA;AACvC,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;SACjC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAA;AACrC,YAAA,IAAI,KAAK,CAAC,cAAc,KAAK,cAAc,EAAE;AAC3C,gBAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAC3B,aAAA;AAAM,iBAAA;AACL,gBAAA,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC;AACvC,aAAA;SACF;QACD,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAA;AACnC,YAAA,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;SACrC;AACD,QAAA,wBAAwB,CAAC,KAAK,EAAA;AAC5B,YAAA,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;AACzB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAC1B,YAAA,KAAK,CAAC,cAAc,GAAG,EAAE,CAAC;SAC3B;AACD,QAAA,mBAAmB,CAAC,KAAK,EAAA;AACvB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;SAC3B;AACF,KAAA;AACD,IAAA,OAAO,EAAE;QACP,mBAAmB;QACnB,0BAA0B;QAC1B,gCAAgC;AACjC,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/related-prompts/store/module.ts"],"sourcesContent":["import { setStatus } from '../../../store/utils/status-store.utils';\nimport { setQuery } from '../../../store/utils/query.utils';\nimport { RelatedPromptsXStoreModule } from './types';\nimport {\n  cancelFetchAndSaveRelatedPrompts,\n  fetchAndSaveRelatedPrompts\n} from './actions/fetch-and-save-related-prompts.action';\nimport { fetchRelatedPrompts } from './actions/fetch-related-prompts.action';\nimport { setUrlParams } from './actions/set-url-params.action';\nimport { request } from './getters/request.getter';\n\n/**\n * {@link XStoreModule} For the related prompt module.\n *\n * @internal\n */\nexport const relatedPromptsXStoreModule: RelatedPromptsXStoreModule = {\n  state: () => ({\n    query: '',\n    relatedPrompts: [],\n    selectedPrompt: -1,\n    selectedQuery: -1,\n    status: 'initial',\n    params: {}\n  }),\n  getters: {\n    request\n  },\n  mutations: {\n    setStatus,\n    setQuery,\n    setParams(state, params) {\n      state.params = params;\n    },\n    setRelatedPromptsProducts(state, products) {\n      state.relatedPrompts = products;\n    },\n    setSelectedPrompt(state, selectedPrompt) {\n      state.selectedPrompt = state.selectedPrompt === selectedPrompt ? -1 : selectedPrompt;\n    },\n    setSelectedQuery(state, selectedQuery) {\n      state.selectedQuery = selectedQuery;\n    },\n    resetRelatedPromptsState(state) {\n      state.selectedQuery = -1;\n      state.selectedPrompt = -1;\n      state.relatedPrompts = [];\n    },\n    resetSelectedPrompt(state) {\n      state.selectedPrompt = -1;\n    }\n  },\n  actions: {\n    fetchRelatedPrompts,\n    fetchAndSaveRelatedPrompts,\n    cancelFetchAndSaveRelatedPrompts,\n    setUrlParams\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAWA;;;;AAIG;AACU,MAAA,0BAA0B,GAA+B;AACpE,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,cAAc,EAAE,EAAE;QAClB,cAAc,EAAE,CAAC,CAAC;QAClB,aAAa,EAAE,CAAC,CAAC;AACjB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE;QACP,OAAO;AACR,KAAA;AACD,IAAA,SAAS,EAAE;QACT,SAAS;QACT,QAAQ;QACR,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;SACvB;QACD,yBAAyB,CAAC,KAAK,EAAE,QAAQ,EAAA;AACvC,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;SACjC;QACD,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAA;AACrC,YAAA,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,KAAK,cAAc,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC;SACtF;QACD,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAA;AACnC,YAAA,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;SACrC;AACD,QAAA,wBAAwB,CAAC,KAAK,EAAA;AAC5B,YAAA,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;AACzB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;AAC1B,YAAA,KAAK,CAAC,cAAc,GAAG,EAAE,CAAC;SAC3B;AACD,QAAA,mBAAmB,CAAC,KAAK,EAAA;AACvB,YAAA,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;SAC3B;AACF,KAAA;AACD,IAAA,OAAO,EAAE;QACP,mBAAmB;QACnB,0BAA0B;QAC1B,gCAAgC;QAChC,YAAY;AACb,KAAA;;;;;"}