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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/design-system/deprecated-full-theme.css +368 -368
  3. package/docs/API-reference/api/x-components.baseeventsmodalclose.md +3 -3
  4. package/docs/API-reference/api/x-components.baseeventsmodalopen.md +3 -3
  5. package/docs/API-reference/api/x-components.globalxbus.md +4 -0
  6. package/docs/API-reference/api/x-components.hierarchicalfilter.md +2 -0
  7. package/docs/API-reference/api/x-components.md +4 -2
  8. package/docs/API-reference/api/x-components.relatedpromptsxevents.md +2 -0
  9. package/docs/API-reference/api/x-components.relatedpromptsxevents.relatedpromptsresponsechanged.md +13 -0
  10. package/docs/API-reference/api/x-components.relatedpromptsxevents.relatedpromptsunmounted.md +13 -0
  11. package/docs/API-reference/api/x-components.simplefilter.md +2 -0
  12. package/docs/API-reference/api/x-components.snippetcallbacks.md +2 -0
  13. package/docs/API-reference/api/x-components.tracknoresultsquerywithfallbackwire.md +13 -0
  14. package/docs/API-reference/api/x-components.tracknoresultsquerywithfallbackwiredebounced.md +13 -0
  15. package/docs/API-reference/api/x-components.tracknoresultsquerywithsemanticswire.md +6 -1
  16. package/docs/API-reference/api/x-components.tracknoresultsquerywithsemanticswiredebounced.md +6 -1
  17. package/js/index.js +1 -1
  18. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue.js.map +1 -1
  19. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js +4 -1
  20. package/js/x-modules/related-prompts/components/related-prompts-tag-list.vue2.js.map +1 -1
  21. package/js/x-modules/related-prompts/store/emitters.js +1 -0
  22. package/js/x-modules/related-prompts/store/emitters.js.map +1 -1
  23. package/js/x-modules/tagging/wiring.js +27 -8
  24. package/js/x-modules/tagging/wiring.js.map +1 -1
  25. package/package.json +2 -2
  26. package/report/x-components.api.json +226 -12
  27. package/report/x-components.api.md +31 -9
  28. package/tagging/index.js +1 -1
  29. package/types/components/global-x-bus.vue.d.ts +4 -0
  30. package/types/components/global-x-bus.vue.d.ts.map +1 -1
  31. package/types/components/modals/base-events-modal-close.vue.d.ts +3 -3
  32. package/types/components/modals/base-events-modal-open.vue.d.ts +3 -3
  33. package/types/components/snippet-callbacks.vue.d.ts +2 -0
  34. package/types/components/snippet-callbacks.vue.d.ts.map +1 -1
  35. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts +2 -0
  36. package/types/x-modules/facets/components/filters/hierarchical-filter.vue.d.ts.map +1 -1
  37. package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts +2 -0
  38. package/types/x-modules/facets/components/filters/simple-filter.vue.d.ts.map +1 -1
  39. package/types/x-modules/related-prompts/components/related-prompts-tag-list.vue.d.ts.map +1 -1
  40. package/types/x-modules/related-prompts/events.types.d.ts +10 -1
  41. package/types/x-modules/related-prompts/events.types.d.ts.map +1 -1
  42. package/types/x-modules/related-prompts/store/emitters.d.ts +1 -0
  43. package/types/x-modules/related-prompts/store/emitters.d.ts.map +1 -1
  44. package/types/x-modules/tagging/wiring.d.ts +23 -4
  45. package/types/x-modules/tagging/wiring.d.ts.map +1 -1
@@ -11,17 +11,17 @@ Component contains an event button that emits [XEventsTypes.UserClickedCloseEven
11
11
  ```typescript
12
12
  _default: import("vue").DefineComponent<{
13
13
  closingEvent: {
14
- 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">;
14
+ 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">;
15
15
  default: string;
16
16
  };
17
17
  }, {
18
18
  events: import("vue").ComputedRef<Partial<XEventsTypes>>;
19
19
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  closingEvent: {
21
- 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">;
21
+ 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">;
22
22
  default: string;
23
23
  };
24
24
  }>>, {
25
- 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";
25
+ 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";
26
26
  }, {}>
27
27
  ```
@@ -11,17 +11,17 @@ Component contains an event button that emits [XEventsTypes.UserClickedOpenEvent
11
11
  ```typescript
12
12
  _default: import("vue").DefineComponent<{
13
13
  openingEvent: {
14
- 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">;
14
+ 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">;
15
15
  default: string;
16
16
  };
17
17
  }, {
18
18
  events: import("vue").ComputedRef<Partial<XEventsTypes>>;
19
19
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
20
20
  openingEvent: {
21
- 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">;
21
+ 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">;
22
22
  default: string;
23
23
  };
24
24
  }>>, {
25
- 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";
25
+ 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";
26
26
  }, {}>
27
27
  ```
@@ -178,6 +178,8 @@ _default: import("vue").DefineComponent<{
178
178
  UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
179
179
  UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
180
180
  UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
181
+ RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: import("..").WireMetadata) => unknown;
182
+ RelatedPromptsUnmounted: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
181
183
  }>>;
182
184
  required: true;
183
185
  };
@@ -350,6 +352,8 @@ _default: import("vue").DefineComponent<{
350
352
  UserSelectedARelatedPromptQuery: (payload: number, metadata: import("..").WireMetadata) => unknown;
351
353
  UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
352
354
  UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: import("..").WireMetadata) => unknown;
355
+ RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: import("..").WireMetadata) => unknown;
356
+ RelatedPromptsUnmounted: (payload: undefined, metadata: import("..").WireMetadata) => unknown;
353
357
  }>>;
354
358
  required: true;
355
359
  };
@@ -190,6 +190,8 @@ _default: import("vue").DefineComponent<{
190
190
  UserSelectedARelatedPromptQuery?: number | undefined;
191
191
  UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;
192
192
  UserClickedARelatedPromptAdd2Cart?: import("@empathyco/x-types").Result | undefined;
193
+ RelatedPromptsResponseChanged?: import("@empathyco/x-types").RelatedPrompt[] | undefined;
194
+ RelatedPromptsUnmounted?: void | undefined;
193
195
  }>;
194
196
  innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
195
197
  renderedChildrenFilters: import("vue").ComputedRef<HierarchicalFilterModel[]>;
@@ -649,8 +649,10 @@ X-Components is a library usable everywhere not only for search experiences.
649
649
  | [trackBannerClickedWire](./x-components.trackbannerclickedwire.md) | Tracks the tagging of the banner. |
650
650
  | [trackDisplayClickedWire](./x-components.trackdisplayclickedwire.md) | Performs a track of a display result being clicked. |
651
651
  | [trackElementDisplayedWire](./x-components.trackelementdisplayedwire.md) | Performs a track of a display element appearing. |
652
- | [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. |
653
- | [trackNoResultsQueryWithSemanticsWireDebounced](./x-components.tracknoresultsquerywithsemanticswiredebounced.md) | . Debounced version of [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md) |
652
+ | [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. |
653
+ | [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md) | . Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) |
654
+ | [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. |
655
+ | [trackNoResultsQueryWithSemanticsWireDebounced](./x-components.tracknoresultsquerywithsemanticswiredebounced.md) | Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) |
654
656
  | [trackQueryWire](./x-components.trackquerywire.md) | Tracks the tagging of the query. |
655
657
  | [trackRelatedPromptToolingDisplayClickWire](./x-components.trackrelatedprompttoolingdisplayclickwire.md) | Performs a track of a clicked related prompt. |
656
658
  | [trackResultClickedWire](./x-components.trackresultclickedwire.md) | Tracks the tagging of the result. |
@@ -17,6 +17,8 @@ export interface RelatedPromptsXEvents
17
17
  | Property | Modifiers | Type | Description |
18
18
  | --- | --- | --- | --- |
19
19
  | [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. |
20
+ | [RelatedPromptsResponseChanged](./x-components.relatedpromptsxevents.relatedpromptsresponsechanged.md) | | RelatedPrompt\[\] | The response list of related prompts has changed. Payload: The new related-prompts list. |
21
+ | [RelatedPromptsUnmounted](./x-components.relatedpromptsxevents.relatedpromptsunmounted.md) | | void | The related prompts has been unmounted. |
20
22
  | [SelectedRelatedPromptChanged](./x-components.relatedpromptsxevents.selectedrelatedpromptchanged.md) | | number | Selected Related Prompt has been changed. Payload: Selected Related Prompt index. -1 is deselected. |
21
23
  | [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. |
22
24
  | [UserClickedARelatedPromptResult](./x-components.relatedpromptsxevents.userclickedarelatedpromptresult.md) | | Result | The user has clicked one prompt. Payload: The result that the user clicked. |
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) &gt; [RelatedPromptsResponseChanged](./x-components.relatedpromptsxevents.relatedpromptsresponsechanged.md)
4
+
5
+ ## RelatedPromptsXEvents.RelatedPromptsResponseChanged property
6
+
7
+ The response list of related prompts has changed. Payload: The new related-prompts list.
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ RelatedPromptsResponseChanged: RelatedPrompt[];
13
+ ```
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md) &gt; [RelatedPromptsUnmounted](./x-components.relatedpromptsxevents.relatedpromptsunmounted.md)
4
+
5
+ ## RelatedPromptsXEvents.RelatedPromptsUnmounted property
6
+
7
+ The related prompts has been unmounted.
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ RelatedPromptsUnmounted: void;
13
+ ```
@@ -187,6 +187,8 @@ _default: import("vue").DefineComponent<{
187
187
  UserSelectedARelatedPromptQuery?: number | undefined;
188
188
  UserClickedARelatedPromptResult?: import("@empathyco/x-types").Result | undefined;
189
189
  UserClickedARelatedPromptAdd2Cart?: import("@empathyco/x-types").Result | undefined;
190
+ RelatedPromptsResponseChanged?: import("@empathyco/x-types").RelatedPrompt[] | undefined;
191
+ RelatedPromptsUnmounted?: void | undefined;
190
192
  }>;
191
193
  innerCssClasses: import("vue").ComputedRef<(string | Dictionary<boolean>)[]>;
192
194
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -177,6 +177,8 @@ _default: import("vue").DefineComponent<{}, {
177
177
  UserSelectedARelatedPromptQuery: (payload: number, metadata: WireMetadata) => unknown;
178
178
  UserClickedARelatedPromptResult: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
179
179
  UserClickedARelatedPromptAdd2Cart: (payload: import("@empathyco/x-types").Result, metadata: WireMetadata) => unknown;
180
+ RelatedPromptsResponseChanged: (payload: import("@empathyco/x-types").RelatedPrompt[], metadata: WireMetadata) => unknown;
181
+ RelatedPromptsUnmounted: (payload: undefined, metadata: WireMetadata) => unknown;
180
182
  }>>;
181
183
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
182
184
  ```
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
4
+
5
+ ## trackNoResultsQueryWithFallbackWire variable
6
+
7
+ 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.
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ trackNoResultsQueryWithFallbackWire: Wire<any>
13
+ ```
@@ -0,0 +1,13 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md)
4
+
5
+ ## trackNoResultsQueryWithFallbackWireDebounced variable
6
+
7
+ . Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ trackNoResultsQueryWithFallbackWireDebounced: Wire<any>
13
+ ```
@@ -4,7 +4,12 @@
4
4
 
5
5
  ## trackNoResultsQueryWithSemanticsWire variable
6
6
 
7
- 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.
7
+ > Warning: This API is now obsolete.
8
+ >
9
+ > - Use [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md) instead.
10
+ >
11
+
12
+ 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.
8
13
 
9
14
  **Signature:**
10
15
 
@@ -4,7 +4,12 @@
4
4
 
5
5
  ## trackNoResultsQueryWithSemanticsWireDebounced variable
6
6
 
7
- . Debounced version of [trackNoResultsQueryWithSemanticsWire](./x-components.tracknoresultsquerywithsemanticswire.md)
7
+ > Warning: This API is now obsolete.
8
+ >
9
+ > - Use [trackNoResultsQueryWithFallbackWireDebounced](./x-components.tracknoresultsquerywithfallbackwiredebounced.md) instead.
10
+ >
11
+
12
+ Debounced version of [trackNoResultsQueryWithFallbackWire](./x-components.tracknoresultsquerywithfallbackwire.md)
8
13
 
9
14
  **Signature:**
10
15
 
package/js/index.js CHANGED
@@ -420,7 +420,7 @@ export { DefaultExternalTaggingService } from './x-modules/tagging/service/exter
420
420
  export { track } from './x-modules/tagging/store/actions/track.action.js';
421
421
  export { taggingEmitters } from './x-modules/tagging/store/emitters.js';
422
422
  export { taggingXStoreModule } from './x-modules/tagging/store/module.js';
423
- 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';
423
+ 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';
424
424
  export { taggingXModule } from './x-modules/tagging/x-module.js';
425
425
  export { default as UrlHandler } from './x-modules/url/components/url-handler.vue.js';
426
426
  export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';
@@ -1 +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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"}
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, 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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"}
@@ -1,4 +1,4 @@
1
- import { defineComponent, ref, computed } from 'vue';
1
+ import { defineComponent, ref, computed, onBeforeUnmount } from 'vue';
2
2
  import _sfc_main$1 from '../../../components/display-emitter.vue.js';
3
3
  import SlidingPanel from '../../../components/sliding-panel.vue.js';
4
4
  import '../../../composables/create-use-device.js';
@@ -198,6 +198,9 @@ var _sfc_main = defineComponent({
198
198
  x.on('SearchRequestChanged', false).subscribe(() => {
199
199
  resetTransitionStyle([]);
200
200
  });
201
+ onBeforeUnmount(() => {
202
+ x.emit('RelatedPromptsUnmounted');
203
+ });
201
204
  return {
202
205
  onSelect,
203
206
  onBeforeEnter,
@@ -1 +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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"}
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, 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":";;;;;;;;;;;;;;;;;;;AAyFA;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,uBAAuB;IAC7B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE,kBAAEA,WAAc,EAAE,aAAa,EAAE,YAAW,EAAG;AAC3D,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAM;AACnB;;;;AAIE;QACF,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;AAC7C;;;;AAIE;AACF,QAAA,oBAAoB,EAAE,MAAM;AAC5B;;;;AAIE;AACF,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;;AAKE;AACF,QAAA,SAAS,EAAE,KAA2B;AACtC;;;;AAIE;AACF,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC,CAAA;AAChB,QAAA,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAoB,EAAA,GAAI,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAEzF,QAAA,MAAM,oBAAqB,GAAE,GAAG,CAAgB,IAAI,CAAA,CAAA;QACpD,MAAM,kBAAkB,GAA2B,EAAC,CAAA;AACpD,QAAA,MAAM,WAAU,GAAI,GAAG,CAAC,KAAK,CAAA,CAAA;AAC7B,QAAA,MAAM,SAAU,GAAE,GAAG,CAAgB,EAAE,CAAA,CAAA;AAEvC,QAAA,MAAM,eAAc,GAAI,QAAQ,CAAgB,MAC9C,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CACvB,CAAC,CAAc,EAAE,CAAc,KAC7B,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAE;AAC/C,YAAA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAE,CAAC,CACjD,CACH,CAAA;;;;QAKA,MAAM,2BAA4B,GAAE,QAAQ,CAC1C,MACE,KAAK,CAAC,qBAAsB;AAC5B,aAAC,oBAAoB,CAAC,KAAI,KAAM,IAAG;AACjC,kBAAE,cAAc,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA;kBAC9B,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CACpC,CAAA;AAEA,QAAA,MAAM,mBAAoB,GAAE,QAAQ,CAAC,MACnC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,MAAM,EAAE,GAAG,aAAa,EAAE,KAAM,EAAC,CAAC,CAAC,CACnF,CAAA;AAEA,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MACrC,mBAAmB,CAAC,KAAM,KAAI,CAAC,CAAA;cAC3B,CAAC,mBAAmB,CAAC,KAAK,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;AACvD,cAAE,mBAAmB,CAAC,KAAK,CAC/B,CAAA;AAEA,QAAA,IAAI,SAAgB,CAAA;QACpB,MAAM,oBAAqB,GAAE,CAAC,kBAAA,GAAoC,CAAC,OAAO,CAAC,KAAK;AAC9E,YAAA,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAA,CAAA;AACxB,aAAA;AAEA,YAAA,WAAW,CAAC,QAAQ,IAAG,CAAA;AACvB,YAAA,SAAQ,GAAI,CAAC,UAAU,CAAC,MAAM;AAC5B,gBAAA,WAAW,CAAC,KAAI,GAAI,KAAI,CAAA;AACxB,gBAAA,oBAAoB,CAAC,KAAM,GAAE,IAAG,CAAA;AAEhC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAK;oBACvC,OAAO,CAAC,KAAK,CAAC,OAAM;yBACjB,KAAK,CAAC,GAAG,CAAA;AACT,yBAAA,GAAG,CAAC,IAAK,IAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAA;yBACtC,OAAO,CAAC,QAAO,IAAK;AACnB,wBAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAC1C,4BAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAA,CAAA;AACvC,yBAAA;AACF,qBAAC,CAAA,CAAA;AACL,iBAAC,CAAA,CAAA;AACH,aAAC,EAAE,KAAK,CAAC,qBAAqB,CAAA,CAAA;AAChC,SAAA,CAAA;AAEA,QAAA,MAAM,WAAW,CAAC,aAAqB,KAAW;AAChD,YAAA,oBAAoB,EAAC,CAAA;AAErB,YAAA,oBAAoB,CAAC,KAAI,GAAI,aAAY,CAAA;YACzC,MAAM,QAAQ,GAAgB,eAAe,CAAC,KAAK,CAAC,IAAI,CACtD,OAAQ,IAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,MAAM,aAAa,CAClF,CAAA;;AAGD,YAAA,IAAI,mBAAmB,CAAC,KAAI,KAAM,CAAC,CAAC,EAAE;;;AAGpC,gBAAA,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,OAAM,IAAK;AACvC,oBAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA,CAAA;AAEjE,oBAAA,kBAAkB,CAAC,KAAK,CAAE,GAAE,OAAO,CAAC,UAAS,CAAA;oBAC7C,OAAO,CAAC,KAAK,CAAC,IAAG,GAAI,GAAG,OAAO,CAAC,UAAU,CAAA,EAAA,CAAG,CAAA;AAC7C,oBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAS,CAAA;oBAClC,OAAO,CAAC,KAAK,CAAC,kBAAmB,GAAE,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG,CAAA;oBAE1E,IAAI,KAAI,KAAM,aAAa,EAAE;AAC3B,wBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE,CAAA;wBAC1B,OAAO,CAAC,KAAK,CAAC,eAAgB,GAAE,CAC9B,EAAA,CAAC,KAAM,GAAE,aAAY,GAAI,KAAM,GAAE,QAAQ,CAAC,IAAI,2BAA2B,CAAC,KAC5E,CAAA,EAAA,CAAG,CAAA;AACL,qBAAA;AACF,iBAAC,CAAA,CAAA;;;AAID,gBAAA,QAAQ,CAAC,KAAK,CAAC,eAAgB,GAAE,CAAA,EAC/B,CAAC,cAAc,CAAC,KAAK,CAAC,MAAO,GAAE,CAAE,GAAE,cAAc,CAAC,KAAK,CAAC,MAAO,GAAE,CAAE,GAAE,CAAC;oBACtE,2BAA2B,CAAC,KAC9B,CAAA,EAAA,CAAG,CAAA;;gBAGH,qBAAqB,CAAC,MAAM;oBAC1B,MAAM,QAAS,GAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,QAAO,CAAA;AAEnD,oBAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,KAAI,CAAA;oBAC1B,QAAQ,CAAC,KAAK,CAAC,WAAW,CACxB,OAAO,EACP,CAAG,EAAA,QAAO,KAAM,MAAO,GAAE,QAAO,GAAI,MAAM,CAAE,CAAA,EAC5C,WAAW,CACb,CAAA;AACF,iBAAC,CAAA,CAAA;AACD,aAAA;AAAK,iBAAA;;gBAEL,QAAQ,CAAC,KAAK,CAAC,kBAAiB,GAAI,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG,CAAA;AAC3E,gBAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,KAAI,CAAA;AAC1B,gBAAA,QAAQ,CAAC,KAAK,CAAC,WAAW,UAAS,CAAA;;AAGnC,gBAAA,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAA,CAAA;gBACrC,qBAAqB,CAAC,MAAM;oBAC1B,QAAQ,CAAC,KAAK,CAAC,IAAG,GAAI,CAAG,EAAA,kBAAkB,CAAC,aAAa,CAAC,CAAA,EAAA,CAAG,CAAA;AAC/D,iBAAC,CAAA,CAAA;AACH,aAAA;AAEA,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,aAAa,EAAE;AAClD,gBAAA,aAAa,EAAE,cAAc,CAAC,KAAK,CAAC,aAAa,CAAC;gBAClD,cAAc,EAAE,mBAAmB,CAAC,KAAK;AAC1C,aAAA,CAAA,CAAA;AACH,SAAA,CAAA;AAEA,QAAA,MAAM,aAAY,GAAI,CAAC,EAAW,KAAK;YACrC,MAAM,OAAQ,GAAE,EAAgB,CAAA;AAChC,YAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA,CAAA;;AAGjE,YAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE,CAAA;AAC1B,YAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAgB,CAAA;AAC1C,YAAA,OAAO,CAAC,KAAK,CAAC,eAAgB,GAAE,GAC9B,CAAC,oBAAoB,CAAC,KAAM,KAAI,IAAK,IAAG,KAAI,GAAI,oBAAoB,CAAC,KAAI;kBACrE,QAAQ,CAAA;kBACR,KAAK,IAAI,2BAA2B,CAAC,KAC3C,IAAG,CAAA;YACH,OAAO,CAAC,KAAK,CAAC,kBAAmB,GAAE,GAAG,2BAA2B,CAAC,KAAK,CAAA,EAAA,CAAG,CAAA;AAC5E,SAAA,CAAA;AAEA,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAK;YACjD,MAAM,OAAQ,GAAE,EAAgB,CAAA;AAChC,YAAA,MAAM,KAAM,GAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAE,CAAA,CAAA;;;AAIjE,YAAA,OAAO,CAAC,KAAK,CAAC,IAAK,GAAE,CAAG,EAAA,kBAAkB,CAAC,KAAK,CAAE,IAAG,OAAO,CAAC,UAAU,IAAG,CAAA;;YAG1E,qBAAqB,CAAC,MAAM;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE,CAAA;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,QAAO,GAAI,UAAS,CAAA;AAClC,gBAAA,OAAO,CAAC,KAAK,CAAC,SAAU,GAAE,eAAc,CAAA;AAC1C,aAAC,CAAA,CAAA;AAED,YAAA,IAAI,EAAC,CAAA;AACP,SAAA,CAAA;AAEA,QAAA,MAAM,UAAU,CAAC,EAAW,EAAE,IAAgB,KAAK;YACjD,MAAM,OAAQ,GAAE,EAAgB,CAAA;;YAGhC,qBAAqB,CAAC,MAAM;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,OAAM,GAAI,GAAE,CAAA;AAC1B,gBAAA,OAAO,CAAC,KAAK,CAAC,YAAY,iBAAgB,CAAA;AAC5C,aAAC,CAAA,CAAA;;AAGD,YAAA,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAAA,CAAA;AAC9C,SAAA,CAAA;;;QAIA,CAAC,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM;YAClD,oBAAoB,CAAC,EAAE,CAAA,CAAA;AACzB,SAAC,CAAA,CAAA;QAED,eAAe,CAAC,MAAM;AACpB,YAAA,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAA,CAAA;AAClC,SAAC,CAAA,CAAA;QAED,OAAO;YACL,QAAQ;YACR,aAAa;YACb,OAAO;YACP,OAAO;YACP,mBAAmB;YACnB,qBAAqB;YACrB,SAAS;YACT,WAAW;YACX,CAAC;SACH,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
@@ -10,6 +10,7 @@ import { relatedPromptsXStoreModule } from './module.js';
10
10
  const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {
11
11
  RelatedPromptsRequestUpdated: (_, getters) => getters.request,
12
12
  SelectedRelatedPromptChanged: state => state.selectedPrompt,
13
+ RelatedPromptsResponseChanged: state => state.relatedPrompts,
13
14
  });
14
15
 
15
16
  export { relatedPromptsStoreEmitters };
@@ -1 +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;;;;"}
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 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;;;;"}
@@ -183,13 +183,13 @@ function createTrackWire(property) {
183
183
  !!tagging?.[property] && !ignoreInModules?.includes(moduleName));
184
184
  }
185
185
  /**
186
- * Performs a track of a query with no results that used semantics as fallback.
187
- * The totalHits will be changed to -1 if semantic queries are found in order to differentiate
188
- * it from scenarios where the user encounters a no-results page without any semantic queries.
186
+ * Performs a track of a query with no results that used related prompts or semantic queries as fallback.
187
+ * The totalHits will be changed to -1 if related prompts or semantic queries are found in order to differentiate
188
+ * it from scenarios where the user encounters a no-results page without any related prompts or semantic queries.
189
189
  *
190
190
  * @public
191
191
  */
192
- const trackNoResultsQueryWithSemanticsWire = filter(wireDispatch('track', ({ eventPayload, state }) => {
192
+ const trackNoResultsQueryWithFallbackWire = filter(wireDispatch('track', ({ eventPayload, state }) => {
193
193
  const { queryTaggingInfo } = state;
194
194
  const totalHits = eventPayload.length > 0 ? -1 : 0;
195
195
  return {
@@ -198,11 +198,27 @@ const trackNoResultsQueryWithSemanticsWire = filter(wireDispatch('track', ({ eve
198
198
  };
199
199
  }), ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits) === 0);
200
200
  /**.
201
- * Debounced version of {@link trackNoResultsQueryWithSemanticsWire}
201
+ * Debounced version of {@link trackNoResultsQueryWithFallbackWire}
202
202
  *
203
203
  * @public
204
204
  */
205
- const trackNoResultsQueryWithSemanticsWireDebounced = moduleDebounce(trackNoResultsQueryWithSemanticsWire, ({ state }) => state.config.queryTaggingDebounceMs, { cancelOn: 'QueryPreviewUnmounted' });
205
+ const trackNoResultsQueryWithFallbackWireDebounced = moduleDebounce(trackNoResultsQueryWithFallbackWire, ({ state }) => state.config.queryTaggingDebounceMs, { cancelOn: ['QueryPreviewUnmounted', 'RelatedPromptsUnmounted'] });
206
+ /**
207
+ * Performs a track of a query with no results that used semantic queries as fallback.
208
+ * The totalHits will be changed to -1 if semantic queries are found in order to differentiate
209
+ * it from scenarios where the user encounters a no-results page without any semantic queries.
210
+ *
211
+ * @public
212
+ * @deprecated - Use {@link trackNoResultsQueryWithFallbackWire} instead.
213
+ */
214
+ const trackNoResultsQueryWithSemanticsWire = trackNoResultsQueryWithFallbackWire;
215
+ /**
216
+ * Debounced version of {@link trackNoResultsQueryWithFallbackWire}
217
+ *
218
+ * @public
219
+ * @deprecated - Use {@link trackNoResultsQueryWithFallbackWireDebounced} instead.
220
+ */
221
+ const trackNoResultsQueryWithSemanticsWireDebounced = trackNoResultsQueryWithFallbackWireDebounced;
206
222
  /**
207
223
  * Factory helper to create a wire for the track of the display click.
208
224
  *
@@ -353,7 +369,10 @@ const taggingWiring = createWiring({
353
369
  setQueryTaggingFromQueryPreview,
354
370
  },
355
371
  SemanticQueriesResponseChanged: {
356
- trackNoResultsQueryWithSemanticsWireDebounced,
372
+ trackNoResultsQueryWithFallbackWireDebounced,
373
+ },
374
+ RelatedPromptsResponseChanged: {
375
+ trackNoResultsQueryWithFallbackWireDebounced,
357
376
  },
358
377
  ModuleRegistered: {
359
378
  setNoResultsTaggingEnabledWire,
@@ -369,5 +388,5 @@ const taggingWiring = createWiring({
369
388
  },
370
389
  });
371
390
 
372
- export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
391
+ 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 };
373
392
  //# sourceMappingURL=wiring.js.map