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

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPrompt](./x-types.relatedprompt.md) &gt; [toolingDisplayTagging](./x-types.relatedprompt.toolingdisplaytagging.md)
+
+## RelatedPrompt.toolingDisplayTagging property
+
+The tooling display tagging of the prompt.
+
+**Signature:**
+
+```typescript
+toolingDisplayTagging: TaggingRequest;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.md

@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md)
+
+## RelatedPromptNextQuery interface
+
+Represents a related prompt nextQuery.
+
+**Signature:**
+
+```typescript
+export interface RelatedPromptNextQuery 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [query](./x-types.relatedpromptnextquery.query.md) |  | string | The query of the next query. |
+|  [toolingDisplayAdd2CartTagging](./x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display add2cart tagging of the next query. |
+|  [toolingDisplayClickTagging](./x-types.relatedpromptnextquery.toolingdisplayclicktagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display click tagging of the next query. |
+|  [toolingDisplayTagging](./x-types.relatedpromptnextquery.toolingdisplaytagging.md) |  | [TaggingRequest](./x-types.taggingrequest.md) | The tooling display tagging of the next query. |
+

package/docs/API-reference/api/x-types.relatedpromptnextquery.query.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [query](./x-types.relatedpromptnextquery.query.md)
+
+## RelatedPromptNextQuery.query property
+
+The query of the next query.
+
+**Signature:**
+
+```typescript
+query: string;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayAdd2CartTagging](./x-types.relatedpromptnextquery.toolingdisplayadd2carttagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayAdd2CartTagging property
+
+The tooling display add2cart tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayAdd2CartTagging: TaggingRequest;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplayclicktagging.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayClickTagging](./x-types.relatedpromptnextquery.toolingdisplayclicktagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayClickTagging property
+
+The tooling display click tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayClickTagging: TaggingRequest;
+```

package/docs/API-reference/api/x-types.relatedpromptnextquery.toolingdisplaytagging.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [RelatedPromptNextQuery](./x-types.relatedpromptnextquery.md) &gt; [toolingDisplayTagging](./x-types.relatedpromptnextquery.toolingdisplaytagging.md)
+
+## RelatedPromptNextQuery.toolingDisplayTagging property
+
+The tooling display tagging of the next query.
+
+**Signature:**
+
+```typescript
+toolingDisplayTagging: TaggingRequest;
+```

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -8,19 +8,9 @@ title: RelatedPrompt
 
 This component shows a suggested related prompt.
 
-It provides a slot to customize the related prompt button information.
-
 ## Props
 
-| Name                         | Description | Type                       | Default            |
-| ---------------------------- | ----------- | -------------------------- | ------------------ |
-| <code>relatedPrompt</code>   |             | <code>RelatedPrompt</code> | <code></code>      |
-| <code>isPromptVisible</code> |             | <code>boolean</code>       | <code>false</code> |
-| <code>isSelected</code>      |             | <code>boolean</code>       | <code>false</code> |
-| <code>index</code>           |             | <code>number</code>        | <code></code>      |
-
-## Slots
-
-| Name                                    | Description | Bindings<br />(name - type - description) |
-| --------------------------------------- | ----------- | ----------------------------------------- |
-| <code>related-prompt-button-info</code> |             | None                                      |
+| Name                       | Description | Type                       | Default            |
+| -------------------------- | ----------- | -------------------------- | ------------------ |
+| <code>relatedPrompt</code> |             | <code>RelatedPrompt</code> | <code></code>      |
+| <code>selected</code>      |             | <code>boolean</code>       | <code>false</code> |

package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md

@@ -6,18 +6,24 @@ title: RelatedPromptsTagList
 
 # RelatedPromptsTagList
 
+This component shows the list of `RelatedPrompts` components.
+
+If the default slot is reimplemented in the consumer, `onSelect` function will be necessary to
+handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
+
 ## Props
 
-| Name                     | Description | Type                | Default       |
-| ------------------------ | ----------- | ------------------- | ------------- |
-| <code>buttonClass</code> |             | <code>string</code> | <code></code> |
+| Name                               | Description                                                                                                                                                                         | Type                  | Default          |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------- |
+| <code>buttonClass</code>           | The CSS class for the left and right button of the sliding panel.                                                                                                                   | <code>string</code>   | <code></code>    |
+| <code>tagClass</code>              | The CSS class for all the related prompt wrapper elements.                                                                                                                          | <code>string</code>   | <code></code>    |
+| <code>tagColors</code>             | Array of colors to apply to the related prompts. It will be applied to tag<br />elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`. | <code>string[]</code> | <code></code>    |
+| <code>animationDurationInMs</code> | The duration of the total animation in milliseconds.                                                                                                                                | <code>number</code>   | <code>700</code> |
 
 ## Slots
 
-| Name                                    | Description | Bindings<br />(name - type - description) |
-| --------------------------------------- | ----------- | ----------------------------------------- |
-| <code>header</code>                     |             | None                                      |
-| <code>sliding-panel-left-button</code>  |             | None                                      |
-| <code>sliding-panel-content</code>      |             | None                                      |
-| <code>related-prompt-button</code>      |             | <br /><br /><br />                        |
-| <code>sliding-panel-right-button</code> |             | None                                      |
+| Name                                    | Description                                                        | Bindings<br />(name - type - description) |
+| --------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
+| <code>sliding-panel-left-button</code>  | The button to be displayed on the left side of the sliding panel.  | None                                      |
+| <code>default</code>                    | - The slot to render related prompt information.                   | <br /><br />                              |
+| <code>sliding-panel-right-button</code> | The button to be displayed on the right side of the sliding panel. | None                                      |

package/js/components/result/base-result-add-to-cart.vue.js

@@ -6,6 +6,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseEventButton = resolveComponent("BaseEventButton");
   return openBlock(), createBlock(_component_BaseEventButton, {
     events: _ctx.events,
+    metadata: _ctx.metadata,
     class: "x-result-add-to-cart x-button",
     "data-test": "result-add-to-cart"
   }, {
@@ -14,7 +15,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["events"]);
+  }, 8, ["events", "metadata"]);
 }
 var baseResultAddToCart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/js/components/result/base-result-add-to-cart.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-result-add-to-cart x-button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n\n  /**\n   * Renders a button with a default slot. It receives the result with the data and emits\n   * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseEventButton },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The events to be emitted by the button.\n       *\n       * @returns Events {@link XEventsTypes} to emit.\n       *\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => ({\n        UserClickedResultAddToCart: props.result\n      }));\n\n      return {\n        events\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` whe clicked by the user\n\n```vue\n<BaseResultAddToCart :result=\"result\">\n  <img src=\"./add-to-cart.svg\" />\n  <span>Add to cart</span>\n</BaseResultAddToCart>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AAQoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AALX,EAAA,OAAAC,SAAA,EAAgC,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACrC,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,IAAA,KAAA,EAAA,+BAAA;AAJd,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart x-button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, inject } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { PropsWithType } from '../../utils/index';\n  import { WireMetadata } from '../../wiring/index';\n\n  /**\n   * Renders a button with a default slot. It receives the result with the data and emits\n   * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseEventButton },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The list of additional events to be emitted by the component when user clicks the add2cart button.\n       *\n       * @internal\n       */\n      const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n        'resultAddToCartExtraEvents',\n        []\n      );\n\n      /**\n       * The metadata to be injected in the events emitted by the component.\n       */\n      const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n        'resultAddToCartExtraEventsMetadata',\n        {}\n      );\n\n      /**\n       * The events to be emitted by the button.\n       *\n       * @returns Events {@link XEventsTypes} to emit.\n       *\n       * @public\n       */\n      const events = computed(() => {\n        return resultAddToCartExtraEvents.reduce(\n          (acc, event) => {\n            acc[event] = props.result;\n            return acc;\n          },\n          { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>\n        );\n      });\n\n      return {\n        events,\n        metadata\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` whe clicked by the user\n\n```vue\n<BaseResultAddToCart :result=\"result\">\n  <img src=\"./add-to-cart.svg\" />\n  <span>Add to cart</span>\n</BaseResultAddToCart>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_renderSlot"],"mappings":";;;;;AASoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AANf,EAAA,OAAAC,SAAA,EAAkB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACnB,MAAM,EAAA,IAAA,CAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA,CAAA,QAAA;AAAA,IAAA,KAAA,EAAA,+BAAA;AALd,IAAA,WAAA,EAAA,oBAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/result/base-result-add-to-cart.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
 import BaseEventButton from '../base-event-button.vue.js';
 
 /**
@@ -21,6 +21,16 @@ var _sfc_main = defineComponent({
         }
     },
     setup(props) {
+        /**
+         * The list of additional events to be emitted by the component when user clicks the add2cart button.
+         *
+         * @internal
+         */
+        const resultAddToCartExtraEvents = inject('resultAddToCartExtraEvents', []);
+        /**
+         * The metadata to be injected in the events emitted by the component.
+         */
+        const metadata = inject('resultAddToCartExtraEventsMetadata', {});
         /**
          * The events to be emitted by the button.
          *
@@ -28,11 +38,15 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const events = computed(() => ({
-            UserClickedResultAddToCart: props.result
-        }));
+        const events = computed(() => {
+            return resultAddToCartExtraEvents.reduce((acc, event) => {
+                acc[event] = props.result;
+                return acc;
+            }, { UserClickedResultAddToCart: props.result });
+        });
         return {
-            events
+            events,
+            metadata
         };
     }
 });

package/js/components/result/base-result-add-to-cart.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    class=\"x-result-add-to-cart x-button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n\n  /**\n   * Renders a button with a default slot. It receives the result with the data and emits\n   * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseEventButton },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The events to be emitted by the button.\n       *\n       * @returns Events {@link XEventsTypes} to emit.\n       *\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => ({\n        UserClickedResultAddToCart: props.result\n      }));\n\n      return {\n        events\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` whe clicked by the user\n\n```vue\n<BaseResultAddToCart :result=\"result\">\n  <img src=\"./add-to-cart.svg\" />\n  <span>Add to cart</span>\n</BaseResultAddToCart>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO;YACpD,0BAA0B,EAAE,KAAK,CAAC,MAAK;AACxC,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-result-add-to-cart.vue2.js","sources":["../../../../src/components/result/base-result-add-to-cart.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-result-add-to-cart x-button\"\n    data-test=\"result-add-to-cart\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType, inject } from 'vue';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n  import { PropsWithType } from '../../utils/index';\n  import { WireMetadata } from '../../wiring/index';\n\n  /**\n   * Renders a button with a default slot. It receives the result with the data and emits\n   * {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseEventButton },\n    props: {\n      /**\n       * (Required) The {@link @empathyco/x-types#Result} information.\n       *\n       * @public\n       */\n      result: {\n        type: Object as PropType<Result>,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The list of additional events to be emitted by the component when user clicks the add2cart button.\n       *\n       * @internal\n       */\n      const resultAddToCartExtraEvents = inject<PropsWithType<XEventsTypes, Result>[]>(\n        'resultAddToCartExtraEvents',\n        []\n      );\n\n      /**\n       * The metadata to be injected in the events emitted by the component.\n       */\n      const metadata = inject<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>(\n        'resultAddToCartExtraEventsMetadata',\n        {}\n      );\n\n      /**\n       * The events to be emitted by the button.\n       *\n       * @returns Events {@link XEventsTypes} to emit.\n       *\n       * @public\n       */\n      const events = computed(() => {\n        return resultAddToCartExtraEvents.reduce(\n          (acc, event) => {\n            acc[event] = props.result;\n            return acc;\n          },\n          { UserClickedResultAddToCart: props.result } as Partial<XEventsTypes>\n        );\n      });\n\n      return {\n        events,\n        metadata\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedResultAddToCart`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the result data.\n\n## Examples\n\nRenders a button with a default slot. It receives the result with the data and emits an event\n`UserClickedResultAddToCart` to the bus on click mouse event.\n\n### Basic example\n\nThis component is a button to emit `UserClickedResultAddToCart` whe clicked by the user\n\n```vue\n<BaseResultAddToCart :result=\"result\">\n  <img src=\"./add-to-cart.svg\" />\n  <span>Add to cart</span>\n</BaseResultAddToCart>\n```\n</docs>\n"],"names":[],"mappings":";;;AAoBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,6BAA6B,MAAM,CACvC,4BAA4B,EAC5B,EAAC,CACF,CAAA;AAED;;AAEE;QACF,MAAM,QAAS,GAAE,MAAM,CACrB,oCAAoC,EACpC,EAAC,CACF,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CAAC,MAAM;YAC5B,OAAO,0BAA0B,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,KAAK,KAAK;AACd,gBAAA,GAAG,CAAC,KAAK,CAAE,GAAE,KAAK,CAAC,MAAM,CAAA;AACzB,gBAAA,OAAO,GAAG,CAAA;aACX,EACD,EAAE,0BAA0B,EAAE,KAAK,CAAC,MAAO,EAAyB,CACrE,CAAA;AACH,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,MAAM;YACN,QAAO;SACR,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/directives/typing.js

@@ -0,0 +1,52 @@
+const typingDirective = {
+    mounted(el, binding) {
+        execute(el, binding.value);
+    },
+    updated(el, binding) {
+        if (binding.value.text !== binding.oldValue?.text) {
+            clearTimeout(el.__timeoutId);
+            execute(el, binding.value);
+        }
+    },
+    unmounted(el) {
+        clearTimeout(el.__timeoutId);
+    }
+};
+/**
+ * Execute a typing animation in an HTML element.
+ *
+ * @param el - The HTML element where the typing animation will be displayed.
+ * @param options - Options for the behavior of the animation.
+ */
+function execute(el, options) {
+    const { text, speed = 1, targetAttr = '' } = options;
+    if (!text) {
+        console.error('v-typing: "text" is required.');
+        return;
+    }
+    let index = 0;
+    const updateContent = (value) => {
+        if (targetAttr) {
+            el.setAttribute(targetAttr, value);
+        }
+        else {
+            el.innerHTML = value;
+        }
+    };
+    const type = () => {
+        if (index < text.length) {
+            updateContent(text.slice(0, index + 1));
+            index++;
+            el.__timeoutId = setTimeout(type, speed);
+        }
+        else {
+            updateContent(text);
+            clearTimeout(el.__timeoutId);
+            el.__timeoutId = undefined;
+        }
+    };
+    type();
+}
+
+export { typingDirective as default };
+//# sourceMappingURL=typing.js.map

package/js/directives/typing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing.js","sources":["../../../src/directives/typing.ts"],"sourcesContent":["import type { Directive } from 'vue';\n\n/**\n * TypingOptions interface.\n *\n * @public\n */\nexport interface TypingOptions {\n  /**\n   * The text (plain or html) that will be typed into the target element.\n   */\n  text: string;\n  /**\n   * The typing speed in milliseconds per character.\n   *\n   */\n  speed?: number;\n  /**\n   * The attribute of the HTML element where the typed text will be placed.\n   * If not specified, the text will be set as content (innerHTML).\n   *\n   * @example 'placeholder'\n   */\n  targetAttr?: string;\n}\n\ninterface TypingHTMLElement extends HTMLElement {\n  __timeoutId?: number;\n}\n\nconst typingDirective: Directive<TypingHTMLElement, TypingOptions> = {\n  mounted(el, binding) {\n    execute(el, binding.value);\n  },\n\n  updated(el, binding) {\n    if (binding.value.text !== binding.oldValue?.text) {\n      clearTimeout(el.__timeoutId);\n      execute(el, binding.value);\n    }\n  },\n\n  unmounted(el) {\n    clearTimeout(el.__timeoutId);\n  }\n};\n\n/**\n * Execute a typing animation in an HTML element.\n *\n * @param el - The HTML element where the typing animation will be displayed.\n * @param options - Options for the behavior of the animation.\n */\nfunction execute(el: TypingHTMLElement, options: TypingOptions) {\n  const { text, speed = 1, targetAttr = '' } = options;\n\n  if (!text) {\n    console.error('v-typing: \"text\" is required.');\n    return;\n  }\n\n  let index = 0;\n\n  const updateContent = (value: string) => {\n    if (targetAttr) {\n      el.setAttribute(targetAttr, value);\n    } else {\n      el.innerHTML = value;\n    }\n  };\n\n  const type = () => {\n    if (index < text.length) {\n      updateContent(text.slice(0, index + 1));\n      index++;\n      el.__timeoutId = setTimeout(type, speed) as unknown as number;\n    } else {\n      updateContent(text);\n      clearTimeout(el.__timeoutId);\n      el.__timeoutId = undefined;\n    }\n  };\n\n  type();\n}\n\nexport default typingDirective;\n"],"names":[],"mappings":"AA8BA,MAAM,eAAe,GAAgD;IACnE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;AACjB,QAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,OAAO,CAAC,EAAE,EAAE,OAAO,EAAA;QACjB,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE;AACjD,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,SAAS,CAAC,EAAE,EAAA;AACV,QAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;KAC9B;EACD;AAEF;;;;;AAKG;AACH,SAAS,OAAO,CAAC,EAAqB,EAAE,OAAsB,EAAA;AAC5D,IAAA,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC;IAErD,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO;AACR,KAAA;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,IAAA,MAAM,aAAa,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACpC,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,CAAC,SAAS,GAAG,KAAK,CAAC;AACtB,SAAA;AACH,KAAC,CAAC;IAEF,MAAM,IAAI,GAAG,MAAK;AAChB,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;AACxC,YAAA,KAAK,EAAE,CAAC;YACR,EAAE,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAsB,CAAC;AAC/D,SAAA;AAAM,aAAA;YACL,aAAa,CAAC,IAAI,CAAC,CAAC;AACpB,YAAA,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAC7B,YAAA,EAAE,CAAC,WAAW,GAAG,SAAS,CAAC;AAC5B,SAAA;AACH,KAAC,CAAC;AAEF,IAAA,IAAI,EAAE,CAAC;AACT;;;;"}

package/js/index.js

@@ -409,7 +409,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, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire } from './x-modules/tagging/wiring.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 { taggingXModule } from './x-modules/tagging/x-module.js';
 export { default as UrlHandler } from './x-modules/url/components/url-handler.vue.js';
 export { replaceableParams, urlEmitters } from './x-modules/url/store/emitters.js';

package/js/x-modules/related-prompts/components/related-prompt.vue.js

@@ -1,50 +1,23 @@
 import _sfc_main from './related-prompt.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createElementVNode, normalizeStyle, toDisplayString, createBlock } from 'vue';
+import { resolveDirective, openBlock, createElementBlock, withDirectives, createElementVNode, createBlock, resolveDynamicComponent } from 'vue';
+import './related-prompt.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-const _hoisted_1 = { class: "x-related-prompt__button-info" };
+const _hoisted_1 = { class: "x-related-prompt" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CrossTinyIcon = resolveComponent("CrossTinyIcon");
-  const _component_PlusIcon = resolveComponent("PlusIcon");
-  return openBlock(), createElementBlock(
-    "div",
-    {
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
-      onKeydown: _cache[1] || (_cache[1] = ($event) => _ctx.toggleSuggestion(_ctx.index)),
-      class: normalizeClass(["x-related-prompt__button", [{ "x-related-prompt-selected__button": _ctx.isSelected }]]),
-      role: "button",
-      "aria-pressed": "true",
-      tabindex: "0"
-    },
-    [
-      renderSlot(_ctx.$slots, "related-prompt-button-info", {}, () => [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode(
-            "span",
-            {
-              class: normalizeClass(["x-typewritter-initial", [{ "x-typewritter-animation": _ctx.isPromptVisible }]]),
-              style: normalizeStyle({
-                animationDelay: `${_ctx.index * 0.4 + 0.05}s`,
-                "--suggestion-text-length": _ctx.relatedPrompt.suggestionText.length
-              })
-            },
-            toDisplayString(_ctx.relatedPrompt.suggestionText),
-            7
-            /* TEXT, CLASS, STYLE */
-          )
-        ]),
-        _ctx.isSelected ? (openBlock(), createBlock(_component_CrossTinyIcon, {
-          key: 0,
-          class: "x-icon-lg"
-        })) : (openBlock(), createBlock(_component_PlusIcon, {
-          key: 1,
-          class: "x-icon-lg"
-        }))
-      ])
-    ],
-    34
-    /* CLASS, NEED_HYDRATION */
-  );
+  const _directive_typing = resolveDirective("typing");
+  return openBlock(), createElementBlock("button", _hoisted_1, [
+    withDirectives(createElementVNode(
+      "span",
+      null,
+      null,
+      512
+      /* NEED_PATCH */
+    ), [
+      [_directive_typing, { text: _ctx.relatedPrompt.suggestionText, speed: 50 }]
+    ]),
+    (openBlock(), createBlock(resolveDynamicComponent(_ctx.selected ? "CrossTinyIcon" : "PlusIcon"), { class: "x-icon-lg x-related-prompt-icon" }))
+  ]);
 }
 var RelatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div\n    @click=\"toggleSuggestion(index)\"\n    @keydown=\"toggleSuggestion(index)\"\n    class=\"x-related-prompt__button\"\n    :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n    role=\"button\"\n    aria-pressed=\"true\"\n    tabindex=\"0\"\n  >\n    <slot name=\"related-prompt-button-info\">\n      <div class=\"x-related-prompt__button-info\">\n        <span\n          class=\"x-typewritter-initial\"\n          :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n          :style=\"{\n            animationDelay: `${index * 0.4 + 0.05}s`,\n            '--suggestion-text-length': relatedPrompt.suggestionText.length\n          }\"\n        >\n          {{ relatedPrompt.suggestionText }}\n        </span>\n      </div>\n      <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n      <PlusIcon v-else class=\"x-icon-lg\" />\n    </slot>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import { use$x } from '../../../composables/index';\n\n  /**\n   * This component shows a suggested related prompt.\n   *\n   * It provides a slot to customize the related prompt button information.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      isPromptVisible: {\n        type: Boolean,\n        default: false\n      },\n      isSelected: {\n        type: Boolean,\n        default: false\n      },\n      index: {\n        type: Number,\n        required: true\n      }\n    },\n    setup() {\n      const x = use$x();\n\n      const toggleSuggestion = (index: number): void => {\n        x.emit('UserSelectedARelatedPrompt', index);\n      };\n\n      return {\n        toggleSuggestion\n      };\n    }\n  });\n</script>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","index","_normalizeStyle","relatedPrompt","isSelected","_toDisplayString","_createBlock"],"mappings":";;;;;;;8BACEA,gBAyBM,CAAA,UAAA,CAAA,CAAA;SAvBHC,SAAO,EAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MACR,OAAA,EAJJ,qBAIU,CAA0B,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MAEhC,WAAK,MAAQ,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MACb,KAAmB,EAAAC,cAAA,CAAA,CAAA,0BAAA,EAAA,CAAA,EAAA,mCAAA,EAAA,IAAA,CAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,MACnB,IAAA,EAAA,QAAA;AAAA,MAAA,cAAA,EAAA,MAAA;AAEA,MAAA,QAAA,EAAA,GAAA;AAAA,KAAA;;iBAEI,IASO,CAAA,MAAA,EAAA,4BAAA,EAAA,EAAA,EAAA,MAAA;AAAA,QAAAC,kBAAA,CArBf,KAagB,EAAA,UAAA,EAAA;AAAA,UAAAA,kBAAA;AAbhB,YAAA,MAAA;AAAA,YAAA;AAAA,cAAA,KAAA,EAAAD,cAAA,CAemDE,CAAK,uBAAA,EAAA,CAAA,EAAA,yBAAA,EAAA,IAAA,CAAA,eAAA,EAAA,CAAA,CAAA,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA;;AAK3CC,gBAAAA,0BAAAA,EAAAA,IAAAA,CAAAA,aAAAA,CAAc,cAAc,CAAA,MAAA;AAAA,eAAA,CAAA;AAGdC,aAAAA;AAAAA,YAAUC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,YAAA,CAAA;AAAA;AAAA,WAAA;AAAA,SAAA,CAAA;AAvBrC,QAAA,IAAA,CAAA,UAAA,IAAAR,SAAA,EAuBwD,EAAAS,WAAA,CAAA,wBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;0BAChB,EAAAA,WAAA,CAAA,mBAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <button class=\"x-related-prompt\">\n    <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n    <component\n      :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n      class=\"x-icon-lg x-related-prompt-icon\"\n    />\n  </button>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import vTyping from '../../../directives/typing';\n\n  /**\n   * This component shows a suggested related prompt.\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    directives: {\n      typing: vTyping\n    },\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      selected: {\n        type: Boolean,\n        default: false\n      }\n    }\n  });\n</script>\n<style lang=\"css\">\n  .x-related-prompt {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: start;\n    padding: 8px;\n    height: 100%;\n    width: 100%;\n  }\n  .x-related-prompt-icon {\n    align-self: start;\n  }\n</style>\n"],"names":["_resolveDirective","relatedPrompt","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAMS,QANT,CAAA,CAAA;yCAC0BC,QAAc,EAAA,UAAA,EAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACtC,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAHJ,mCAIWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}

package/js/x-modules/related-prompts/components/related-prompt.vue2.js

@@ -1,60 +1,29 @@
 import { defineComponent } from 'vue';
-import { relatedPromptsXModule } from '../x-module.js';
 import CrossTinyIcon from '../../../components/icons/cross-tiny.vue.js';
 import PlusIcon from '../../../components/icons/plus.vue.js';
-import '../../../composables/create-use-device.js';
-import { use$x } from '../../../composables/use-_x.js';
-import '@vue/devtools-api';
-import '../../../plugins/devtools/timeline.devtools.js';
-import '@empathyco/x-utils';
-import 'rxjs/operators';
-import 'rxjs';
-import '../../../plugins/devtools/colors.utils.js';
-import '../../../plugins/x-bus.js';
-import '../../../plugins/x-plugin.js';
-import 'vuex';
-import '@vueuse/core';
+import typingDirective from '../../../directives/typing.js';
 
 /**
  * This component shows a suggested related prompt.
- *
- * It provides a slot to customize the related prompt button information.
- *
- * @public
  */
 var _sfc_main = defineComponent({
     name: 'RelatedPrompt',
+    directives: {
+        typing: typingDirective
+    },
     components: {
         CrossTinyIcon,
         PlusIcon
     },
-    xModule: relatedPromptsXModule.name,
     props: {
         relatedPrompt: {
             type: Object,
             required: true
         },
-        isPromptVisible: {
-            type: Boolean,
-            default: false
-        },
-        isSelected: {
+        selected: {
             type: Boolean,
             default: false
-        },
-        index: {
-            type: Number,
-            required: true
         }
-    },
-    setup() {
-        const x = use$x();
-        const toggleSuggestion = (index) => {
-            x.emit('UserSelectedARelatedPrompt', index);
-        };
-        return {
-            toggleSuggestion
-        };
     }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <div\n    @click=\"toggleSuggestion(index)\"\n    @keydown=\"toggleSuggestion(index)\"\n    class=\"x-related-prompt__button\"\n    :class=\"[{ 'x-related-prompt-selected__button': isSelected }]\"\n    role=\"button\"\n    aria-pressed=\"true\"\n    tabindex=\"0\"\n  >\n    <slot name=\"related-prompt-button-info\">\n      <div class=\"x-related-prompt__button-info\">\n        <span\n          class=\"x-typewritter-initial\"\n          :class=\"[{ 'x-typewritter-animation': isPromptVisible }]\"\n          :style=\"{\n            animationDelay: `${index * 0.4 + 0.05}s`,\n            '--suggestion-text-length': relatedPrompt.suggestionText.length\n          }\"\n        >\n          {{ relatedPrompt.suggestionText }}\n        </span>\n      </div>\n      <CrossTinyIcon v-if=\"isSelected\" class=\"x-icon-lg\" />\n      <PlusIcon v-else class=\"x-icon-lg\" />\n    </slot>\n  </div>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import { relatedPromptsXModule } from '../x-module';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import { use$x } from '../../../composables/index';\n\n  /**\n   * This component shows a suggested related prompt.\n   *\n   * It provides a slot to customize the related prompt button information.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    xModule: relatedPromptsXModule.name,\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      isPromptVisible: {\n        type: Boolean,\n        default: false\n      },\n      isSelected: {\n        type: Boolean,\n        default: false\n      },\n      index: {\n        type: Number,\n        required: true\n      }\n    },\n    setup() {\n      const x = use$x();\n\n      const toggleSuggestion = (index: number): void => {\n        x.emit('UserSelectedARelatedPrompt', index);\n      };\n\n      return {\n        toggleSuggestion\n      };\n    }\n  });\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;IACD,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;IACD,KAAK,GAAA;AACH,QAAA,MAAM,CAAE,GAAE,KAAK,EAAE,CAAA;AAEjB,QAAA,MAAM,gBAAe,GAAI,CAAC,KAAa,KAAW;AAChD,YAAA,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAA;AAC7C,SAAC,CAAA;QAED,OAAO;YACL,gBAAe;SAChB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n  <button class=\"x-related-prompt\">\n    <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n    <component\n      :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n      class=\"x-icon-lg x-related-prompt-icon\"\n    />\n  </button>\n</template>\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { RelatedPrompt } from '@empathyco/x-types';\n  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n  import PlusIcon from '../../../components/icons/plus.vue';\n  import vTyping from '../../../directives/typing';\n\n  /**\n   * This component shows a suggested related prompt.\n   */\n  export default defineComponent({\n    name: 'RelatedPrompt',\n    directives: {\n      typing: vTyping\n    },\n    components: {\n      CrossTinyIcon,\n      PlusIcon\n    },\n    props: {\n      relatedPrompt: {\n        type: Object as PropType<RelatedPrompt>,\n        required: true\n      },\n      selected: {\n        type: Boolean,\n        default: false\n      }\n    }\n  });\n</script>\n<style lang=\"css\">\n  .x-related-prompt {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: start;\n    padding: 8px;\n    height: 100%;\n    width: 100%;\n  }\n  .x-related-prompt-icon {\n    align-self: start;\n  }\n</style>\n"],"names":["vTyping"],"mappings":";;;;;AAgBE;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;AACV,QAAA,MAAM,EAAEA,eAAM;AACf,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/related-prompts/components/related-prompt.vue3.js

@@ -0,0 +1,7 @@
+import injectCss from '../../../../tools/inject-css.js';
+
+var css = "[dir=ltr] .x-related-prompt{text-align:left}[dir=rtl] .x-related-prompt{text-align:right}.x-related-prompt{align-items:center;display:flex;height:100%;justify-content:space-between;padding:8px;width:100%}.x-related-prompt-icon{align-self:start}";
+injectCss(css);
+
+export { css, css as default };
+//# sourceMappingURL=related-prompt.vue3.js.map

package/js/x-modules/related-prompts/components/related-prompt.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"related-prompt.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}