@empathyco/x-components 7.2.3 → 7.2.5

package/js/components/{sliding-panel2.vue.js.map → sliding-panel.vue2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel2.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"xds:sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"x-sliding-panel__scroll\"\n      :class=\"[scrollContainerClass, { 'xds:sliding-panel-fade': fade }]\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n    <template v-if=\"showButtons\">\n      <button\n        class=\"xds:sliding-panel-button xds:sliding-panel-button-left\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-left-button\"\n        @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Left button content -->\n        <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n      </button>\n      <button\n        class=\"xds:sliding-panel-button xds:sliding-panel-button-right\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-right-button\"\n        @click=\"xScroll += slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Right button content -->\n        <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n  useElementBounding,\n  useElementVisibility,\n  useMutationObserver,\n  useScroll,\n  whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlidingPanel',\n  props: {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    scrollFactor: {\n      type: Number,\n      default: 0.7,\n    },\n    /** Would make the navigation buttons visible when they're needed or always hide them. */\n    showButtons: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     */\n    resetOnContentChange: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, applies the design-system edge fade mask to the scroll container.\n     */\n    fade: {\n      type: Boolean,\n      default: true,\n    },\n    buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n    scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n  },\n  setup(props, { slots }) {\n    const scrollContainerRef = ref<HTMLDivElement>()\n\n    const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n    const isVisible = useElementVisibility(scrollContainerRef)\n\n    const {\n      x: xScroll,\n      arrivedState,\n      measure,\n    } = useScroll(scrollContainerRef, {\n      behavior: 'smooth',\n    })\n\n    /** CSS classes to apply based on the scroll position. */\n    const cssClasses = computed(() => ({\n      'xds:sliding-panel-at-start': arrivedState.left,\n      'xds:sliding-panel-at-end': arrivedState.right,\n    }))\n\n    if (props.resetOnContentChange) {\n      useMutationObserver(\n        scrollContainerRef,\n        mutations => {\n          if (mutations.length > 0) {\n            xScroll.value = 0\n          }\n        },\n        {\n          subtree: true,\n          childList: true,\n          attributes: false,\n          characterData: false,\n        },\n      )\n    }\n    //ensure positions are right calculated as soon as the sliding panel is shown\n    whenever(isVisible as any, measure)\n\n    return {\n      arrivedState,\n      cssClasses,\n      scrollContainerRef,\n      slotContainerWidth,\n      xScroll,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel__scroll {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE */\n}\n\n/* Chrome, Edge & Safari */\n.x-sliding-panel__scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.x-sliding-panel__scroll > * {\n  flex: 0 0 auto;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n  data() {\n    return {\n      items: 4,\n      resetOnContentChange: false,\n    }\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;AA+CA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;;AAED,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;QACD,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;QACzE,oBAAoB,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;AACnF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,kBAAiB,GAAI,GAAG,EAAiB;QAE/C,MAAM,EAAE,KAAK,EAAE,kBAAiB,EAAE,GAAI,kBAAkB,CAAC,kBAAkB,CAAA;AAC3E,QAAA,MAAM,YAAY,oBAAoB,CAAC,kBAAkB,CAAA;AAEzD,QAAA,MAAM,EACJ,CAAC,EAAE,OAAO,EACV,YAAY,EACZ,OAAO,GACT,GAAI,SAAS,CAAC,kBAAkB,EAAE;AAChC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAA;;AAGD,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,OAAO;YACjC,4BAA4B,EAAE,YAAY,CAAC,IAAI;YAC/C,0BAA0B,EAAE,YAAY,CAAC,KAAK;AAC/C,SAAA,CAAC,CAAA;AAEF,QAAA,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC9B,YAAA,mBAAmB,CACjB,kBAAkB,EAClB,SAAQ,IAAG;AACT,gBAAA,IAAI,SAAS,CAAC,MAAK,GAAI,CAAC,EAAE;AACxB,oBAAA,OAAO,CAAC,KAAI,GAAI,CAAA;gBAClB;AACF,YAAA,CAAC,EACD;AACE,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CACH;QACF;;AAEA,QAAA,QAAQ,CAAC,SAAgB,EAAE,OAAO,CAAA;QAElC,OAAO;YACL,YAAY;YACZ,UAAU;YACV,kBAAkB;YAClB,kBAAkB;YAClB,OAAO;YACP,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"sliding-panel.vue2.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n  <div v-if=\"slots.default\" class=\"xds:sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"x-sliding-panel__scroll\"\n      :class=\"[scrollContainerClass, { 'xds:sliding-panel-fade': fade }]\"\n      data-test=\"sliding-panel-scroll\"\n    >\n      <!-- @slot (Required) Sliding panel content -->\n      <slot />\n    </div>\n    <slot name=\"sliding-panel-addons\" :arrived-state=\"arrivedState\" :scroll=\"xScroll\" />\n    <template v-if=\"showButtons\">\n      <button\n        class=\"xds:sliding-panel-button xds:sliding-panel-button-left\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-left-button\"\n        @click=\"xScroll -= slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Left button content -->\n        <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n      </button>\n      <button\n        class=\"xds:sliding-panel-button xds:sliding-panel-button-right\"\n        :class=\"buttonClass\"\n        data-test=\"sliding-panel-right-button\"\n        @click=\"xScroll += slotContainerWidth * scrollFactor\"\n      >\n        <!-- @slot Right button content -->\n        <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n      </button>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../utils/types'\nimport {\n  useElementBounding,\n  useElementVisibility,\n  useMutationObserver,\n  useScroll,\n  whenever,\n} from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'SlidingPanel',\n  props: {\n    /**\n     * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n     */\n    scrollFactor: {\n      type: Number,\n      default: 0.7,\n    },\n    /** Would make the navigation buttons visible when they're needed or always hide them. */\n    showButtons: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n     * the scroll position to 0.\n     */\n    resetOnContentChange: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * When true, applies the design-system edge fade mask to the scroll container.\n     */\n    fade: {\n      type: Boolean,\n      default: true,\n    },\n    buttonClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n    scrollContainerClass: { type: [String, Object, Array] as PropType<VueCSSClasses> },\n  },\n  setup(props, { slots }) {\n    const scrollContainerRef = ref<HTMLDivElement>()\n\n    const { width: slotContainerWidth } = useElementBounding(scrollContainerRef)\n    const isVisible = useElementVisibility(scrollContainerRef)\n\n    const {\n      x: xScroll,\n      arrivedState,\n      measure,\n    } = useScroll(scrollContainerRef, {\n      behavior: 'smooth',\n    })\n\n    /** CSS classes to apply based on the scroll position. */\n    const cssClasses = computed(() => ({\n      'xds:sliding-panel-at-start': arrivedState.left,\n      'xds:sliding-panel-at-end': arrivedState.right,\n    }))\n\n    if (props.resetOnContentChange) {\n      useMutationObserver(\n        scrollContainerRef,\n        mutations => {\n          if (mutations.length > 0) {\n            xScroll.value = 0\n          }\n        },\n        {\n          subtree: true,\n          childList: true,\n          attributes: false,\n          characterData: false,\n        },\n      )\n    }\n    //ensure positions are right calculated as soon as the sliding panel is shown\n    whenever(isVisible as any, measure)\n\n    return {\n      arrivedState,\n      cssClasses,\n      scrollContainerRef,\n      slotContainerWidth,\n      xScroll,\n      slots,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sliding-panel__scroll {\n  display: flex;\n  flex: 100%;\n  flex-flow: row nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE */\n}\n\n/* Chrome, Edge & Safari */\n.x-sliding-panel__scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.x-sliding-panel__scroll > * {\n  flex: 0 0 auto;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n  <SlidingPanel>\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n  <SlidingPanel :scrollFactor=\"1.5\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n  <SlidingPanel :showButtons=\"false\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Customizing the content with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\nThe `scrollContainerClass` prop can be used to add classes to the scroll content.\n\n```vue\n<template>\n  <SlidingPanel buttonClass=\"x-button--round\" scrollContainerClass=\"x-sliding-panel-fade\">\n    <div class=\"item\">Item 1</div>\n    <div class=\"item\">Item 2</div>\n    <div class=\"item\">Item 3</div>\n    <div class=\"item\">Item 4</div>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n  <div>\n    <button @click=\"items++\">Add item</button>\n    <label>\n      <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n      Reset content onchange\n    </label>\n    <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n      <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n    </SlidingPanel>\n  </div>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n  data() {\n    return {\n      items: 4,\n      resetOnContentChange: false,\n    }\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n  <SlidingPanel>\n    <template #sliding-panel-left-button>Left</template>\n    <template #default>\n      <div class=\"item\">Item 1</div>\n      <div class=\"item\">Item 2</div>\n      <div class=\"item\">Item 3</div>\n      <div class=\"item\">Item 4</div>\n    </template>\n    <template #sliding-panel-right-button>Right</template>\n  </SlidingPanel>\n</template>\n\n<script>\nimport { SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'SlidingPanelDemo',\n  components: {\n    SlidingPanel,\n  },\n}\n</script>\n\n<style>\n.x-sliding-panel {\n  width: 200px;\n}\n\n.item {\n  display: inline-block;\n  width: 100px;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;AA+CA;;;;;;;;;AASE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAG;AACb,SAAA;;AAED,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,oBAAoB,EAAE;AACpB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;QACD,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;QACzE,oBAAoB,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAA8B;AACnF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,kBAAiB,GAAI,GAAG,EAAiB;QAE/C,MAAM,EAAE,KAAK,EAAE,kBAAiB,EAAE,GAAI,kBAAkB,CAAC,kBAAkB,CAAA;AAC3E,QAAA,MAAM,YAAY,oBAAoB,CAAC,kBAAkB,CAAA;AAEzD,QAAA,MAAM,EACJ,CAAC,EAAE,OAAO,EACV,YAAY,EACZ,OAAO,GACT,GAAI,SAAS,CAAC,kBAAkB,EAAE;AAChC,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAA;;AAGD,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,OAAO;YACjC,4BAA4B,EAAE,YAAY,CAAC,IAAI;YAC/C,0BAA0B,EAAE,YAAY,CAAC,KAAK;AAC/C,SAAA,CAAC,CAAA;AAEF,QAAA,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC9B,YAAA,mBAAmB,CACjB,kBAAkB,EAClB,SAAQ,IAAG;AACT,gBAAA,IAAI,SAAS,CAAC,MAAK,GAAI,CAAC,EAAE;AACxB,oBAAA,OAAO,CAAC,KAAI,GAAI,CAAA;gBAClB;AACF,YAAA,CAAC,EACD;AACE,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CACH;QACF;;AAEA,QAAA,QAAQ,CAAC,SAAgB,EAAE,OAAO,CAAA;QAElC,OAAO;YACL,YAAY;YACZ,UAAU;YACV,kBAAkB;YAClB,kBAAkB;YAClB,OAAO;YACP,KAAK;SACP;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{sliding-panel3.vue.js → sliding-panel.vue3.js}

@@ -4,4 +4,4 @@ var css = ".x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;dis
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=sliding-panel3.vue.js.map
+//# sourceMappingURL=sliding-panel.vue3.js.map

package/js/components/sliding-panel.vue3.js.map

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

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

@@ -1,4 +1,4 @@
-import _sfc_main from './snippet-callbacks2.vue.js';
+import _sfc_main from './snippet-callbacks.vue2.js';
 import { resolveComponent, openBlock, createBlock } from 'vue';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 

package/js/components/{snippet-callbacks2.vue.js → snippet-callbacks.vue2.js}

@@ -50,4 +50,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=snippet-callbacks2.vue.js.map
+//# sourceMappingURL=snippet-callbacks.vue2.js.map

package/js/components/{snippet-callbacks2.vue.js.map → snippet-callbacks.vue2.js.map}

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

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

@@ -1,4 +1,4 @@
-import _sfc_main from './base-suggestion2.vue.js';
+import _sfc_main from './base-suggestion.vue2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createVNode, toDisplayString, createCommentVNode } from 'vue';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 

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

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

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './base-suggestions2.vue.js';
+import _sfc_main from './base-suggestions.vue2.js';
 import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, mergeProps, createCommentVNode } from 'vue';
-import './base-suggestions3.vue.js';
+import './base-suggestions.vue3.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-suggestions2.vue.js → base-suggestions.vue2.js}

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

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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;;;;"}

package/js/components/suggestions/{base-suggestions3.vue.js → base-suggestions.vue3.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-suggestions3.vue.js.map
+//# sourceMappingURL=base-suggestions.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-suggestions.vue3.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-path2.vue.js';
+import './components/animations/animate-clip-path.vue2.js';
 export { default as AnimateScale } from './components/animations/animate-scale.vue.js';
-import './components/animations/animate-scale2.vue.js';
+import './components/animations/animate-scale.vue2.js';
 export { default as AnimateTranslate } from './components/animations/animate-translate.vue.js';
-import './components/animations/animate-translate2.vue.js';
+import './components/animations/animate-translate.vue2.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-carousel2.vue.js';
+import _sfc_main from './ai-carousel.vue2.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
-import './ai-carousel3.vue.js';
+import './ai-carousel.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {

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

@@ -1,95 +1,95 @@
 import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, watch, onMounted } 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/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 ChangeHeight from '../../../components/animations/change-height.vue.js';
 import CollapseHeight from '../../../components/animations/collapse-height.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/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/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/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 BaseEventButton from '../../../components/base-event-button.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 '../../../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 _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-label2.vue.js';
+import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
 import '../../../components/global-x-bus.vue.js';
-import '../../../components/highlight2.vue.js';
+import '../../../components/highlight.vue2.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-list2.vue.js';
+import '../../../components/items-list.vue2.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/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/result/result-variants-provider.vue.js';
-import '../../../components/scroll/base-scroll2.vue.js';
+import '../../../components/scroll/base-scroll.vue2.js';
 import '@empathyco/x-utils';
 import { use$x } from '../../../composables/use-_x.js';
 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 '../../../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 '../../../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-carousel2.vue.js.map
+//# sourceMappingURL=ai-carousel.vue2.js.map

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

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJA,gBAAe,eAAe,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,iBAAiB;QACjB,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;QACf,cAAc;8BACdA,WAAoB;wBACpBC,WAAc;QACd,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;;AAElC,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QACpE,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,QAAO,GAAI,GAAG,CAAqB,IAAI,CAAA;AAC7C,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,KAAK,CAAA;AAC/B,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;AAEE;AACF,QAAA,SAAS,mBAAmB,GAAA;AAC1B,YAAA,IAAI,aAAa,CAAC,KAAK,EAAE;gBACvB;YACF;AACA,YAAA,IAAI,QAAQ,CAAC,KAAK,EAAE;AAClB,gBAAA,kBAAkB,CAAC,KAAI,GAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,WAAU;YACnF;QACF;AAEA;;AAEE;AACF,QAAA,SAAS,oBAAoB,GAAA;AAC3B,YAAA,IAAI,kBAAkB,CAAC,KAAK,EAAE;AAC5B,gBAAA,aAAa,CAAC,KAAI,GAAI,CAAC,aAAa,CAAC,KAAI;YAC3C;QACF;AAEA,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAI;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBAChB,MAAM,WAAU,GAAI,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AAC5C,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,aAAa;AACpB,iBAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,CAAA;gBACjD,OAAO,CAAA,cAAA,EAAiB,WAAW,CAAA,CAAC;YACtC;YACA,OAAO,KAAK,CAAC,KAAI;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CAAC,OAAO,EAAE,MAAI;YACjB,IAAI,OAAO,CAAC,KAAK,CAAC,MAAK,GAAI,CAAC,EAAE;AAC5B,gBAAA,EAAE,CAAC,IAAI,CAAC,mCAAmC,CAAA;YAC7C;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAY,EAAG,CAAA;AACrE,QAAA,CAAC,CAAA;AAED,QAAA,iBAAiB,CAAC,QAAQ,EAAE,mBAAmB,CAAA;QAE/C,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,OAAO;YACP,KAAK;YACL,iBAAiB;YACjB,OAAO;YACP,KAAK;YACL,aAAa;YACb,QAAQ;YACR,oBAAoB;SACtB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJA,gBAAe,eAAe,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC,IAAI;AACvB,IAAA,UAAU,EAAE;QACV,UAAU;QACV,iBAAiB;QACjB,cAAc;QACd,eAAe;QACf,YAAY;QACZ,eAAe;QACf,cAAc;8BACdA,WAAoB;wBACpBC,WAAc;QACd,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;;AAElC,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAM,EAAE,GAAI,QAAQ,CAAC,IAAI,CAAA;QACpE,MAAM,mBAAmB,GAAmB,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAC,EAAE;AAElE,QAAA,MAAM,QAAO,GAAI,GAAG,CAAqB,IAAI,CAAA;AAC7C,QAAA,MAAM,aAAY,GAAI,GAAG,CAAC,KAAK,CAAA;AAC/B,QAAA,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAA;AAEpC;;AAEE;AACF,QAAA,SAAS,mBAAmB,GAAA;AAC1B,YAAA,IAAI,aAAa,CAAC,KAAK,EAAE;gBACvB;YACF;AACA,YAAA,IAAI,QAAQ,CAAC,KAAK,EAAE;AAClB,gBAAA,kBAAkB,CAAC,KAAI,GAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,WAAU;YACnF;QACF;AAEA;;AAEE;AACF,QAAA,SAAS,oBAAoB,GAAA;AAC3B,YAAA,IAAI,kBAAkB,CAAC,KAAK,EAAE;AAC5B,gBAAA,aAAa,CAAC,KAAI,GAAI,CAAC,aAAa,CAAC,KAAI;YAC3C;QACF;AAEA,QAAA,MAAM,KAAI,GAAI,QAAQ,CAAC,MAAI;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBAChB,MAAM,WAAU,GAAI,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AAC5C,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,aAAa;AACpB,iBAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,CAAA;gBACjD,OAAO,CAAA,cAAA,EAAiB,WAAW,CAAA,CAAC;YACtC;YACA,OAAO,KAAK,CAAC,KAAI;AACnB,QAAA,CAAC,CAAA;AAED,QAAA,KAAK,CAAC,OAAO,EAAE,MAAI;YACjB,IAAI,OAAO,CAAC,KAAK,CAAC,MAAK,GAAI,CAAC,EAAE;AAC5B,gBAAA,EAAE,CAAC,IAAI,CAAC,mCAAmC,CAAA;YAC7C;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAY,EAAG,CAAA;AACrE,QAAA,CAAC,CAAA;AAED,QAAA,iBAAiB,CAAC,QAAQ,EAAE,mBAAmB,CAAA;QAE/C,OAAO;YACL,mBAAmB;YACnB,kBAAkB;YAClB,OAAO;YACP,KAAK;YACL,iBAAiB;YACjB,OAAO;YACP,KAAK;YACL,aAAa;YACb,QAAQ;YACR,oBAAoB;SACtB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/ai/components/{ai-carousel3.vue.js → ai-carousel.vue3.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-carousel3.vue.js.map
+//# sourceMappingURL=ai-carousel.vue3.js.map

package/js/x-modules/ai/components/ai-carousel.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-carousel.vue3.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-carousel2.vue.js';
+import _sfc_main from './ai-grouped-carousel.vue2.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createElementBlock, Fragment, renderList, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';