@empathyco/x-components 6.0.0-alpha.76 → 6.0.0-alpha.78

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

@@ -11,17 +11,17 @@ Component contains an event button that emits [XEventsTypes.UserClickedCloseEven
 ```typescript
 _default: import("vue").DefineComponent<{
     closingEvent: {
-        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted">;
         default: string;
     };
 }, {
     events: import("vue").ComputedRef<Partial<XEventsTypes>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     closingEvent: {
-        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted">;
         default: string;
     };
 }>>, {
-    closingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection";
+    closingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted";
 }, {}>
 ```

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

@@ -11,17 +11,17 @@ Component contains an event button that emits [XEventsTypes.UserClickedOpenEvent
 ```typescript
 _default: import("vue").DefineComponent<{
     openingEvent: {
-        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted">;
         default: string;
     };
 }, {
     events: import("vue").ComputedRef<Partial<XEventsTypes>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     openingEvent: {
-        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection">;
+        type: PropType<"UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted">;
         default: string;
     };
 }>>, {
-    openingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection";
+    openingEvent: "UserClickedCloseEventsModal" | "UserClickedCloseX" | "UserClickedOutOfMainModal" | "UserClickedOpenEventsModal" | "UserClickedOpenX" | "UserClickedOutOfEventsModal" | "UserOpenXProgrammatically" | "UserReachedEmpathizeTop" | "EmpathizeClosed" | "EmpathizeOpened" | "UserClosedEmpathize" | "UserPressedClearHistoryQueries" | "UserClickedEnableHistoryQueries" | "UserClickedDisableHistoryQueries" | "UserClickedConfirmDisableHistoryQueries" | "UserClickedDismissDisableHistoryQueries" | "ScrollRestoreSucceeded" | "ScrollRestoreFailed" | "UserHoveredInSearchBox" | "UserHoveredOutSearchBox" | "UserBlurredSearchBox" | "UserClickedSearchBox" | "UserFocusedSearchBox" | "UserPressedClearSearchBoxButton" | "ReloadSearchRequested" | "UserReachedResultsListEnd" | "UserClickedAbortARedirection" | "RelatedPromptsUnmounted";
 }, {}>
 ```

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

@@ -178,6 +178,8 @@ _default: import("vue").DefineComponent<{
             UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
+            RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: import("..").WireMetadata) => unknown;
+            RelatedPromptsUnmounted: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
         }>>;
         required: true;
     };
@@ -350,6 +352,8 @@ _default: import("vue").DefineComponent<{
             UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
             UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
+            RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: import("..").WireMetadata) => unknown;
+            RelatedPromptsUnmounted: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
         }>>;
         required: true;
     };

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

@@ -190,6 +190,8 @@ _default: import("vue").DefineComponent<{
         UserSelectedARelatedPromptQuery?: number | undefined;
         UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;
         UserClickedARelatedPromptAdd2Cart?: import("@empathyco/x-types").Result | undefined;
+        RelatedPromptsResponseChanged?: import("@empathyco/x-types").RelatedPrompt[] | undefined;
+        RelatedPromptsUnmounted?: void | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
     renderedChildrenFilters: import("vue").ComputedRef<HierarchicalFilterModel[]>;

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

@@ -649,8 +649,10 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [trackBannerClickedWire](./x-components.trackbannerclickedwire.md) | Tracks the tagging of the banner. |
 |  [trackDisplayClickedWire](./x-components.trackdisplayclickedwire.md) | Performs a track of a display result being clicked. |
 |  [trackElementDisplayedWire](./x-components.trackelementdisplayedwire.md) | Performs a track of a display element appearing. |
-|  [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md) | Performs a track of a query with no results that used semantics as fallback. The totalHits will be changed to -1 if semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any semantic queries. |
-|  [trackNoResultsQueryWithSemanticsWireDebounced](./x-components.tracknoresultsquerywithsemanticswiredebounced.md) | . Debounced version of [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md) |
+|  [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) | Performs a track of a query with no results that used related prompts or semantic queries as fallback. The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any related prompts or semantic queries. |
+|  [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md) | . Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) |
+|  [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md) | Performs a track of a query with no results that used semantic queries as fallback. The totalHits will be changed to -1 if semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any semantic queries. |
+|  [trackNoResultsQueryWithSemanticsWireDebounced](./x-components.tracknoresultsquerywithsemanticswiredebounced.md) | Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) |
 |  [trackQueryWire](./x-components.trackquerywire.md) | Tracks the tagging of the query. |
 |  [trackRelatedPromptToolingDisplayClickWire](./x-components.trackrelatedprompttoolingdisplayclickwire.md) | Performs a track of a clicked related prompt. |
 |  [trackResultClickedWire](./x-components.trackresultclickedwire.md) | Tracks the tagging of the result. |

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

@@ -17,6 +17,8 @@ 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. |
+|  [RelatedPromptsResponseChanged](./x-components.relatedpromptsxevents.relatedpromptsresponsechanged.md) |  | RelatedPrompt\[\] | The response list of related prompts has changed. Payload: The new related-prompts list. |
+|  [RelatedPromptsUnmounted](./x-components.relatedpromptsxevents.relatedpromptsunmounted.md) |  | void | The related prompts has been unmounted. |
 |  [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. |

package/docs/API-reference/api/x-components.relatedpromptsxevents.relatedpromptsresponsechanged.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; [RelatedPromptsResponseChanged](./x-components.relatedpromptsxevents.relatedpromptsresponsechanged.md)
+
+## RelatedPromptsXEvents.RelatedPromptsResponseChanged property
+
+The response list of related prompts has changed. Payload: The new related-prompts list.
+
+**Signature:**
+
+```typescript
+RelatedPromptsResponseChanged: RelatedPrompt[];
+```

package/docs/API-reference/api/x-components.relatedpromptsxevents.relatedpromptsunmounted.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; [RelatedPromptsUnmounted](./x-components.relatedpromptsxevents.relatedpromptsunmounted.md)
+
+## RelatedPromptsXEvents.RelatedPromptsUnmounted property
+
+The related prompts has been unmounted.
+
+**Signature:**
+
+```typescript
+RelatedPromptsUnmounted: void;
+```

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

@@ -187,6 +187,8 @@ _default: import("vue").DefineComponent<{
         UserSelectedARelatedPromptQuery?: number | undefined;
         UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;
         UserClickedARelatedPromptAdd2Cart?: import("@empathyco/x-types").Result | undefined;
+        RelatedPromptsResponseChanged?: import("@empathyco/x-types").RelatedPrompt[] | undefined;
+        RelatedPromptsUnmounted?: void | undefined;
     }>;
     innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -177,6 +177,8 @@ _default: import("vue").DefineComponent<{}, {
         UserSelectedARelatedPromptQuery: (payload: number, metadata: WireMetadata) => unknown;
         UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
         UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
+        RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: WireMetadata) => unknown;
+        RelatedPromptsUnmounted: (payload: undefined, metadata: WireMetadata) => unknown;
     }>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

package/docs/API-reference/api/x-components.tracknoresultsquerywithfallbackwire.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; [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
+
+## trackNoResultsQueryWithFallbackWire variable
+
+Performs a track of a query with no results that used related prompts or semantic queries as fallback. The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.
+
+**Signature:**
+
+```typescript
+trackNoResultsQueryWithFallbackWire: Wire<any>
+```

package/docs/API-reference/api/x-components.tracknoresultsquerywithfallbackwiredebounced.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; [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md)
+
+## trackNoResultsQueryWithFallbackWireDebounced variable
+
+. Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
+
+**Signature:**
+
+```typescript
+trackNoResultsQueryWithFallbackWireDebounced: Wire<any>
+```

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

@@ -4,7 +4,12 @@
 
 ## trackNoResultsQueryWithSemanticsWire variable
 
-Performs a track of a query with no results that used semantics as fallback. The totalHits will be changed to -1 if semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any semantic queries.
+> Warning: This API is now obsolete.
+> 
+> - Use [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) instead.
+> 
+
+Performs a track of a query with no results that used semantic queries as fallback. The totalHits will be changed to -1 if semantic queries are found in order to differentiate it from scenarios where the user encounters a no-results page without any semantic queries.
 
 **Signature:**
 

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

@@ -4,7 +4,12 @@
 
 ## trackNoResultsQueryWithSemanticsWireDebounced variable
 
-. Debounced version of [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md)
+> Warning: This API is now obsolete.
+> 
+> - Use [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md) instead.
+> 
+
+Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
 
 **Signature:**
 

package/js/components/base-teleport.vue.js

@@ -5,7 +5,7 @@ import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Teleport, {
-    to: _ctx.teleportHost,
+    to: _ctx.teleportHost.shadowRoot ?? _ctx.teleportHost,
     disabled: _ctx.disabled
   }, [
     renderSlot(_ctx.$slots, "default")

package/js/components/base-teleport.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["teleportHost","_openBlock","_createBlock","_Teleport"],"mappings":";;;;;SACiBA,WAAY,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAG,EAAA,OAAAC,SAAA,EAAQ,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA;IACpC,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;;;;;;;"}
+{"version":3,"file":"base-teleport.vue.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, getCurrentInstance, onUnmounted, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n    const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot\n    if (isIsolated) {\n      teleportHost.attachShadow({ mode: 'open' })\n      ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n      onUnmounted(() => {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n      })\n    }\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":["teleportHost","_openBlock","_createBlock","_Teleport"],"mappings":";;;;;AACiBA,SAAAA,WAAAA,CAAAA,IAAAA,EAAa,gBAAcA,MAAY,EAAA,KAAA,EAAA,QAAA,EAAA;AAAG,EAAA,OAAAC,SAAA,EAAQ,EAAAC,WAAA,CAAAC,QAAA,EAAA;AAAA,IAAA,EAAA,EAAA,IAAA,CAAA,YAAA,CAAA,UAAA,IAAA,IAAA,CAAA,YAAA;IAC/D,QAAa,EAAA,IAAA,CAAA,QAAA;AAAA,GAAA,EAAA;;;;;;;;"}

package/js/components/base-teleport.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, watchEffect } from 'vue';
+import { defineComponent, getCurrentInstance, onUnmounted, watchEffect } from 'vue';
 
 var _sfc_main = defineComponent({
     name: 'BaseTeleport',
@@ -28,6 +28,14 @@ var _sfc_main = defineComponent({
     },
     setup(props) {
         const teleportHost = document.createElement('div');
+        const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot;
+        if (isIsolated) {
+            teleportHost.attachShadow({ mode: 'open' });
+            window.xCSSInjector.addHost(teleportHost.shadowRoot);
+            onUnmounted(() => {
+                window.xCSSInjector.removeHost(teleportHost.shadowRoot);
+            });
+        }
         watchEffect(() => {
             if (props.disabled) {
                 teleportHost.remove();

package/js/components/base-teleport.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAUA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA+B;AACpD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,YAAW,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;QAEjD,WAAW,CAAC,MAAM;YAChB,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,YAAY,CAAC,MAAM,EAAC,CAAA;gBACpB,OAAK;AACP,aAAA;YACA,YAAY,CAAC,SAAU,GAAE,CAAA,iCAAA,EAAoC,KAAK,CAAC,QAAQ,EAAC,CAAA;YAC5E,MAAM,aAAc,GAClB,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;AACP,aAAA;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;AAC7E,YAAA,aAAa,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAA,CAAA;AAC5D,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-teleport.vue2.js","sources":["../../../src/components/base-teleport.vue"],"sourcesContent":["<template>\n  <Teleport :to=\"teleportHost.shadowRoot ?? teleportHost\" :disabled>\n    <slot></slot>\n  </Teleport>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, getCurrentInstance, onUnmounted, watchEffect } from 'vue'\n\nexport default defineComponent({\n  name: 'BaseTeleport',\n  props: {\n    /** The element or css selector to which the component will be teleported. */\n    target: {\n      type: [String, Object] as PropType<string | Element>,\n      required: true,\n    },\n    /**\n     * The position relative to the target\n     * - `beforebegin`: Before the target element.\n     * - `afterbegin`: Inside the target element, before its first child.\n     * - `beforeend`: Inside the target element, after its last child.\n     * - `afterend`: After the target element.\n     * - `onlychild`: Adds it as child and hides all other children of the target element.\n     */\n    position: {\n      type: String as PropType<\n        'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'onlychild'\n      >,\n      default: 'onlychild',\n    },\n    /** If disabled, the slot content will not be teleported */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const teleportHost = document.createElement('div')\n    const isIsolated = !!getCurrentInstance()?.appContext.app._container?.shadowRoot\n    if (isIsolated) {\n      teleportHost.attachShadow({ mode: 'open' })\n      ;(window as any).xCSSInjector.addHost(teleportHost.shadowRoot)\n      onUnmounted(() => {\n        ;(window as any).xCSSInjector.removeHost(teleportHost.shadowRoot)\n      })\n    }\n\n    watchEffect(() => {\n      if (props.disabled) {\n        teleportHost.remove()\n        return\n      }\n      teleportHost.className = `x-base-teleport x-base-teleport--${props.position}`\n      const targetElement =\n        typeof props.target === 'string' ? document.querySelector(props.target) : props.target\n      if (!targetElement) {\n        console.warn(`BaseTeleport: Target element \"${props.target}\" not found.`)\n        return\n      }\n      const position = props.position === 'onlychild' ? 'beforeend' : props.position\n      targetElement.insertAdjacentElement(position, teleportHost)\n    })\n\n    return { teleportHost }\n  },\n})\n</script>\n\n<style lang=\"css\">\n:has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) {\n  display: none;\n}\n</style>\n"],"names":[],"mappings":";;AAUA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA+B;AACpD,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;;;;AAOE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAEL;AACD,YAAA,OAAO,EAAE,WAAW;AACrB,SAAA;;AAED,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,YAAW,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAA,CAAA;AACjD,QAAA,MAAM,UAAS,GAAI,CAAC,CAAC,kBAAkB,EAAE,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,EAAE,UAAS,CAAA;AAC/E,QAAA,IAAI,UAAU,EAAE;YACd,YAAY,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAA,CACzC;YAAC,MAAc,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;YAC7D,WAAW,CAAC,MAAM;gBACd,MAAc,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAClE,aAAC,CAAA,CAAA;AACH,SAAA;QAEA,WAAW,CAAC,MAAM;YAChB,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,YAAY,CAAC,MAAM,EAAC,CAAA;gBACpB,OAAK;AACP,aAAA;YACA,YAAY,CAAC,SAAU,GAAE,CAAA,iCAAA,EAAoC,KAAK,CAAC,QAAQ,EAAC,CAAA;YAC5E,MAAM,aAAc,GAClB,OAAO,KAAK,CAAC,MAAO,KAAI,QAAO,GAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAA,GAAI,KAAK,CAAC,MAAK,CAAA;YACvF,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,CAAA,8BAAA,EAAiC,KAAK,CAAC,MAAM,CAAc,YAAA,CAAA,CAAA,CAAA;gBACxE,OAAK;AACP,aAAA;AACA,YAAA,MAAM,QAAO,GAAI,KAAK,CAAC,QAAS,KAAI,WAAU,GAAI,WAAY,GAAE,KAAK,CAAC,QAAO,CAAA;AAC7E,YAAA,aAAa,CAAC,qBAAqB,CAAC,QAAQ,EAAE,YAAY,CAAA,CAAA;AAC5D,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,YAAa,EAAA,CAAA;KACvB;AACF,CAAA,CAAA;;;;"}

package/js/index.js

@@ -420,7 +420,7 @@ export { DefaultExternalTaggingService } from './x-modules/tagging/service/exter
 export { track } from './x-modules/tagging/store/actions/track.action.js';
 export { taggingEmitters } from './x-modules/tagging/store/emitters.js';
 export { taggingXStoreModule } from './x-modules/tagging/store/module.js';
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire } from './x-modules/tagging/wiring.js';
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithFallbackWire, trackNoResultsQueryWithFallbackWireDebounced, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire } from './x-modules/tagging/wiring.js';
 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';

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      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\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          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"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\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport 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 */\nexport 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\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","_createVNode","_TransitionGroup","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","selectedPromptIndex","isAnimating","_normalizeStyle","onSelect","x"],"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      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\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          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"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\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport 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 */\nexport 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\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    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\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","_createVNode","_TransitionGroup","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","selectedPromptIndex","isAnimating","_normalizeStyle","onSelect","x"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, onBeforeUnmount } from 'vue';
 import _sfc_main$1 from '../../../components/display-emitter.vue.js';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
 import '../../../composables/create-use-device.js';
@@ -198,6 +198,9 @@ var _sfc_main = defineComponent({
         x.on('SearchRequestChanged', false).subscribe(() => {
             resetTransitionStyle([]);
         });
+        onBeforeUnmount(() => {
+            x.emit('RelatedPromptsUnmounted');
+        });
         return {
             onSelect,
             onBeforeEnter,

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      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\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          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"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\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport 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 */\nexport 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\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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"}
+{"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      class=\"x-related-prompts-tag-list\"\n      :css=\"false\"\n      tag=\"ul\"\n      appear\n      @before-enter=\"onBeforeEnter\"\n      @enter=\"onEnter\"\n      @leave=\"onLeave\"\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          :related-prompt=\"relatedPrompt\"\n          :on-select=\"() => onSelect(index)\"\n          :is-selected=\"selectedPromptIndex === index\"\n        >\n          <DisplayEmitter\n            :payload=\"relatedPrompt.tagging?.toolingDisplayTagging\"\n            :event-metadata=\"{\n              feature: 'related-prompts',\n              displayOriginalQuery: x.query.searchBox,\n              replaceable: false,\n            }\"\n          >\n            <RelatedPrompt\n              :related-prompt=\"relatedPrompt\"\n              :selected=\"selectedPromptIndex === index\"\n              @click=\"onSelect(index)\"\n            >\n              <template #related-prompt-extra-content>\n                <slot name=\"related-prompt-extra-content\" :related-prompt=\"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\">\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onBeforeUnmount, ref } from 'vue'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport SlidingPanel from '../../../components/sliding-panel.vue'\nimport { use$x, useState } from '../../../composables'\nimport { relatedPromptsXModule } from '../x-module'\nimport 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 */\nexport 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\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    onBeforeUnmount(() => {\n      x.emit('RelatedPromptsUnmounted')\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/emitters.js

@@ -10,6 +10,7 @@ import { relatedPromptsXStoreModule } from './module.js';
 const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {
     RelatedPromptsRequestUpdated: (_, getters) => getters.request,
     SelectedRelatedPromptChanged: state => state.selectedPrompt,
+    RelatedPromptsResponseChanged: state => state.relatedPrompts,
 });
 
 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  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;;;;"}
+{"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  RelatedPromptsResponseChanged: state => state.relatedPrompts,\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;AAC3D,IAAA,6BAA6B,EAAE,KAAK,IAAI,KAAK,CAAC,cAAc;AAC7D,CAAA;;;;"}

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

@@ -183,13 +183,13 @@ function createTrackWire(property) {
     !!tagging?.[property] && !ignoreInModules?.includes(moduleName));
 }
 /**
- * Performs a track of a query with no results that used semantics as fallback.
- * The totalHits will be changed to -1 if semantic queries are found in order to differentiate
- * it from scenarios where the user encounters a no-results page without any semantic queries.
+ * Performs a track of a query with no results that used related prompts or semantic queries as fallback.
+ * The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate
+ * it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.
  *
  * @public
  */
-const trackNoResultsQueryWithSemanticsWire = filter(wireDispatch('track', ({ eventPayload, state }) => {
+const trackNoResultsQueryWithFallbackWire = filter(wireDispatch('track', ({ eventPayload, state }) => {
     const { queryTaggingInfo } = state;
     const totalHits = eventPayload.length > 0 ? -1 : 0;
     return {
@@ -198,11 +198,27 @@ const trackNoResultsQueryWithSemanticsWire = filter(wireDispatch('track', ({ eve
     };
 }), ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits) === 0);
 /**.
- * Debounced version of {@link trackNoResultsQueryWithSemanticsWire}
+ * Debounced version of {@link trackNoResultsQueryWithFallbackWire}
  *
  * @public
  */
-const trackNoResultsQueryWithSemanticsWireDebounced = moduleDebounce(trackNoResultsQueryWithSemanticsWire, ({ state }) => state.config.queryTaggingDebounceMs, { cancelOn: 'QueryPreviewUnmounted' });
+const trackNoResultsQueryWithFallbackWireDebounced = moduleDebounce(trackNoResultsQueryWithFallbackWire, ({ state }) => state.config.queryTaggingDebounceMs, { cancelOn: ['QueryPreviewUnmounted', 'RelatedPromptsUnmounted'] });
+/**
+ * Performs a track of a query with no results that used semantic queries as fallback.
+ * The totalHits will be changed to -1 if semantic queries are found in order to differentiate
+ * it from scenarios where the user encounters a no-results page without any semantic queries.
+ *
+ * @public
+ * @deprecated - Use {@link trackNoResultsQueryWithFallbackWire} instead.
+ */
+const trackNoResultsQueryWithSemanticsWire = trackNoResultsQueryWithFallbackWire;
+/**
+ * Debounced version of {@link trackNoResultsQueryWithFallbackWire}
+ *
+ * @public
+ * @deprecated - Use {@link trackNoResultsQueryWithFallbackWireDebounced} instead.
+ */
+const trackNoResultsQueryWithSemanticsWireDebounced = trackNoResultsQueryWithFallbackWireDebounced;
 /**
  * Factory helper to create a wire for the track of the display click.
  *
@@ -353,7 +369,10 @@ const taggingWiring = createWiring({
         setQueryTaggingFromQueryPreview,
     },
     SemanticQueriesResponseChanged: {
-        trackNoResultsQueryWithSemanticsWireDebounced,
+        trackNoResultsQueryWithFallbackWireDebounced,
+    },
+    RelatedPromptsResponseChanged: {
+        trackNoResultsQueryWithFallbackWireDebounced,
     },
     ModuleRegistered: {
         setNoResultsTaggingEnabledWire,
@@ -369,5 +388,5 @@ const taggingWiring = createWiring({
     },
 });
 
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithFallbackWire, trackNoResultsQueryWithFallbackWireDebounced, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
 //# sourceMappingURL=wiring.js.map