@empathyco/x-components 7.2.1 → 7.2.3

package/js/components/suggestions/{base-suggestion.vue2.js → base-suggestion2.vue.js}

@@ -145,4 +145,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-suggestion.vue2.js.map
+//# sourceMappingURL=base-suggestion2.vue.js.map

package/js/components/suggestions/{base-suggestion.vue2.js.map → base-suggestion2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-suggestion.vue2.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## Examples\n\n### Basic usage\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 :query=\"query\" :suggestion=\"suggestion\" />\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n  facets: [\n    {\n      modelName: '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</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 :query=\"query\" :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion, query, filter }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\">{{ filter.label }}</span>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n}\n</script>\n```\n\n### Emitting custom events with suggestionSelectedEvents\n\nYou can emit additional custom events when a suggestion is selected by passing them in the `suggestionSelectedEvents` prop. For example, to emit a custom event called `CustomSuggestionEvent` with a payload:\n\n```vue live\n<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n  />\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n}\nconst suggestionSelectedEvents = {\n  CustomSuggestionEvent: { custom: 'payload' },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAgC;AACvC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,GAAG,CAAqB,IAAI,CAAA;AAEvC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CACjE;AAEA;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAI;AACjD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC;AAChD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAI;kBACjC,EAAC;YACL,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAW;aAChB;AACF,QAAA,CAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAU;YAC3B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAS;AAC5C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAO;AACvB,iBAAA,CAAA;AACH,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAe,IAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAC9D;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAK;AACzD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-suggestion2.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n  <button ref=\"el\" :class=\"dynamicCSSClasses\" @click=\"emitEvents\">\n    <!--\n      @slot Button content\n          @binding {Suggestion} suggestion - Suggestion data\n          @binding {String} query - The query that the suggestion belongs to\n          @binding {Filter} filter - Suggestion's filter\n      -->\n    <slot v-bind=\"{ query, suggestion, filter }\">\n      <Highlight class=\"x-suggestion__query\" :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\" class=\"x-suggestion__filter\">{{ filter.label }}</span>\n    </slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { QueryFeature } from '../../types'\nimport type { VueCSSClasses } from '../../utils/types'\nimport type { XEventsTypes } from '../../wiring/events.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { computed, defineComponent, ref } from 'vue'\nimport { use$x } from '../../composables/index'\nimport Highlight from '../highlight.vue'\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\nexport default defineComponent({\n  components: { Highlight },\n  props: {\n    /**\n     * The normalized query of the module using this component.\n     *\n     * @public\n     */\n    query: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The suggestion to render and use in the default slot.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n\n    /**\n     * The feature from which the events will be emitted.\n     *\n     * @public\n     */\n    //TODO: set to true when the suggestions components pass it.\n    feature: {\n      type: String as PropType<QueryFeature>,\n    },\n\n    /**\n     * The {@link XEvent} that will be emitted when selecting a suggestion.\n     *\n     * @public\n     */\n    suggestionSelectedEvents: {\n      type: Object as PropType<Partial<XEventsTypes>>,\n      required: true,\n    },\n\n    /**\n     * Indicates if the curated suggestion should be highlighted.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n    },\n  },\n\n  setup(props) {\n    const el = ref<HTMLElement | null>(null)\n\n    const $x = use$x()\n\n    /**\n     * Returns the suggestion filter object.\n     * It is a BooleanFilter because the label is needed.\n     * It returns only the first element because the facets and filters are being planned\n     * in the BaseSuggestions component.\n     *\n     * @returns The filter.\n     * @public\n     */\n    const filter = computed<BooleanFilter | undefined>(\n      () => props.suggestion.facets?.[0]?.filters[0] as BooleanFilter,\n    )\n\n    /**\n     * The event handler that will be triggered when clicking on a suggestion.\n     *\n     * @remarks\n     * UserAcceptedAQuery: suggestion.query\n     * UserSelectedASuggestion: suggestion\n     * UserClickedAFilter: suggestion.facets[0].filters[0]\n     * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n     *\n     * @returns The {@link XEvent} to emit.\n     * @public\n     */\n    const events = computed<Partial<XEventsTypes>>(() => {\n      const filterEvent: Partial<XEventsTypes> = filter.value\n        ? { UserClickedAFilter: filter.value }\n        : {}\n      return {\n        UserAcceptedAQuery: props.suggestion.query,\n        UserSelectedASuggestion: props.suggestion,\n        ...props.suggestionSelectedEvents,\n        ...filterEvent,\n      }\n    })\n\n    /**\n     * Emits the events when the button is clicked.\n     *\n     * @public\n     */\n    const emitEvents = (): void => {\n      forEach(events.value, (event, payload): void => {\n        $x.emit(event, payload, {\n          target: el.value!,\n          feature: props.feature,\n        })\n      })\n    }\n\n    /**\n     * Checks if the suggestion is curated and if it should be highlighted.\n     *\n     * @returns True if the suggestion is curated and should be highlighted.\n     *\n     * @internal\n     */\n    const shouldHighlightCurated = computed<boolean>(\n      () => props.highlightCurated && !!props.suggestion.isCurated,\n    )\n\n    /**\n     * Generates css classes dynamically.\n     *\n     * @remarks\n     * 'x-suggestion--matching added when the query should be matched.\n     *\n     * @returns The {@link VueCSSClasses} classes.\n     * @public\n     */\n    const dynamicCSSClasses = computed<VueCSSClasses>(() => ({\n      'x-suggestion--is-curated': shouldHighlightCurated.value,\n    }))\n\n    return {\n      el,\n      filter,\n      emitEvents,\n      dynamicCSSClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion query\n  data.\n- [`UserSelectedASuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is the suggestion data.\n- [`UserClickedAFilter`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button if the suggestion includes a filter. The\n  event payload is the suggestion filter.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n\n## Examples\n\n### Basic usage\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 :query=\"query\" :suggestion=\"suggestion\" />\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n  facets: [\n    {\n      modelName: '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</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 :query=\"query\" :suggestion=\"suggestion\">\n    <template #default=\"{ suggestion, query, filter }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n      <span v-if=\"filter\">{{ filter.label }}</span>\n    </template>\n  </BaseSuggestion>\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n}\n</script>\n```\n\n### Emitting custom events with suggestionSelectedEvents\n\nYou can emit additional custom events when a suggestion is selected by passing them in the `suggestionSelectedEvents` prop. For example, to emit a custom event called `CustomSuggestionEvent` with a payload:\n\n```vue live\n<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n  />\n</template>\n\n<script setup>\nimport { BaseSuggestion } from '@empathyco/x-components'\nconst query = 'st'\nconst suggestion = {\n  modelName: 'QuerySuggestion',\n  query: 'steak',\n}\nconst suggestionSelectedEvents = {\n  CustomSuggestionEvent: { custom: 'payload' },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,WAAW;AACzB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AAED;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;;AAEF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAgC;AACvC,SAAA;AAED;;;;AAIE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,GAAG,CAAqB,IAAI,CAAA;AAEvC,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB;;;;;;;;AAQE;QACF,MAAM,SAAS,QAAQ,CACrB,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAkB,CACjE;AAEA;;;;;;;;;;;AAWE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,MAAI;AACjD,YAAA,MAAM,WAAW,GAA0B,MAAM,CAAC;AAChD,kBAAE,EAAE,kBAAkB,EAAE,MAAM,CAAC,KAAI;kBACjC,EAAC;YACL,OAAO;AACL,gBAAA,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;gBAC1C,uBAAuB,EAAE,KAAK,CAAC,UAAU;gBACzC,GAAG,KAAK,CAAC,wBAAwB;AACjC,gBAAA,GAAG,WAAW;aAChB;AACF,QAAA,CAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAU;YAC3B,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,KAAS;AAC5C,gBAAA,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;oBACtB,MAAM,EAAE,EAAE,CAAC,KAAM;oBACjB,OAAO,EAAE,KAAK,CAAC,OAAO;AACvB,iBAAA,CAAA;AACH,YAAA,CAAC,CAAA;AACH,QAAA,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAe,IAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,SAAS,CAC9D;AAEA;;;;;;;;AAQE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAgB,OAAO;YACvD,0BAA0B,EAAE,sBAAsB,CAAC,KAAK;AACzD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,EAAE;YACF,MAAM;YACN,UAAU;YACV,iBAAiB;SACnB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './base-suggestions.vue2.js';
+import _sfc_main from './base-suggestions2.vue.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createCommentVNode } from 'vue';
-import './base-suggestions.vue3.js';
+import './base-suggestions3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/suggestions/{base-suggestions.vue2.js → base-suggestions2.vue.js}

@@ -124,4 +124,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-suggestions.vue2.js.map
+//# sourceMappingURL=base-suggestions2.vue.js.map

package/js/components/suggestions/{base-suggestions.vue2.js.map → base-suggestions2.vue.js.map}

@@ -1 +1 @@
-{"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\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\">\n    <template #default=\"{ suggestion }\">\n      <button @click=\"emitSuggestionSelected($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseSuggestions } from '@empathyco/x-components'\nimport { use$x } from '../../composables'\n\nconst x = use$x()\nconst suggestions = ref([\n  {\n    query: 'Chips',\n    facets: [],\n    key: 'chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    query: 'Puzzle',\n    facets: [],\n    key: 'puzzle',\n    totalResults: 5,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n])\nfunction emitSuggestionSelected(event, suggestion) {\n  x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n  x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n}\n</script>\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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst suggestions = [\n  {\n    facets: [],\n    key: 'chips',\n    query: 'Chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'puzzle',\n    query: 'Puzzle',\n    totalResults: 5,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'lego',\n    query: 'Lego',\n    totalResults: 8,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'car',\n    query: 'Car',\n    totalResults: 3,\n    results: [],\n    modelName: 'PopularSearch',\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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst 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</script>\n```\n\nIn this example, the `suggestionItemClass` 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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst suggestions = [\n  {\n    facets: [],\n    key: 'chips',\n    query: 'Chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA2BA;;;;;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,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACxB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;;AAKE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,mBAAmB,EAAE,MAAM;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;;AAOE;AACF,QAAA,MAAM,uBAAsB,GAAI,CAAC,UAAsB,KAAiB;YACtE,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,CAAA,EAAG,CAAC;AAC1C,aAAA,CAAC,CAAC,CACL,IAAK,EAAC;AAEV,QAAA,CAAA;AAEA;;;;;;AAME;QACF,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MACnC,KAAK,CAAC;AACH,aAAA,OAAO,CAAC,cACP,KAAK,CAAC,cAAc,UAAU,CAAC,MAAM,EAAE;cACnC,KAAK,CAAC;AACN,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,EAAE,GAAG,uBAAuB,CAAC,UAAU,CAAC;AACxE,kBAAE,uBAAuB,CAAC,UAAU;cACpC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG;aAElC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CACrC;AAEA;;;;;;AAME;QACF,MAAM,cAAc,CAAC,KAAY,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;AAErF;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,CAAC,MAAe,KAAK,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;AAE1E;;;;;AAKE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,cAC5B,YAAY,CAAC,UAAU,CAAC,MAAM;cAC1B,UAAU,CAAC;AACb,cAAE,CAAA,EAAG,UAAU,CAAC,KAAK,CAAA,IAAA,EAAO,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA,CAAE,CAChE,CACH;AAEA;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,CAAC,UAAsB,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;AAEzF,QAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,mBAAkB,EAAE;IACrE,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"base-suggestions2.vue.js","sources":["../../../../src/components/suggestions/base-suggestions.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"suggestions.length\" tag=\"ul\" class=\"x-suggestions\">\n    <li\n      v-for=\"(suggestion, index) in suggestionsToRender\"\n      :key=\"suggestionsKeys[index]\"\n      class=\"x-suggestions__item\"\n      :class=\"suggestionItemClass\"\n      data-test=\"suggestion-item\"\n    >\n      <!--\n        @slot (Required) List item content\n            @binding {Suggestion} suggestion - Suggestion data\n            @binding {number} index - Suggestion index\n            @binding {Filter | undefined} filter - Suggestion's filter\n       -->\n      <slot v-bind=\"{ suggestion, index, filter: getSuggestionFilter(suggestion) }\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet, Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { AnimationProp } from '../../types'\nimport { isArrayEmpty } from '../../utils/array'\n\n/**\n * Paints a list of suggestions passed in by prop. Requires a component for a single suggestion\n * in the default slot for working.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'BaseSuggestions',\n  props: {\n    /**\n     * The list of suggestions to render.\n     *\n     * @public\n     */\n    suggestions: {\n      type: Array as PropType<Suggestion[]>,\n      required: true,\n    },\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of suggestions to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n    /**\n     * Boolean value to indicate if the facets should be rendered.\n     *\n     * @public\n     */\n    showFacets: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without\n     * filter should be rendered.\n     *\n     * @public\n     */\n    showPlainSuggestion: {\n      type: Boolean,\n      default: false,\n    },\n    /** Class inherited by content element. */\n    suggestionItemClass: String,\n  },\n  setup(props) {\n    /**\n     * Creates a suggestion for each one of the filter inside each facet.\n     *\n     * @param suggestion - Suggestion to expand.\n     * @returns A list of suggestions, each one with a single filter.\n     *\n     * @internal\n     */\n    const expandSuggestionFilters = (suggestion: Suggestion): Suggestion[] => {\n      return (\n        suggestion.facets?.flatMap(facet =>\n          facet.filters.map(filter => ({\n            ...suggestion,\n            facets: [{ ...facet, filters: [filter] }],\n          })),\n        ) ?? []\n      )\n    }\n\n    /**\n     * Creates a list of suggestions to render based on the configuration of this component.\n     *\n     * @returns - The list of suggestions to be rendered by this component.\n     *\n     * @internal\n     */\n    const suggestionsToRender = computed(() =>\n      props.suggestions\n        .flatMap(suggestion =>\n          props.showFacets && suggestion.facets?.length\n            ? props.showPlainSuggestion\n              ? [{ ...suggestion, facets: [] }, ...expandSuggestionFilters(suggestion)]\n              : expandSuggestionFilters(suggestion)\n            : { ...suggestion, facets: [] },\n        )\n        .slice(0, props.maxItemsToRender),\n    )\n\n    /**\n     * Generates a string from the given facet.\n     *\n     * @param facet - The facet to reduce to a string.\n     * @returns - A string representing the facet.\n     * @internal\n     */\n    const getFacetKey = (facet: Facet) => facet.filters.map(filter => filter.id).join('&')\n\n    /**\n     * Generates a string from the given facets.\n     *\n     * @param facets - The list of facets to reduce to a string.\n     * @returns - A string representing the list of facets.\n     * @internal\n     */\n    const getFacetsKey = (facets: Facet[]) => facets.map(getFacetKey).join('&')\n\n    /**\n     * An array with the unique keys for each suggestion. Required by the `v-for` loop.\n     *\n     * @returns An array with the unique keys of the suggestions.\n     * @internal\n     */\n    const suggestionsKeys = computed(() =>\n      suggestionsToRender.value.map(suggestion =>\n        isArrayEmpty(suggestion.facets)\n          ? suggestion.query\n          : `${suggestion.query}-in-${getFacetsKey(suggestion.facets)}`,\n      ),\n    )\n\n    /**\n     * Returns the filter contained by the suggestion.\n     *\n     * @param suggestion - Suggestion containing the filter.\n     * @returns The suggestion filter.\n     * @internal\n     */\n    const getSuggestionFilter = (suggestion: Suggestion) => suggestion.facets?.[0]?.filters[0]\n\n    return { suggestionsToRender, suggestionsKeys, getSuggestionFilter }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-suggestions {\n  list-style-type: none;\n}\n\n.x-suggestions,\n.x-suggestions__item {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nFor this component to work, you will need to set a list of suggestions as prop, and also to\nimplement the component for single suggestion, which handles the click event. In the following\nexample, the suggestions are retrieved from a property called `suggestions`, and the implementation\nof the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method\nwhen clicked.\n\n```vue\n<template>\n  <BaseSuggestions :suggestions=\"suggestions\">\n    <template #default=\"{ suggestion }\">\n      <button @click=\"emitSuggestionSelected($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { BaseSuggestions } from '@empathyco/x-components'\nimport { use$x } from '../../composables'\n\nconst x = use$x()\nconst suggestions = ref([\n  {\n    query: 'Chips',\n    facets: [],\n    key: 'chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    query: 'Puzzle',\n    facets: [],\n    key: 'puzzle',\n    totalResults: 5,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n])\nfunction emitSuggestionSelected(event, suggestion) {\n  x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })\n  x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })\n}\n</script>\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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst suggestions = [\n  {\n    facets: [],\n    key: 'chips',\n    query: 'Chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'puzzle',\n    query: 'Puzzle',\n    totalResults: 5,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'lego',\n    query: 'Lego',\n    totalResults: 8,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n  {\n    facets: [],\n    key: 'car',\n    query: 'Car',\n    totalResults: 3,\n    results: [],\n    modelName: 'PopularSearch',\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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst 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</script>\n```\n\nIn this example, the `suggestionItemClass` 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 setup>\nimport { BaseSuggestions } from '@empathyco/x-components'\nconst suggestions = [\n  {\n    facets: [],\n    key: 'chips',\n    query: 'Chips',\n    totalResults: 10,\n    results: [],\n    modelName: 'PopularSearch',\n  },\n]\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AA2BA;;;;;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,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACxB;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD;;;;;AAKE;AACF,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,mBAAmB,EAAE,MAAM;AAC5B,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;;AAOE;AACF,QAAA,MAAM,uBAAsB,GAAI,CAAC,UAAsB,KAAiB;YACtE,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,CAAA,EAAG,CAAC;AAC1C,aAAA,CAAC,CAAC,CACL,IAAK,EAAC;AAEV,QAAA,CAAA;AAEA;;;;;;AAME;QACF,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MACnC,KAAK,CAAC;AACH,aAAA,OAAO,CAAC,cACP,KAAK,CAAC,cAAc,UAAU,CAAC,MAAM,EAAE;cACnC,KAAK,CAAC;AACN,kBAAE,CAAC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG,EAAE,GAAG,uBAAuB,CAAC,UAAU,CAAC;AACxE,kBAAE,uBAAuB,CAAC,UAAU;cACpC,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,EAAC,EAAG;aAElC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CACrC;AAEA;;;;;;AAME;QACF,MAAM,cAAc,CAAC,KAAY,KAAK,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;AAErF;;;;;;AAME;AACF,QAAA,MAAM,YAAW,GAAI,CAAC,MAAe,KAAK,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA;AAE1E;;;;;AAKE;QACF,MAAM,eAAc,GAAI,QAAQ,CAAC,MAC/B,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,cAC5B,YAAY,CAAC,UAAU,CAAC,MAAM;cAC1B,UAAU,CAAC;AACb,cAAE,CAAA,EAAG,UAAU,CAAC,KAAK,CAAA,IAAA,EAAO,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA,CAAE,CAChE,CACH;AAEA;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,CAAC,UAAsB,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;AAEzF,QAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,mBAAkB,EAAE;IACrE,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/suggestions/{base-suggestions.vue3.js → base-suggestions3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-suggestions[data-v-60a55deb]{list-style-type:none}.x-suggestions[d
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=base-suggestions.vue3.js.map
+//# sourceMappingURL=base-suggestions3.vue.js.map

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

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

package/js/index.js

@@ -1,9 +1,9 @@
 export { default as AnimateClipPath } from './components/animations/animate-clip-path.vue.js';
-import './components/animations/animate-clip-path.vue2.js';
+import './components/animations/animate-clip-path2.vue.js';
 export { default as AnimateScale } from './components/animations/animate-scale.vue.js';
-import './components/animations/animate-scale.vue2.js';
+import './components/animations/animate-scale2.vue.js';
 export { default as AnimateTranslate } from './components/animations/animate-translate.vue.js';
-import './components/animations/animate-translate.vue2.js';
+import './components/animations/animate-translate2.vue.js';
 export { default as AnimateWidth } from './components/animations/animate-width.vue.js';
 export { default as ChangeHeight } from './components/animations/change-height.vue.js';
 export { default as CollapseHeight } from './components/animations/collapse-height.vue.js';

package/js/x-modules/ai/components/ai-carousel.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './ai-carousel.vue2.js';
+import _sfc_main from './ai-carousel2.vue.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
-import './ai-carousel.vue3.js';
+import './ai-carousel3.vue.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {

package/js/x-modules/ai/components/{ai-carousel.vue2.js → ai-carousel2.vue.js}

@@ -1,95 +1,95 @@
 import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, watch, onMounted } from 'vue';
-import '../../../components/animations/animate-clip-path.vue2.js';
-import '../../../components/animations/animate-scale.vue2.js';
-import '../../../components/animations/animate-translate.vue2.js';
-import '../../../components/animations/animate-width.vue2.js';
-import '../../../components/animations/animate-width.vue3.js';
+import '../../../components/animations/animate-clip-path2.vue.js';
+import '../../../components/animations/animate-scale2.vue.js';
+import '../../../components/animations/animate-translate2.vue.js';
+import '../../../components/animations/animate-width2.vue.js';
+import '../../../components/animations/animate-width3.vue.js';
 import ChangeHeight from '../../../components/animations/change-height.vue.js';
 import CollapseHeight from '../../../components/animations/collapse-height.vue.js';
-import '../../../components/animations/collapse-width.vue2.js';
-import '../../../components/animations/collapse-width.vue3.js';
-import '../../../components/animations/cross-fade.vue2.js';
-import '../../../components/animations/cross-fade.vue3.js';
-import '../../../components/animations/fade-and-slide.vue2.js';
-import '../../../components/animations/fade-and-slide.vue3.js';
-import '../../../components/animations/fade.vue2.js';
-import '../../../components/animations/fade.vue3.js';
+import '../../../components/animations/collapse-width2.vue.js';
+import '../../../components/animations/collapse-width3.vue.js';
+import '../../../components/animations/cross-fade2.vue.js';
+import '../../../components/animations/cross-fade3.vue.js';
+import '../../../components/animations/fade-and-slide2.vue.js';
+import '../../../components/animations/fade-and-slide3.vue.js';
+import '../../../components/animations/fade2.vue.js';
+import '../../../components/animations/fade3.vue.js';
 import '../../../components/animations/no-animation.vue.js';
-import '../../../components/animations/staggered-fade-and-slide.vue2.js';
-import '../../../components/animations/staggered-fade-and-slide.vue3.js';
-import '../../../components/auto-progress-bar.vue2.js';
-import '../../../components/auto-progress-bar.vue3.js';
-import '../../../components/base-dropdown.vue2.js';
-import '../../../components/base-dropdown.vue3.js';
+import '../../../components/animations/staggered-fade-and-slide2.vue.js';
+import '../../../components/animations/staggered-fade-and-slide3.vue.js';
+import '../../../components/auto-progress-bar2.vue.js';
+import '../../../components/auto-progress-bar3.vue.js';
+import '../../../components/base-dropdown2.vue.js';
+import '../../../components/base-dropdown3.vue.js';
 import BaseEventButton from '../../../components/base-event-button.vue.js';
-import '../../../components/base-grid.vue2.js';
-import '../../../components/base-grid.vue3.js';
-import '../../../components/base-keyboard-navigation.vue2.js';
-import '../../../components/base-rating.vue2.js';
-import '../../../components/base-rating.vue3.js';
-import '../../../components/base-slider.vue2.js';
-import '../../../components/base-slider.vue3.js';
-import '../../../components/base-switch.vue2.js';
-import '../../../components/base-switch.vue3.js';
-import '../../../components/base-teleport.vue2.js';
-import '../../../components/base-variable-column-grid.vue2.js';
-import '../../../components/column-picker/base-column-picker-dropdown.vue2.js';
-import '../../../components/column-picker/base-column-picker-list.vue2.js';
-import '../../../components/currency/base-currency.vue2.js';
+import '../../../components/base-grid2.vue.js';
+import '../../../components/base-grid3.vue.js';
+import '../../../components/base-keyboard-navigation2.vue.js';
+import '../../../components/base-rating2.vue.js';
+import '../../../components/base-rating3.vue.js';
+import '../../../components/base-slider2.vue.js';
+import '../../../components/base-slider3.vue.js';
+import '../../../components/base-switch2.vue.js';
+import '../../../components/base-switch3.vue.js';
+import '../../../components/base-teleport2.vue.js';
+import '../../../components/base-variable-column-grid2.vue.js';
+import '../../../components/column-picker/base-column-picker-dropdown2.vue.js';
+import '../../../components/column-picker/base-column-picker-list2.vue.js';
+import '../../../components/currency/base-currency2.vue.js';
 import _sfc_main$2 from '../../../components/display-click-provider.vue.js';
 import _sfc_main$1 from '../../../components/display-emitter.vue.js';
 import '../../../components/filters/labels/base-price-filter-label.vue.js';
-import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
+import '../../../components/filters/labels/base-rating-filter-label2.vue.js';
 import '../../../components/global-x-bus.vue.js';
-import '../../../components/highlight.vue2.js';
+import '../../../components/highlight2.vue.js';
 import AIStarIcon from '../../../components/icons/ai-star.vue.js';
 import ArrowRightIcon from '../../../components/icons/arrow-right.vue.js';
 import ChevronDownIcon from '../../../components/icons/chevron-down.vue.js';
-import '../../../components/items-list.vue2.js';
+import '../../../components/items-list2.vue.js';
 import '../../../components/location-provider.vue.js';
-import '../../../components/modals/base-events-modal-close.vue2.js';
-import '../../../components/modals/base-events-modal-open.vue2.js';
-import '../../../components/modals/base-events-modal.vue2.js';
-import '../../../components/modals/base-id-modal-close.vue2.js';
-import '../../../components/modals/base-id-modal-open.vue2.js';
-import '../../../components/modals/base-id-modal.vue2.js';
-import '../../../components/modals/base-modal.vue2.js';
-import '../../../components/modals/base-modal.vue3.js';
-import '../../../components/modals/close-main-modal.vue2.js';
-import '../../../components/modals/main-modal.vue2.js';
-import '../../../components/modals/open-main-modal.vue2.js';
-import '../../../components/page-loader-button.vue2.js';
-import '../../../components/page-loader-button.vue3.js';
-import '../../../components/page-selector.vue2.js';
-import '../../../components/page-selector.vue3.js';
-import '../../../components/panels/base-header-toggle-panel.vue2.js';
-import '../../../components/panels/base-header-toggle-panel.vue3.js';
-import '../../../components/panels/base-id-toggle-panel-button.vue2.js';
-import '../../../components/panels/base-id-toggle-panel.vue2.js';
-import '../../../components/panels/base-tabs-panel.vue2.js';
-import '../../../components/panels/base-tabs-panel.vue3.js';
-import '../../../components/panels/base-toggle-panel.vue2.js';
-import '../../../components/result/base-result-add-to-cart.vue2.js';
-import '../../../components/result/base-result-current-price.vue2.js';
-import '../../../components/result/base-result-image.vue2.js';
-import '../../../components/result/base-result-image.vue3.js';
-import '../../../components/result/base-result-link.vue2.js';
-import '../../../components/result/base-result-link.vue3.js';
-import '../../../components/result/base-result-previous-price.vue2.js';
-import '../../../components/result/base-result-rating.vue2.js';
-import '../../../components/result/base-result-rating.vue3.js';
-import '../../../components/result/result-variant-selector.vue2.js';
-import '../../../components/result/result-variant-selector.vue3.js';
+import '../../../components/modals/base-events-modal-close2.vue.js';
+import '../../../components/modals/base-events-modal-open2.vue.js';
+import '../../../components/modals/base-events-modal2.vue.js';
+import '../../../components/modals/base-id-modal-close2.vue.js';
+import '../../../components/modals/base-id-modal-open2.vue.js';
+import '../../../components/modals/base-id-modal2.vue.js';
+import '../../../components/modals/base-modal2.vue.js';
+import '../../../components/modals/base-modal3.vue.js';
+import '../../../components/modals/close-main-modal2.vue.js';
+import '../../../components/modals/main-modal2.vue.js';
+import '../../../components/modals/open-main-modal2.vue.js';
+import '../../../components/page-loader-button2.vue.js';
+import '../../../components/page-loader-button3.vue.js';
+import '../../../components/page-selector2.vue.js';
+import '../../../components/page-selector3.vue.js';
+import '../../../components/panels/base-header-toggle-panel2.vue.js';
+import '../../../components/panels/base-header-toggle-panel3.vue.js';
+import '../../../components/panels/base-id-toggle-panel-button2.vue.js';
+import '../../../components/panels/base-id-toggle-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel3.vue.js';
+import '../../../components/panels/base-toggle-panel2.vue.js';
+import '../../../components/result/base-result-add-to-cart2.vue.js';
+import '../../../components/result/base-result-current-price2.vue.js';
+import '../../../components/result/base-result-image2.vue.js';
+import '../../../components/result/base-result-image3.vue.js';
+import '../../../components/result/base-result-link2.vue.js';
+import '../../../components/result/base-result-link3.vue.js';
+import '../../../components/result/base-result-previous-price2.vue.js';
+import '../../../components/result/base-result-rating2.vue.js';
+import '../../../components/result/base-result-rating3.vue.js';
+import '../../../components/result/result-variant-selector2.vue.js';
+import '../../../components/result/result-variant-selector3.vue.js';
 import '../../../components/result/result-variants-provider.vue.js';
-import '../../../components/scroll/base-scroll.vue2.js';
+import '../../../components/scroll/base-scroll2.vue.js';
 import '@empathyco/x-utils';
 import { use$x } from '../../../composables/use-_x.js';
 import SlidingPanel from '../../../components/sliding-panel.vue.js';
-import '../../../components/snippet-callbacks.vue2.js';
-import '../../../components/suggestions/base-suggestion.vue2.js';
-import '../../../components/suggestions/base-suggestions.vue2.js';
-import '../../../components/suggestions/base-suggestions.vue3.js';
+import '../../../components/snippet-callbacks2.vue.js';
+import '../../../components/suggestions/base-suggestion2.vue.js';
+import '../../../components/suggestions/base-suggestions2.vue.js';
+import '../../../components/suggestions/base-suggestions3.vue.js';
 import '../../../composables/create-use-device.js';
 import 'vuex';
 import '../../../plugins/x-bus.js';
@@ -189,4 +189,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=ai-carousel.vue2.js.map
+//# sourceMappingURL=ai-carousel2.vue.js.map

package/js/x-modules/ai/components/{ai-carousel.vue2.js.map → ai-carousel2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n      <DisplayEmitter\n        :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n        :event-metadata=\"{\n          feature: 'ai_carousel',\n          displayOriginalQuery: query || 'ai-carousel-without-query',\n          replaceable: false,\n        }\"\n        data-test=\"ai-carousel-display-emitter\"\n      >\n        <span\n          class=\"x-ai-carousel-title\"\n          :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n          data-test=\"ai-carousel-title\"\n          @click=\"toggleTitleExpansion\"\n        >\n          <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n          <ChangeHeight>\n            <span\n              ref=\"titleRef\"\n              class=\"x-ai-carousel-title-text\"\n              :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n            >\n              {{ title }}\n            </span>\n          </ChangeHeight>\n          <button\n            v-if=\"isTitleOverflowing\"\n            class=\"x-ai-carousel-title-button\"\n            data-test=\"ai-carousel-title-button\"\n            :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n          >\n            <ChevronDownIcon\n              class=\"x-ai-carousel-title-button-icon\"\n              :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n            />\n          </button>\n        </span>\n      </DisplayEmitter>\n\n      <AiGroupedCarousel v-if=\"group\">\n        <template #sliding-panel-addons=\"{ arrivedState }\">\n          <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n        </template>\n        <template #sliding-panel-left-button>\n          <slot name=\"sliding-panels-left-button\" />\n        </template>\n        <template #sliding-panel-right-button>\n          <slot name=\"sliding-panels-right-button\" />\n        </template>\n        <template #result=\"{ result }\">\n          <slot name=\"result\" :result=\"result\" />\n        </template>\n      </AiGroupedCarousel>\n\n      <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n        <DisplayEmitter\n          v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n          :key=\"suggestionQuery\"\n          :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n          :event-metadata=\"{\n            feature: 'ai_carousel',\n            displayOriginalQuery: query || 'ai-carousel-without-query',\n            replaceable: false,\n          }\"\n          data-test=\"ai-carousel-query-display-emitter\"\n        >\n          <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n            <BaseEventButton\n              class=\"x-ai-carousel-suggestion-query-btn\"\n              :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n            >\n              {{ suggestionQuery }}\n              <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n            </BaseEventButton>\n\n            <DisplayClickProvider\n              :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n              :tooling-add2-cart-tagging=\"\n                tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n              \"\n              result-feature=\"ai_carousel\"\n            >\n              <slot name=\"sliding-panel\" :results=\"queriesResults\">\n                <SlidingPanel\n                  :class=\"slidingPanelClasses\"\n                  :scroll-container-class=\"slidingPanelContainerClasses\"\n                  :button-class=\"slidingPanelButtonsClasses\"\n                  :reset-on-content-change=\"false\"\n                >\n                  <template #sliding-panel-addons=\"{ arrivedState }\">\n                    <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n                  </template>\n                  <template #sliding-panel-left-button>\n                    <slot name=\"sliding-panels-left-button\" />\n                  </template>\n                  <template #sliding-panel-right-button>\n                    <slot name=\"sliding-panels-right-button\" />\n                  </template>\n                  <ul class=\"x-ai-carousel-suggestion-results\">\n                    <li\n                      v-for=\"result in queriesResults\"\n                      :key=\"result.id\"\n                      data-test=\"ai-carousel-suggestion-result\"\n                    >\n                      <!-- @slot (required) result card -->\n                      <slot name=\"result\" :result=\"result\" />\n                    </li>\n                  </ul>\n                </SlidingPanel>\n              </slot>\n            </DisplayClickProvider>\n          </div>\n        </DisplayEmitter>\n        <slot name=\"suggestions-extra-content\" />\n      </div>\n\n      <slot name=\"extra-content\" />\n      <slot name=\"cta-button\" />\n    </div>\n  </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  DisplayEmitter,\n  SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n  xModule: aiXModule.name,\n  components: {\n    AIStarIcon,\n    AiGroupedCarousel,\n    ArrowRightIcon,\n    BaseEventButton,\n    ChangeHeight,\n    ChevronDownIcon,\n    CollapseHeight,\n    DisplayClickProvider,\n    DisplayEmitter,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n    /* Controls whether the carousel should group results or display N carousels per N queries. */\n    group: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query, suggestionsSearch, queries, tagging } = useState('ai')\n    const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n    const titleRef = ref<HTMLElement | null>(null)\n    const titleExpanded = ref(false)\n    const isTitleOverflowing = ref(false)\n\n    /**\n     * Checks if the title is overflowing and updates the state.\n     */\n    function updateTitleOverflow() {\n      if (titleExpanded.value) {\n        return\n      }\n      if (titleRef.value) {\n        isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n      }\n    }\n\n    /**\n     * Toggles the title expanded state if it is overflowing.\n     */\n    function toggleTitleExpansion() {\n      if (isTitleOverflowing.value) {\n        titleExpanded.value = !titleExpanded.value\n      }\n    }\n\n    const title = computed(() => {\n      if (!props.title) {\n        const queriesList = new Intl.ListFormat('en', {\n          style: 'long',\n          type: 'conjunction',\n        }).format(queries.value.map(({ query }) => query))\n        return `Searching for ${queriesList}`\n      }\n      return props.title\n    })\n\n    watch(queries, () => {\n      if (queries.value.length > 0) {\n        $x.emit('AiSuggestionsSearchRequestUpdated')\n      }\n    })\n\n    onMounted(() => {\n      $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n    })\n\n    useResizeObserver(titleRef, updateTitleOverflow)\n\n    return {\n      emptyTaggingRequest,\n      isTitleOverflowing,\n      queries,\n      query,\n      suggestionsSearch,\n      tagging,\n      title,\n      titleExpanded,\n      titleRef,\n      toggleTitleExpansion,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-carousel {\n  --color: var(--x-ai-carousel-color, #bbc9cf);\n  --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n  padding: 8px 0;\n  position: relative;\n  border-radius: 1.5rem;\n  background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n  display: flex;\n  font-size: 12px;\n  gap: 8px;\n  align-items: flex-start;\n  margin: 0 14px 8px;\n  cursor: pointer;\n}\n.x-ai-carousel-title-text {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n  white-space: normal;\n}\n.x-ai-carousel-title-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  color: var(--color);\n  flex-shrink: 0;\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color);\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n  transform: rotate(180deg);\n}\n\n.x-ai-carousel-suggestions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.x-ai-carousel-suggestion-query-btn {\n  border-color: transparent;\n  background-color: transparent;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  font-weight: 700;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n}\n\n.x-ai-carousel-suggestion-results {\n  display: flex;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}
+{"version":3,"file":"ai-carousel2.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-carousel.vue"],"sourcesContent":["<template>\n  <CollapseHeight>\n    <div v-if=\"suggestionsSearch.length\" class=\"x-ai-carousel\">\n      <DisplayEmitter\n        :payload=\"tagging?.toolingDisplay ?? emptyTaggingRequest\"\n        :event-metadata=\"{\n          feature: 'ai_carousel',\n          displayOriginalQuery: query || 'ai-carousel-without-query',\n          replaceable: false,\n        }\"\n        data-test=\"ai-carousel-display-emitter\"\n      >\n        <span\n          class=\"x-ai-carousel-title\"\n          :class=\"{ 'x-ai-carousel-title--expanded': titleExpanded }\"\n          data-test=\"ai-carousel-title\"\n          @click=\"toggleTitleExpansion\"\n        >\n          <AIStarIcon class=\"x-ai-carousel-title-icon\" />\n          <ChangeHeight>\n            <span\n              ref=\"titleRef\"\n              class=\"x-ai-carousel-title-text\"\n              :class=\"{ 'x-ai-carousel-title-text--expanded': titleExpanded }\"\n            >\n              {{ title }}\n            </span>\n          </ChangeHeight>\n          <button\n            v-if=\"isTitleOverflowing\"\n            class=\"x-ai-carousel-title-button\"\n            data-test=\"ai-carousel-title-button\"\n            :aria-label=\"titleExpanded ? 'Collapse' : 'Expand'\"\n          >\n            <ChevronDownIcon\n              class=\"x-ai-carousel-title-button-icon\"\n              :class=\"{ 'x-ai-carousel-title-button-icon--expanded': titleExpanded }\"\n            />\n          </button>\n        </span>\n      </DisplayEmitter>\n\n      <AiGroupedCarousel v-if=\"group\">\n        <template #sliding-panel-addons=\"{ arrivedState }\">\n          <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n        </template>\n        <template #sliding-panel-left-button>\n          <slot name=\"sliding-panels-left-button\" />\n        </template>\n        <template #sliding-panel-right-button>\n          <slot name=\"sliding-panels-right-button\" />\n        </template>\n        <template #result=\"{ result }\">\n          <slot name=\"result\" :result=\"result\" />\n        </template>\n      </AiGroupedCarousel>\n\n      <div v-else class=\"x-ai-carousel-suggestions\" data-test=\"ai-carousel-suggestions-container\">\n        <DisplayEmitter\n          v-for=\"{ query: suggestionQuery, results: queriesResults } in suggestionsSearch\"\n          :key=\"suggestionQuery\"\n          :payload=\"tagging?.searchQueries[suggestionQuery].toolingDisplay ?? emptyTaggingRequest\"\n          :event-metadata=\"{\n            feature: 'ai_carousel',\n            displayOriginalQuery: query || 'ai-carousel-without-query',\n            replaceable: false,\n          }\"\n          data-test=\"ai-carousel-query-display-emitter\"\n        >\n          <div class=\"x-ai-carousel-suggestion\" data-test=\"ai-carousel-suggestion\">\n            <BaseEventButton\n              class=\"x-ai-carousel-suggestion-query-btn\"\n              :events=\"{ UserAcceptedAQuery: suggestionQuery }\"\n            >\n              {{ suggestionQuery }}\n              <ArrowRightIcon class=\"x-ai-carousel-suggestion-query-btn-icon\" />\n            </BaseEventButton>\n\n            <DisplayClickProvider\n              :tooling-display-tagging=\"tagging?.searchQueries[suggestionQuery].toolingDisplayClick\"\n              :tooling-add2-cart-tagging=\"\n                tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart\n              \"\n              result-feature=\"ai_carousel\"\n            >\n              <slot name=\"sliding-panel\" :results=\"queriesResults\">\n                <SlidingPanel\n                  :class=\"slidingPanelClasses\"\n                  :scroll-container-class=\"slidingPanelContainerClasses\"\n                  :button-class=\"slidingPanelButtonsClasses\"\n                  :reset-on-content-change=\"false\"\n                >\n                  <template #sliding-panel-addons=\"{ arrivedState }\">\n                    <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n                  </template>\n                  <template #sliding-panel-left-button>\n                    <slot name=\"sliding-panels-left-button\" />\n                  </template>\n                  <template #sliding-panel-right-button>\n                    <slot name=\"sliding-panels-right-button\" />\n                  </template>\n                  <ul class=\"x-ai-carousel-suggestion-results\">\n                    <li\n                      v-for=\"result in queriesResults\"\n                      :key=\"result.id\"\n                      data-test=\"ai-carousel-suggestion-result\"\n                    >\n                      <!-- @slot (required) result card -->\n                      <slot name=\"result\" :result=\"result\" />\n                    </li>\n                  </ul>\n                </SlidingPanel>\n              </slot>\n            </DisplayClickProvider>\n          </div>\n        </DisplayEmitter>\n        <slot name=\"suggestions-extra-content\" />\n      </div>\n\n      <slot name=\"extra-content\" />\n      <slot name=\"cta-button\" />\n    </div>\n  </CollapseHeight>\n</template>\n\n<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, defineComponent, onMounted, ref, watch } from 'vue'\nimport {\n  AIStarIcon,\n  ArrowRightIcon,\n  BaseEventButton,\n  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  DisplayEmitter,\n  SlidingPanel,\n} from '../../../components'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\nimport AiGroupedCarousel from './ai-grouped-carousel.vue'\n\nexport default defineComponent({\n  xModule: aiXModule.name,\n  components: {\n    AIStarIcon,\n    AiGroupedCarousel,\n    ArrowRightIcon,\n    BaseEventButton,\n    ChangeHeight,\n    ChevronDownIcon,\n    CollapseHeight,\n    DisplayClickProvider,\n    DisplayEmitter,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n    /* Controls whether the carousel should group results or display N carousels per N queries. */\n    group: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query, suggestionsSearch, queries, tagging } = useState('ai')\n    const emptyTaggingRequest: TaggingRequest = { url: '', params: {} }\n\n    const titleRef = ref<HTMLElement | null>(null)\n    const titleExpanded = ref(false)\n    const isTitleOverflowing = ref(false)\n\n    /**\n     * Checks if the title is overflowing and updates the state.\n     */\n    function updateTitleOverflow() {\n      if (titleExpanded.value) {\n        return\n      }\n      if (titleRef.value) {\n        isTitleOverflowing.value = titleRef.value.scrollWidth > titleRef.value.clientWidth\n      }\n    }\n\n    /**\n     * Toggles the title expanded state if it is overflowing.\n     */\n    function toggleTitleExpansion() {\n      if (isTitleOverflowing.value) {\n        titleExpanded.value = !titleExpanded.value\n      }\n    }\n\n    const title = computed(() => {\n      if (!props.title) {\n        const queriesList = new Intl.ListFormat('en', {\n          style: 'long',\n          type: 'conjunction',\n        }).format(queries.value.map(({ query }) => query))\n        return `Searching for ${queriesList}`\n      }\n      return props.title\n    })\n\n    watch(queries, () => {\n      if (queries.value.length > 0) {\n        $x.emit('AiSuggestionsSearchRequestUpdated')\n      }\n    })\n\n    onMounted(() => {\n      $x.emit('AiComponentMounted', undefined, { feature: 'ai_carousel' })\n    })\n\n    useResizeObserver(titleRef, updateTitleOverflow)\n\n    return {\n      emptyTaggingRequest,\n      isTitleOverflowing,\n      queries,\n      query,\n      suggestionsSearch,\n      tagging,\n      title,\n      titleExpanded,\n      titleRef,\n      toggleTitleExpansion,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-ai-carousel {\n  --color: var(--x-ai-carousel-color, #bbc9cf);\n  --color-lighter: var(--x-ai-carousel-color-lighter, color-mix(in srgb, var(--color) 25%, white));\n\n  padding: 8px 0;\n  position: relative;\n  border-radius: 1.5rem;\n  background-color: var(--color-lighter);\n}\n\n.x-ai-carousel-title {\n  display: flex;\n  font-size: 12px;\n  gap: 8px;\n  align-items: flex-start;\n  margin: 0 14px 8px;\n  cursor: pointer;\n}\n.x-ai-carousel-title-text {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.x-ai-carousel-title-text--expanded {\n  white-space: normal;\n}\n.x-ai-carousel-title-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  color: var(--color);\n  flex-shrink: 0;\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color);\n  margin-bottom: auto;\n}\n.x-ai-carousel-title-button-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n  transition: transform 0.3s ease;\n}\n.x-ai-carousel-title-button-icon--expanded {\n  transform: rotate(180deg);\n}\n\n.x-ai-carousel-suggestions {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-bottom: 1rem;\n}\n\n.x-ai-carousel-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.x-ai-carousel-suggestion-query-btn {\n  border-color: transparent;\n  background-color: transparent;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  font-weight: 700;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n}\n\n.x-ai-carousel-suggestion-query-btn-icon {\n  height: 1rem;\n  aspect-ratio: 1 / 1;\n}\n\n.x-ai-carousel-suggestion-results {\n  display: flex;\n  gap: 1rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n</style>\n"],"names":["DisplayClickProvider","DisplayEmitter"],"mappings":"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"}

package/js/x-modules/ai/components/{ai-carousel.vue3.js → ai-carousel3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-ai-carousel{--color:var(--x-ai-carousel-color,#bbc9cf);--color-lig
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=ai-carousel.vue3.js.map
+//# sourceMappingURL=ai-carousel3.vue.js.map

package/js/x-modules/ai/components/ai-carousel3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-carousel3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/ai/components/ai-grouped-carousel.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from './ai-grouped-carousel.vue2.js';
+import _sfc_main from './ai-grouped-carousel2.vue.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createElementBlock, Fragment, renderList, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 

package/js/x-modules/ai/components/ai-grouped-carousel2.vue.js

@@ -0,0 +1,123 @@
+import { defineComponent } from 'vue';
+import '../../../components/animations/animate-clip-path2.vue.js';
+import '../../../components/animations/animate-scale2.vue.js';
+import '../../../components/animations/animate-translate2.vue.js';
+import '../../../components/animations/animate-width2.vue.js';
+import '../../../components/animations/animate-width3.vue.js';
+import '../../../components/animations/change-height2.vue.js';
+import '../../../components/animations/change-height3.vue.js';
+import '../../../components/animations/collapse-height2.vue.js';
+import '../../../components/animations/collapse-height3.vue.js';
+import '../../../components/animations/collapse-width2.vue.js';
+import '../../../components/animations/collapse-width3.vue.js';
+import '../../../components/animations/cross-fade2.vue.js';
+import '../../../components/animations/cross-fade3.vue.js';
+import '../../../components/animations/fade-and-slide2.vue.js';
+import '../../../components/animations/fade-and-slide3.vue.js';
+import '../../../components/animations/fade2.vue.js';
+import '../../../components/animations/fade3.vue.js';
+import '../../../components/animations/no-animation.vue.js';
+import '../../../components/animations/staggered-fade-and-slide2.vue.js';
+import '../../../components/animations/staggered-fade-and-slide3.vue.js';
+import '../../../components/auto-progress-bar2.vue.js';
+import '../../../components/auto-progress-bar3.vue.js';
+import '../../../components/base-dropdown2.vue.js';
+import '../../../components/base-dropdown3.vue.js';
+import '../../../components/base-event-button2.vue.js';
+import '../../../components/base-grid2.vue.js';
+import '../../../components/base-grid3.vue.js';
+import '../../../components/base-keyboard-navigation2.vue.js';
+import '../../../components/base-rating2.vue.js';
+import '../../../components/base-rating3.vue.js';
+import '../../../components/base-slider2.vue.js';
+import '../../../components/base-slider3.vue.js';
+import '../../../components/base-switch2.vue.js';
+import '../../../components/base-switch3.vue.js';
+import '../../../components/base-teleport2.vue.js';
+import '../../../components/base-variable-column-grid2.vue.js';
+import '../../../components/column-picker/base-column-picker-dropdown2.vue.js';
+import '../../../components/column-picker/base-column-picker-list2.vue.js';
+import '../../../components/currency/base-currency2.vue.js';
+import _sfc_main$1 from '../../../components/display-click-provider.vue.js';
+import '../../../components/display-emitter.vue.js';
+import '../../../components/filters/labels/base-price-filter-label.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label2.vue.js';
+import '../../../components/global-x-bus.vue.js';
+import '../../../components/highlight2.vue.js';
+import '../../../components/items-list2.vue.js';
+import '../../../components/location-provider.vue.js';
+import '../../../components/modals/base-events-modal-close2.vue.js';
+import '../../../components/modals/base-events-modal-open2.vue.js';
+import '../../../components/modals/base-events-modal2.vue.js';
+import '../../../components/modals/base-id-modal-close2.vue.js';
+import '../../../components/modals/base-id-modal-open2.vue.js';
+import '../../../components/modals/base-id-modal2.vue.js';
+import '../../../components/modals/base-modal2.vue.js';
+import '../../../components/modals/base-modal3.vue.js';
+import '../../../components/modals/close-main-modal2.vue.js';
+import '../../../components/modals/main-modal2.vue.js';
+import '../../../components/modals/open-main-modal2.vue.js';
+import '../../../components/page-loader-button2.vue.js';
+import '../../../components/page-loader-button3.vue.js';
+import '../../../components/page-selector2.vue.js';
+import '../../../components/page-selector3.vue.js';
+import '../../../components/panels/base-header-toggle-panel2.vue.js';
+import '../../../components/panels/base-header-toggle-panel3.vue.js';
+import '../../../components/panels/base-id-toggle-panel-button2.vue.js';
+import '../../../components/panels/base-id-toggle-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel2.vue.js';
+import '../../../components/panels/base-tabs-panel3.vue.js';
+import '../../../components/panels/base-toggle-panel2.vue.js';
+import '../../../components/result/base-result-add-to-cart2.vue.js';
+import '../../../components/result/base-result-current-price2.vue.js';
+import '../../../components/result/base-result-image2.vue.js';
+import '../../../components/result/base-result-image3.vue.js';
+import '../../../components/result/base-result-link2.vue.js';
+import '../../../components/result/base-result-link3.vue.js';
+import '../../../components/result/base-result-previous-price2.vue.js';
+import '../../../components/result/base-result-rating2.vue.js';
+import '../../../components/result/base-result-rating3.vue.js';
+import '../../../components/result/result-variant-selector2.vue.js';
+import '../../../components/result/result-variant-selector3.vue.js';
+import '../../../components/result/result-variants-provider.vue.js';
+import '../../../components/scroll/base-scroll2.vue.js';
+import '@empathyco/x-utils';
+import 'vuex';
+import '../../../plugins/x-bus.js';
+import '../../../plugins/x-plugin.js';
+import 'rxjs';
+import SlidingPanel from '../../../components/sliding-panel.vue.js';
+import '../../../components/snippet-callbacks2.vue.js';
+import '../../../components/suggestions/base-suggestion2.vue.js';
+import '../../../components/suggestions/base-suggestions2.vue.js';
+import '../../../components/suggestions/base-suggestions3.vue.js';
+import '../../../composables/create-use-device.js';
+import '@vueuse/core';
+import { useState } from '../../../composables/use-state.js';
+
+var _sfc_main = defineComponent({
+    components: {
+        DisplayClickProvider: _sfc_main$1,
+        SlidingPanel,
+    },
+    props: {
+        /* The title text displayed */
+        title: String,
+        /* The classes added to the sliding panel. */
+        slidingPanelClasses: String,
+        /* The classes added to the sliding panel container. */
+        slidingPanelContainerClasses: String,
+        /* The classes added to the sliding panel buttons. */
+        slidingPanelButtonsClasses: String,
+    },
+    setup() {
+        const { suggestionsSearch, tagging } = useState('ai');
+        return {
+            suggestionsSearch,
+            tagging,
+        };
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=ai-grouped-carousel2.vue.js.map

package/js/x-modules/ai/components/{ai-grouped-carousel.vue2.js.map → ai-grouped-carousel2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-grouped-carousel.vue2.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :class=\"slidingPanelClasses\"\n    :scroll-container-class=\"slidingPanelContainerClasses\"\n    :button-class=\"slidingPanelButtonsClasses\"\n    :reset-on-content-change=\"false\"\n  >\n    <template #sliding-panel-addons=\"{ arrivedState }\">\n      <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n    </template>\n    <template #sliding-panel-left-button>\n      <slot name=\"sliding-panels-left-button\" />\n    </template>\n    <template #sliding-panel-right-button>\n      <slot name=\"sliding-panels-right-button\" />\n    </template>\n    <ul class=\"x-ai-carousel-suggestion-results\">\n      <DisplayClickProvider\n        v-for=\"suggestion in suggestionsSearch\"\n        :key=\"suggestion.query\"\n        :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n        :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\n        result-feature=\"ai_carousel\"\n      >\n        <li\n          v-for=\"result in suggestion.results\"\n          :key=\"result.id\"\n          data-test=\"ai-carousel-suggestion-result\"\n        >\n          <!-- @slot (required) result card -->\n          <slot name=\"result\" :result=\"result\" />\n        </li>\n      </DisplayClickProvider>\n    </ul>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n  components: {\n    DisplayClickProvider,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n  },\n  setup() {\n    const { suggestionsSearch, tagging } = useState('ai')\n\n    return {\n      suggestionsSearch,\n      tagging,\n    }\n  },\n})\n</script>\n"],"names":["DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;8BACVA,WAAoB;QACpB,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;AACnC,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,iBAAiB,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEpD,OAAO;YACL,iBAAiB;YACjB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"ai-grouped-carousel2.vue.js","sources":["../../../../../src/x-modules/ai/components/ai-grouped-carousel.vue"],"sourcesContent":["<template>\n  <SlidingPanel\n    :class=\"slidingPanelClasses\"\n    :scroll-container-class=\"slidingPanelContainerClasses\"\n    :button-class=\"slidingPanelButtonsClasses\"\n    :reset-on-content-change=\"false\"\n  >\n    <template #sliding-panel-addons=\"{ arrivedState }\">\n      <slot name=\"sliding-panels-addons\" :arrived-state=\"arrivedState\" />\n    </template>\n    <template #sliding-panel-left-button>\n      <slot name=\"sliding-panels-left-button\" />\n    </template>\n    <template #sliding-panel-right-button>\n      <slot name=\"sliding-panels-right-button\" />\n    </template>\n    <ul class=\"x-ai-carousel-suggestion-results\">\n      <DisplayClickProvider\n        v-for=\"suggestion in suggestionsSearch\"\n        :key=\"suggestion.query\"\n        :tooling-display-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayClick\"\n        :tooling-add2-cart-tagging=\"tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\"\n        result-feature=\"ai_carousel\"\n      >\n        <li\n          v-for=\"result in suggestion.results\"\n          :key=\"result.id\"\n          data-test=\"ai-carousel-suggestion-result\"\n        >\n          <!-- @slot (required) result card -->\n          <slot name=\"result\" :result=\"result\" />\n        </li>\n      </DisplayClickProvider>\n    </ul>\n  </SlidingPanel>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { DisplayClickProvider, SlidingPanel } from '../../../components'\nimport { useState } from '../../../composables'\n\nexport default defineComponent({\n  components: {\n    DisplayClickProvider,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: String,\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: String,\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: String,\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: String,\n  },\n  setup() {\n    const { suggestionsSearch, tagging } = useState('ai')\n\n    return {\n      suggestionsSearch,\n      tagging,\n    }\n  },\n})\n</script>\n"],"names":["DisplayClickProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;8BACVA,WAAoB;QACpB,YAAY;AACb,KAAA;AACD,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE,MAAM;;AAEb,QAAA,mBAAmB,EAAE,MAAM;;AAE3B,QAAA,4BAA4B,EAAE,MAAM;;AAEpC,QAAA,0BAA0B,EAAE,MAAM;AACnC,KAAA;IACD,KAAK,GAAA;QACH,MAAM,EAAE,iBAAiB,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QAEpD,OAAO;YACL,iBAAiB;YACjB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}