npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.42 → 6.0.0-alpha.44 - Mend

@empathyco/x-components 6.0.0-alpha.42 → 6.0.0-alpha.44

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

package/docs/API-reference/api/x-adapter-platform.platformrelatedprompttagging.md CHANGED Viewed

@@ -18,4 +18,5 @@ export interface PlatformRelatedPromptTagging
 |  --- | --- | --- | --- |
 |  [nextQueries](./x-adapter-platform.platformrelatedprompttagging.nextqueries.md) |  | Dictionary&lt;[PlatformRelatedPromptNextQueriesTagging](./x-adapter-platform.platformrelatedpromptnextqueriestagging.md)<!-- -->&gt; |  |
 |  [toolingDisplay](./x-adapter-platform.platformrelatedprompttagging.toolingdisplay.md) |  | string |  |
+|  [toolingDisplayClick](./x-adapter-platform.platformrelatedprompttagging.toolingdisplayclick.md) |  | string |  |

package/docs/API-reference/api/x-adapter-platform.platformrelatedprompttagging.toolingdisplayclick.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-adapter-platform](./x-adapter-platform.md) &gt; [PlatformRelatedPromptTagging](./x-adapter-platform.platformrelatedprompttagging.md) &gt; [toolingDisplayClick](./x-adapter-platform.platformrelatedprompttagging.toolingdisplayclick.md)
+## PlatformRelatedPromptTagging.toolingDisplayClick property
+**Signature:**
+```typescript
+toolingDisplayClick: string;
+```

package/docs/API-reference/api/x-components.createtrackrelatedprompttoolingdisplayclickwire.md ADDED Viewed

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [createTrackRelatedPromptToolingDisplayClickWire](./x-components.createtrackrelatedprompttoolingdisplayclickwire.md)
+## createTrackRelatedPromptToolingDisplayClickWire() function
+Factory helper to create a wire for the track of the tooling display click in a related prompt.
+**Signature:**
+```typescript
+export declare function createTrackRelatedPromptToolingDisplayClickWire(): Wire<any>;
+```
+**Returns:**
+[Wire](./x-components.wire.md)<!-- -->&lt;any&gt;
+A new wire for the tooling display click of the taggable element.

package/docs/API-reference/api/x-components.createtracktoolingadd2cartwire.md CHANGED Viewed

@@ -4,7 +4,7 @@
 ## createTrackToolingAdd2CartWire() function
-Factory helper to create a wire for the track of the tooling display click.
+Factory helper to create a wire for the track of the tooling display add to cart.
 **Signature:**

package/docs/API-reference/api/x-components.displayclickprovider.md CHANGED Viewed

@@ -8,6 +8,10 @@
 ```typescript
 _default: import("vue").DefineComponent<{
+    resultFeature: {
+        type: PropType<ResultFeature>;
+        required: true;
+    };
     ignoreResultClickEvent: {
         type: BooleanConstructor;
         default: boolean;
@@ -30,6 +34,10 @@ _default: import("vue").DefineComponent<{
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | "", unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    resultFeature: {
+        type: PropType<ResultFeature>;
+        required: true;
+    };
     ignoreResultClickEvent: {
         type: BooleanConstructor;
         default: boolean;

package/docs/API-reference/api/x-components.empathize.md CHANGED Viewed

@@ -25,7 +25,7 @@ _default: import("vue").DefineComponent<{
 }, {
     close: () => void;
     empathizeRef: import("vue").Ref<HTMLDivElement | undefined>;
-    hasContent: import("vue").Ref<boolean>;
+    hasContent: import("vue").ComputedRef<boolean>;
     isOpen: import("vue").Ref<boolean>;
     open: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -36,7 +36,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [createSetQueryTaggingFromQueryPreview()](./x-components.createsetquerytaggingfromquerypreview.md) | Factory helper to create a wire to set the queryTagging. |
 |  [createStoreEmitters(storeModule, emitters)](./x-components.createstoreemitters.md) | Helper function for creating type-safe [StoreEmitters](./x-components.storeemitters.md)<!-- -->. |
 |  [createTrackDisplayWire(property)](./x-components.createtrackdisplaywire.md) | Factory helper to create a wire for the track of the display click. |
-|  [createTrackToolingAdd2CartWire()](./x-components.createtracktoolingadd2cartwire.md) | Factory helper to create a wire for the track of the tooling display click. |
+|  [createTrackRelatedPromptToolingDisplayClickWire()](./x-components.createtrackrelatedprompttoolingdisplayclickwire.md) | Factory helper to create a wire for the track of the tooling display click in a related prompt. |
+|  [createTrackToolingAdd2CartWire()](./x-components.createtracktoolingadd2cartwire.md) | Factory helper to create a wire for the track of the tooling display add to cart. |
 |  [createTrackToolingDisplayWire()](./x-components.createtracktoolingdisplaywire.md) | Factory helper to create a wire for the track of the tooling display click. |
 |  [createTrackWire(property)](./x-components.createtrackwire.md) | Factory helper to create a wire for the track of a taggable element. |
 |  [createUseDevice(devices)](./x-components.createusedevice.md) | Factory function that creates a composable for device detection using the devices parameter to configure breakpoints. |
@@ -647,6 +648,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [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) |
 |  [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. |
 |  [trackToolingAdd2CartWire](./x-components.tracktoolingadd2cartwire.md) | Performs a track of a display result being clicked. |
 |  [trackToolingDisplayClickedWire](./x-components.tracktoolingdisplayclickedwire.md) | Performs a track of a display result being clicked. |

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

@@ -33,13 +33,14 @@ _default: import("vue").DefineComponent<{
     selectedPromptIndex: import("vue").ComputedRef<any>;
     visibleRelatedPrompts: import("vue").ComputedRef<{
         index: number;
-        relatedPromptNextQueries: import("@empathyco/x-types").RelatedPromptNextQuery[];
+        relatedPromptNextQueries?: import("@empathyco/x-types").RelatedPromptNextQuery[] | undefined;
         nextQueries: string[];
         suggestionText: string;
         type: string;
         toolingDisplayTagging?: import("@empathyco/x-types").TaggingRequest | undefined;
         tagging?: {
             toolingDisplayTagging?: import("@empathyco/x-types").TaggingRequest | undefined;
+            toolingDisplayClickTagging?: import("@empathyco/x-types").TaggingRequest | undefined;
             nextQueriesTagging?: import("@empathyco/x-types").RelatedPromptNextQuery[] | undefined;
         } | undefined;
         modelName: "RelatedPrompt";

package/docs/API-reference/api/x-components.trackrelatedprompttoolingdisplayclickwire.md ADDED Viewed

@@ -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; [trackRelatedPromptToolingDisplayClickWire](./x-components.trackrelatedprompttoolingdisplayclickwire.md)
+## trackRelatedPromptToolingDisplayClickWire variable
+Performs a track of a clicked related prompt.
+**Signature:**
+```typescript
+trackRelatedPromptToolingDisplayClickWire: Wire<any>
+```

package/docs/API-reference/api/x-types.relatedprompt.md CHANGED Viewed

@@ -18,9 +18,9 @@ export interface RelatedPrompt extends NamedModel<'RelatedPrompt'>
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [nextQueries](./x-types.relatedprompt.nextqueries.md) |  | string\[\] | The queries of the next queries related to the prompt. |
-|  [relatedPromptNextQueries](./x-types.relatedprompt.relatedpromptnextqueries.md) |  | [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)<!-- -->\[\] | The next queries related to the prompt. |
+|  [relatedPromptNextQueries?](./x-types.relatedprompt.relatedpromptnextqueries.md) |  | [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)<!-- -->\[\] | _(Optional)_ The next queries related to the prompt. |
 |  [suggestionText](./x-types.relatedprompt.suggestiontext.md) |  | string | The prompt. |
-|  [tagging?](./x-types.relatedprompt.tagging.md) |  | { toolingDisplayTagging?: [TaggingRequest](./x-types.taggingrequest.md)<!-- -->; nextQueriesTagging?: [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)<!-- -->\[\]; } | _(Optional)_ Related prompt tagging. |
+|  [tagging?](./x-types.relatedprompt.tagging.md) |  | { toolingDisplayTagging?: [TaggingRequest](./x-types.taggingrequest.md)<!-- -->; toolingDisplayClickTagging?: [TaggingRequest](./x-types.taggingrequest.md)<!-- -->; nextQueriesTagging?: [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)<!-- -->\[\]; } | _(Optional)_ Related prompt tagging. |
 |  [toolingDisplayTagging?](./x-types.relatedprompt.toolingdisplaytagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | _(Optional)_ The tooling display tagging of the prompt. |
 |  [type](./x-types.relatedprompt.type.md) |  | string | The type of the prompt. |

package/docs/API-reference/api/x-types.relatedprompt.relatedpromptnextqueries.md CHANGED Viewed

@@ -9,5 +9,5 @@ The next queries related to the prompt.
 **Signature:**
 ```typescript
-relatedPromptNextQueries: RelatedPromptNextQuery[];
+relatedPromptNextQueries?: RelatedPromptNextQuery[];
 ```

package/docs/API-reference/api/x-types.relatedprompt.tagging.md CHANGED Viewed

@@ -11,6 +11,7 @@ Related prompt tagging.
 ```typescript
 tagging?: {
         toolingDisplayTagging?: TaggingRequest;
+        toolingDisplayClickTagging?: TaggingRequest;
         nextQueriesTagging?: RelatedPromptNextQuery[];
     };
 ```

package/docs/API-reference/components/common/x-components.display-click-provider.md CHANGED Viewed

@@ -10,6 +10,7 @@ title: DisplayClickProvider
 | Name                                | Description | Type                        | Default                |
 | ----------------------------------- | ----------- | --------------------------- | ---------------------- |
+| <code>resultFeature</code>          |             | <code>ResultFeature</code>  | <code></code>          |
 | <code>ignoreResultClickEvent</code> |             | <code>boolean</code>        | <code>false</code>     |
 | <code>toolingDisplayTagging</code>  |             | <code>TaggingRequest</code> | <code>undefined</code> |
 | <code>toolingAdd2CartTagging</code> |             | <code>TaggingRequest</code> | <code>undefined</code> |

package/js/components/display-click-provider.vue.js CHANGED Viewed

@@ -16,6 +16,10 @@ import '@vueuse/core';
 var _sfc_main = defineComponent({
     name: 'DisplayClickProvider',
     props: {
+        resultFeature: {
+            type: String,
+            required: true
+        },
         ignoreResultClickEvent: {
             type: Boolean,
             default: false
@@ -40,6 +44,7 @@ var _sfc_main = defineComponent({
         const x = use$x();
         const displayClickMetadata = computed(() => ({
             displayOriginalQuery: x.query.search,
+            feature: props.resultFeature,
             queryTagging: props.queryTagging,
             toolingTagging: props.toolingDisplayTagging,
             toolingAdd2CartTagging: props.toolingAdd2CartTagging

package/js/components/display-click-provider.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n import type { TaggingRequest } from '@empathyco/x-types';\n import type { PropType } from 'vue';\n // eslint-disable-next-line no-duplicate-imports\n import { computed, defineComponent, provide } from 'vue';\n import { use$x } from '../composables/index';\n import { DisplayWireMetadata } from '../wiring/index';\n\n export default defineComponent({\n name: 'DisplayClickProvider',\n props: {\n ignoreResultClickEvent: {\n type: Boolean,\n default: false\n },\n toolingDisplayTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n },\n toolingAdd2CartTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n },\n queryTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n }\n },\n setup(props, { slots }) {\n const x = use$x();\n\n const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n displayOriginalQuery: x.query.search,\n queryTagging: props.queryTagging,\n toolingTagging: props.toolingDisplayTagging,\n toolingAdd2CartTagging: props.toolingAdd2CartTagging\n }));\n\n provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);\n provide('resultAddToCartExtraEventsMetadata', {\n toolingAdd2CartTagging: props.toolingAdd2CartTagging\n });\n\n provide('resultClickExtraEvents', [\n 'UserClickedARelatedPromptResult',\n 'UserClickedADisplayResult'\n ]);\n provide('resultLinkMetadataPerEvent', {\n UserClickedARelatedPromptResult: displayClickMetadata.value,\n UserClickedADisplayResult: displayClickMetadata.value,\n ...(props.ignoreResultClickEvent && {\n UserClickedAResult: {\n ignoreInModules: ['tagging']\n }\n })\n });\n\n return () => slots.default?.()[0] ?? '';\n }\n });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAGE;~~AAKA~~,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AACnB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAA;QAC5E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAA;QAEF,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QACF,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAA;AAC7B,iBAAA;aACD;AACF,SAAA,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\n import type { TaggingRequest } from '@empathyco/x-types';\n import type { PropType } from 'vue';\n // eslint-disable-next-line no-duplicate-imports\n import { computed, defineComponent, provide } from 'vue';\n import { use$x } from '../composables/index';\n import { DisplayWireMetadata } from '../wiring/index';\n import type { ResultFeature } from '../types/index';\n\n export default defineComponent({\n name: 'DisplayClickProvider',\n props: {\n resultFeature: {\n type: String as PropType<ResultFeature>,\n required: true\n },\n ignoreResultClickEvent: {\n type: Boolean,\n default: false\n },\n toolingDisplayTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n },\n toolingAdd2CartTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n },\n queryTagging: {\n type: Object as PropType<TaggingRequest>,\n required: false,\n default: undefined\n }\n },\n setup(props, { slots }) {\n const x = use$x();\n\n const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n displayOriginalQuery: x.query.search,\n feature: props.resultFeature,\n queryTagging: props.queryTagging,\n toolingTagging: props.toolingDisplayTagging,\n toolingAdd2CartTagging: props.toolingAdd2CartTagging\n }));\n\n provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);\n provide('resultAddToCartExtraEventsMetadata', {\n toolingAdd2CartTagging: props.toolingAdd2CartTagging\n });\n\n provide('resultClickExtraEvents', [\n 'UserClickedARelatedPromptResult',\n 'UserClickedADisplayResult'\n ]);\n provide('resultLinkMetadataPerEvent', {\n UserClickedARelatedPromptResult: displayClickMetadata.value,\n UserClickedADisplayResult: displayClickMetadata.value,\n ...(props.ignoreResultClickEvent && {\n UserClickedAResult: {\n ignoreInModules: ['tagging']\n }\n })\n });\n\n return () => slots.default?.()[0] ?? '';\n }\n });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAGE;AAMA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AAClB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAQ;AACnB,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAC,CAAA;QAC5E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAqB;AACpD,SAAA,CAAC,CAAA;QAEF,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA0B;AAC3B,SAAA,CAAC,CAAA;QACF,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAA;AAC7B,iBAAA;aACD;AACF,SAAA,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}

package/js/index.js CHANGED Viewed

@@ -411,7 +411,7 @@ export { DefaultPDPAddToCartService } from './x-modules/tagging/service/pdp-add-
 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, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, 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, 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/empathize/components/empathize.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = ~~ref~~(!!empathizeRef.value?.children.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n ~~hasContent.value = !!empathizeRef.value?.children.length;\n~~ if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;UAGrB,WAAQ,EAAA,WAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
1	+ {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref, computed } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_createElementVNode","_withModifiers","isOpen","hasContent"],"mappings":";;;;SAAA,WAaU,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;sBAXNA,WAWM,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EATAC,OAAc,CAAA,MAAA;AAAA,MACRC,cAAA,CAAAC,kBAAA;AAAA,QAAA,KAAA;AAAA,QALhB;AAAA,UAMO,GAAA,EAAA,cAAA;AAAA,UACA,aAAQ,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,aAAA,CAAA,MAAA;AAAA,WAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAAA,UACX,WAAM,MAAa,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,IAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UACnB,UAAA,EAAS,OAAC,CAAW,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,UAAA,KAAA,EAAA,aAAA;UAGrB,WAAQ,EAAA,WAAA;AAAA,SAAA;;qBATAC,IAAUC,CAAAA,MAAAA,EAAAA,SAAAA,CAAAA;AAAAA,SAAAA;;;;;AAHxB,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/empathize/components/empathize.vue2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
 import '../../../components/animations/animate-width.vue2.js';
 import '../../../components/animations/animate-width.vue3.js';
 import '../../../components/animations/collapse-height.vue2.js';
@@ -143,7 +143,7 @@ var _sfc_main = defineComponent({
         const $x = use$x();
         const empathizeRef = ref();
         const isOpen = ref(false);
-        const hasContent = ref(!!empathizeRef.value?.children.length);
+        const hasContent = computed(() => !!empathizeRef.value?.children?.length);
         /**
          * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`
          * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if
@@ -164,7 +164,6 @@ var _sfc_main = defineComponent({
          * element.
          */
         function open() {
-            hasContent.value = !!empathizeRef.value?.children.length;
             if (hasContent.value) {
                 changeOpen(true);
             }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = ~~ref~~(!!empathizeRef.value?.children.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n ~~hasContent.value = !!empathizeRef.value?.children.length;\n~~ if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAA;AACrF,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM;gBACb,qBAAqB;gBACrB,yBAAyB;gBACzB,qBAAqB;gBACrB,sBAAqB;AACvB,aAAA;AACD,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC3B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAe,GAAG,EAAkB,CAAA;AAE1C,QAAA,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AACzB,QAAA,MAAM,~~aAAa~~,~~GAAG~~,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,~~CAAC~~,MAAM,CAAC,CAAA;~~AAE7D~~;;;;;;AAME;AACF,QAAA,MAAM,aAAa,WAAW,CAAC,CAAC,OAAgB,KAAK;AACnD,YAAA,IAAI,MAAM,CAAC,KAAM,KAAI,OAAO,EAAE;AAC5B,gBAAA,MAAM,CAAC,KAAI,GAAI,OAAO,CAAA;AACtB,gBAAA,MAAM,cAAe,GAAE,MAAM,CAAC,QAAQ,iBAAkB,GAAE,iBAAiB,CAAA;AAC3E,gBAAA,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAM,EAAC,CAAC,CAAA;AACpE,aAAA;SACD,EAAE,CAAC,CAAC,CAAA;AAEL;;;;AAIE;AACF,QAAA,SAAS,IAAI,GAAA;~~AACX~~,~~YAAA,UAAU,CAAC,KAAI,GAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAA;YACxD,~~IAAI,UAAU,CAAC,KAAK,EAAE;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,aAAA;SACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,KAAK,GAAA;AACZ,YAAA,MAAM,aAAY,GAAI,gBAAgB,EAAE,CAAA;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,UAAU,CAAC,KAAK,CAAC,CAAA;AACnB,aAAA;SACF;QAEA,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAEnF,OAAO;YACL,KAAK;YACL,YAAY;YACZ,UAAU;YACV,MAAM;YACN,IAAG;SACJ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"empathize.vue2.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-show=\"isOpen && hasContent\"\n ref=\"empathizeRef\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, PropType, ref, computed } from 'vue';\n import { NoAnimation } from '../../../components';\n import { use$x, useDebounce } from '../../../composables';\n import { AnimationProp } from '../../../types';\n import { XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n import { getActiveElement } from '../../../utils/html';\n\n /*\n Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.\n \n @public\n /\n export default defineComponent({\n name: 'Empathize',\n xModule: empathizeXModule.name,\n props: {\n /* Array of {@link XEvent} to open the empathize. /\n eventsToOpenEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']\n },\n /* Array of {@link XEvent} to close the empathize. /\n eventsToCloseEmpathize: {\n type: Array as PropType<XEvent[]>,\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n },\n /* Animation component that will be used to animate the empathize. /\n animation: {\n type: AnimationProp,\n default: () => NoAnimation\n }\n },\n setup(props) {\n const $x = use$x();\n\n const empathizeRef = ref<HTMLDivElement>();\n\n const isOpen = ref(false);\n const hasContent = computed(() => !!empathizeRef.value?.children?.length);\n\n /\n Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpen`\n * parameter. Also emits the {@link XEvent} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n \n @param newOpen - The new open state to assign to {@link Empathize.isOpen}.\n /\n const changeOpen = useDebounce((newOpen: boolean) => {\n if (isOpen.value !== newOpen) {\n isOpen.value = newOpen;\n const empathizeEvent = isOpen.value ? 'EmpathizeOpened' : 'EmpathizeClosed';\n $x.emit(empathizeEvent, undefined, { target: empathizeRef.value });\n }\n }, 0);\n\n /\n Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root\n * element.\n /\n function open() {\n if (hasContent.value) {\n changeOpen(true);\n }\n }\n\n /\n Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n */\n function close() {\n const activeElement = getActiveElement();\n if (!empathizeRef.value?.contains(activeElement)) {\n changeOpen(false);\n }\n }\n\n props.eventsToOpenEmpathize.forEach(event => $x.on(event, false).subscribe(open));\n props.eventsToCloseEmpathize.forEach(event => $x.on(event, false).subscribe(close));\n\n return {\n close,\n empathizeRef,\n hasContent,\n isOpen,\n open\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `true`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after receiving an event to change the state `isOpen` to `false`. The event\n payload is undefined and can have a metadata with the module and the element that emitted it.\n\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n</docs>\n"],"names":["NoAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,gBAAgB,CAAC,IAAI;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAA;AACrF,SAAA;;AAED,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,KAA2B;YACjC,OAAO,EAAE,MAAM;gBACb,qBAAqB;gBACrB,yBAAyB;gBACzB,qBAAqB;gBACrB,sBAAqB;AACvB,aAAA;AACD,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,MAAMA,WAAU;AAC3B,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,eAAe,GAAG,EAAkB,CAAA;AAE1C,QAAA,MAAM,MAAK,GAAI,GAAG,CAAC,KAAK,CAAC,CAAA;AACzB,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AAEzE;;;;;;AAME;AACF,QAAA,MAAM,aAAa,WAAW,CAAC,CAAC,OAAgB,KAAK;AACnD,YAAA,IAAI,MAAM,CAAC,KAAM,KAAI,OAAO,EAAE;AAC5B,gBAAA,MAAM,CAAC,KAAI,GAAI,OAAO,CAAA;AACtB,gBAAA,MAAM,cAAe,GAAE,MAAM,CAAC,QAAQ,iBAAkB,GAAE,iBAAiB,CAAA;AAC3E,gBAAA,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,KAAM,EAAC,CAAC,CAAA;AACpE,aAAA;SACD,EAAE,CAAC,CAAC,CAAA;AAEL;;;;AAIE;AACF,QAAA,SAAS,IAAI,GAAA;YACX,IAAI,UAAU,CAAC,KAAK,EAAE;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,aAAA;SACF;AAEA;;;;AAIE;AACF,QAAA,SAAS,KAAK,GAAA;AACZ,YAAA,MAAM,aAAY,GAAI,gBAAgB,EAAE,CAAA;YACxC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,UAAU,CAAC,KAAK,CAAC,CAAA;AACnB,aAAA;SACF;QAEA,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAA;QACjF,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,KAAI,IAAK,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAEnF,OAAO;YACL,KAAK;YACL,YAAY;YACZ,UAAU;YACV,MAAM;YACN,IAAG;SACJ,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

	@@ -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=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /*\n This component shows the list of `RelatedPrompts` components.\n \n If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /\n The CSS class for the left and right button of the sliding panel.\n \n @public\n /\n buttonClass: String,\n /\n The boolean prop to handle the visiblity of sliding pannel buttons.\n \n @public\n /\n showButtons: { type: Boolean, default: true },\n /\n The CSS class for the wrapper of all the related prompt wrapper elements.\n \n @public\n /\n scrollContainerClass: String,\n /\n The CSS class for all the related prompt wrapper elements.\n \n @public\n /\n tagClass: String,\n /\n Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n \n @public\n /\n tagColors: Array as PropType<string[]>,\n /\n The duration of the total animation in milliseconds.\n \n @public\n /\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number \| null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) \n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex);\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":";;;;;;;;;kCACEA,gBAkEe,CAAA,cAAA,CAAA,CAAA;SAhEZC,SAA8B,EAAA,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAC9B,GAAcC,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,KAAAA,CAAAA,MAAAA;AAAAA,IACd,yBAAcC,EAAAA,KAAAA;AAAAA,IACd,cAAA,EAAA,IAAA,CAAA,WAAA;AAAA,IAAA,cAAA,EAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,mBAAA,KAAA,CAAA,CAAA;AAEU,IAAA,wBAAA,EAAA,CAAyB,6CAIO,EAAA,IAAA,CAAA,oBAAA,CAAA;AAAA,GAAA,EAAA;;MAiDhCC,UAIiC,CAAA,IAAA,CAAA,MAAA,EAAA,2BAAA,CAAA;AAAA,KAAA,CAAA;;MAjEhDA,UA4DuB,CAAA,IAAA,CAAA,MAAA,EAAA,4BAAA,CAAA;AAAA,KAAA,CAAA;AA7ChB,IAAA,OAAA,EAAAC,OAAA,CAAY,MAAEC;AAAAA,MAAAA,WAAAA,CACPC,eAAO,EAAA;AAAA,QACd,aAAOC,EAAAA,IAAAA,CAAAA,aAAAA;AAAAA,QACR,OAAM,EAAA,IAAA,CAAA,OAAA;AAAA,QACL,SAAK,IAAK,CAAA,OAAA;AAAA,QACX,KAAI,EAAA,4BAAA;AAAA,QACJ,GAAA,EAAA,KAAA;AAAA,QAAA,GAAA,EAAA,IAAA;AArBN,QAAA,MAAA,EAAA,EAAA;AAAA,OAAA,EAAA;;AAAA,WAAAR,SAAA,CAAA,IAAA,CAAA,EAAAS,kBAAA;AAAA,YAAAC,QAAA;AAAA,YAAA,IAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,EAAA,KAAA,EAAA,GAAA,aAAA,EAAA,KAAA;qBAyBYX,SAAW,EAAA,EAAAS,kBAAA,CAAA,IAAA,EAAA;AAAA,gBACd,OAAK,EAAA,IAAA;AAAA,gBACN,GAAK,EAAA,WAAA;AAAA,gBAEJ,GAAiB,EAAA,aAAA,CAAA,cAAA;AAAA,gBACjB,KAAA,EA9BTG,eA8BgBC,CAAW,iCAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAA,IAAA,CAAA,SAAA,IAAA,IAAA,CAAA,SAAA,CAAA,KAAA,GAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA;AAAA,gBACnB,YAAU,EAAA,KAAA;AAAA,gBAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,WAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA;gBAQV,WAmBO,EAAA,+BAAA;AAAA,eAAA,EAAA;AAjBI,gBAAAV,UAAA,CAAA,IAAA,CAAA,MAAA,EAAQW,SAAS,EAAA;AAAA,kBACzB,aAAA;AAAA,kBAgBI,QAAA,EAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA;AAAA,kBAdL,UAaiB,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,iBAZd,EAAA,MAAA;AAAA,kBAAAC,WAAA,CACA,yBAAa,EAAA;AAAA,oBAAA,OAAA,EAAA,aAAA,CAAA,qBAAA;;;;;;;AAOX,oBAAA,OAAA,EAAAX,OAAA,CAAK,MAAEU;AAAAA,sBAAAA,WAAAA,CACP,wBAA6B,EAAA;AAAA,wBAC7B,OAAA,EAAQ,CAAEE,MAAAA,KAAAA,IAAAA,CAAU,QAAM,CAAA,KAAA,CAAA;AAAA,wBAAA,gBAAA,EAAA,aAAA;;AAvDzC,uBAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,CAAA;AAAA,qBAAA,CAAA;;;AAAA,mBAAA,EAAA,IAAA,EAAA,CAAA,SAAA,EAAA,eAAA,CAAA,CAAA;AAAA,iBAAA,CAAA;;AAAA,aAAA,CAAA;AAAA,YAAA,GAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;;;AAAA,OAAA,EAAA,CAAA,EAAA,CAAA,eAAA,EAAA,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
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=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /*\n This component shows the list of `RelatedPrompts` components.\n \n If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /\n The CSS class for the left and right button of the sliding panel.\n \n @public\n /\n buttonClass: String,\n /\n The boolean prop to handle the visiblity of sliding pannel buttons.\n \n @public\n /\n showButtons: { type: Boolean, default: true },\n /\n The CSS class for the wrapper of all the related prompt wrapper elements.\n \n @public\n /\n scrollContainerClass: String,\n /\n The CSS class for all the related prompt wrapper elements.\n \n @public\n /\n tagClass: String,\n /\n Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n \n @public\n /\n tagColors: Array as PropType<string[]>,\n /\n The duration of the total animation in milliseconds.\n \n @public\n /\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number \| null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) \n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["_resolveComponent","_openBlock","_createBlock","buttonClass","showButtons","_renderSlot","_withCtx","onBeforeEnter","onEnter","onLeave","_createElementBlock","_Fragment","_renderList","_normalizeClass","isAnimating","_normalizeStyle","onSelect","_createVNode","isSelected"],"mappings":"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"}

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

@@ -161,7 +161,10 @@ var _sfc_main = defineComponent({
                     selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;
                 });
             }
-            x.emit('UserSelectedARelatedPrompt', selectedIndex);
+            x.emit('UserSelectedARelatedPrompt', selectedIndex, {
+                relatedPrompt: relatedPrompts.value[selectedIndex],
+                selectedPrompt: selectedPromptIndex.value
+            });
         };
         const onBeforeEnter = (el) => {
             const element = el;

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

	@@ -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=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /*\n This component shows the list of `RelatedPrompts` components.\n \n If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /\n The CSS class for the left and right button of the sliding panel.\n \n @public\n /\n buttonClass: String,\n /\n The boolean prop to handle the visiblity of sliding pannel buttons.\n \n @public\n /\n showButtons: { type: Boolean, default: true },\n /\n The CSS class for the wrapper of all the related prompt wrapper elements.\n \n @public\n /\n scrollContainerClass: String,\n /\n The CSS class for all the related prompt wrapper elements.\n \n @public\n /\n tagClass: String,\n /\n Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n \n @public\n /\n tagColors: Array as PropType<string[]>,\n /\n The duration of the total animation in milliseconds.\n \n @public\n /\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number \| null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) \n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex);\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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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=\"['x-related-prompts-tag-list-scroll-container', scrollContainerClass]\"\n >\n <template #sliding-panel-left-button>\n <!--\n @slot sliding-panel-left-button - The button to be displayed on the left side of the sliding panel.\n -->\n <slot name=\"sliding-panel-left-button\" />\n </template>\n <transition-group\n @before-enter=\"onBeforeEnter\"\n @enter=\"onEnter\"\n @leave=\"onLeave\"\n class=\"x-related-prompts-tag-list\"\n :css=\"false\"\n tag=\"ul\"\n appear\n >\n <li\n v-for=\"{ index, ...relatedPrompt } in visibleRelatedPrompts\"\n ref=\"listItems\"\n :key=\"relatedPrompt.suggestionText\"\n class=\"x-related-prompts-tag-list-item\"\n :class=\"[tagClass, tagColors && tagColors[index % tagColors.length]]\"\n :data-index=\"index\"\n :style=\"isAnimating && { pointerEvents: 'none' }\"\n data-test=\"related-prompts-tag-list-item\"\n >\n <!--\n @slot - The slot to render related prompt information.\n @prop {Object} relatedPrompt - The related prompt object.\n @prop {Function} onSelect - The function to select the related prompt.\n @prop {Boolean} isSelected - Indicates if the related prompt is currently selected.\n -->\n <slot\n :relatedPrompt=\"relatedPrompt\"\n :onSelect=\"() => onSelect(index)\"\n :isSelected=\"isSelected(index)\"\n >\n <DisplayEmitter\n :payload=\"relatedPrompt.toolingDisplayTagging\"\n :eventMetadata=\"{\n feature: 'related-prompts',\n displayOriginalQuery: x.query.searchBox,\n replaceable: false\n }\"\n >\n <RelatedPrompt\n @click=\"onSelect(index)\"\n :related-prompt=\"relatedPrompt\"\n :selected=\"isSelected(index)\"\n />\n </DisplayEmitter>\n </slot>\n </li>\n </transition-group>\n <template #sliding-panel-right-button>\n <!--\n @slot sliding-panel-right-button - The button to be displayed on the right side of the sliding panel.\n -->\n <slot name=\"sliding-panel-right-button\" />\n </template>\n </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\n import { RelatedPrompt as RelatedPromptModel } from '@empathyco/x-types';\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n import SlidingPanel from '../../../components/sliding-panel.vue';\n import { relatedPromptsXModule } from '../x-module';\n import { use$x, useState } from '../../../composables';\n import DisplayEmitter from '../../../components/display-emitter.vue';\n import RelatedPrompt from './related-prompt.vue';\n\n /*\n This component shows the list of `RelatedPrompts` components.\n \n If the default slot is reimplemented in the consumer, `onSelect` function will be\n * necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.\n \n @public\n /\n export default defineComponent({\n name: 'RelatedPromptsTagList',\n xModule: relatedPromptsXModule.name,\n components: { DisplayEmitter, RelatedPrompt, SlidingPanel },\n props: {\n /\n The CSS class for the left and right button of the sliding panel.\n \n @public\n /\n buttonClass: String,\n /\n The boolean prop to handle the visiblity of sliding pannel buttons.\n \n @public\n /\n showButtons: { type: Boolean, default: true },\n /\n The CSS class for the wrapper of all the related prompt wrapper elements.\n \n @public\n /\n scrollContainerClass: String,\n /\n The CSS class for all the related prompt wrapper elements.\n \n @public\n /\n tagClass: String,\n /\n Array of colors to apply to the related prompts. It will be applied to tag\n * elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`.\n \n @public\n /\n tagColors: Array as PropType<string[]>,\n /\n The duration of the total animation in milliseconds.\n \n @public\n /\n animationDurationInMs: {\n type: Number,\n default: 700\n }\n },\n setup(props) {\n const x = use$x();\n const { relatedPrompts, selectedPrompt: selectedPromptIndex } = useState('relatedPrompts', [\n 'relatedPrompts',\n 'selectedPrompt'\n ]);\n\n const clickedListItemIndex = ref<number \| null>(null);\n const initialOffsetLefts: Record<number, number> = {};\n const isAnimating = ref(false);\n const listItems = ref<HTMLElement[]>([]);\n\n const sortedListItems = computed<HTMLElement[]>(() =>\n [...listItems.value].sort(\n (a: HTMLElement, b: HTMLElement) =>\n Number.parseInt(b.getAttribute('data-index')!) -\n Number.parseInt(a.getAttribute('data-index')!)\n )\n );\n\n // The duration of a single animation (enter or leave) in milliseconds\n // if a related prompt is clicked (clickedListItemIndex.value !== null), the duration is divided by the number of related\n // prompts -1 (the clicked one is synchronized with the last one to leave or the first one to enter)\n const singleAnimationDurationInMs = computed(\n () =>\n props.animationDurationInMs /\n (clickedListItemIndex.value !== null\n ? relatedPrompts.value.length - 1\n : relatedPrompts.value.length)\n );\n\n const indexRelatedPrompts = computed(() =>\n (relatedPrompts.value as RelatedPromptModel[]).map(\n (relatedPrompt: RelatedPromptModel, index: number) => ({\n ...relatedPrompt,\n index\n })\n )\n );\n\n const visibleRelatedPrompts = computed(() => {\n return selectedPromptIndex.value !== -1\n ? [indexRelatedPrompts.value[selectedPromptIndex.value]]\n : indexRelatedPrompts.value;\n });\n\n let timeOutId: number;\n const resetTransitionStyle = () => {\n if (timeOutId) {\n clearTimeout(timeOutId);\n }\n\n isAnimating.value = true;\n timeOutId = +setTimeout(() => {\n isAnimating.value = false;\n clickedListItemIndex.value = null;\n\n sortedListItems.value.forEach(element => {\n element.style.cssText\n .split(';')\n .map(rule => rule.split(':')[0]?.trim())\n .forEach(property => {\n if (property !== 'width') {\n element.style.removeProperty(property);\n }\n });\n });\n }, props.animationDurationInMs);\n };\n\n const onSelect = (selectedIndex: number): void => {\n resetTransitionStyle();\n\n clickedListItemIndex.value = selectedIndex;\n const selected: HTMLElement = sortedListItems.value.find(\n element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex\n )!;\n\n // selectedPromptIndex.value === -1 ? 'SELECTING' : 'DESELECTING'\n if (selectedPromptIndex.value === -1) {\n // Prepare all the elements for the leave animation (~ 'beforeLeave' hook). Remember the elements are\n // sorted in descending order by index.\n sortedListItems.value.forEach(element => {\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n initialOffsetLefts[index] = element.offsetLeft;\n element.style.left = `${element.offsetLeft}px`;\n element.style.position = 'absolute';\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n\n if (index !== selectedIndex) {\n element.style.opacity = '1';\n element.style.transitionDelay = `${\n (index < selectedIndex ? index : index - 1) singleAnimationDurationInMs.value\n }ms`;\n }\n });\n\n // Synchronize the transition delay of the selected element with the last\n // element to leave\n selected.style.transitionDelay = `${\n (relatedPrompts.value.length > 1 ? relatedPrompts.value.length - 2 : 0) \n singleAnimationDurationInMs.value\n }ms`;\n\n // Trigger the animation (selecting) for the selected element\n requestAnimationFrame(() => {\n const maxWidth = getComputedStyle(selected).maxWidth;\n\n selected.style.left = '0px';\n selected.style.setProperty(\n 'width',\n `${maxWidth !== 'none' ? maxWidth : '100%'}`,\n 'important'\n );\n });\n } else {\n // Prepare the selected element for the deselecting animation\n selected.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n selected.style.left = '0px';\n selected.style.position = 'absolute';\n\n // Trigger the animation (deselecting) for the selected element\n selected.style.removeProperty('width');\n requestAnimationFrame(() => {\n selected.style.left = `${initialOffsetLefts[selectedIndex]}px`;\n });\n }\n\n x.emit('UserSelectedARelatedPrompt', selectedIndex, {\n relatedPrompt: relatedPrompts.value[selectedIndex],\n selectedPrompt: selectedPromptIndex.value\n });\n };\n\n const onBeforeEnter = (el: Element) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Prepare the element for the enter animation\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n element.style.transitionDelay = `${\n (clickedListItemIndex.value !== null && index > clickedListItemIndex.value\n ? index - 1\n : index) singleAnimationDurationInMs.value\n }ms`;\n element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;\n };\n\n const onEnter = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n const index = Number.parseInt(element.getAttribute('data-index')!);\n\n // Also part of the preparation for the enter animation, but it needs to be done\n // once the element is inserted in DOM (if not the offsetLeft will be always 0)\n element.style.left = `${initialOffsetLefts[index] ?? element.offsetLeft}px`;\n\n // trigger enter animation\n requestAnimationFrame(() => {\n element.style.opacity = '1';\n element.style.position = 'absolute';\n element.style.transform = 'translateY(0)';\n });\n\n done();\n };\n\n const onLeave = (el: Element, done: () => void) => {\n const element = el as HTMLElement;\n\n // trigger leave animation\n requestAnimationFrame(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(5px)';\n });\n\n // Wait for the animation to finish (done() exectution extracts the element from the DOM)\n setTimeout(done, props.animationDurationInMs);\n };\n\n const isSelected = (index: number): boolean => selectedPromptIndex.value === index;\n\n // Changing the query will trigger the appear animation, so we need to reset the\n // style after it finishes\n watch(() => x.query.search, resetTransitionStyle, { immediate: true });\n\n return {\n isSelected,\n onSelect,\n onBeforeEnter,\n onEnter,\n onLeave,\n selectedPromptIndex,\n visibleRelatedPrompts,\n listItems,\n isAnimating,\n x\n };\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompts-tag-list-scroll-container {\n height: 100%;\n position: relative;\n }\n .x-related-prompts-tag-list {\n display: flex;\n gap: 16px;\n min-width: 100%;\n }\n .x-related-prompts-tag-list-item {\n height: 100%;\n }\n</style>\n"],"names":["DisplayEmitter"],"mappings":"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"}

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

@@ -147,6 +147,12 @@ const trackToolingDisplayClickedWire = createTrackToolingDisplayWire();
  * @public
  */
 const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire();
+/**
+ * Performs a track of a clicked related prompt.
+ *
+ * @public
+ */
+const trackRelatedPromptToolingDisplayClickWire = createTrackRelatedPromptToolingDisplayClickWire();
 /**
  * Performs a track of a display element appearing.
  *
@@ -241,7 +247,7 @@ function createTrackToolingDisplayWire() {
     }), ({ metadata }) => !!metadata?.toolingTagging);
 }
 /**
- * Factory helper to create a wire for the track of the tooling display click.
+ * Factory helper to create a wire for the track of the tooling display add to cart.
  *
  * @returns A new wire for the tooling display add to cart of the taggable element.
  *
@@ -255,6 +261,24 @@ function createTrackToolingAdd2CartWire() {
         return taggingInfo;
     }), ({ metadata }) => !!metadata?.toolingAdd2CartTagging);
 }
+/**
+ * Factory helper to create a wire for the track of the tooling display click in a related prompt.
+ *
+ * @returns A new wire for the tooling display click of the taggable element.
+ *
+ * @public
+ */
+function createTrackRelatedPromptToolingDisplayClickWire() {
+    return filter(wireDispatch('track', ({ metadata }) => {
+        const relatedPrompt = metadata.relatedPrompt;
+        const taggingInfo = relatedPrompt.tagging
+            ?.toolingDisplayClickTagging;
+        taggingInfo.params.productId = 'EXPAND';
+        taggingInfo.params.title = relatedPrompt.suggestionText;
+        taggingInfo.params.url = 'none';
+        return taggingInfo;
+    }), ({ metadata }) => metadata?.selectedPrompt === -1);
+}
 /**
  * Factory helper to create a wire to set the queryTagging.
  *
@@ -324,8 +348,11 @@ const taggingWiring = createWiring({
     },
     UserClickedARelatedPromptAdd2Cart: {
         trackToolingAdd2CartWire
+    },
+    UserSelectedARelatedPrompt: {
+        trackRelatedPromptToolingDisplayClickWire
     }
 });
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
 //# sourceMappingURL=wiring.js.map