@empathyco/x-components 6.0.0-alpha.62 → 6.0.0-alpha.64

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

@@ -74,7 +74,7 @@
 |  [identifierResultsResponseMapper](./x-adapter-platform.identifierresultsresponsemapper.md) | Default implementation for the IdentifierResultsResponseMapper. |
 |  [identifierResultsResponseSchema](./x-adapter-platform.identifierresultsresponseschema.md) | Default implementation for the IdentifierResultsResponseSchema. |
 |  [nextQueriesEndpointAdapter](./x-adapter-platform.nextqueriesendpointadapter.md) | This endpoint does not support pagination in the request. |
-|  [nextQueriesRelatedPromptsSchema](./x-adapter-platform.nextqueriesrelatedpromptsschema.md) |  |
+|  [nextQueriesRelatedPromptsSchema](./x-adapter-platform.nextqueriesrelatedpromptsschema.md) | Default implementation for the NextQueriesRelatedPromptsSchema. |
 |  [nextQueriesRequestMapper](./x-adapter-platform.nextqueriesrequestmapper.md) | Default implementation for the NextQueriesRequestMapper. |
 |  [nextQueriesRequestSchema](./x-adapter-platform.nextqueriesrequestschema.md) | Default implementation for the NextQueriesRequestSchema. |
 |  [nextQueriesResponseMapper](./x-adapter-platform.nextqueriesresponsemapper.md) | Default implementation for the NextQueriesResponseMapper. |

package/docs/API-reference/api/x-adapter-platform.nextqueriesrelatedpromptsschema.md

@@ -4,6 +4,8 @@
 
 ## nextQueriesRelatedPromptsSchema variable
 
+Default implementation for the NextQueriesRelatedPromptsSchema.
+
 **Signature:**
 
 ```typescript

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

@@ -10,7 +10,7 @@ The `FallbackDisclaimer` component shows a message if the filters have been remo
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    query: import("vue").ComputedRef<any>;
-    fromNoResultsWithFilters: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
+    fromNoResultsWithFilters: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -11,6 +11,6 @@ History Queries Switch is a component to activate or deactivate the history quer
 ```typescript
 _default: import("vue").DefineComponent<{}, {
     toggle: () => void;
-    isEnabled: import("vue").ComputedRef<any>;
+    isEnabled: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -15,7 +15,7 @@ _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    query: ComputedRef<any>;
+    query: ComputedRef<string>;
     highlightedQueryHTML: ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     result: {

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

@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
     };
     maxItemsToRender: NumberConstructor;
 }, {
-    identifierResults: import("vue").ComputedRef<any>;
+    identifierResults: import("vue").ComputedRef<Result[]>;
     identifierResultsToRender: import("vue").ComputedRef<Result[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {

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

@@ -90,7 +90,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [useGetter(module, getters)](./x-components.usegetter.md) | Function which returns the requested getters as a dictionary of getters. |
 |  [useOnDisplay({ element, callback, triggerOnce, })](./x-components.useondisplay.md) | Composable that triggers a callback whenever the provided element appears in the viewport. It can trigger the first time only or every time the element appears in the viewport. |
 |  [useScroll(props, { emit }, scrollEl)](./x-components.usescroll.md) | Composable to share Scroll logic. |
-|  [useState(module, paths)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. |
+|  [useState(module)](./x-components.usestate.md) | Function which returns the requested state's properties as a dictionary. |
 |  [useXBus()](./x-components.usexbus.md) | Composable which injects the current location, returns the <code>on</code> and <code>emit</code> functions using the bus and applying component metadata. Also unsubscribe from events when components is unmounted. |
 |  [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated. |

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

@@ -22,7 +22,7 @@ _default: import("vue").DefineComponent<{
 }, {
     hasHistoryQueries: import("vue").ComputedRef<boolean>;
     groupByDate: import("vue").ComputedRef<Dictionary<HistoryQueryType[]>>;
-    historyQueries: import("vue").ComputedRef<any>;
+    historyQueries: import("vue").ComputedRef<HistoryQueryType[]>;
     formatTime: (timestamp: number) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {

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

@@ -19,7 +19,7 @@ _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
-    partialResults: ComputedRef<PartialResult[]>;
+    partialResults: import("vue").ComputedRef<import("@empathyco/x-types").PartialResult[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -29,8 +29,8 @@ _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    hasResults: ComputedRef<boolean>;
-    queryPreviewResults: ComputedRef<{
+    hasResults: import("vue").ComputedRef<boolean>;
+    queryPreviewResults: import("vue").ComputedRef<{
         results: import("@empathyco/x-types").Result[];
         request: SearchRequest;
         displayTagging?: import("@empathyco/x-types").TaggingRequest | undefined;

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

@@ -16,7 +16,7 @@ _default: import("vue").DefineComponent<{
     };
     maxItemsToRender: NumberConstructor;
 }, {
-    recommendations: ComputedRef<Result[]>;
+    recommendations: import("vue").ComputedRef<Result[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -29,8 +29,8 @@ _default: import("vue").DefineComponent<{
     onBeforeEnter: (el: Element) => void;
     onEnter: (el: Element, done: () => void) => void;
     onLeave: (el: Element, done: () => void) => void;
-    selectedPromptIndex: ComputedRef<number>;
-    visibleRelatedPrompts: ComputedRef<{
+    selectedPromptIndex: import("vue").ComputedRef<number>;
+    visibleRelatedPrompts: import("vue").ComputedRef<{
         index: number;
         relatedPromptNextQueries?: import("@empathyco/x-types").RelatedPromptNextQuery[] | undefined;
         nextQueries: string[];

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

@@ -20,10 +20,10 @@ _default: import("vue").DefineComponent<{
     };
 }, {
     buttonEl: import("vue").Ref<HTMLElement | undefined>;
-    dynamicClasses: ComputedRef<VueCSSClasses>;
-    isSelected: ComputedRef<boolean>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+    isSelected: import("vue").ComputedRef<boolean>;
     clickRelatedTag: () => void;
-    shouldHighlightCurated: ComputedRef<boolean>;
+    shouldHighlightCurated: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     highlightCurated: {
         type: BooleanConstructor;

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

@@ -21,7 +21,7 @@ _default: import("vue").DefineComponent<{
     };
 }, {
     events: import("vue").ComputedRef<Partial<XEventsTypes>>;
-    isVisible: import("vue").ComputedRef<any>;
+    isVisible: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];

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

@@ -10,7 +10,7 @@ This component renders a button to submit the query.
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    dynamicClasses: ComputedRef<VueCSSClasses>;
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
     buttonRef: import("vue").Ref<HTMLElement | null>;
     emitEvents: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>

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

@@ -27,7 +27,7 @@ _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
-    query: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
     inputElement: import("vue").Ref<HTMLInputElement | undefined>;
     emitUserHoveredInSearchBox: () => void;
     emitUserHoveredOutSearchBox: () => void;

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

@@ -10,6 +10,6 @@ Retrieves a list of semantic queries from the state and exposes them in the slot
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    suggestions: ComputedRef<Suggestion[]>;
+    suggestions: import("vue").ComputedRef<import("@empathyco/x-types").SemanticQuery[]>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -18,7 +18,7 @@ _default: Vue.DefineComponent<{
 }, {
     emitUserClickedASort: (sort: Sort) => void;
     rootRef: Vue.Ref<Vue.DefineComponent<{}, {}, any, Vue.ComputedOptions, Vue.MethodOptions, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{}>>, {}, {}> | undefined>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, "change"[], "change", Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -20,7 +20,7 @@ _default: Vue.DefineComponent<{
     };
 }, {
     listItems: Vue.ComputedRef<SortListItem[]>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -21,7 +21,7 @@ _default: Vue.DefineComponent<{
     buttonClass: StringConstructor;
 }, {
     listItems: Vue.ComputedRef<SortPickerItem[]>;
-    selectedSort: Vue.ComputedRef<any>;
+    selectedSort: Vue.ComputedRef<string>;
 }, unknown, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
     items: {
         type: PropType<string[]>;

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

@@ -12,7 +12,7 @@ The component will only render itself if the `spellcheckedQuery` property has va
 
 ```typescript
 _default: import("vue").DefineComponent<{}, {
-    query: import("vue").ComputedRef<any>;
-    spellcheckedQuery: import("vue").ComputedRef<any>;
+    query: import("vue").ComputedRef<string>;
+    spellcheckedQuery: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -11,7 +11,7 @@ A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-compo
 ```typescript
 _default: import("vue").DefineComponent<{}, {
     el: import("vue").Ref<HTMLElement | undefined>;
-    spellcheckedQuery: import("vue").ComputedRef<any>;
+    spellcheckedQuery: import("vue").ComputedRef<string>;
     emitEvents: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```

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

@@ -9,7 +9,9 @@ Function which returns the requested state's properties as a dictionary.
 **Signature:**
 
 ```typescript
-export declare function useState<Module extends XModuleName, Path extends keyof ExtractState<Module> & string>(module: Module, paths: Path[]): Dictionary<ComputedRef>;
+export declare function useState<Module extends XModuleName, State = ExtractState<Module>>(module: Module): {
+    [P in keyof State]: ComputedRef<State[P]>;
+};
 ```
 
 ## Parameters
@@ -17,11 +19,10 @@ export declare function useState<Module extends XModuleName, Path extends keyof
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  module | Module | The [XModuleName](./x-components.xmodulename.md) of the getter. |
-|  paths | Path\[\] | List of state paths. |
 
 **Returns:**
 
-Dictionary&lt;ComputedRef&gt;
+{ \[P in keyof State\]: ComputedRef&lt;State\[P\]&gt;; }
 
-The requested state properties of the module.
+A dictionary of computed state properties of the module.
 

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

@@ -97,7 +97,7 @@ Entry point to export search-type models and testing schemas in a unified api-ex
 |  [TrackableRequest](./x-types.trackablerequest.md) | Interface for any Request with tagging. |
 |  [TrackableShowResponse](./x-types.trackableshowresponse.md) | Response to be implemented by all responses that contain a part to track the show event. |
 |  [UserInfo](./x-types.userinfo.md) | The representation of the user. |
-|  [XComponentsAdapter](./x-types.xcomponentsadapter.md) |  |
+|  [XComponentsAdapter](./x-types.xcomponentsadapter.md) | XComponentsAdapter. |
 
 ## Variables
 

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

@@ -4,6 +4,8 @@
 
 ## XComponentsAdapter interface
 
+XComponentsAdapter.
+
 **Signature:**
 
 ```typescript

package/js/composables/use-state.js

@@ -3,20 +3,18 @@ import { useStore } from 'vuex';
 
 /**
  * Function which returns the requested state's properties as a dictionary.
- *
  * @param module - The {@link XModuleName} of the getter.
- * @param paths - List of state paths.
- * @returns The requested state properties of the module.
+ * @returns A dictionary of computed state properties of the module.
  *
  * @public
  */
-function useState(module, paths) {
+function useState(module) {
     const store = useStore();
-    return paths.reduce((stateDictionary, path) => {
-        // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access
-        stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
-        return stateDictionary;
-    }, {});
+    return new Proxy({}, {
+        get(_obj, path) {
+            return computed(() => store?.state.x[module]?.[path]);
+        },
+    });
 }
 
 export { useState };

package/js/composables/use-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef } from 'vue'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from './use-store'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n *\n * @param module - The {@link XModuleName} of the getter.\n * @param paths - List of state paths.\n * @returns The requested state properties of the module.\n *\n * @public\n */\nexport function useState<\n  Module extends XModuleName,\n  Path extends keyof ExtractState<Module> & string,\n>(module: Module, paths: Path[]): Dictionary<ComputedRef> {\n  const store = useStore()\n\n  return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {\n    // eslint-disable-next-line ts/no-unsafe-return,ts/no-unsafe-member-access\n    stateDictionary[path] = computed(() => store?.state.x[module]?.[path])\n    return stateDictionary\n  }, {})\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;;;AAQG;AACa,SAAA,QAAQ,CAGtB,MAAc,EAAE,KAAa,EAAA;AAC7B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,KAAK,CAAC,MAAM,CAA0B,CAAC,eAAe,EAAE,IAAI,KAAI;;QAErE,eAAe,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;AACtE,QAAA,OAAO,eAAe,CAAA;KACvB,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}
+{"version":3,"file":"use-state.js","sources":["../../../src/composables/use-state.ts"],"sourcesContent":["import type { ComputedRef } from 'vue'\nimport type { RootXStoreState } from '../store/store.types'\nimport type { ExtractState, XModuleName } from '../x-modules/x-modules.types'\nimport { computed } from 'vue'\nimport { useStore } from 'vuex'\n\n/**\n * Function which returns the requested state's properties as a dictionary.\n * @param module - The {@link XModuleName} of the getter.\n * @returns A dictionary of computed state properties of the module.\n *\n * @public\n */\nexport function useState<Module extends XModuleName, State = ExtractState<Module>>(\n  module: Module,\n): { [P in keyof State]: ComputedRef<State[P]> } {\n  const store = useStore<RootXStoreState>()\n  return new Proxy({} as { [P in keyof State]: ComputedRef<State[P]> }, {\n    get(_obj, path) {\n      return computed(() => store?.state.x[module]?.[path as keyof ExtractState<Module>])\n    },\n  })\n}\n"],"names":[],"mappings":";;;AAMA;;;;;;AAMG;AACG,SAAU,QAAQ,CACtB,MAAc,EAAA;AAEd,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAmB,CAAA;AACzC,IAAA,OAAO,IAAI,KAAK,CAAC,EAAmD,EAAE;QACpE,GAAG,CAAC,IAAI,EAAE,IAAI,EAAA;AACZ,YAAA,OAAO,QAAQ,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAkC,CAAC,CAAC,CAAA;SACpF;AACF,KAAA,CAAC,CAAA;AACJ;;;;"}

package/js/directives/infinite-scroll.js

@@ -88,7 +88,7 @@ const infiniteScroll = {
         const xBus = XPlugin.bus;
         state[id] = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
-                void xBus.emit('UserReachedResultsListEnd');
+                void xBus.emit('UserReachedResultsListEnd', undefined);
             }
         }, {
             threshold: 0.99,

package/js/directives/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import type { Directive } from 'vue'\nimport { XPlugin } from '../plugins'\n\nconst VIEWPORT_ID = 'viewport'\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {}\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null\n    case 'body':\n      return document.body\n    case VIEWPORT_ID:\n      return null\n    default:\n      return element.closest(`#${id}`)!\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`\n    const root = getRoot(element, id)\n    const xBus = XPlugin.bus\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void xBus.emit('UserReachedResultsListEnd')\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root,\n      },\n    )\n\n    state[id].observe(element)\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect()\n      delete state[id]\n    }\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAA;AAEtD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;AAC/C,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAA;AACb,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAA;AACb,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAA;AACpC,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAA;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;AAExB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;YACV,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,gBAAA,KAAK,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA;AAC5C,aAAA;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAA;QAED,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KAC3B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;AACtB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;AACjB,SAAA;KACF;;;;;"}
+{"version":3,"file":"infinite-scroll.js","sources":["../../../src/directives/infinite-scroll.ts"],"sourcesContent":["import type { Directive } from 'vue'\nimport { XPlugin } from '../plugins'\n\nconst VIEWPORT_ID = 'viewport'\n\n/**\n * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable\n * container.\n */\nconst state: Record<string, IntersectionObserver> = {}\n\n/**\n * Retrieves the root element for the provided ID.\n *\n * @param element - Target element where directive is set.\n * @param id - String identifier.\n * @returns HTMLElement or null.\n */\nfunction getRoot(element: HTMLElement, id: string): HTMLElement | null {\n  switch (id) {\n    case 'html':\n      return null\n    case 'body':\n      return document.body\n    case VIEWPORT_ID:\n      return null\n    default:\n      return element.closest(`#${id}`)!\n  }\n}\n\n/**\n * Custom Vue directive for infinite scroll.\n *\n * This directive uses the IntersectionObserver API to handle the intersection between the\n * children and the scrollable container. The content of the children moves up on scroll and when it\n * reaches the end, the IntersectionObserver triggers that both elements are intersecting.\n *\n * How it works.\n *\n * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the\n * xBus. If you provide a margin in the directive options, this function is triggered when the\n * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.\n *\n * Usage.\n *\n * The directive has to be set in the target element. It can receive an argument which will be used\n * to determine the scrollable container. Possible values:\n * `html`: will set the <html> as the scrollable container.\n * `body`: will set the <body> as the scrollable container.\n * ID: will set the DOM element with the provided id as the scrollable container.\n *\n * If no argument is provided the scrollable container fallbacks to the viewport.\n *\n * @example How to use it.\n *\n * ```html\n *  <ResultsList v-infinite-scroll:html>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll:body>\n * ```\n *\n * ```html\n *  <BaseScroll id='scroll-test'>\n *    <ResultsList v-infinite-scroll:scroll-test>\n *  </BaseScroll>\n * ```\n *\n * ```html\n *  <ResultsList v-infinite-scroll=\"{ margin: 40 }\">\n * ```\n *\n * @public\n */\nexport const infiniteScroll: Directive<HTMLElement, { margin: number }> = {\n  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {\n    /*\n     * This hack allows the root element to always contain the observed element.\n     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome\n     */\n    const rootMargin = `1000000% 0px ${margin}px 0px`\n    const root = getRoot(element, id)\n    const xBus = XPlugin.bus\n\n    state[id] = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void xBus.emit('UserReachedResultsListEnd', undefined)\n        }\n      },\n      {\n        threshold: 0.99,\n        rootMargin,\n        root,\n      },\n    )\n\n    state[id].observe(element)\n  },\n  unmounted(_, { arg: id = VIEWPORT_ID }) {\n    if (state[id]) {\n      state[id].disconnect()\n      delete state[id]\n    }\n  },\n}\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B;;;AAGG;AACH,MAAM,KAAK,GAAyC,EAAE,CAAA;AAEtD;;;;;;AAMG;AACH,SAAS,OAAO,CAAC,OAAoB,EAAE,EAAU,EAAA;AAC/C,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,IAAI,CAAA;AACb,QAAA,KAAK,MAAM;YACT,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,IAAI,CAAA;AACb,QAAA;YACE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA,CAAE,CAAE,CAAA;AACpC,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACU,MAAA,cAAc,GAA+C;AACxE,IAAA,OAAO,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,EAAA;AACtE;;;AAGG;AACH,QAAA,MAAM,UAAU,GAAG,CAAgB,aAAA,EAAA,MAAM,QAAQ,CAAA;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACjC,QAAA,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;AAExB,QAAA,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,oBAAoB,CAClC,CAAC,CAAC,KAAK,CAAC,KAAI;YACV,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,KAAK,IAAI,CAAC,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAA;AACvD,aAAA;AACH,SAAC,EACD;AACE,YAAA,SAAS,EAAE,IAAI;YACf,UAAU;YACV,IAAI;AACL,SAAA,CACF,CAAA;QAED,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;KAC3B;IACD,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAA;AACtB,YAAA,OAAO,KAAK,CAAC,EAAE,CAAC,CAAA;AACjB,SAAA;KACF;;;;;"}

package/js/x-installer/api/base-api.js

@@ -79,7 +79,7 @@ class BaseXAPI {
         if (query) {
             void this.bus?.emit('UserAcceptedAQuery', query);
         }
-        void this.bus?.emit('UserClickedOpenX');
+        void this.bus?.emit('UserClickedOpenX', undefined);
     }
     /**
      * Initializes the Application passing the {@link SnippetConfig}.
@@ -105,7 +105,7 @@ class BaseXAPI {
      * @public
      */
     close() {
-        void this.bus?.emit('UserClickedCloseX');
+        void this.bus?.emit('UserClickedCloseX', undefined);
     }
 }
 

package/js/x-installer/api/base-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types'\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    void this.bus?.emit('UserClickedPDPAddToCart', productId)\n  }\n\n  /**\n   * Setter for the XBus.\n   *\n   * @param bus - The XBus received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config)\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      void this.bus?.emit('UserAcceptedAQuery', query)\n    }\n    void this.bus?.emit('UserClickedOpenX')\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true\n      await this?.initCallback(config)\n    } else {\n      console.warn('We know X is awesome, but you only need to initialize it once.')\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    void this.bus?.emit('UserClickedCloseX')\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;KAwIjC;AAtGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAA;KAC1D;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;KACf;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;KACjC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;KACvC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAA;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;KAC9B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAA;AACjD,SAAA;QACD,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;KACxC;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;AAC1B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;AAC/E,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;QACH,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;KACzC;AACF;;;;"}
+{"version":3,"file":"base-api.js","sources":["../../../../src/x-installer/api/base-api.ts"],"sourcesContent":["import type { XBus } from '@empathyco/x-bus'\nimport type { WireMetadata, XEventsTypes } from '../../wiring/index'\nimport type { NormalisedSnippetConfig, SnippetConfig, XAPI } from './api.types'\n\n/**\n * Default implementation for {@link XAPI}.\n *\n * @public\n */\nexport class BaseXAPI implements XAPI {\n  /**\n   * Flag to check if the initialization was already done.\n   *\n   * @internal\n   */\n  protected isXInitialized = false\n\n  /**\n   * Bus for emitting and listening events.\n   *\n   * @internal\n   */\n  protected bus!: XBus<XEventsTypes, WireMetadata>\n\n  /**\n   * The callback to call from the init method. The logic of initialization is out of this API\n   * since this API is just a facade.\n   *\n   * @internal\n   */\n  protected initCallback!: (config: SnippetConfig) => any\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  public getSnippetConfig!: () => SnippetConfig\n\n  /**\n   * Callback that allows to update the snippet config. The logic of initialization is out of this\n   * API since this API is just a facade.\n   *\n   * @internal\n   */\n  protected snippetCallback!: (config: Partial<SnippetConfig>) => void\n\n  /**\n   * Tracks that a product was added to cart from PDP.\n   *\n   * @param productId - The product id that was added to cart.\n   */\n  addProductToCart(productId?: string): void {\n    void this.bus?.emit('UserClickedPDPAddToCart', productId)\n  }\n\n  /**\n   * Setter for the XBus.\n   *\n   * @param bus - The XBus received to emit events.\n   *\n   * @internal\n   */\n  setBus(bus: XBus<XEventsTypes, WireMetadata>): void {\n    this.bus = bus\n  }\n\n  /**\n   * Setter for the callback to call in the init method.\n   *\n   * @param initCallback - The callback to call.\n   */\n  setInitCallback(initCallback: (config: SnippetConfig) => any): void {\n    this.initCallback = initCallback\n  }\n\n  /**\n   * Setter for the callback to modify the snippet config.\n   *\n   * @param snippetCallback - The callback to call.\n   *\n   * @internal\n   */\n  setSnippetConfigCallback(snippetCallback: (config: Partial<SnippetConfig>) => void): void {\n    this.snippetCallback = snippetCallback\n  }\n\n  /**\n   * Sets or updates the snippet config getter.\n   *\n   * @param snippetConfigGetter - A function that returns the snippet config.\n   *\n   * @internal\n   */\n  setSnippetConfigGetter(snippetConfigGetter: () => NormalisedSnippetConfig): void {\n    this.getSnippetConfig = snippetConfigGetter\n  }\n\n  /**\n   * Sets or updates the snippet config.\n   *\n   * @param config - A part or all the snippet config.\n   *\n   * @public\n   */\n  setSnippetConfig(config: Partial<SnippetConfig>): void {\n    this?.snippetCallback(config)\n  }\n\n  /**\n   * Searches the query parameter as user query.\n   *\n   * @param query - Query to be searched.\n   *\n   * @public\n   */\n  search(query?: string): void {\n    if (query) {\n      void this.bus?.emit('UserAcceptedAQuery', query)\n    }\n    void this.bus?.emit('UserClickedOpenX', undefined)\n  }\n\n  /**\n   * Initializes the Application passing the {@link SnippetConfig}.\n   *\n   * @param config - The config coming from the customer snippet.\n   *\n   * @returns A promise that will be resolved once x components are initialized.\n   *\n   * @public\n   */\n  async init(config: SnippetConfig): Promise<void> {\n    if (!this.isXInitialized) {\n      this.isXInitialized = true\n      await this?.initCallback(config)\n    } else {\n      console.warn('We know X is awesome, but you only need to initialize it once.')\n    }\n  }\n\n  /**\n   * Closes the Application.\n   *\n   * @public\n   */\n  close(): void {\n    void this.bus?.emit('UserClickedCloseX', undefined)\n  }\n}\n"],"names":[],"mappings":"AAIA;;;;AAIG;MACU,QAAQ,CAAA;AAArB,IAAA,WAAA,GAAA;AACE;;;;AAIG;QACO,IAAc,CAAA,cAAA,GAAG,KAAK,CAAA;KAwIjC;AAtGC;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,SAAkB,EAAA;QACjC,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAA;KAC1D;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,GAAqC,EAAA;AAC1C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;KACf;AAED;;;;AAIG;AACH,IAAA,eAAe,CAAC,YAA4C,EAAA;AAC1D,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;KACjC;AAED;;;;;;AAMG;AACH,IAAA,wBAAwB,CAAC,eAAyD,EAAA;AAChF,QAAA,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;KACvC;AAED;;;;;;AAMG;AACH,IAAA,sBAAsB,CAAC,mBAAkD,EAAA;AACvE,QAAA,IAAI,CAAC,gBAAgB,GAAG,mBAAmB,CAAA;KAC5C;AAED;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,MAA8B,EAAA;AAC7C,QAAA,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;KAC9B;AAED;;;;;;AAMG;AACH,IAAA,MAAM,CAAC,KAAc,EAAA;AACnB,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAA;AACjD,SAAA;QACD,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;KACnD;AAED;;;;;;;;AAQG;IACH,MAAM,IAAI,CAAC,MAAqB,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACxB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;AAC1B,YAAA,MAAM,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;AACjC,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAA;AAC/E,SAAA;KACF;AAED;;;;AAIG;IACH,KAAK,GAAA;QACH,KAAK,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;KACpD;AACF;;;;"}

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

@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
         },
     },
     setup(props) {
-        const params = useState('extraParams', ['params']).params;
+        const params = useState('extraParams').params;
         const $x = use$x();
         $x.emit('ExtraParamsInitialized', { ...props.values });
         $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });

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

@@ -1 +1 @@
-{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { ComputedRef, PropType } from 'vue'\nimport { defineComponent, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n\nexport 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\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>\nimport { ExtraParams } from '@empathyco/x-components/extra-params'\n\nexport 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":";;;;;AAQA;;;;;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,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,MAAM,GAA4B,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAK,CAAA;AACjF,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAA,CAAA;AACrD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAA,CAAA;QAEnE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,QAAQ,CAAA,CAAA;AAC9C,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA,QAAA,OAAO,MAAO,GAAA,CAAA;KACf;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/extra-params.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport { defineComponent, watch } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values\n * received as a prop.\n *\n * @public\n */\n\nexport 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 = useState('extraParams').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\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>\nimport { ExtraParams } from '@empathyco/x-components/extra-params'\n\nexport 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":";;;;;AAQA;;;;;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,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,MAAK,GAAI,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAK,CAAA;AAC5C,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB,QAAA,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,KAAK,CAAC,MAAK,EAAG,CAAA,CAAA;AACrD,QAAA,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAA,CAAA;QAEnE,KAAK,CACH,MAAM,KAAK,CAAC,MAAM,EAClB,MAAK,IAAK;YACR,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,GAAG,QAAQ,CAAA,CAAA;AAC9C,SAAC,EACD,EAAE,IAAI,EAAE,IAAG,EAAG,CAChB,CAAA;AAEA,QAAA,OAAO,MAAO,GAAA,CAAA;KACf;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js

@@ -21,7 +21,7 @@ var _sfc_main = defineComponent({
     setup(props, { slots }) {
         const xBus = useXBus();
         /** A dictionary with the extra params in the store state. */
-        const stateParams = useState('extraParams', ['params']).params;
+        const stateParams = useState('extraParams').params;
         /** It returns the value of the extra param from the store. */
         const extraParam = computed(() => stateParams.value[props.name]);
         /**

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RenderlessExtraParam',\n  xModule: extraParamsXModule.name,\n  props: {\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** A dictionary with the extra params in the store state. */\n    const stateParams = useState('extraParams', ['params']).params\n\n    /** It returns the value of the extra param from the store. */\n    const extraParam = computed(() => stateParams.value[props.name])\n\n    /**\n     * It sets the new value to the store.\n     *\n     * @param newValue - The new value of the extra param.\n     */\n    function updateValue(newValue: unknown) {\n      xBus.emit('UserChangedExtraParams', { [props.name]: newValue })\n    }\n\n    return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\nimport { RenderlessExtraParams } from '@empathyco/x-components/extra-params'\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'RenderlessExtraParamsDemo',\n  components: {\n    RenderlessExtraParams,\n    BaseDropdown,\n  },\n  props: ['name'],\n  data() {\n    return {\n      items: ['spain', 'portugal'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;;AAGrB,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAK,CAAA;;AAG7D,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA;AAE/D;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAO,EAAG,CAAA,CAAA;SAChE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAU,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KAC/E;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RenderlessExtraParam',\n  xModule: extraParamsXModule.name,\n  props: {\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** A dictionary with the extra params in the store state. */\n    const stateParams = useState('extraParams').params\n\n    /** It returns the value of the extra param from the store. */\n    const extraParam = computed(() => stateParams.value[props.name])\n\n    /**\n     * It sets the new value to the store.\n     *\n     * @param newValue - The new value of the extra param.\n     */\n    function updateValue(newValue: unknown) {\n      xBus.emit('UserChangedExtraParams', { [props.name]: newValue })\n    }\n\n    return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\nimport { RenderlessExtraParams } from '@empathyco/x-components/extra-params'\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'RenderlessExtraParamsDemo',\n  components: {\n    RenderlessExtraParams,\n    BaseDropdown,\n  },\n  props: ['name'],\n  data() {\n    return {\n      items: ['spain', 'portugal'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;;QAGrB,MAAM,WAAY,GAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAK,CAAA;;AAGjD,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA;AAE/D;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAO,EAAG,CAAA,CAAA;SAChE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAU,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KAC/E;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_normalizeClass","clearHistoryQueriesEvents","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAPf,EAAA,OAAAC,SAAA,EAA+B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,KAAA,EAAMC,eAAEC,CAAyB,kCAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAClC,QAAU,EAAA,IAAA,CAAA,qBAAA;AAAA,IACV,MAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;AAPd,IAAA,YAAA,EAAA,WAAA;AAAA,GAAA,EAAA;aAAAC,OAUW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AAVX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"clear-history-queries.vue.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_normalizeClass","clearHistoryQueriesEvents","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAPf,EAAA,OAAAC,SAAA,EAA+B,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC/B,KAAA,EAAMC,eAAEC,CAAyB,kCAAA,EAAA,IAAA,CAAA,cAAA,CAAA,CAAA;AAAA,IAClC,QAAU,EAAA,IAAA,CAAA,qBAAA;AAAA,IACV,MAAU,EAAA,IAAA,CAAA,yBAAA;AAAA,IAAA,WAAA,EAAA,uBAAA;AAPd,IAAA,YAAA,EAAA,WAAA;AAAA,GAAA,EAAA;aAAAC,OAUW,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA;;AAVX,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js

@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { historyQueries } = useState('historyQueries', ['historyQueries']);
+        const { historyQueries } = useState('historyQueries');
         /**
          * Returns if the array of history queries is empty.
          *

package/js/x-modules/history-queries/components/clear-history-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAExE;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA,CAAA;AAE9E;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,mCAAmC,EAAE,qBAAqB,CAAC,KAAK;AACjE,SAAA,CAAC,CACJ,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,yBAAyB,GAA0B;AACvD,YAAA,8BAA8B,EAAE,SAAS;SAC3C,CAAA;QAEA,OAAO;YACL,cAAc;YACd,yBAAyB;YACzB,qBAAqB;SACvB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"clear-history-queries.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/clear-history-queries.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    class=\"x-clear-history-queries x-button\"\n    :class=\"dynamicClasses\"\n    :disabled=\"isHistoryQueriesEmpty\"\n    :events=\"clearHistoryQueriesEvents\"\n    data-test=\"clear-history-queries\"\n    aria-label=\"Clear all\"\n  >\n    <!-- @slot (Required) Button content with a message, an icon or both -->\n    <slot>✕</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useState } from '../../../composables/use-state'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * A button that when is pressed, emits the\n * {@link HistoryQueriesXEvents.UserPressedClearHistoryQueries} event, expressing the user\n * intention to clear the whole history of queries.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearHistoryQueries',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseEventButton,\n  },\n  setup() {\n    /**\n     * The whole history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * Returns if the array of history queries is empty.\n     *\n     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.\n     * @internal\n     */\n    const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0)\n\n    /**\n     * Dynamic CSS classes to add to the root element of this component.\n     *\n     * @returns A booleans dictionary where each key is the class name to add, and the boolean value\n     * tells if it should be added or not.\n     * @internal\n     */\n    const dynamicClasses = computed(\n      (): VueCSSClasses => ({\n        'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value,\n      }),\n    )\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     */\n    const clearHistoryQueriesEvents: Partial<XEventsTypes> = {\n      UserPressedClearHistoryQueries: undefined,\n    }\n\n    return {\n      dynamicClasses,\n      clearHistoryQueriesEvents,\n      isHistoryQueriesEmpty,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserPressedClearHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button.\n\n## Examples\n\n### Basic example\n\nThe component exposes a single default slot, where you can add icons or text.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>\n    <HistoryQueries :animation=\"'FadeAndSlide'\" :maxItemsToRender=\"10\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('FadeAndSlide', FadeAndSlide)\nexport default {\n  name: 'ClearHistoryQueriesDemo',\n  components: {\n    SearchInput,\n    HistoryQueries,\n    ClearHistoryQueries,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,eAAe;AAChB,KAAA;IACD,KAAK,GAAA;AACH;;;;AAIE;QACF,MAAM,EAAE,cAAa,KAAM,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAEpD;;;;;AAKE;AACF,QAAA,MAAM,qBAAoB,GAAI,QAAQ,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,MAAK,KAAM,CAAC,CAAA,CAAA;AAE9E;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,mCAAmC,EAAE,qBAAqB,CAAC,KAAK;AACjE,SAAA,CAAC,CACJ,CAAA;AAEA;;;;AAIE;AACF,QAAA,MAAM,yBAAyB,GAA0B;AACvD,YAAA,8BAA8B,EAAE,SAAS;SAC3C,CAAA;QAEA,OAAO;YACL,cAAc;YACd,yBAAyB;YACzB,qBAAqB;SACvB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries', [\n      'isEnabled',\n      'historyQueries',\n    ])\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    HistoryQueriesSwitch,\n  },\n}\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    BaseEventButton,\n    BaseEventsModal,\n    HistoryQueriesSwitch,\n    HistoryQueries,\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n      disableEvents: {\n        UserClickedConfirmDisableHistoryQueries: undefined,\n        UserClickedCloseEventsModal: undefined,\n      },\n      cancelEvents: {\n        UserClickedCloseEventsModal: undefined,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAkG,CAAA,YAAA,CAAA,CAAA;AAA7D,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,aAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAAA,YAAA,EAAA,kBAAA;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch :model-value=\"isEnabled\" aria-label=\"Queries' history\" @update:model-value=\"toggle\" />\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery } from '@empathyco/x-types'\nimport { computed, defineComponent } from 'vue'\nimport BaseSwitch from '../../../components/base-switch.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\n\n/**\n * History Queries Switch is a component to activate or deactivate the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'HistoryQueriesSwitch',\n  xModule: historyQueriesXModule.name,\n  components: {\n    BaseSwitch,\n  },\n  setup() {\n    const $x = use$x()\n\n    /**\n     * An object with the isEnabled value and the history queries coming from the store state.\n     *\n     * @internal\n     */\n    const { isEnabled, historyQueries } = useState('historyQueries')\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value as HistoryQuery[]))\n\n    const disableEvent = computed(() =>\n      hasHistoryQueries.value\n        ? 'UserClickedDisableHistoryQueries'\n        : 'UserClickedConfirmDisableHistoryQueries',\n    )\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    const toggle = (): void => {\n      $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries')\n    }\n\n    return {\n      toggle,\n      isEnabled,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch and the history queries are deactivated.\n- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted whenever the user clicks the switch when the history queries are activated\n  and the list of history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\nimport { HistoryQueriesSwitch } from '@empathyco/x-components'\n\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    HistoryQueriesSwitch,\n  },\n}\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\nimport { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'\nimport { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'\nimport { SearchInput, SearchButton } from '@empathyco/x-components/search'\nexport default {\n  name: 'HistoryQueriesSwitchDemo',\n  components: {\n    BaseEventButton,\n    BaseEventsModal,\n    HistoryQueriesSwitch,\n    HistoryQueries,\n    SearchInput,\n    SearchButton,\n  },\n  data() {\n    return {\n      eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n      disableEvents: {\n        UserClickedConfirmDisableHistoryQueries: undefined,\n        UserClickedCloseEventsModal: undefined,\n      },\n      cancelEvents: {\n        UserClickedCloseEventsModal: undefined,\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;gCACEA,gBAAkG,CAAA,YAAA,CAAA,CAAA;AAA7D,EAAA,OAAAC,SAAA,EAA6B,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,aAAA,EAAA,IAAA,CAAA,SAAA;AAAA,IAAA,YAAA,EAAA,kBAAA;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue2.js

@@ -24,10 +24,7 @@ var _sfc_main = defineComponent({
          *
          * @internal
          */
-        const { isEnabled, historyQueries } = useState('historyQueries', [
-            'isEnabled',
-            'historyQueries',
-        ]);
+        const { isEnabled, historyQueries } = useState('historyQueries');
         /**
          * Checks if there are history queries.
          *