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

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

@@ -250,6 +250,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [TaggingXEvents](./x-components.taggingxevents.md) | Dictionary of the events of Tagging XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
 |  [ThrottleFunction](./x-components.throttlefunction.md) | The type returned by the [throttle()](./x-components.throttle.md) function. Basically is the function the [throttle()](./x-components.throttle.md) receives but throttled. |
 |  [TimedWireOperatorOptions](./x-components.timedwireoperatoroptions.md) | Options for wire operators that delay subscribers. |
+|  [TypingOptions](./x-components.typingoptions.md) | TypingOptions interface. |
 |  [UrlActions](./x-components.urlactions.md) | URL store actions. |
 |  [UrlGetters](./x-components.urlgetters.md) | URL store getters. |
 |  [UrlMutations](./x-components.urlmutations.md) | URL store mutations. |
@@ -485,10 +486,10 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [Redirection](./x-components.redirection.md) | A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like <code>help</code>, <code>shipping costs</code>, <code>my account</code>, where a link to a section in the website will be more helpful than the set of results returned. |
 |  [refreshHistoryQueriesSession](./x-components.refreshhistoryqueriessession.md) | Triggers a session refresh, extending its validity for the time configured in the [HistoryQueriesConfig.sessionTTLInMs](./x-components.historyqueriesconfig.sessionttlinms.md)<!-- -->. |
 |  [refreshSession](./x-components.refreshsession.md) | Default implementation for the [HistoryQueriesActions.refreshSession()](./x-components.historyqueriesactions.refreshsession.md)<!-- -->. |
-|  [RelatedPrompt](./x-components.relatedprompt.md) | <p>This component shows a suggested related prompt.</p><p>It provides a slot to customize the related prompt button information.</p> |
+|  [RelatedPrompt](./x-components.relatedprompt.md) | This component shows a suggested related prompt. |
 |  [relatedPromptRequest](./x-components.relatedpromptrequest.md) | Default implementation for the [RelatedPromptsGetters.request](./x-components.relatedpromptsgetters.request.md) getter. |
 |  [RelatedPromptsList](./x-components.relatedpromptslist.md) | Component that inserts groups of related prompts in different positions of the injected search items list, based on the provided configuration. |
-|  [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md) |  |
+|  [RelatedPromptsTagList](./x-components.relatedpromptstaglist.md) | <p>This component shows the list of <code>RelatedPrompts</code> components.</p><p>If the default slot is reimplemented in the consumer, <code>onSelect</code> function will be necessary to handle the selection of the related prompt and to trigger the stagger-fade-slide animation.</p> |
 |  [relatedPromptsXModule](./x-components.relatedpromptsxmodule.md) | Related Prompts [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>related-prompts</code> entry point. |
 |  [RelatedTag](./x-components.relatedtag.md) | This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for \*lego\*, a related tag could be \*city\*, refining the search with \*lego city\*. |
 |  [relatedTags](./x-components.relatedtags.md) | Default implementation for the [RelatedTagsGetters.relatedTags](./x-components.relatedtagsgetters.relatedtags.md) getter. |

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

@@ -6,8 +6,6 @@
 
 This component shows a suggested related prompt.
 
-It provides a slot to customize the related prompt button information.
-
 **Signature:**
 
 ```typescript
@@ -16,39 +14,20 @@ _default: import("vue").DefineComponent<{
         type: PropType<RelatedPrompt>;
         required: true;
     };
-    isPromptVisible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isSelected: {
+    selected: {
         type: BooleanConstructor;
         default: boolean;
     };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-}, {
-    toggleSuggestion: (index: number) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     relatedPrompt: {
         type: PropType<RelatedPrompt>;
         required: true;
     };
-    isPromptVisible: {
+    selected: {
         type: BooleanConstructor;
         default: boolean;
     };
-    isSelected: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
 }>>, {
-    isPromptVisible: boolean;
-    isSelected: boolean;
+    selected: boolean;
 }, {}>
 ```

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

@@ -4,19 +4,52 @@
 
 ## RelatedPromptsTagList variable
 
+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.
+
 **Signature:**
 
 ```typescript
 _default: import("vue").DefineComponent<{
     buttonClass: StringConstructor;
+    tagClass: StringConstructor;
+    tagColors: PropType<string[]>;
+    animationDurationInMs: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
-    arePromptsVisible: import("vue").Ref<boolean>;
-    hidePrompt: (index: number) => boolean;
     isSelected: (index: number) => boolean;
-    relatedPrompts: import("vue").ComputedRef<any>;
-    selectedPrompt: import("vue").ComputedRef<any>;
-    slidingPanelContent: import("vue").Ref<Element | undefined>;
+    onSelect: (selectedIndex: number) => void;
+    onBeforeEnter: (el: Element) => void;
+    onEnter: (el: Element, done: () => void) => void;
+    onLeave: (el: Element, done: () => void) => void;
+    selectedPromptIndex: import("vue").ComputedRef<any>;
+    visibleRelatedPrompts: import("vue").ComputedRef<{
+        index: number;
+        nextQueries: string[];
+        suggestionText: string;
+        type: string;
+        modelName: "RelatedPrompt";
+    }[]>;
+    listItems: import("vue").Ref<HTMLElement[]>;
+    isAnimating: import("vue").Ref<boolean>;
+    x: import("../../../composables").UseAliasAPI & {
+        on: <Event_1 extends keyof import("../../..").XEventsTypes, Metadata extends boolean>(event: Event_1, withMetadata: Metadata) => {
+            subscribe: (callback: (payload: Metadata extends true ? import("@empathyco/x-bus").SubjectPayload<import("@empathyco/x-bus").EventPayload<import("../../..").XEventsTypes, Event_1>, import("../../..").WireMetadata> : import("@empathyco/x-bus").EventPayload<import("../../..").XEventsTypes, Event_1>) => void) => void;
+        };
+        emit: <Event_2 extends keyof import("../../..").XEventsTypes>(event: Event_2, payload?: import("../../..").XEventPayload<Event_2> | undefined, metadata?: Omit<import("../../..").WireMetadata, "moduleName">) => Promise<import("@empathyco/x-bus").EmittedData<import("../../..").XEventsTypes, Event_2, import("../../..").WireMetadata>>;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     buttonClass: StringConstructor;
-}>>, {}, {}>
+    tagClass: StringConstructor;
+    tagColors: PropType<string[]>;
+    animationDurationInMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    animationDurationInMs: number;
+}, {}>
 ```

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

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingOptions](./x-components.typingoptions.md)
+
+## TypingOptions interface
+
+TypingOptions interface.
+
+**Signature:**
+
+```typescript
+export interface TypingOptions 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [speed?](./x-components.typingoptions.speed.md) |  | number | _(Optional)_ The typing speed in milliseconds per character. |
+|  [targetAttr?](./x-components.typingoptions.targetattr.md) |  | string | _(Optional)_ The attribute of the HTML element where the typed text will be placed. If not specified, the text will be set as content (innerHTML). |
+|  [text](./x-components.typingoptions.text.md) |  | string | The text (plain or html) that will be typed into the target element. |
+

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingOptions](./x-components.typingoptions.md) &gt; [speed](./x-components.typingoptions.speed.md)
+
+## TypingOptions.speed property
+
+The typing speed in milliseconds per character.
+
+**Signature:**
+
+```typescript
+speed?: number;
+```

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

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingOptions](./x-components.typingoptions.md) &gt; [targetAttr](./x-components.typingoptions.targetattr.md)
+
+## TypingOptions.targetAttr property
+
+The attribute of the HTML element where the typed text will be placed. If not specified, the text will be set as content (innerHTML).
+
+**Signature:**
+
+```typescript
+targetAttr?: string;
+```
+
+## Example
+
+'placeholder'
+

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [TypingOptions](./x-components.typingoptions.md) &gt; [text](./x-components.typingoptions.text.md)
+
+## TypingOptions.text property
+
+The text (plain or html) that will be typed into the target element.
+
+**Signature:**
+
+```typescript
+text: string;
+```

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/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/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":";;;;;;;"}