npm - @empathyco/x-components - Versions diffs - 6.0.0-alpha.35 → 6.0.0-alpha.37 - Mend

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

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 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; [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 ADDED Viewed

@@ -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 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; [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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/page-loader-button.vue.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import _sfc_main from './page-loader-button.vue2.js';
 import { resolveComponent, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, toDisplayString, createVNode, normalizeClass, withCtx, createTextVNode } from 'vue';
+import './page-loader-button.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 const _hoisted_1 = {
-  class: "x-flex x-flex-col x-items-center x-py-32",
+  class: "x-page-loader",
   "data-test": "page-loader"
 };
 const _hoisted_2 = {
-  class: "x-text x-py-16",
+  class: "x-page-loader__text-content",
   "data-test": "text-content"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -25,7 +26,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           1
           /* TEXT */
         )
-      ]),
+      ], true),
       createVNode(_component_BaseEventButton, {
         class: normalizeClass(["x-button", _ctx.buttonClasses]),
         events: _ctx.events,
@@ -35,15 +36,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "buttonContent", {}, () => [
             createTextVNode("Load")
-          ])
+          ], true)
         ]),
         _: 3
         /* FORWARDED */
       }, 8, ["class", "events"])
-    ])
+    ], true)
   ]);
 }
-var pageLoaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var pageLoaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1e62f4ee"]]);
 export { pageLoaderButton as default };
 //# sourceMappingURL=page-loader-button.vue.js.map

package/js/components/page-loader-button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page-loader-button.vue.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n <div class=\"x-~~flex x~~-~~flex-col x-items-center x-py-32~~\" data-test=\"page-loader\">\n <!--\n @slot default\n @binding {number} resultsLength - The search result's length\n @binding {number} totalResults - The totalResults of a searched query\n -->\n <slot v-bind=\"{ resultsLength, totalResults }\">\n <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n <slot name=\"textContent\" :resultsLength=\"resultsLength\" :totalResults=\"totalResults\">\n <p class=\"x-~~text x~~-py-16\" data-test=\"text-content\">\n You are seeing {{ resultsLength }} of {{ totalResults }} results\n </p>\n </slot>\n <BaseEventButton\n class=\"x-button\"\n :class=\"buttonClasses\"\n :events=\"events\"\n data-test=\"load-content\"\n aria-label=\"Load\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot name=\"buttonContent\">Load</slot>\n </BaseEventButton>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n import { use$x } from '../composables';\n import { XEventsTypes } from '../wiring';\n import BaseEventButton from './base-event-button.vue';\n\n /*\n Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n \n @public\n /\n export default defineComponent({\n name: 'PageLoaderButton',\n components: { BaseEventButton },\n props: {\n /\n CSS classes to customize the loader button.\n \n @internal\n /\n buttonClasses: {\n type: String as PropType<VueCSSClasses>,\n default: ''\n },\n /\n Events to customize what will be emitted by the loader button.\n \n @internal\n /\n buttonEvents: {\n type: Object as PropType<Partial<XEventsTypes>>\n }\n },\n setup(props) {\n const $x = use$x();\n const resultsLength = computed(() => $x.results.length);\n const totalResults = computed(() => $x.totalResults);\n\n /\n The events that will be emitted when clicking on the loader button.\n \n @returns The {@link XEvent} to emit.\n * @public\n */\n const events = computed<Partial<XEventsTypes>>(() => {\n return { UserReachedResultsListEnd: undefined, ...props.buttonEvents };\n });\n\n return {\n resultsLength,\n totalResults,\n events\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n <PageLoaderButton />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n <PageLoaderButton>\n <template #default=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-flex-col\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n <button\n @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n class=\"x-button x-button-ghost\"\n >\n Load more\n </button>\n </div>\n </template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n <PageLoaderButton :buttonClasses=\"buttonClasses\">\n <template #textContent=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n </template>\n <template #buttonContent>Load more results</template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n },\n data() {\n return {\n buttonClasses: 'x-rounded-full'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_renderSlot","resultsLength","_normalizeProps","_guardReactiveProps","totalResults","_createElementVNode","_toDisplayString","events","_withCtx"],"mappings":"~~;;;;MACwD~~,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,~~0CAAA~~;;;~~MAShC~~,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,~~gBAAA~~;;;;~~qCAT1CA~~,gBAwBM,CAAA,iBAAA,CAAA,CAAA;SAhBFC,SAIO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAJmBC,UAAA,CAAA,IAAA,CAAa,QAAEC,SAAa,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,YAAA,EAAA,IAAA,CAAA,YAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,MAAAH,UAAA,CAAG,KAAcI,MAAY,EAAA,aAAA,EAAA;AAAA,QAI5E,aAAA,EAAA,IAAA,CAAA,aAAA;AAAA,QAHL,YAAA,EAAA,IAAA,CAAA,YAAA;AAAA,OAAA,EAAA,MAAA;AAIF,QAAAC,kBAAA;AAAA,UASkB,GAAA;AAAA,UAAA,UAAA;AAAA,UAAA,kBAAA,GAAAC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,GAAA,MAAA,GAAAA,eAAA,CAAA,IAAA,CAAA,YAAA,CAAA,GAAA,WAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;~~kBANPC~~,0BAAM,EAAA;AAAA,QACf,sBAAU,CAAc,UAAA,EAAA,IAAA,CAAA,aAAA,CAAA,CAAA;AAAA,QACxB,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,QAAA,WAAA,EAAA,cAAA;AAnBlB,QAAA,YAAA,EAAA,MAAA;AAAA,OAAA,EAAA;iBAAAC,OAsBmC,CAAA,MAAA;AAAA,~~UAAAR~~,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,eAAA,EAAA,EAAA,EAAA,MAAA;;AAtBnC,WAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;"}
1	+ {"version":3,"file":"page-loader-button.vue.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n <div class=\"x-page-loader\" data-test=\"page-loader\">\n <!--\n @slot default\n @binding {number} resultsLength - The search result's length\n @binding {number} totalResults - The totalResults of a searched query\n -->\n <slot v-bind=\"{ resultsLength, totalResults }\">\n <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n <slot name=\"textContent\" :resultsLength=\"resultsLength\" :totalResults=\"totalResults\">\n <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n You are seeing {{ resultsLength }} of {{ totalResults }} results\n </p>\n </slot>\n <BaseEventButton\n class=\"x-button\"\n :class=\"buttonClasses\"\n :events=\"events\"\n data-test=\"load-content\"\n aria-label=\"Load\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot name=\"buttonContent\">Load</slot>\n </BaseEventButton>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n import { use$x } from '../composables';\n import { XEventsTypes } from '../wiring';\n import BaseEventButton from './base-event-button.vue';\n\n /*\n Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n \n @public\n /\n export default defineComponent({\n name: 'PageLoaderButton',\n components: { BaseEventButton },\n props: {\n /\n CSS classes to customize the loader button.\n \n @internal\n /\n buttonClasses: {\n type: String as PropType<VueCSSClasses>,\n default: ''\n },\n /\n Events to customize what will be emitted by the loader button.\n \n @internal\n /\n buttonEvents: {\n type: Object as PropType<Partial<XEventsTypes>>\n }\n },\n setup(props) {\n const $x = use$x();\n const resultsLength = computed(() => $x.results.length);\n const totalResults = computed(() => $x.totalResults);\n\n /\n The events that will be emitted when clicking on the loader button.\n \n @returns The {@link XEvent} to emit.\n * @public\n */\n const events = computed<Partial<XEventsTypes>>(() => {\n return { UserReachedResultsListEnd: undefined, ...props.buttonEvents };\n });\n\n return {\n resultsLength,\n totalResults,\n events\n };\n }\n });\n</script>\n\n<style scoped>\n .x-page-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px 0;\n }\n\n .x-page-loader__text-content {\n padding: 16px 0;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n <PageLoaderButton />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n <PageLoaderButton>\n <template #default=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-flex-col\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n <button\n @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n class=\"x-button x-button-ghost\"\n >\n Load more\n </button>\n </div>\n </template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n <PageLoaderButton :buttonClasses=\"buttonClasses\">\n <template #textContent=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n </template>\n <template #buttonContent>Load more results</template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n },\n data() {\n return {\n buttonClasses: 'x-rounded-full'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_renderSlot","resultsLength","_normalizeProps","_guardReactiveProps","totalResults","_createElementVNode","_toDisplayString","_createVNode","events","_withCtx"],"mappings":";;;;;MAC6B,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,eAAA;;;MASQ,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,6BAAA;;;;qCATvDA,gBAwBM,CAAA,iBAAA,CAAA,CAAA;SAhBFC,SAIO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAJmBC,UAAA,CAAA,IAAA,CAAa,QAAEC,SAAa,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,YAAA,EAAA,IAAA,CAAA,YAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,MAAAH,UAAA,CAAG,KAAcI,MAAY,EAAA,aAAA,EAAA;AAAA,QAI5E,aAAA,EAAA,IAAA,CAAA,aAAA;AAAA,QAHL,YAAA,EAAA,IAAA,CAAA,YAAA;AAAA,OAAA,EAAA,MAAA;AAIF,QAAAC,kBAAA;AAAA,UASkB,GAAA;AAAA,UAAA,UAAA;AAAA,UAAA,kBAAA,GAAAC,eAAA,CAAA,IAAA,CAAA,aAAA,CAAA,GAAA,MAAA,GAAAA,eAAA,CAAA,IAAA,CAAA,YAAA,CAAA,GAAA,WAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,EARhB,IAAK,CAAA;AAAA,MAAAC,WAAA,CAEIC,0BAAM,EAAA;AAAA,QACf,sBAAU,CAAc,UAAA,EAAA,IAAA,CAAA,aAAA,CAAA,CAAA;AAAA,QACxB,MAAU,EAAA,IAAA,CAAA,MAAA;AAAA,QAAA,WAAA,EAAA,cAAA;AAnBlB,QAAA,YAAA,EAAA,MAAA;AAAA,OAAA,EAAA;iBAAAC,OAsBmC,CAAA,MAAA;AAAA,UAAAT,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,eAAA,EAAA,EAAA,EAAA,MAAA;;AAtBnC,WAAA,EAAA,IAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;"}

package/js/components/page-loader-button.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page-loader-button.vue2.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n <div class=\"x-~~flex x~~-~~flex-col x-items-center x-py-32~~\" data-test=\"page-loader\">\n <!--\n @slot default\n @binding {number} resultsLength - The search result's length\n @binding {number} totalResults - The totalResults of a searched query\n -->\n <slot v-bind=\"{ resultsLength, totalResults }\">\n <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n <slot name=\"textContent\" :resultsLength=\"resultsLength\" :totalResults=\"totalResults\">\n <p class=\"x-~~text x~~-py-16\" data-test=\"text-content\">\n You are seeing {{ resultsLength }} of {{ totalResults }} results\n </p>\n </slot>\n <BaseEventButton\n class=\"x-button\"\n :class=\"buttonClasses\"\n :events=\"events\"\n data-test=\"load-content\"\n aria-label=\"Load\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot name=\"buttonContent\">Load</slot>\n </BaseEventButton>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n import { use$x } from '../composables';\n import { XEventsTypes } from '../wiring';\n import BaseEventButton from './base-event-button.vue';\n\n /*\n Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n \n @public\n /\n export default defineComponent({\n name: 'PageLoaderButton',\n components: { BaseEventButton },\n props: {\n /\n CSS classes to customize the loader button.\n \n @internal\n /\n buttonClasses: {\n type: String as PropType<VueCSSClasses>,\n default: ''\n },\n /\n Events to customize what will be emitted by the loader button.\n \n @internal\n /\n buttonEvents: {\n type: Object as PropType<Partial<XEventsTypes>>\n }\n },\n setup(props) {\n const $x = use$x();\n const resultsLength = computed(() => $x.results.length);\n const totalResults = computed(() => $x.totalResults);\n\n /\n The events that will be emitted when clicking on the loader button.\n \n @returns The {@link XEvent} to emit.\n * @public\n */\n const events = computed<Partial<XEventsTypes>>(() => {\n return { UserReachedResultsListEnd: undefined, ...props.buttonEvents };\n });\n\n return {\n resultsLength,\n totalResults,\n events\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n <PageLoaderButton />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n <PageLoaderButton>\n <template #default=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-flex-col\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n <button\n @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n class=\"x-button x-button-ghost\"\n >\n Load more\n </button>\n </div>\n </template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n <PageLoaderButton :buttonClasses=\"buttonClasses\">\n <template #textContent=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n </template>\n <template #buttonContent>Load more results</template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n },\n data() {\n return {\n buttonClasses: 'x-rounded-full'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,OAAO,EAAE,EAAC;AACX,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAwC;AAChD,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAClB,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;QACvD,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,YAAY,CAAC,CAAA;AAEpD;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;YACnD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,cAAc,CAAA;AACxE,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,aAAa;YACb,YAAY;YACZ,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"page-loader-button.vue2.js","sources":["../../../src/components/page-loader-button.vue"],"sourcesContent":["<template>\n <div class=\"x-page-loader\" data-test=\"page-loader\">\n <!--\n @slot default\n @binding {number} resultsLength - The search result's length\n @binding {number} totalResults - The totalResults of a searched query\n -->\n <slot v-bind=\"{ resultsLength, totalResults }\">\n <!-- @slot Rendered count with a text and the number of results displayed & remaining. -->\n <slot name=\"textContent\" :resultsLength=\"resultsLength\" :totalResults=\"totalResults\">\n <p class=\"x-page-loader__text-content\" data-test=\"text-content\">\n You are seeing {{ resultsLength }} of {{ totalResults }} results\n </p>\n </slot>\n <BaseEventButton\n class=\"x-button\"\n :class=\"buttonClasses\"\n :events=\"events\"\n data-test=\"load-content\"\n aria-label=\"Load\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot name=\"buttonContent\">Load</slot>\n </BaseEventButton>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n import { use$x } from '../composables';\n import { XEventsTypes } from '../wiring';\n import BaseEventButton from './base-event-button.vue';\n\n /*\n Component that renders a text with the number of rendered results and\n * the remaining ones and a `<BaseEventButton>` with the logic of emitting\n * the event \"UserReachedResultsListEnd\" to load more results on click.\n \n @public\n /\n export default defineComponent({\n name: 'PageLoaderButton',\n components: { BaseEventButton },\n props: {\n /\n CSS classes to customize the loader button.\n \n @internal\n /\n buttonClasses: {\n type: String as PropType<VueCSSClasses>,\n default: ''\n },\n /\n Events to customize what will be emitted by the loader button.\n \n @internal\n /\n buttonEvents: {\n type: Object as PropType<Partial<XEventsTypes>>\n }\n },\n setup(props) {\n const $x = use$x();\n const resultsLength = computed(() => $x.results.length);\n const totalResults = computed(() => $x.totalResults);\n\n /\n The events that will be emitted when clicking on the loader button.\n \n @returns The {@link XEvent} to emit.\n * @public\n */\n const events = computed<Partial<XEventsTypes>>(() => {\n return { UserReachedResultsListEnd: undefined, ...props.buttonEvents };\n });\n\n return {\n resultsLength,\n totalResults,\n events\n };\n }\n });\n</script>\n\n<style scoped>\n .x-page-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px 0;\n }\n\n .x-page-loader__text-content {\n padding: 16px 0;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the \"UserReachedResultsListEnd\" event by default. This can be changed using the\nbuttonEvents prop:\n\n```vue live\n<template>\n <PageLoaderButton :buttonEvents=\"{ UserClickedCloseX: undefined }\" />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n## See it in action\n\nHere you have a basic example of how the page loader component is rendered.\n\n```vue live\n<template>\n <PageLoaderButton />\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the default layout\n\nThis component has a default slot which allows to customise the entire layout.\n\n```vue live\n<template>\n <PageLoaderButton>\n <template #default=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-flex-col\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n <button\n @click=\"$x.emit('UserReachedResultsListEnd', undefined)\"\n class=\"x-button x-button-ghost\"\n >\n Load more\n </button>\n </div>\n </template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n }\n };\n</script>\n```\n\n### Customise the slots\n\nThis component allows to customise both the textContent and the buttonContent slots. The\ntextContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping\ncontent inside and customizing its style using the buttonClasses prop.\n\n```vue live\n<template>\n <PageLoaderButton :buttonClasses=\"buttonClasses\">\n <template #textContent=\"{ resultsLength, totalResults }\">\n <div class=\"x-flex x-gap-4 x-text\">\n <span class=\"x-text-accent-50 x-font-bold\">{{ resultsLength }}</span>\n <span>of</span>\n <span class=\"x-text-accent-50\">{{ totalResults }}</span>\n </div>\n </template>\n <template #buttonContent>Load more results</template>\n </PageLoaderButton>\n</template>\n\n<script>\n import { PageLoaderButton } from '@empathyco/x-components';\n\n export default {\n name: 'PageLoaderButtonDemo',\n components: {\n PageLoaderButton\n },\n data() {\n return {\n buttonClasses: 'x-rounded-full'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmCE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,OAAO,EAAE,EAAC;AACX,SAAA;AACD;;;;AAIE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAwC;AAChD,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAClB,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;QACvD,MAAM,YAAW,GAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,YAAY,CAAC,CAAA;AAEpD;;;;;AAKE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;YACnD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,cAAc,CAAA;AACxE,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,aAAa;YACb,YAAY;YACZ,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/components/page-loader-button.vue3.js ADDED Viewed

@@ -0,0 +1,7 @@
+import injectCss from '../../tools/inject-css.js';
+var css = ".x-page-loader[data-v-1e62f4ee]{align-items:center;display:flex;flex-direction:column;padding:32px 0}.x-page-loader__text-content[data-v-1e62f4ee]{padding:16px 0}";
+injectCss(css);
+export { css, css as default };
+//# sourceMappingURL=page-loader-button.vue3.js.map

package/js/components/page-loader-button.vue3.js.map ADDED Viewed

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

package/js/directives/typing.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/empathize/components/empathize.vue2.js CHANGED Viewed

@@ -89,6 +89,7 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
 import '../../../components/page-selector.vue2.js';
 import '../../../components/page-selector.vue3.js';
 import '../../../composables/create-use-device.js';

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

package/js/x-modules/extra-params/components/extra-params.vue.js CHANGED Viewed

@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
         const params = useState('extraParams', ['params']).params;
         const $x = use$x();
         $x.emit('ExtraParamsInitialized', { ...props.values });
-        $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
+        $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });
         watch(() => props.values, values => {
             $x.emit('ExtraParamsProvided', { ...values });
         }, { deep: true });

package/js/x-modules/extra-params/components/extra-params.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import { ComputedRef, defineComponent, PropType, watch } from 'vue';\n import { extraParamsXModule } from '../x-module';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n\n /*\n It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n \n @public\n */\n\n export default defineComponent({\n name: 'ExtraParams',\n xModule: extraParamsXModule.name,\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>,\n required: true\n }\n },\n setup(props) {\n const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params;\n const $x = use$x();\n\n $x.emit('ExtraParamsInitialized', { ...props.values });\n $x.emit('ExtraParamsProvided', { ...~~props~~.~~values~~, ...~~params~~.~~value~~ });\n\n watch(\n () => props.values,\n values => {\n $x.emit('ExtraParamsProvided', { ...values });\n },\n { deep: true }\n );\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n export default {\n name: 'ExtraParamsDemo',\n components: {\n ExtraParams\n },\n data() {\n return {\n values: {\n warehouse: 1234\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAOE;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;AAClF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAO,EAAC,CAAC,CAAA;AACtD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,~~KAAK~~,CAAC,~~MAAM~~,EAAE,GAAG,~~MAAM~~,CAAC,~~KAAI~~,EAAG,CAAC,CAAA;QAEpE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAK,EAAG,CAAC,CAAA;AAC/C,SAAC,EACD,EAAE,IAAI,EAAE,IAAK,EAAA,CACd,CAAA;;AAED,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\n import { Dictionary } from '@empathyco/x-utils';\n import { ComputedRef, defineComponent, PropType, watch } from 'vue';\n import { extraParamsXModule } from '../x-module';\n import { use$x } from '../../../composables/use-$x';\n import { useState } from '../../../composables/use-state';\n\n /*\n It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n \n @public\n */\n\n export default defineComponent({\n name: 'ExtraParams',\n xModule: extraParamsXModule.name,\n props: {\n values: {\n type: Object as PropType<Dictionary<unknown>>,\n required: true\n }\n },\n setup(props) {\n const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params;\n const $x = use$x();\n\n $x.emit('ExtraParamsInitialized', { ...props.values });\n $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });\n\n watch(\n () => props.values,\n values => {\n $x.emit('ExtraParamsProvided', { ...values });\n },\n { deep: true }\n );\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\n- [`ExtraParamsProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n_See how the event is triggered when the component is rendered._\n\n```vue\n<template>\n <ExtraParams :values=\"values\" />\n</template>\n\n<script>\n import { ExtraParams } from '@empathyco/x-components/extra-params';\n\n export default {\n name: 'ExtraParamsDemo',\n components: {\n ExtraParams\n },\n data() {\n return {\n values: {\n warehouse: 1234\n }\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAOE;;;;;AAKE;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC7C,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;AAClF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAO,EAAC,CAAC,CAAA;AACtD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAC,CAAA;QAEpE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAK,EAAG,CAAC,CAAA;AAC/C,SAAC,EACD,EAAE,IAAI,EAAE,IAAK,EAAA,CACd,CAAA;;AAED,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/queries-preview/components/query-preview-button.vue2.js CHANGED Viewed

@@ -96,6 +96,7 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
 import '../../../components/page-selector.vue2.js';
 import '../../../components/page-selector.vue3.js';
 import { queriesPreviewXModule } from '../x-module.js';

package/js/x-modules/queries-preview/components/query-preview-button.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n <BaseEventButton\n :events=\"events\"\n :metadata=\"metadata\"\n class=\"x-query-preview-button x-button\"\n data-test=\"query-preview-button\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot :queryPreviewInfo=\"fullQueryPreviewInfo\">\n {{ queryPreviewInfo.query }}\n </slot>\n </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { QueryPreviewInfo } from '../store/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { BaseEventButton } from '../../../components';\n import { queriesPreviewXModule } from '../x-module';\n import { useState } from '../../../composables/use-state';\n import { WireMetadata } from '../../../wiring/index';\n\n /*\n Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n \n It has a default slot to customize its contents.\n \n @public\n /\n export default defineComponent({\n name: 'QueryPreviewButton',\n xModule: queriesPreviewXModule.name,\n components: { BaseEventButton },\n props: {\n /\n The information about the request of the query preview.\n \n @public\n /\n queryPreviewInfo: {\n type: Object as PropType<QueryPreviewInfo>,\n required: true\n },\n /\n The metadata property for the request on each query preview.\n \n @public\n /\n metadata: {\n type: Object as PropType<Omit<WireMetadata, 'moduleName'>>\n }\n },\n setup(props) {\n /\n We use the module extra params to combine them with the query preview's extra params.\n /\n const { params } = useState('queriesPreview', ['params']);\n\n /\n The provided query preview with the base extra params from the module merged in.\n \n @returns The query preview info with the base extra params merged in.\n * @public\n /\n const fullQueryPreviewInfo = computed(\n (): QueryPreviewInfo => ({\n ...props.queryPreviewInfo,\n extraParams: {\n ...params.value,\n ...props.queryPreviewInfo.extraParams\n },\n filters: props.queryPreviewInfo.filters\n })\n );\n\n /\n List of events to emit by the BaseEventButton.\n \n @returns An object with the event and payload.\n \n @internal\n */\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value })\n );\n\n return {\n fullQueryPreviewInfo,\n events\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n <div>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n </div>\n</template>\n\n<script>\n import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';\n\n export default {\n components: {\n QueryPreviewButton\n },\n data: function () {\n return {\n queryPreviewInfo: {\n query: 'shoes'\n }\n };\n }\n };\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n <div>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n {{ `Search for: ${queryPreviewInfo.query}` }}\n </QueryPreviewButton>\n </div>\n</template>\n\n<script>\n import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';\n\n export default {\n components: {\n QueryPreviewButton\n },\n data: function () {\n return {\n queryPreviewInfo: {\n query: 'shoes'\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuBE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAmD;AAC3D,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;AACF,QAAA,MAAM,EAAE,MAAK,KAAM,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEzD;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAU;AACrC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAM;AACvC,SAAA,CAAA,CACF,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,OAAO,CAAA,CACxF,CAAA;QAED,OAAO;YACL,oBAAoB;YACpB,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1	+ {"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n <BaseEventButton\n :events=\"events\"\n :metadata=\"metadata\"\n class=\"x-query-preview-button x-button\"\n data-test=\"query-preview-button\"\n >\n <!-- @slot Button content with a text, an icon or both -->\n <slot :queryPreviewInfo=\"fullQueryPreviewInfo\">\n {{ queryPreviewInfo.query }}\n </slot>\n </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { QueryPreviewInfo } from '../store/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { BaseEventButton } from '../../../components';\n import { queriesPreviewXModule } from '../x-module';\n import { useState } from '../../../composables/use-state';\n import { WireMetadata } from '../../../wiring/index';\n\n /*\n Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n \n It has a default slot to customize its contents.\n \n @public\n /\n export default defineComponent({\n name: 'QueryPreviewButton',\n xModule: queriesPreviewXModule.name,\n components: { BaseEventButton },\n props: {\n /\n The information about the request of the query preview.\n \n @public\n /\n queryPreviewInfo: {\n type: Object as PropType<QueryPreviewInfo>,\n required: true\n },\n /\n The metadata property for the request on each query preview.\n \n @public\n /\n metadata: {\n type: Object as PropType<Omit<WireMetadata, 'moduleName'>>\n }\n },\n setup(props) {\n /\n We use the module extra params to combine them with the query preview's extra params.\n /\n const { params } = useState('queriesPreview', ['params']);\n\n /\n The provided query preview with the base extra params from the module merged in.\n \n @returns The query preview info with the base extra params merged in.\n * @public\n /\n const fullQueryPreviewInfo = computed(\n (): QueryPreviewInfo => ({\n ...props.queryPreviewInfo,\n extraParams: {\n ...params.value,\n ...props.queryPreviewInfo.extraParams\n },\n filters: props.queryPreviewInfo.filters\n })\n );\n\n /\n List of events to emit by the BaseEventButton.\n \n @returns An object with the event and payload.\n \n @internal\n */\n const events = computed(\n (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value })\n );\n\n return {\n fullQueryPreviewInfo,\n events\n };\n }\n });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n <div>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n </div>\n</template>\n\n<script>\n import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';\n\n export default {\n components: {\n QueryPreviewButton\n },\n data: function () {\n return {\n queryPreviewInfo: {\n query: 'shoes'\n }\n };\n }\n };\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n <div>\n <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n {{ `Search for: ${queryPreviewInfo.query}` }}\n </QueryPreviewButton>\n </div>\n</template>\n\n<script>\n import { QueryPreviewButton } from '@empathyco/x-components/queries-preview';\n\n export default {\n components: {\n QueryPreviewButton\n },\n data: function () {\n return {\n queryPreviewInfo: {\n query: 'shoes'\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAmD;AAC3D,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;AACF,QAAA,MAAM,EAAE,MAAK,KAAM,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEzD;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAU;AACrC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAM;AACvC,SAAA,CAAA,CACF,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,OAAO,CAAA,CACxF,CAAA;QAED,OAAO;YACL,oBAAoB;YACpB,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/queries-preview/components/query-preview.vue2.js CHANGED Viewed

@@ -98,6 +98,7 @@ import '../../../components/sliding-panel.vue2.js';
 import '../../../components/sliding-panel.vue3.js';
 import '../../../components/snippet-callbacks.vue2.js';
 import '../../../components/page-loader-button.vue2.js';
+import '../../../components/page-loader-button.vue3.js';
 import '../../../components/page-selector.vue2.js';
 import '../../../components/page-selector.vue3.js';
 import { queriesPreviewXModule } from '../x-module.js';