@empathyco/x-components 3.0.0-alpha.366 → 3.0.0-alpha.368

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 @click=\"emitEvents\" v-on=\"$listeners\" :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=\"{ suggestion, query, 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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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\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 | XEvents} 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  @Component({\n    components: { Highlight }\n  })\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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 | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\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    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\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    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.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    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The 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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" @click=\"emitEvents\" v-on=\"$listeners\" :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 | XEvents} 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 | XEvents} 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 | XEvents} 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`: the event is emitted after the user clicks the button. The event payload is\n  the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n  payload is the suggestion data.\n- `UserClickedAFilter`: the event is emitted after the user clicks the button if the suggestion\n  includes a filter. The 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":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js

@@ -1,8 +1,8 @@
-import { __decorate } from 'tslib';
 import { forEach } from '@empathyco/x-utils';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { defineComponent, ref, computed } from 'vue';
 import __vue_component__ from '../highlight.vue.js';
+import '../../composables/create-use-device.composable.js';
+import { use$x } from '../../composables/use-_x.js';
 
 /**
  * Renders a button with a default slot. It receives a query, which should be the query of the
@@ -13,101 +13,131 @@ import __vue_component__ from '../highlight.vue.js';
  *
  * @public
  */
-let BaseSuggestion = class BaseSuggestion extends Vue {
-    /**
-     * 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 | XEvents} to emit.
-     * @public
-     */
-    get events() {
-        const filterEvent = this.filter
-            ? { UserClickedAFilter: this.filter }
-            : {};
-        return {
-            UserAcceptedAQuery: this.suggestion.query,
-            UserSelectedASuggestion: this.suggestion,
-            ...this.suggestionSelectedEvents,
-            ...filterEvent
-        };
-    }
-    /**
-     * Emits the events when the button is clicked.
-     *
-     * @public
-     */
-    emitEvents() {
-        forEach(this.events, (event, payload) => {
-            this.$x.emit(event, payload, {
-                target: this.$el,
-                feature: this.feature
-            });
+var script = defineComponent({
+    components: { Highlight: __vue_component__ },
+    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 | XEvents} 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 | XEvents} to emit.
+         * @public
+         */
+        const events = computed(() => {
+            const filterEvent = filter.value
+                ? { UserClickedAFilter: filter.value }
+                : {};
+            return {
+                UserAcceptedAQuery: props.suggestion.query,
+                UserSelectedASuggestion: props.suggestion,
+                ...props.suggestionSelectedEvents,
+                ...filterEvent
+            };
         });
-    }
-    /**
-     * 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
-     */
-    get filter() {
-        return this.suggestion.facets?.[0]?.filters[0];
-    }
-    /**
-     * Checks if the suggestion is curated and if it should be highlighted.
-     *
-     * @returns True if the suggestion is curated and should be highlighted.
-     *
-     * @internal
-     */
-    get shouldHighlightCurated() {
-        return this.highlightCurated && !!this.suggestion.isCurated;
-    }
-    /**
-     * Generates css classes dynamically.
-     *
-     * @remarks
-     * 'x-suggestion--matching added when the query should be matched.
-     *
-     * @returns The {@link VueCSSClasses} classes.
-     * @public
-     */
-    get dynamicCSSClasses() {
+        /**
+         * 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 {
-            'x-suggestion--is-curated': this.shouldHighlightCurated
+            el,
+            filter,
+            emitEvents,
+            dynamicCSSClasses
         };
     }
-};
-__decorate([
-    Prop({ default: '' })
-], BaseSuggestion.prototype, "query", void 0);
-__decorate([
-    Prop({ required: true })
-], BaseSuggestion.prototype, "suggestion", void 0);
-__decorate([
-    Prop() //TODO: set to true when the suggestions components pass it.
-], BaseSuggestion.prototype, "feature", void 0);
-__decorate([
-    Prop({ required: true })
-], BaseSuggestion.prototype, "suggestionSelectedEvents", void 0);
-__decorate([
-    Prop({ default: false, type: Boolean })
-], BaseSuggestion.prototype, "highlightCurated", void 0);
-BaseSuggestion = __decorate([
-    Component({
-        components: { Highlight: __vue_component__ }
-    })
-], BaseSuggestion);
-var script = BaseSuggestion;
+});
 
 export { script as default };
 //# sourceMappingURL=base-suggestion.vue_rollup-plugin-vue_script.vue.js.map

package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { BooleanFilter, Suggestion } from '@empathyco/x-types';\n  import { forEach } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\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\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 | XEvents} 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  @Component({\n    components: { Highlight }\n  })\n  export default class BaseSuggestion extends Vue {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    @Prop({ default: '' })\n    protected query!: string;\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestion!: Suggestion;\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    @Prop() //TODO: set to true when the suggestions components pass it.\n    protected feature?: QueryFeature;\n\n    /**\n     * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\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 | XEvents} to emit.\n     * @public\n     */\n    protected get events(): Partial<XEventsTypes> {\n      const filterEvent: Partial<XEventsTypes> = this.filter\n        ? { UserClickedAFilter: this.filter }\n        : {};\n      return {\n        UserAcceptedAQuery: this.suggestion.query,\n        UserSelectedASuggestion: this.suggestion,\n        ...this.suggestionSelectedEvents,\n        ...filterEvent\n      };\n    }\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      forEach(this.events, (event, payload) => {\n        this.$x.emit(event, payload, {\n          target: this.$el as HTMLElement,\n          feature: this.feature\n        });\n      });\n    }\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    protected get filter(): BooleanFilter | undefined {\n      return this.suggestion.facets?.[0]?.filters[0] as BooleanFilter;\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    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && !!this.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    protected get dynamicCSSClasses(): VueCSSClasses {\n      return {\n        'x-suggestion--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n"],"names":["Highlight"],"mappings":";;;;;;AAyBE;;;;;;;;AAQG;AAIY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAyC7C;;;;;;;;;;;AAWG;AACH,IAAA,IAAc,MAAM,GAAA;AAClB,QAAA,MAAM,WAAW,GAA0B,IAAI,CAAC,MAAM;AACpD,cAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,MAAM,EAAE;cACnC,EAAE,CAAC;QACP,OAAO;AACL,YAAA,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,GAAG,IAAI,CAAC,wBAAwB;AAChC,YAAA,GAAG,WAAW;SACf,CAAC;KACH;AAED;;;;AAIG;IACO,UAAU,GAAA;QAClB,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAI;YACtC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,IAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;AAED;;;;;;;;AAQG;AACH,IAAA,IAAc,MAAM,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CAAC;KACjE;AAED;;;;;;AAMG;AACH,IAAA,IAAc,sBAAsB,GAAA;QAClC,OAAO,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;KAC7D;AAED;;;;;;;;AAQG;AACH,IAAA,IAAc,iBAAiB,GAAA;QAC7B,OAAO;YACL,0BAA0B,EAAE,IAAI,CAAC,sBAAsB;SACxD,CAAC;KACH;CACF,CAAA;AA9GC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;AACG,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzB,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACS,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQlC,UAAA,CAAA;IADC,IAAI,EAAE;AAC0B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQjC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACkC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,0BAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ3D,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACH,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAvClB,cAAc,GAAA,UAAA,CAAA;AAHlC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,aAAEA,iBAAS,EAAE;KAC1B,CAAC;AACmB,CAAA,EAAA,cAAc,CAqHlC,CAAA;aArHoB,cAAc;;;;"}
+{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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 | XEvents} 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 | XEvents} 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 | XEvents} 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"],"names":["Highlight"],"mappings":";;;;;;AAyBE;;;;;;;;AAQG;AACH,aAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,aAAEA,iBAAS,EAAE;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AAED;;;;AAIG;AACH,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIG;;AAEH,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAgC;AACvC,SAAA;AAED;;;;AAIG;AACH,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIG;AACH,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAE,GAAG,GAAG,CAAqB,IAAI,CAAC,CAAC;AAEzC,QAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AAEnB;;;;;;;;AAQG;QACH,MAAM,MAAM,GAAG,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CAChE,CAAC;AAEF;;;;;;;;;;;AAWG;AACH,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAwB,MAAK;AAClD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC,KAAK;AACrD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAK,EAAE;kBACpC,EAAE,CAAC;YACP,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;aACf,CAAC;AACJ,SAAC,CAAC,CAAC;AAEH;;;;AAIG;QACH,MAAM,UAAU,GAAG,MAAW;YAC5B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAU;AAC7C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAO;AACvB,iBAAA,CAAC,CAAC;AACL,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;AAEF;;;;;;AAMG;AACH,QAAA,MAAM,sBAAsB,GAAG,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAgB,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAC7D,CAAC;AAEF;;;;;;;;AAQG;AACH,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAK;AACzD,SAAA,CAAC,CAAC,CAAC;QAEJ,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAiB;SAClB,CAAC;KACH;AACF,CAAA,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.366",
+  "version": "3.0.0-alpha.368",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "directory": "packages/x-components"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -67,14 +67,14 @@
     "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.0.0-alpha.28",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.71",
-    "@empathyco/x-bus": "^0.1.0-alpha.12",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+    "@empathyco/x-adapter": "^8.0.0-alpha.29",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.72",
+    "@empathyco/x-bus": "^1.0.0-alpha.0",
+    "@empathyco/x-deep-merge": "^2.0.0-alpha.0",
     "@empathyco/x-logger": "^1.2.0-alpha.11",
-    "@empathyco/x-storage-service": "^2.0.0-alpha.11",
-    "@empathyco/x-types": "^10.0.0-alpha.66",
-    "@empathyco/x-utils": "^1.0.0-alpha.19",
+    "@empathyco/x-storage-service": "^2.0.0-alpha.13",
+    "@empathyco/x-types": "^10.0.0-alpha.67",
+    "@empathyco/x-utils": "^1.0.0-alpha.20",
     "@vue/devtools-api": "~6.5.0",
     "@vueuse/core": "~9.13.0",
     "rxjs": "~7.8.0",
@@ -89,10 +89,10 @@
     "vuex": "^3.0.0"
   },
   "devDependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "~16.0.0",
+    "@badeball/cypress-cucumber-preprocessor": "~17.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
     "@cypress/vue2": "~2.0.1",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.29",
+    "@empathyco/x-tailwindcss": "^1.0.0-alpha.30",
     "@microsoft/api-documenter": "~7.22.0",
     "@microsoft/api-extractor": "~7.34.0",
     "@rollup/plugin-commonjs": "~24.1.0",
@@ -100,7 +100,7 @@
     "@types/autoprefixer": "~10.2.0",
     "@types/glob": "^8.0.1",
     "@types/jest": "~27.5.0",
-    "@types/node": "~16.18.0",
+    "@types/node": "~18.16.0",
     "@types/testing-library__jest-dom": "~5.14.5",
     "@vue/cli-plugin-e2e-cypress": "~5.0.4",
     "@vue/cli-plugin-typescript": "~5.0.4",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "23b076bb03324bbf4a6671fe4d664d162bcc2668"
+  "gitHead": "c7794658570688883d32c6b2b28f0e3a88e87483"
 }