@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.171

package/js/components/snippet-callbacks.vue2.js

@@ -3,50 +3,50 @@ import { defineComponent, inject, computed } from 'vue';
 import { useXBus } from '../composables/use-x-bus.js';
 import _sfc_main$1 from './global-x-bus.vue.js';
 
-/**
- * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet
- * configuration.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'SnippetCallbacks',
-    components: { GlobalXBus: _sfc_main$1 },
-    setup() {
-        const xBus = useXBus();
-        /**
-         * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-         *
-         * @internal
-         */
-        const snippetConfig = inject('snippetConfig');
-        /**
-         * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.
-         *
-         * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in
-         * the callback.
-         *
-         * @internal
-         *
-         */
-        const eventListeners = computed(() => {
-            const callbacks = snippetConfig?.callbacks;
-            return callbacks
-                ? map(callbacks, (eventName, callback) => {
-                    return (payload, metadata) => {
-                        const callbackReturn = callback(payload, metadata);
-                        xBus.emit('SnippetCallbackExecuted', {
-                            event: eventName,
-                            callbackReturn,
-                            payload: payload,
-                            metadata
-                        });
-                    };
-                })
-                : {};
-        });
-        return { eventListeners };
-    }
+/**
+ * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet
+ * configuration.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'SnippetCallbacks',
+    components: { GlobalXBus: _sfc_main$1 },
+    setup() {
+        const xBus = useXBus();
+        /**
+         * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
+         *
+         * @internal
+         */
+        const snippetConfig = inject('snippetConfig');
+        /**
+         * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.
+         *
+         * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in
+         * the callback.
+         *
+         * @internal
+         *
+         */
+        const eventListeners = computed(() => {
+            const callbacks = snippetConfig?.callbacks;
+            return callbacks
+                ? map(callbacks, (eventName, callback) => {
+                    return (payload, metadata) => {
+                        const callbackReturn = callback(payload, metadata);
+                        xBus.emit('SnippetCallbackExecuted', {
+                            event: eventName,
+                            callbackReturn,
+                            payload: payload,
+                            metadata,
+                        });
+                    };
+                })
+                : {};
+        });
+        return { eventListeners };
+    },
 });
 
 export { _sfc_main as default };

package/js/components/snippet-callbacks.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-callbacks.vue2.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n  <GlobalXBus :listeners=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\n  import { map } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject } from 'vue';\n  import { WireMetadata } from '../wiring';\n  import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';\n  import { useXBus } from '../composables/use-x-bus';\n  import GlobalXBus from './global-x-bus.vue';\n\n  /**\n   * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n   * configuration.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SnippetCallbacks',\n    components: { GlobalXBus },\n    setup() {\n      const xBus = useXBus();\n\n      /**\n       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig>('snippetConfig');\n\n      /**\n       * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n       *\n       * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n       * the callback.\n       *\n       * @internal\n       *\n       */\n      const eventListeners = computed<XEventListeners>(() => {\n        const callbacks = snippetConfig?.callbacks;\n\n        return callbacks\n          ? map(callbacks, (eventName, callback) => {\n              return (payload: unknown, metadata: WireMetadata) => {\n                const callbackReturn = callback(payload as never, metadata);\n                xBus.emit('SnippetCallbackExecuted', {\n                  event: eventName,\n                  callbackReturn,\n                  payload: payload as never,\n                  metadata\n                });\n              };\n            })\n          : ({} as XEventListeners);\n      });\n\n      return { eventListeners };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n  <SnippetCallbacks />\n</template>\n\n<script>\n  import { SnippetCallbacks } from '@empathyco/x-components';\n  export default {\n    name: 'SnippetCallbacksTest',\n    components: {\n      SnippetCallbacks\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["GlobalXBus"],"mappings":";;;;;AAYE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,cAAEA,WAAS,EAAG;IAC1B,KAAK,GAAA;AACH,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAC,CAAA;AAE5D;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAiB,QAAQ,CAAkB,MAAM;AACrD,YAAA,MAAM,SAAQ,GAAI,aAAa,EAAE,SAAS,CAAA;AAE1C,YAAA,OAAO,SAAQ;kBACX,GAAG,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAK;AACtC,oBAAA,OAAO,CAAC,OAAgB,EAAE,QAAsB,KAAK;wBACnD,MAAM,cAAa,GAAI,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAC,CAAA;AAC3D,wBAAA,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;AACnC,4BAAA,KAAK,EAAE,SAAS;4BAChB,cAAc;AACd,4BAAA,OAAO,EAAE,OAAgB;4BACzB,QAAO;AACR,yBAAA,CAAC,CAAA;AACJ,qBAAC,CAAA;AACH,iBAAC,CAAA;kBACA,EAAsB,CAAA;AAC7B,SAAC,CAAC,CAAA;QAEF,OAAO,EAAE,gBAAgB,CAAA;KAC3B;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"snippet-callbacks.vue2.js","sources":["../../../src/components/snippet-callbacks.vue"],"sourcesContent":["<template>\n  <GlobalXBus :listeners=\"eventListeners\" />\n</template>\n\n<script lang=\"ts\">\nimport type { WireMetadata } from '../wiring'\nimport type { SnippetConfig, XEventListeners } from '../x-installer/api/api.types'\nimport { map } from '@empathyco/x-utils'\nimport { computed, defineComponent, inject } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\nimport GlobalXBus from './global-x-bus.vue'\n\n/**\n * This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet\n * configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SnippetCallbacks',\n  components: { GlobalXBus },\n  setup() {\n    const xBus = useXBus()\n\n    /**\n     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig>('snippetConfig')\n\n    /**\n     * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.\n     *\n     * @returns The event listeners with the {@link XEventsTypes.SnippetCallbackExecuted} emit in\n     * the callback.\n     *\n     * @internal\n     *\n     */\n    const eventListeners = computed<XEventListeners>(() => {\n      const callbacks = snippetConfig?.callbacks\n\n      return callbacks\n        ? map(callbacks, (eventName, callback) => {\n            return (payload: unknown, metadata: WireMetadata) => {\n              const callbackReturn = callback(payload as never, metadata)\n              xBus.emit('SnippetCallbackExecuted', {\n                event: eventName,\n                callbackReturn,\n                payload: payload as never,\n                metadata,\n              })\n            }\n          })\n        : ({} as XEventListeners)\n    })\n\n    return { eventListeners }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThe `SnippetCallbacks` will emit these events:\n\n- [`SnippetCallbackExecuted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  each time a callback provided by the snippetConfig is fired.\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to receive any callback that\nwill be triggered once its listened event is emitted.\n\n```vue\n<template>\n  <SnippetCallbacks />\n</template>\n\n<script>\nimport { SnippetCallbacks } from '@empathyco/x-components'\nexport default {\n  name: 'SnippetCallbacksTest',\n  components: {\n    SnippetCallbacks,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["GlobalXBus"],"mappings":";;;;;AAYA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,UAAU,EAAE,cAAEA,WAAS,EAAG;IAC1B,KAAK,GAAA;AACH,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAAgB,eAAe,CAAA,CAAA;AAE3D;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAiB,QAAQ,CAAkB,MAAM;AACrD,YAAA,MAAM,SAAQ,GAAI,aAAa,EAAE,SAAQ,CAAA;AAEzC,YAAA,OAAO,SAAQ;kBACX,GAAG,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,QAAQ,KAAK;AACtC,oBAAA,OAAO,CAAC,OAAgB,EAAE,QAAsB,KAAK;wBACnD,MAAM,cAAa,GAAI,QAAQ,CAAC,OAAgB,EAAE,QAAQ,CAAA,CAAA;AAC1D,wBAAA,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE;AACnC,4BAAA,KAAK,EAAE,SAAS;4BAChB,cAAc;AACd,4BAAA,OAAO,EAAE,OAAgB;4BACzB,QAAQ;AACT,yBAAA,CAAA,CAAA;AACH,qBAAA,CAAA;AACF,iBAAC,CAAA;kBACA,EAAqB,CAAA;AAC5B,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,cAAe,EAAA,CAAA;KACzB;AACF,CAAA,CAAA;;;;"}

package/js/components/suggestions/base-suggestion.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-suggestion.vue2.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {
@@ -12,11 +12,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "button",
     {
       ref: "el",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args)),
-      class: normalizeClass(_ctx.dynamicCSSClasses)
+      class: normalizeClass(_ctx.dynamicCSSClasses),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.emitEvents && _ctx.emitEvents(...args))
     },
     [
-      createCommentVNode("\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      "),
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ query: _ctx.query, suggestion: _ctx.suggestion, filter: _ctx.filter })), () => [
         createVNode(_component_Highlight, {
           class: "x-suggestion__query",

package/js/components/suggestions/base-suggestion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { Highlight },\n    props: {\n      /**\n       * The normalized query of the module using this component.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        default: ''\n      },\n\n      /**\n       * The suggestion to render and use in the default slot.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<Suggestion>,\n        required: true\n      },\n\n      /**\n       * The feature from which the events will be emitted.\n       *\n       * @public\n       */\n      //TODO: set to true when the suggestions components pass it.\n      feature: {\n        type: String as PropType<QueryFeature>\n      },\n\n      /**\n       * The {@link XEvent} that will be emitted when selecting a suggestion.\n       *\n       * @public\n       */\n      suggestionSelectedEvents: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n\n      /**\n       * Indicates if the curated suggestion should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean\n      }\n    },\n\n    setup(props) {\n      const el = ref<HTMLElement | null>(null);\n\n      const $x = use$x();\n\n      /**\n       * Returns the suggestion filter object.\n       * It is a BooleanFilter because the label is needed.\n       * It returns only the first element because the facets and filters are being planned\n       * in the BaseSuggestions component.\n       *\n       * @returns The filter.\n       * @public\n       */\n      const filter = computed<BooleanFilter | undefined>(\n        () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n      );\n\n      /**\n       * The event handler that will be triggered when clicking on a suggestion.\n       *\n       * @remarks\n       * UserAcceptedAQuery: suggestion.query\n       * UserSelectedASuggestion: suggestion\n       * UserClickedAFilter: suggestion.facets[0].filters[0]\n       * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => {\n        const filterEvent: Partial<XEventsTypes> = filter.value\n          ? { UserClickedAFilter: filter.value }\n          : {};\n        return {\n          UserAcceptedAQuery: props.suggestion.query,\n          UserSelectedASuggestion: props.suggestion,\n          ...props.suggestionSelectedEvents,\n          ...filterEvent\n        };\n      });\n\n      /**\n       * Emits the events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = (): void => {\n        forEach(events.value, (event, payload): void => {\n          $x.emit(event, payload, {\n            target: el.value!,\n            feature: props.feature\n          });\n        });\n      };\n\n      /**\n       * Checks if the suggestion is curated and if it should be highlighted.\n       *\n       * @returns True if the suggestion is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed<boolean>(\n        () => props.highlightCurated && !!props.suggestion.isCurated\n      );\n\n      /**\n       * Generates css classes dynamically.\n       *\n       * @remarks\n       * 'x-suggestion--matching added when the query should be matched.\n       *\n       * @returns The {@link VueCSSClasses} classes.\n       * @public\n       */\n      const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n        'x-suggestion--is-curated': shouldHighlightCurated.value\n      }));\n\n      return {\n        el,\n        filter,\n        emitEvents,\n        dynamicCSSClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](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 if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","suggestion","filter"],"mappings":";;;;MAU0B,UAAM,GAAA;AAAA,EAAA,GAAA,EAAA,CAAA;;;;+BAT9BA,gBAWS,CAAA,WAAA,CAAA,CAAA;SAXSC,SAAK,EAAA,EAAAC,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAE;AAAA,MAAa,GAAK,EAAA,IAAA;AAAA,MAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AACzC,MAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,iBAAA,CAAA;AAAA,KAAA;AAMA,IAAA;AAAA,MACuFC,kBAAA,CAAA,4OAAA,CAAA;AAAA,MAAAC,UAAA,CAApE,IAAqB,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAAAC,WAAA,CAAQC,oBAAgB,EAAA;AAAA,UAAG,KAAA,EAAA,qBAAA;AAAA,UAAA,IAAA,EAAA,IAAA,CAAA,UAAA,CAAA,KAAA;UACrDC,SAAM,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAlB,CAA0E,MAAA,EAAA,WAAA,CAAA,CAAA;AAAA,QAVhF,IAAA,CAAA,MAAA,IAAAT,SAAA,EAAA,EAAAC,kBAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](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 if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n        facet: {\n          namedModel: 'SimpleFacet',\n          id: 'category',\n          label: 'Category',\n          filters: [\n            {\n              id: 'category:groceries',\n              modelName: 'SimpleFilter',\n              facetId: 'category-facet',\n              label: 'Groceries',\n              selected: false,\n              totalResults: 10,\n            },\n          ],\n        },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_normalizeProps","_createVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;AAAA,EAAA,GAAA,EAAA,CAAA;AAAA,EAU0B,KAAM,EAAA,sBAAA;;;;AAT9B,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA;AAAA,IAWS,QAAA;AAAA,IAAA;AAAA,MAXD,GAAI,EAAA,IAAA;AAAA,MAAM,KAAA,EADpBC,eAC2B,IAAiB,CAAA,iBAAA,CAAA;AAAA,MAAG,SAAK,MAAE,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,UAAA,IAAA,IAAA,CAAA,UAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA;;MAOlDC,UAGO,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAXXC,2CAQoB,IAAK,CAAA,KAAA,EAAA,UAAA,EAAE,iBAAU,MAAE,EAAA,IAAA,CAAA,MAAA,MAAnC,MAGO;AAAA,QAFLC,WAAqF,CAAA,oBAAA,EAAA;AAAA,UAA1E,KAAM,EAAA,qBAAA;AAAA,UAAuB,MAAM,IAAW,CAAA,UAAA,CAAA,KAAA;AAAA,UAAQ,SAAW,EAAA,IAAA,CAAA,KAAA;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,WAAA,CAAA,CAAA;QAChE,IAAZ,CAAA,MAAA,IAAAL,SAAA,EAAA,EAAAC,kBAAA;AAAA,UAA0E,MAAA;AAAA,UAA1E,UAAA;AAAA,UAA0EK,eAAA,CAAtB,YAAO,KAAK,CAAA;AAAA,UAAA,CAAA;AAAA;AAAA,SAVtE,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue2.js

@@ -1,8 +1,8 @@
 import { forEach } from '@empathyco/x-utils';
 import { defineComponent, ref, computed } from 'vue';
-import Highlight from '../highlight.vue.js';
 import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
+import 'vuex';
 import '@vue/devtools-api';
 import '../../plugins/devtools/timeline.devtools.js';
 import 'rxjs/operators';
@@ -10,142 +10,142 @@ import 'rxjs';
 import '../../plugins/devtools/colors.utils.js';
 import '../../plugins/x-bus.js';
 import '../../plugins/x-plugin.js';
-import 'vuex';
 import '@vueuse/core';
+import Highlight from '../highlight.vue.js';
 
-/**
- * Renders a button with a default slot. It receives a query, which should be the query of the
- * module using this component, a suggestion, the {@link XEvent} that will be emitted
- * on click with a given feature.
- *
- * The default slot receives the suggestion and the matched query has props.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    components: { Highlight },
-    props: {
-        /**
-         * The normalized query of the module using this component.
-         *
-         * @public
-         */
-        query: {
-            type: String,
-            default: ''
-        },
-        /**
-         * The suggestion to render and use in the default slot.
-         *
-         * @public
-         */
-        suggestion: {
-            type: Object,
-            required: true
-        },
-        /**
-         * The feature from which the events will be emitted.
-         *
-         * @public
-         */
-        //TODO: set to true when the suggestions components pass it.
-        feature: {
-            type: String
-        },
-        /**
-         * The {@link XEvent} that will be emitted when selecting a suggestion.
-         *
-         * @public
-         */
-        suggestionSelectedEvents: {
-            type: Object,
-            required: true
-        },
-        /**
-         * Indicates if the curated suggestion should be highlighted.
-         *
-         * @public
-         */
-        highlightCurated: {
-            type: Boolean
-        }
-    },
-    setup(props) {
-        const el = ref(null);
-        const $x = use$x();
-        /**
-         * Returns the suggestion filter object.
-         * It is a BooleanFilter because the label is needed.
-         * It returns only the first element because the facets and filters are being planned
-         * in the BaseSuggestions component.
-         *
-         * @returns The filter.
-         * @public
-         */
-        const filter = computed(() => props.suggestion.facets?.[0]?.filters[0]);
-        /**
-         * The event handler that will be triggered when clicking on a suggestion.
-         *
-         * @remarks
-         * UserAcceptedAQuery: suggestion.query
-         * UserSelectedASuggestion: suggestion
-         * UserClickedAFilter: suggestion.facets[0].filters[0]
-         * Merges the events defined in the suggestionSelectedEvents prop and also emits them
-         *
-         * @returns The {@link XEvent} to emit.
-         * @public
-         */
-        const events = computed(() => {
-            const filterEvent = filter.value
-                ? { UserClickedAFilter: filter.value }
-                : {};
-            return {
-                UserAcceptedAQuery: props.suggestion.query,
-                UserSelectedASuggestion: props.suggestion,
-                ...props.suggestionSelectedEvents,
-                ...filterEvent
-            };
-        });
-        /**
-         * Emits the events when the button is clicked.
-         *
-         * @public
-         */
-        const emitEvents = () => {
-            forEach(events.value, (event, payload) => {
-                $x.emit(event, payload, {
-                    target: el.value,
-                    feature: props.feature
-                });
-            });
-        };
-        /**
-         * Checks if the suggestion is curated and if it should be highlighted.
-         *
-         * @returns True if the suggestion is curated and should be highlighted.
-         *
-         * @internal
-         */
-        const shouldHighlightCurated = computed(() => props.highlightCurated && !!props.suggestion.isCurated);
-        /**
-         * Generates css classes dynamically.
-         *
-         * @remarks
-         * 'x-suggestion--matching added when the query should be matched.
-         *
-         * @returns The {@link VueCSSClasses} classes.
-         * @public
-         */
-        const dynamicCSSClasses = computed(() => ({
-            'x-suggestion--is-curated': shouldHighlightCurated.value
-        }));
-        return {
-            el,
-            filter,
-            emitEvents,
-            dynamicCSSClasses
-        };
-    }
+/**
+ * Renders a button with a default slot. It receives a query, which should be the query of the
+ * module using this component, a suggestion, the {@link XEvent} that will be emitted
+ * on click with a given feature.
+ *
+ * The default slot receives the suggestion and the matched query has props.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    components: { Highlight },
+    props: {
+        /**
+         * The normalized query of the module using this component.
+         *
+         * @public
+         */
+        query: {
+            type: String,
+            default: '',
+        },
+        /**
+         * The suggestion to render and use in the default slot.
+         *
+         * @public
+         */
+        suggestion: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * The feature from which the events will be emitted.
+         *
+         * @public
+         */
+        //TODO: set to true when the suggestions components pass it.
+        feature: {
+            type: String,
+        },
+        /**
+         * The {@link XEvent} that will be emitted when selecting a suggestion.
+         *
+         * @public
+         */
+        suggestionSelectedEvents: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * Indicates if the curated suggestion should be highlighted.
+         *
+         * @public
+         */
+        highlightCurated: {
+            type: Boolean,
+        },
+    },
+    setup(props) {
+        const el = ref(null);
+        const $x = use$x();
+        /**
+         * Returns the suggestion filter object.
+         * It is a BooleanFilter because the label is needed.
+         * It returns only the first element because the facets and filters are being planned
+         * in the BaseSuggestions component.
+         *
+         * @returns The filter.
+         * @public
+         */
+        const filter = computed(() => props.suggestion.facets?.[0]?.filters[0]);
+        /**
+         * The event handler that will be triggered when clicking on a suggestion.
+         *
+         * @remarks
+         * UserAcceptedAQuery: suggestion.query
+         * UserSelectedASuggestion: suggestion
+         * UserClickedAFilter: suggestion.facets[0].filters[0]
+         * Merges the events defined in the suggestionSelectedEvents prop and also emits them
+         *
+         * @returns The {@link XEvent} to emit.
+         * @public
+         */
+        const events = computed(() => {
+            const filterEvent = filter.value
+                ? { UserClickedAFilter: filter.value }
+                : {};
+            return {
+                UserAcceptedAQuery: props.suggestion.query,
+                UserSelectedASuggestion: props.suggestion,
+                ...props.suggestionSelectedEvents,
+                ...filterEvent,
+            };
+        });
+        /**
+         * Emits the events when the button is clicked.
+         *
+         * @public
+         */
+        const emitEvents = () => {
+            forEach(events.value, (event, payload) => {
+                $x.emit(event, payload, {
+                    target: el.value,
+                    feature: props.feature,
+                });
+            });
+        };
+        /**
+         * Checks if the suggestion is curated and if it should be highlighted.
+         *
+         * @returns True if the suggestion is curated and should be highlighted.
+         *
+         * @internal
+         */
+        const shouldHighlightCurated = computed(() => props.highlightCurated && !!props.suggestion.isCurated);
+        /**
+         * Generates css classes dynamically.
+         *
+         * @remarks
+         * 'x-suggestion--matching added when the query should be matched.
+         *
+         * @returns The {@link VueCSSClasses} classes.
+         * @public
+         */
+        const dynamicCSSClasses = computed(() => ({
+            'x-suggestion--is-curated': shouldHighlightCurated.value,
+        }));
+        return {
+            el,
+            filter,
+            emitEvents,
+            dynamicCSSClasses,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/components/suggestions/base-suggestion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue2.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" @click=\"emitEvents\" :class=\"dynamicCSSClasses\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType, ref } from 'vue';\n  import { QueryFeature } from '../../types';\n  import { VueCSSClasses } from '../../utils/types';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import Highlight from '../highlight.vue';\n  import { use$x } from '../../composables/index';\n\n  /**\n   * Renders a button with a default slot. It receives a query, which should be the query of the\n   * module using this component, a suggestion, the {@link XEvent} that will be emitted\n   * on click with a given feature.\n   *\n   * The default slot receives the suggestion and the matched query has props.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { Highlight },\n    props: {\n      /**\n       * The normalized query of the module using this component.\n       *\n       * @public\n       */\n      query: {\n        type: String,\n        default: ''\n      },\n\n      /**\n       * The suggestion to render and use in the default slot.\n       *\n       * @public\n       */\n      suggestion: {\n        type: Object as PropType<Suggestion>,\n        required: true\n      },\n\n      /**\n       * The feature from which the events will be emitted.\n       *\n       * @public\n       */\n      //TODO: set to true when the suggestions components pass it.\n      feature: {\n        type: String as PropType<QueryFeature>\n      },\n\n      /**\n       * The {@link XEvent} that will be emitted when selecting a suggestion.\n       *\n       * @public\n       */\n      suggestionSelectedEvents: {\n        type: Object as PropType<Partial<XEventsTypes>>,\n        required: true\n      },\n\n      /**\n       * Indicates if the curated suggestion should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean\n      }\n    },\n\n    setup(props) {\n      const el = ref<HTMLElement | null>(null);\n\n      const $x = use$x();\n\n      /**\n       * Returns the suggestion filter object.\n       * It is a BooleanFilter because the label is needed.\n       * It returns only the first element because the facets and filters are being planned\n       * in the BaseSuggestions component.\n       *\n       * @returns The filter.\n       * @public\n       */\n      const filter = computed<BooleanFilter | undefined>(\n        () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter\n      );\n\n      /**\n       * The event handler that will be triggered when clicking on a suggestion.\n       *\n       * @remarks\n       * UserAcceptedAQuery: suggestion.query\n       * UserSelectedASuggestion: suggestion\n       * UserClickedAFilter: suggestion.facets[0].filters[0]\n       * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n       *\n       * @returns The {@link XEvent} to emit.\n       * @public\n       */\n      const events = computed<Partial<XEventsTypes>>(() => {\n        const filterEvent: Partial<XEventsTypes> = filter.value\n          ? { UserClickedAFilter: filter.value }\n          : {};\n        return {\n          UserAcceptedAQuery: props.suggestion.query,\n          UserSelectedASuggestion: props.suggestion,\n          ...props.suggestionSelectedEvents,\n          ...filterEvent\n        };\n      });\n\n      /**\n       * Emits the events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = (): void => {\n        forEach(events.value, (event, payload): void => {\n          $x.emit(event, payload, {\n            target: el.value!,\n            feature: props.feature\n          });\n        });\n      };\n\n      /**\n       * Checks if the suggestion is curated and if it should be highlighted.\n       *\n       * @returns True if the suggestion is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed<boolean>(\n        () => props.highlightCurated && !!props.suggestion.isCurated\n      );\n\n      /**\n       * Generates css classes dynamically.\n       *\n       * @remarks\n       * 'x-suggestion--matching added when the query should be matched.\n       *\n       * @returns The {@link VueCSSClasses} classes.\n       * @public\n       */\n      const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n        'x-suggestion--is-curated': shouldHighlightCurated.value\n      }));\n\n      return {\n        el,\n        filter,\n        emitEvents,\n        dynamicCSSClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](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 if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak',\n          facet: {\n            namedModel: 'SimpleFacet',\n            id: 'category',\n            label: 'Category',\n            filters: [\n              {\n                id: 'category:groceries',\n                modelName: 'SimpleFilter',\n                facetId: 'category-facet',\n                label: 'Groceries',\n                selected: false,\n                totalResults: 10\n              }\n            ]\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\n  import { BaseSuggestion } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionDemo',\n    components: {\n      BaseSuggestion\n    },\n    data() {\n      return {\n        query: 'st',\n        suggestion: {\n          modelName: 'QuerySuggestion',\n          query: 'steak'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAC;AACX,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAA+B;AACtC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAM;AACd,SAAA;AACD,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAG,GAAE,GAAG,CAAqB,IAAI,CAAC,CAAA;AAExC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAiB,CAC/D,CAAA;AAED;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;AACnD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC,KAAI;AACpD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAM,EAAA;kBACnC,EAAE,CAAA;YACN,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAU;aACd,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAY;YAC7B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAW;AAC9C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAM;AACtB,iBAAA,CAAC,CAAA;AACJ,aAAC,CAAC,CAAA;AACJ,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,sBAAuB,GAAE,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,IAAG,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAQ,CAC5D,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAI;AACxD,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAgB;SACjB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-suggestion.vue2.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](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 if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## See it in action\n\nThis suggestion component expects a suggestion to render and pass to its default slot, a normalized\nquery to compare with the suggestion's query and highlight its matching parts, and events to emit\nwhen the suggestion is selected.\n\nIf the suggestion contains a filter, it is displayed next to the suggestion.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" />\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n        facet: {\n          namedModel: 'SimpleFacet',\n          id: 'category',\n          label: 'Category',\n          filters: [\n            {\n              id: 'category:groceries',\n              modelName: 'SimpleFilter',\n              facetId: 'category-facet',\n              label: 'Groceries',\n              selected: false,\n              totalResults: 10,\n            },\n          ],\n        },\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customise the content\n\nYou can make this component render any content you want by using the `default` slot.\n\n```vue live\n<template>\n  <BaseSuggestion v-bind=\"{ query, suggestion }\" #default=\"{ suggestion, query, filter }\">\n    <span>🔍</span>\n    <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    <span v-if=\"filter\">{{ filter.label }}</span>\n  </BaseSuggestion>\n</template>\n<script>\nimport { BaseSuggestion } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionDemo',\n  components: {\n    BaseSuggestion,\n  },\n  data() {\n    return {\n      query: 'st',\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'steak',\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA0BA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAgC;AACvC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAG,GAAE,GAAG,CAAqB,IAAI,CAAA,CAAA;AAEvC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AAEjB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CACjE,CAAA;AAEA;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAM;AACnD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC,KAAI;AACpD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAM,EAAA;kBACnC,EAAC,CAAA;YACL,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAW;aAChB,CAAA;AACF,SAAC,CAAA,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAY;YAC7B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAW;AAC9C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAO;AACvB,iBAAA,CAAA,CAAA;AACH,aAAC,CAAA,CAAA;AACH,SAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,sBAAuB,GAAE,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAe,IAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAC9D,CAAA;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAK;AACzD,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAiB;SACnB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/suggestions/base-suggestions.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-suggestions.vue2.js';
-import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, mergeProps } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createCommentVNode } from 'vue';
 import './base-suggestions.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -22,7 +22,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "data-test": "suggestion-item"
             },
             [
-              createCommentVNode("\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       "),
               renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { suggestion, index, filter: _ctx.getSuggestionFilter(suggestion) }), void 0, true)
             ],
             2

package/js/components/suggestions/base-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, PropType } from 'vue';\n  import { Suggestion, Facet } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n  import { AnimationProp } from '../../types';\n\n  /**\n   * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n   * in the default slot for working.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'BaseSuggestions',\n    props: {\n      /**\n       * The list of suggestions to render.\n       *\n       * @public\n       */\n      suggestions: {\n        type: Array as PropType<Suggestion[]>,\n        required: true\n      },\n      /**\n       * Animation component that will be used to animate the suggestion.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * Number of suggestions to be rendered.\n       *\n       * @public\n       */\n      maxItemsToRender: Number,\n      /**\n       * Boolean value to indicate if the facets should be rendered.\n       *\n       * @public\n       */\n      showFacets: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n       * filter should be rendered.\n       *\n       * @public\n       */\n      showPlainSuggestion: {\n        type: Boolean,\n        default: false\n      },\n      /** Class inherited by content element. */\n      suggestionItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * Creates a suggestion for each one of the filter inside each facet.\n       *\n       * @param suggestion - Suggestion to expand.\n       * @returns A list of suggestions, each one with a single filter.\n       *\n       * @internal\n       */\n      const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n        return (\n          suggestion.facets?.flatMap(facet =>\n            facet.filters.map(filter => ({\n              ...suggestion,\n              facets: [{ ...facet, filters: [filter] }]\n            }))\n          ) ?? []\n        );\n      };\n\n      /**\n       * Creates a list of suggestions to render based on the configuration of this component.\n       *\n       * @returns - The list of suggestions to be rendered by this component.\n       *\n       * @internal\n       */\n      const suggestionsToRender = computed(() =>\n        props.suggestions\n          .flatMap(suggestion =>\n            props.showFacets && suggestion.facets?.length\n              ? props.showPlainSuggestion\n                ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n                : expandSuggestionFilters(suggestion)\n              : { ...suggestion, facets: [] }\n          )\n          .slice(0, props.maxItemsToRender)\n      );\n\n      /**\n       * Generates a string from the given facet.\n       *\n       * @param facet - The facet to reduce to a string.\n       * @returns - A string representing the facet.\n       * @internal\n       */\n      const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&');\n\n      /**\n       * Generates a string from the given facets.\n       *\n       * @param facets - The list of facets to reduce to a string.\n       * @returns - A string representing the list of facets.\n       * @internal\n       */\n      const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&');\n\n      /**\n       * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n       *\n       * @returns An array with the unique keys of the suggestions.\n       * @internal\n       */\n      const suggestionsKeys = computed(() =>\n        suggestionsToRender.value.map(suggestion =>\n          isArrayEmpty(suggestion.facets)\n            ? suggestion.query\n            : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`\n        )\n      );\n\n      /**\n       * Returns the filter contained by the suggestion.\n       *\n       * @param suggestion - Suggestion containing the filter.\n       * @returns The suggestion filter.\n       * @internal\n       */\n      const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0];\n\n      return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n  }\n\n  .x-suggestions,\n  .x-suggestions__item {\n    display: flex;\n    flex-flow: column nowrap;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' })\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target });\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target });\n    }\n  }\n};\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [\n              {\n                id: 'exampleFacet',\n                label: 'exampleFacet',\n                modelName: 'SimpleFacet',\n                filters: [\n                  {\n                    facetId: 'exampleFacet',\n                    id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                    label: 'EXAMPLE',\n                    selected: false,\n                    totalResults: 10,\n                    modelName: 'SimpleFilter'\n                  }\n                ]\n              }\n            ],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\n  import { BaseSuggestions } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSuggestionsDemo',\n    components: {\n      BaseSuggestions\n    },\n    data() {\n      return {\n        suggestions: [\n          {\n            facets: [],\n            key: 'chips',\n            query: 'Chips',\n            totalResults: 10,\n            results: [],\n            modelName: 'PopularSearch'\n          }\n        ]\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","suggestionsKeys","_Fragment","_renderList","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IAC+D,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AADrE,IAAA,KAAA,EAAA,eAAA;AAAA,GAAA,EAAA;;AAIYC,OAAAA,SAAAA,CAAAA,IAAAA,CAAAA,EAAAA,kBAAAA;AAAAA,QAAqBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,CAAA,UAAA,EAAA,KAAA,KAAA;iBACtBL,SALX,EAAA,EAAAM,kBAAA;AAAA,YAKY,IAAA;AAAA,YAAqB;AAAA,cAE3B,0BAAU,KAAiB,CAAA;AAAA,cAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,IAAA,CAAA,mBAAA,CAAA,CAAA;AAE3B,cAAA,WAAA,EAAA,iBAAA;AAAA,aAAA;AAMA,YAAA;AAAA,cAAAC,kBAAA,CAAA,uPAAA,CAAA;;;;;;AAfN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"base-suggestions.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<BaseSuggestions :suggestions=\"suggestions\">\n  <template #default=\"{ suggestion }\">\n    <button @click=\"emitSuggestionSelected($event, suggestion)\">\n      {{ suggestion.query }}\n    </button>\n  </template>\n</BaseSuggestions>\n```\n\nFollowing the previous example, the component options object could be something like this:\n\n```js\nexport default {\n  computed: {\n    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),\n  },\n  methods: {\n    emitSuggestionSelected(event, suggestion) {\n      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n    },\n  },\n}\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 3 items. _Type \"puzzle\" or\nanother toy in the input field to try it out!_\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the filters of the suggestion will be rendered along with the query.\n\nThe `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be\nrendered along with the suggestion with filters.\n\nThis will render:\n\n- Chips //If `showPlainSuggestion` is true\n- Chips EXAMPLE\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" showFacets showPlainSuggestion />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [\n            {\n              id: 'exampleFacet',\n              label: 'exampleFacet',\n              modelName: 'SimpleFacet',\n              filters: [\n                {\n                  facetId: 'exampleFacet',\n                  id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:\"EXAMPLE\"',\n                  label: 'EXAMPLE',\n                  selected: false,\n                  totalResults: 10,\n                  modelName: 'SimpleFilter',\n                },\n              ],\n            },\n          ],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\nIn this example, the `contentClass` prop can be used to add classes to the suggestion item.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\" suggestionItemClass=\"x-custom-class\" />\n</template>\n\n<script>\nimport { BaseSuggestions } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseSuggestionsDemo',\n  components: {\n    BaseSuggestions,\n  },\n  data() {\n    return {\n      suggestions: [\n        {\n          facets: [],\n          key: 'chips',\n          query: 'Chips',\n          totalResults: 10,\n          results: [],\n          modelName: 'PopularSearch',\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createCommentVNode"],"mappings":";;;;;;SACmC,IAAY,CAAA,WAAA,CAAA,MAAA,IAAAA,SAAA,EAAA,EAA7CC,WAgBY,CAAAC,uBAAA,CAhBI,IAAS,CAAA,SAAA,CAAA,EAAA;AAAA,IAD3B,GAAA,EAAA,CAAA;AAAA,IACuD,GAAI,EAAA,IAAA;AAAA,IAAK,KAAM,EAAA,eAAA;AAAA,GAAA,EAAA;AADtE,IAAA,OAAA,EAAAC,OAAA,CAGM,MAAkD;AAAA,OADpDH,SAAA,CAAA,IAAA,CAAA,EAAAI,kBAAA;AAAA,QAcKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAhBTC,UAGoC,CAAA,IAAA,CAAA,mBAAA,EAHpC,CAGc,UAAA,EAAY,KAAK,KAAA;AAD3B,UAAA,OAAAN,SAAA,EAAA,EAAAI,kBAAA;AAAA,YAcK,IAAA;AAAA,YAAA;AAAA,cAZF,GAAA,EAAK,qBAAgB,KAAK,CAAA;AAAA,cAC3B,KAAA,EALNG,cAKY,CAAA,CAAA,qBAAA,EACE,IAAmB,CAAA,mBAAA,CAAA,CAAA;AAAA,cAC3B,WAAU,EAAA,iBAAA;AAAA,aAAA;;cAQVC,UAAgF,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAhFC,WAAgF,EAftF,OAAA,EAAA,IAAA,EAAA,EAAA,EAesB,YAAY,KAAK,EAAA,MAAA,EAAU,yBAAoB,UAAU,CAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,aAAA;;;;;;;;;AAf/E,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}