@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

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

@@ -1,16 +1,17 @@
 import { forEach } from '@empathyco/x-utils';
 import { defineComponent, ref, computed } from 'vue';
-import __vue_component__ from '../highlight.vue.js';
-import '../../composables/create-use-device.composable.js';
+import Highlight from '../highlight.vue.js';
+import '../../composables/create-use-device.js';
 import { use$x } from '../../composables/use-_x.js';
-import '../../plugins/x-plugin.js';
-import '@vueuse/core';
-import '../../plugins/x-bus.js';
 import '@vue/devtools-api';
 import '../../plugins/devtools/timeline.devtools.js';
 import 'rxjs/operators';
 import 'rxjs';
 import '../../plugins/devtools/colors.utils.js';
+import '../../plugins/x-bus.js';
+import '../../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
 
 /**
  * Renders a button with a default slot. It receives a query, which should be the query of the
@@ -21,8 +22,8 @@ import '../../plugins/devtools/colors.utils.js';
  *
  * @public
  */
-var script = defineComponent({
-    components: { Highlight: __vue_component__ },
+var _sfc_main = defineComponent({
+    components: { Highlight },
     props: {
         /**
          * The normalized query of the module using this component.
@@ -147,5 +148,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-suggestion.vue2.js.map

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?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} 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"],"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;;;;"}
+{"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;;;;"}

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

@@ -1,76 +1,43 @@
-import script from './base-suggestions.vue2.js';
+import _sfc_main from './base-suggestions.vue2.js';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, renderSlot, mergeProps } from 'vue';
 import './base-suggestions.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.suggestions.length
-    ? _c(
-        _vm.animation,
-        {
-          tag: "component",
-          staticClass: "x-suggestions",
-          attrs: { tag: "ul" },
-        },
-        _vm._l(_vm.suggestionsToRender, function (suggestion, index) {
-          return _c(
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.suggestions.length ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    key: 0,
+    tag: "ul",
+    class: "x-suggestions"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.suggestionsToRender, (suggestion, index) => {
+          return openBlock(), createElementBlock(
             "li",
             {
-              key: _vm.suggestionsKeys[index],
-              staticClass: "x-suggestions__item",
-              class: _vm.suggestionItemClass,
-              attrs: { "data-test": "suggestion-item" },
+              key: _ctx.suggestionsKeys[index],
+              class: normalizeClass(["x-suggestions__item", _ctx.suggestionItemClass]),
+              "data-test": "suggestion-item"
             },
             [
-              _vm._t("default", null, null, {
-                suggestion: suggestion,
-                index: index,
-                filter: _vm.getSuggestionFilter(suggestion),
-              }),
+              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
-          )
+            /* CLASS */
+          );
         }),
-        0
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+var BaseSuggestions = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-60a55deb"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-cf9fa1bc";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { BaseSuggestions as default };
 //# sourceMappingURL=base-suggestions.vue.js.map

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 Vue from 'vue';\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\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  @Component\n  export default class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showFacets!: boolean;\n\n    /**\n     * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showPlainSuggestion!: boolean;\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    protected get suggestionsKeys(): string[] {\n      return this.suggestionsToRender.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\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    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\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    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\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    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions\n        .flatMap(suggestion =>\n          this.showFacets && suggestion.facets?.length\n            ? this.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n              : this.expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] }\n        )\n        .slice(0, this.maxItemsToRender);\n    }\n\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    protected 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     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n      return suggestion.facets?.[0]?.filters[0];\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-suggestions {\n    list-style-type: none;\n\n    &,\n    &__item {\n      display: flex;\n      flex-flow: column nowrap;\n    }\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":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;"}

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

@@ -1,7 +1,6 @@
-import { __decorate } from 'tslib';
-import { Mixins, Prop, Component } from 'vue-property-decorator';
+import { defineComponent, computed } from 'vue';
 import { isArrayEmpty } from '../../utils/array.js';
-import { dynamicPropsMixin } from '../dynamic-props.mixin.js';
+import { AnimationProp } from '../../types/animation-prop.js';
 
 /**
  * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
@@ -9,100 +8,120 @@ import { dynamicPropsMixin } from '../dynamic-props.mixin.js';
  *
  * @public
  */
-let BaseSuggestions = class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {
-    /**
-     * An array with the unique keys for each suggestion. Required by the `v-for` loop.
-     *
-     * @returns An array with the unique keys of the suggestions.
-     * @internal
-     */
-    get suggestionsKeys() {
-        return this.suggestionsToRender.map(suggestion => isArrayEmpty(suggestion.facets)
-            ? suggestion.query
-            : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`);
-    }
-    /**
-     * Generates a string from the given facets.
-     *
-     * @param facets - The list of facets to reduce to a string.
-     * @returns - A string representing the list of facets.
-     * @internal
-     */
-    getFacetsKey(facets) {
-        // Component methods are bound by Vue:
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        return facets.map(this.getFacetKey).join('&');
-    }
-    /**
-     * Generates a string from the given facet.
-     *
-     * @param facet - The facet to reduce to a string.
-     * @returns - A string representing the facet.
-     * @internal
-     */
-    getFacetKey(facet) {
-        return facet.filters.map(filter => filter.id).join('&');
-    }
-    /**
-     * Creates a list of suggestions to render based on the configuration of this component.
-     *
-     * @returns - The list of suggestions to be rendered by this component.
-     *
-     * @internal
-     */
-    get suggestionsToRender() {
-        return this.suggestions
-            .flatMap(suggestion => this.showFacets && suggestion.facets?.length
-            ? this.showPlainSuggestion
-                ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]
-                : this.expandSuggestionFilters(suggestion)
+var _sfc_main = defineComponent({
+    name: 'BaseSuggestions',
+    props: {
+        /**
+         * The list of suggestions to render.
+         *
+         * @public
+         */
+        suggestions: {
+            type: Array,
+            required: true
+        },
+        /**
+         * Animation component that will be used to animate the suggestion.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /**
+         * Number of suggestions to be rendered.
+         *
+         * @public
+         */
+        maxItemsToRender: Number,
+        /**
+         * Boolean value to indicate if the facets should be rendered.
+         *
+         * @public
+         */
+        showFacets: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without
+         * filter should be rendered.
+         *
+         * @public
+         */
+        showPlainSuggestion: {
+            type: Boolean,
+            default: false
+        },
+        /** Class inherited by content element. */
+        suggestionItemClass: String
+    },
+    setup: function (props) {
+        /**
+         * Creates a suggestion for each one of the filter inside each facet.
+         *
+         * @param suggestion - Suggestion to expand.
+         * @returns A list of suggestions, each one with a single filter.
+         *
+         * @internal
+         */
+        const expandSuggestionFilters = (suggestion) => {
+            return (suggestion.facets?.flatMap(facet => facet.filters.map(filter => ({
+                ...suggestion,
+                facets: [{ ...facet, filters: [filter] }]
+            }))) ?? []);
+        };
+        /**
+         * Creates a list of suggestions to render based on the configuration of this component.
+         *
+         * @returns - The list of suggestions to be rendered by this component.
+         *
+         * @internal
+         */
+        const suggestionsToRender = computed(() => props.suggestions
+            .flatMap(suggestion => props.showFacets && suggestion.facets?.length
+            ? props.showPlainSuggestion
+                ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]
+                : expandSuggestionFilters(suggestion)
             : { ...suggestion, facets: [] })
-            .slice(0, this.maxItemsToRender);
-    }
-    /**
-     * Creates a suggestion for each one of the filter inside each facet.
-     *
-     * @param suggestion - Suggestion to expand.
-     * @returns A list of suggestions, each one with a single filter.
-     *
-     * @internal
-     */
-    expandSuggestionFilters(suggestion) {
-        return (suggestion.facets?.flatMap(facet => facet.filters.map(filter => ({
-            ...suggestion,
-            facets: [{ ...facet, filters: [filter] }]
-        }))) ?? []);
-    }
-    /**
-     * Returns the filter contained by the suggestion.
-     *
-     * @param suggestion - Suggestion containing the filter.
-     * @returns The suggestion filter.
-     * @internal
-     */
-    getSuggestionFilter(suggestion) {
-        return suggestion.facets?.[0]?.filters[0];
+            .slice(0, props.maxItemsToRender));
+        /**
+         * Generates a string from the given facet.
+         *
+         * @param facet - The facet to reduce to a string.
+         * @returns - A string representing the facet.
+         * @internal
+         */
+        const getFacetKey = (facet) => facet.filters.map(filter => filter.id).join('&');
+        /**
+         * Generates a string from the given facets.
+         *
+         * @param facets - The list of facets to reduce to a string.
+         * @returns - A string representing the list of facets.
+         * @internal
+         */
+        const getFacetsKey = (facets) => facets.map(getFacetKey).join('&');
+        /**
+         * An array with the unique keys for each suggestion. Required by the `v-for` loop.
+         *
+         * @returns An array with the unique keys of the suggestions.
+         * @internal
+         */
+        const suggestionsKeys = computed(() => suggestionsToRender.value.map(suggestion => isArrayEmpty(suggestion.facets)
+            ? suggestion.query
+            : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`));
+        /**
+         * Returns the filter contained by the suggestion.
+         *
+         * @param suggestion - Suggestion containing the filter.
+         * @returns The suggestion filter.
+         * @internal
+         */
+        const getSuggestionFilter = (suggestion) => suggestion.facets?.[0]?.filters[0];
+        return { suggestionsToRender, suggestionsKeys, getSuggestionFilter };
     }
-};
-__decorate([
-    Prop({ required: true })
-], BaseSuggestions.prototype, "suggestions", void 0);
-__decorate([
-    Prop({ default: 'ul' })
-], BaseSuggestions.prototype, "animation", void 0);
-__decorate([
-    Prop()
-], BaseSuggestions.prototype, "maxItemsToRender", void 0);
-__decorate([
-    Prop({ default: false, type: Boolean })
-], BaseSuggestions.prototype, "showFacets", void 0);
-__decorate([
-    Prop({ default: false, type: Boolean })
-], BaseSuggestions.prototype, "showPlainSuggestion", void 0);
-BaseSuggestions = __decorate([
-    Component
-], BaseSuggestions);
-var script = BaseSuggestions;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-suggestions.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue2.js","sources":["../../../../src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Mixins, Prop } from 'vue-property-decorator';\n  import { Suggestion, Facet, Filter } from '@empathyco/x-types';\n  import { isArrayEmpty } from '../../utils/array';\n  import { dynamicPropsMixin } from '../dynamic-props.mixin';\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  @Component\n  export default class BaseSuggestions extends Mixins(dynamicPropsMixin(['suggestionItemClass'])) {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected suggestions!: Suggestion[];\n\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue | string;\n\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showFacets!: boolean;\n\n    /**\n     * When {@link BaseSuggestions.showFacets} is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected showPlainSuggestion!: boolean;\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    protected get suggestionsKeys(): string[] {\n      return this.suggestionsToRender.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${this.getFacetsKey(suggestion.facets)}`\n      );\n    }\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    protected getFacetsKey(facets: Facet[]): string {\n      // Component methods are bound by Vue:\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      return facets.map(this.getFacetKey).join('&');\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    protected getFacetKey(facet: Facet): string {\n      return facet.filters.map(filter => filter.id).join('&');\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    protected get suggestionsToRender(): Suggestion[] {\n      return this.suggestions\n        .flatMap(suggestion =>\n          this.showFacets && suggestion.facets?.length\n            ? this.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...this.expandSuggestionFilters(suggestion)]\n              : this.expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] }\n        )\n        .slice(0, this.maxItemsToRender);\n    }\n\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    protected 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     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    protected getSuggestionFilter(suggestion: Suggestion): Filter | undefined {\n      return suggestion.facets?.[0]?.filters[0];\n    }\n  }\n"],"names":[],"mappings":";;;;;AA2BE;;;;;AAKG;AAEY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,MAAM,CAAC,iBAAiB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;AA0C7F;;;;;AAKG;AACH,IAAA,IAAc,eAAe,GAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,UAAU,IAC5C,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC;cAC3B,UAAU,CAAC,KAAK;AAClB,cAAE,CAAG,EAAA,UAAU,CAAC,KAAK,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA,CAAE,CACrE,CAAC;KACH;AAED;;;;;;AAMG;AACO,IAAA,YAAY,CAAC,MAAe,EAAA;;;AAGpC,QAAA,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC/C;AAED;;;;;;AAMG;AACO,IAAA,WAAW,CAAC,KAAY,EAAA;AAChC,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzD;AAED;;;;;;AAMG;AACH,IAAA,IAAc,mBAAmB,GAAA;QAC/B,OAAO,IAAI,CAAC,WAAW;AACpB,aAAA,OAAO,CAAC,UAAU,IACjB,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,EAAE,MAAM;cACxC,IAAI,CAAC,mBAAmB;AACxB,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;AAC9E,kBAAE,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC;cAC1C,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,CAClC;AACA,aAAA,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACpC;AAED;;;;;;;AAOG;AACO,IAAA,uBAAuB,CAAC,UAAsB,EAAA;QACtD,QACE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAC9B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;AAC3B,YAAA,GAAG,UAAU;AACb,YAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;AAC1C,SAAA,CAAC,CAAC,CACJ,IAAI,EAAE,EACP;KACH;AAED;;;;;;AAMG;AACO,IAAA,mBAAmB,CAAC,UAAsB,EAAA;AAClD,QAAA,OAAO,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3C;CACF,CAAA;AAzHC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACY,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQrC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACW,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQnC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AAC6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACT,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS/B,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACA,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAxCrB,eAAe,GAAA,UAAA,CAAA;IADnC,SAAS;AACW,CAAA,EAAA,eAAe,CAgInC,CAAA;aAhIoB,eAAe;;;;"}
+{"version":3,"file":"base-suggestions.vue2.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":[],"mappings":";;;;AA0BE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,KAA+B;AACrC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACxB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;;AAKE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAED,QAAA,mBAAmB,EAAE,MAAK;AAC3B,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;;;AAOE;AACF,QAAA,MAAM,uBAAsB,GAAI,CAAC,UAAsB,KAAmB;YACxE,QACE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,SACzB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,KAAM;AAC3B,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,GAAG,CAAA;AACzC,aAAA,CAAC,CAAA,CACF,IAAG,EAAC,EACP;AACH,SAAC,CAAA;AAED;;;;;;AAME;QACF,MAAM,mBAAoB,GAAE,QAAQ,CAAC,MACnC,KAAK,CAAC,WAAU;AACb,aAAA,OAAO,CAAC,cACP,KAAK,CAAC,cAAc,UAAU,CAAC,MAAM,EAAE,MAAK;cACxC,KAAK,CAAC,mBAAkB;AACxB,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,EAAE,GAAG,uBAAuB,CAAC,UAAU,CAAC,CAAA;AACxE,kBAAE,uBAAuB,CAAC,UAAU,CAAA;cACpC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAG,EAAA,CAClC;aACC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACnC,CAAA;AAED;;;;;;AAME;QACF,MAAM,WAAU,GAAI,CAAC,KAAY,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAK,IAAK,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAEtF;;;;;;AAME;AACF,QAAA,MAAM,YAAa,GAAE,CAAC,MAAe,KAAK,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3E;;;;;AAKE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,cAC5B,YAAY,CAAC,UAAU,CAAC,MAAM,CAAA;cAC1B,UAAU,CAAC,KAAI;AACjB,cAAE,CAAA,EAAG,UAAU,CAAC,KAAK,CAAO,IAAA,EAAA,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA,CAChE,CACD,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAoB,GAAE,CAAC,UAAsB,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;AAE1F,QAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,qBAAqB,CAAA;KACtE;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../tools/inject-css.js';
 
-var css = ".x-suggestions[data-v-cf9fa1bc] {\n  list-style-type: none;\n}\n.x-suggestions[data-v-cf9fa1bc], .x-suggestions__item[data-v-cf9fa1bc] {\n  display: flex;\n  flex-flow: column nowrap;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/components/suggestions/base-suggestions.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-suggestions[data-v-60a55deb]{list-style-type:none}.x-suggestions[data-v-60a55deb],.x-suggestions__item[data-v-60a55deb]{display:flex;flex-flow:column nowrap}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=base-suggestions.vue3.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-suggestions.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-suggestions.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/x-component.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import Vue from 'vue';\nimport { XModuleName } from '../x-modules/x-modules.types';\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(component: Vue | undefined): XModuleName | null {\n  return component?.$options.xModule ?? null;\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: Vue): boolean {\n  return !!getXComponentXModuleName(component);\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(component: Vue | null): Vue | undefined {\n  let xComponent: Vue | undefined;\n  let currentComponent: Vue | null = component;\n  while (currentComponent != null) {\n    if (isXComponent(currentComponent)) {\n      xComponent = currentComponent;\n    }\n    currentComponent = currentComponent.$parent;\n  }\n  return xComponent;\n}\n"],"names":[],"mappings":"AAGA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CAAC,SAA0B,EAAA;AACjE,IAAA,OAAO,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC;AAC7C,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,YAAY,CAAC,SAAc,EAAA;AACzC,IAAA,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;AAMG;AACG,SAAU,iBAAiB,CAAC,SAAqB,EAAA;AACrD,IAAA,IAAI,UAA2B,CAAC;IAChC,IAAI,gBAAgB,GAAe,SAAS,CAAC;IAC7C,OAAO,gBAAgB,IAAI,IAAI,EAAE;AAC/B,QAAA,IAAI,YAAY,CAAC,gBAAgB,CAAC,EAAE;YAClC,UAAU,GAAG,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAC7C,KAAA;AACD,IAAA,OAAO,UAAU,CAAC;AACpB;;;;"}
+{"version":3,"file":"x-component.utils.js","sources":["../../../src/components/x-component.utils.ts"],"sourcesContent":["import { ComponentPublicInstance } from 'vue';\nimport { XModuleName } from '../x-modules/x-modules.types';\n\n/**\n * Gets the X-Component name.\n *\n * @param component - The x-component to get its name.\n * @returns The x-module name if the component is an x-component, or `null` if it is not an\n * x-component.\n * @internal\n */\nexport function getXComponentXModuleName(\n  component: ComponentPublicInstance | undefined\n): XModuleName | null {\n  return component?.$options.xModule ?? null;\n}\n\n/**\n * Returns if the component is an X-Component. An X-Component is a component that has an\n * {@link XModule} associated to it.\n *\n * @param component - The component to check if it is an X-Component.\n * @returns A boolean which flags if a component is a X-Component.\n * @public\n */\nexport function isXComponent(component: ComponentPublicInstance): boolean {\n  return !!getXComponentXModuleName(component);\n}\n\n/**\n * Given a component, finds the root XComponent in the ancestors hierarchy.\n *\n * @param component - The component to find its root XComponent.\n * @returns The root XComponent or undefined if it has not.\n * @public\n */\nexport function getRootXComponent(\n  component: ComponentPublicInstance | null\n): ComponentPublicInstance | undefined {\n  let xComponent: ComponentPublicInstance | undefined;\n  let currentComponent = component;\n  while (currentComponent != null) {\n    if (isXComponent(currentComponent)) {\n      xComponent = currentComponent;\n    }\n    currentComponent = currentComponent.$parent;\n  }\n  return xComponent;\n}\n"],"names":[],"mappings":"AAGA;;;;;;;AAOG;AACG,SAAU,wBAAwB,CACtC,SAA8C,EAAA;AAE9C,IAAA,OAAO,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC;AAC7C,CAAC;AAED;;;;;;;AAOG;AACG,SAAU,YAAY,CAAC,SAAkC,EAAA;AAC7D,IAAA,OAAO,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC;AAED;;;;;;AAMG;AACG,SAAU,iBAAiB,CAC/B,SAAyC,EAAA;AAEzC,IAAA,IAAI,UAA+C,CAAC;IACpD,IAAI,gBAAgB,GAAG,SAAS,CAAC;IACjC,OAAO,gBAAgB,IAAI,IAAI,EAAE;AAC/B,QAAA,IAAI,YAAY,CAAC,gBAAgB,CAAC,EAAE;YAClC,UAAU,GAAG,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAC7C,KAAA;AACD,IAAA,OAAO,UAAU,CAAC;AACpB;;;;"}

package/js/composables/{create-use-device.composable.js → create-use-device.js}

@@ -157,4 +157,4 @@ function detectTouchable() {
 }
 
 export { createUseDevice };
-//# sourceMappingURL=create-use-device.composable.js.map
+//# sourceMappingURL=create-use-device.js.map