@empathyco/x-components 6.1.4 → 6.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"sliding-panel.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=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll xds:sliding-panel-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    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":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_Fragment","_createTextVNode"],"mappings":";;;;;;AACa,EAAA,OAAA,IAAA,CAAA,KAAA,CAAM,OAAA,IAAAA,SAAA,EAAA,EAAjBC,kBAAA;AAAA,IA+BM,KAAA;AAAA,IAAA;AAAA,MAAA,GAAA,EAAA,CAAA;MA/BoB,KAAA,EAAKC,cAAA,CAAA,CAAC,qBAA4B,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,MAAE,WAAA,EAAU;AAAA,KAAA;;AAChF,MAAAC,kBAAA;AAAA,QAQM,KAAA;AAAA,QAAA;AAAA,UAPJ,GAAA,EAAI,oBAAA;AAAA,UACH,KAAA,EAAKD,cAAA,CAAA,CAAE,IAAA,CAAA,oBAAA,EACF,gDAAgD,CAAA,CAAA;AAAA,UACtD,WAAA,EAAU;AAAA,SAAA;;UAGVE,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA,EAAA,IAAA;AAAA,SAAA;;;;MAEVA,UAAA,CAAoF,IAAA,CAAA,MAAA,EAAA,sBAAA,EAAA;AAAA,QAAjD,YAAA,EAAe,IAAA,CAAA,YAAA;AAAA,QAAe,MAAA,EAAQ,IAAA,CAAA;AAAA,OAAA,EAAA,MAAA,EAAA,IAAA,CAAA;MACzD,IAAA,CAAA,WAAA,IAAAJ,SAAA,EAAA,EAAhBC,kBAAA;AAAA,QAmBWI,QAAA;AAAA,QAAA,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAlBTF,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAAKD,cAAA,CAAA,CAAC,wDAAA,EACE,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,cACnB,WAAA,EAAU,2BAAA;AAAA,cACT,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAE,IAAA,CAAA,OAAA,IAAW,IAAA,CAAA,kBAAA,GAAqB,IAAA,CAAA,YAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAA+C,8CAA/C,MAA+C;AAAA,gBAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAE,eAAA;AAAR,kBAAA,GAAA;AAAA,kBAAC;AAAA;AAAA,iBAAA;AAAA,eAAA,EAAA,IAAA;;;;;AAE1C,UAAAH,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAAKD,cAAA,CAAA,CAAC,yDAAA,EACE,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,cACnB,WAAA,EAAU,4BAAA;AAAA,cACT,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAE,IAAA,CAAA,OAAA,IAAW,IAAA,CAAA,kBAAA,GAAqB,IAAA,CAAA,YAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAAgD,+CAAhD,MAAgD;AAAA,gBAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAE,eAAA;AAAR,kBAAA,GAAA;AAAA,kBAAC;AAAA;AAAA,iBAAA;AAAA,eAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sliding-panel.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":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_Fragment","_createTextVNode"],"mappings":";;;;;;AACa,EAAA,OAAA,IAAA,CAAA,KAAA,CAAM,OAAA,IAAAA,SAAA,EAAA,EAAjBC,kBAAA;AAAA,IA+BM,KAAA;AAAA,IAAA;AAAA,MAAA,GAAA,EAAA,CAAA;MA/BoB,KAAA,EAAKC,cAAA,CAAA,CAAC,qBAA4B,IAAA,CAAA,UAAU,CAAA,CAAA;AAAA,MAAE,WAAA,EAAU;AAAA,KAAA;;AAChF,MAAAC,kBAAA;AAAA,QAQM,KAAA;AAAA,QAAA;AAAA,UAPJ,GAAA,EAAI,oBAAA;AAAA,UACJ,OAAKD,cAAA,CAAA,CAAC,yBAAA,EAAyB,CACtB,IAAA,CAAA,oBAAA,EAAoB,4BAA8B,IAAA,CAAA,IAAA,EAAI,CAAA,CAAA,CAAA;AAAA,UAC/D,WAAA,EAAU;AAAA,SAAA;;UAGVE,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,EAAA,MAAA,EAAA,IAAA;AAAA,SAAA;;;;MAEVA,UAAA,CAAoF,IAAA,CAAA,MAAA,EAAA,sBAAA,EAAA;AAAA,QAAjD,YAAA,EAAe,IAAA,CAAA,YAAA;AAAA,QAAe,MAAA,EAAQ,IAAA,CAAA;AAAA,OAAA,EAAA,MAAA,EAAA,IAAA,CAAA;MACzD,IAAA,CAAA,WAAA,IAAAJ,SAAA,EAAA,EAAhBC,kBAAA;AAAA,QAmBWI,QAAA;AAAA,QAAA,EAAA,GAAA,EAAA,CAAA,EAAA;AAAA,QAAA;AAAA,UAlBTF,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAAKD,cAAA,CAAA,CAAC,wDAAA,EACE,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,cACnB,WAAA,EAAU,2BAAA;AAAA,cACT,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAE,IAAA,CAAA,OAAA,IAAW,IAAA,CAAA,kBAAA,GAAqB,IAAA,CAAA,YAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAA+C,8CAA/C,MAA+C;AAAA,gBAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAE,eAAA;AAAR,kBAAA,GAAA;AAAA,kBAAC;AAAA;AAAA,iBAAA;AAAA,eAAA,EAAA,IAAA;;;;;AAE1C,UAAAH,kBAAA;AAAA,YAQS,QAAA;AAAA,YAAA;AAAA,cAPP,KAAA,EAAKD,cAAA,CAAA,CAAC,yDAAA,EACE,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,cACnB,WAAA,EAAU,4BAAA;AAAA,cACT,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAE,IAAA,CAAA,OAAA,IAAW,IAAA,CAAA,kBAAA,GAAqB,IAAA,CAAA,YAAA;AAAA,aAAA;;AAGxC,cAAAE,UAAA,CAAgD,+CAAhD,MAAgD;AAAA,gBAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAE,eAAA;AAAR,kBAAA,GAAA;AAAA,kBAAC;AAAA;AAAA,iBAAA;AAAA,eAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;"}

package/js/components/sliding-panel.vue2.js

@@ -34,6 +34,13 @@ var _sfc_main = defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * When true, applies the design-system edge fade mask to the scroll container.
+         */
+        fade: {
+            type: Boolean,
+            default: true,
+        },
         buttonClass: { type: [String, Object, Array] },
         scrollContainerClass: { type: [String, Object, Array] },
     },

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

@@ -1 +1 @@
-{"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=\"scrollContainerClass\"\n      class=\"x-sliding-panel__scroll xds:sliding-panel-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    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;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/index.js

@@ -201,7 +201,6 @@ export { BaseXPriorityQueue, BaseXPriorityQueueNode } from './x-bus/x-priority-q
 export { BaseXAPI } from './x-installer/api/base-api.js';
 export { XInstaller } from './x-installer/x-installer.js';
 export { default as AiCarousel } from './x-modules/ai/components/ai-carousel.vue.js';
-export { default as AiOverview } from './x-modules/ai/components/ai-overview.vue.js';
 export { fetchAndSaveAiSuggestionsSearch } from './x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.js';
 export { fetchAndSaveAiSuggestions } from './x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.js';
 export { saveOrigin as saveAiOrigin } from './x-modules/ai/store/actions/save-origin.action.js';

package/js/index.js.map

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

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

@@ -1,5 +1,5 @@
 import _sfc_main from './ai-carousel.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, createVNode, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createTextVNode } from 'vue';
 import './ai-carousel.vue3.js';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
@@ -8,15 +8,26 @@ const _hoisted_1 = {
   class: "x-ai-carousel"
 };
 const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = { class: "x-ai-carousel-suggestion" };
-const _hoisted_4 = { class: "x-ai-carousel-suggestion-results" };
+const _hoisted_3 = {
+  key: 1,
+  class: "x-ai-carousel-suggestions",
+  "data-test": "ai-carousel-suggestions-container"
+};
+const _hoisted_4 = {
+  class: "x-ai-carousel-suggestion",
+  "data-test": "ai-carousel-suggestion"
+};
+const _hoisted_5 = { class: "x-ai-carousel-suggestion-results" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_AIStarIcon = resolveComponent("AIStarIcon");
   const _component_ChangeHeight = resolveComponent("ChangeHeight");
   const _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
   const _component_DisplayEmitter = resolveComponent("DisplayEmitter");
-  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
+  const _component_AiGroupedCarousel = resolveComponent("AiGroupedCarousel");
+  const _component_ArrowRightIcon = resolveComponent("ArrowRightIcon");
+  const _component_BaseEventButton = resolveComponent("BaseEventButton");
   const _component_SlidingPanel = resolveComponent("SlidingPanel");
+  const _component_DisplayClickProvider = resolveComponent("DisplayClickProvider");
   const _component_CollapseHeight = resolveComponent("CollapseHeight");
   return openBlock(), createBlock(_component_CollapseHeight, null, {
     default: withCtx(() => [
@@ -74,68 +85,112 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         }, 8, ["payload", "event-metadata"]),
-        renderSlot(_ctx.$slots, "sliding-panel", {
-          suggestions: _ctx.suggestionsSearch,
-          tagging: _ctx.tagging
-        }, () => [
-          createVNode(_component_SlidingPanel, {
-            class: normalizeClass(_ctx.slidingPanelClasses),
-            "scroll-container-class": _ctx.slidingPanelContainerClasses,
-            "button-class": _ctx.slidingPanelButtonsClasses,
-            "reset-on-content-change": false
-          }, {
-            "sliding-panel-addons": withCtx(({ arrivedState }) => [
-              renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
-            ]),
-            "sliding-panel-left-button": withCtx(() => [
-              renderSlot(_ctx.$slots, "sliding-panels-left-button")
-            ]),
-            "sliding-panel-right-button": withCtx(() => [
-              renderSlot(_ctx.$slots, "sliding-panels-right-button")
-            ]),
-            default: withCtx(() => [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("ul", _hoisted_4, [
-                  (openBlock(true), createElementBlock(
-                    Fragment,
-                    null,
-                    renderList(_ctx.suggestionsSearch, (suggestion) => {
-                      return openBlock(), createBlock(_component_DisplayClickProvider, {
-                        key: suggestion.query,
-                        "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayClick,
-                        "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart,
-                        "result-feature": "ai_carousel"
-                      }, {
-                        default: withCtx(() => [
-                          (openBlock(true), createElementBlock(
-                            Fragment,
-                            null,
-                            renderList(suggestion.results, (result) => {
-                              return openBlock(), createElementBlock("li", {
-                                key: result.id,
-                                "data-test": "ai-carousel-suggestion-result"
-                              }, [
-                                renderSlot(_ctx.$slots, "result", { result })
-                              ]);
-                            }),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"]);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ])
-              ])
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 8, ["class", "scroll-container-class", "button-class"])
-        ]),
+        _ctx.group ? (openBlock(), createBlock(_component_AiGroupedCarousel, { key: 0 }, {
+          "sliding-panel-addons": withCtx(({ arrivedState }) => [
+            renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
+          ]),
+          "sliding-panel-left-button": withCtx(() => [
+            renderSlot(_ctx.$slots, "sliding-panels-left-button")
+          ]),
+          "sliding-panel-right-button": withCtx(() => [
+            renderSlot(_ctx.$slots, "sliding-panels-right-button")
+          ]),
+          result: withCtx(({ result }) => [
+            renderSlot(_ctx.$slots, "result", { result })
+          ]),
+          _: 3
+          /* FORWARDED */
+        })) : (openBlock(), createElementBlock("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.suggestionsSearch, ({ query: suggestionQuery, results: queriesResults }) => {
+              return openBlock(), createBlock(_component_DisplayEmitter, {
+                key: suggestionQuery,
+                payload: _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplay ?? _ctx.emptyTaggingRequest,
+                "event-metadata": {
+                  feature: "ai_carousel",
+                  displayOriginalQuery: _ctx.query || "ai-carousel-without-query",
+                  replaceable: false
+                },
+                "data-test": "ai-carousel-query-display-emitter"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_component_BaseEventButton, {
+                      class: "x-ai-carousel-suggestion-query-btn",
+                      events: { UserAcceptedAQuery: suggestionQuery }
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(
+                          toDisplayString(suggestionQuery) + " ",
+                          1
+                          /* TEXT */
+                        ),
+                        createVNode(_component_ArrowRightIcon, { class: "x-ai-carousel-suggestion-query-btn-icon" })
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["events"]),
+                    createVNode(_component_DisplayClickProvider, {
+                      "tooling-display-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayClick,
+                      "tooling-add2-cart-tagging": _ctx.tagging?.searchQueries[suggestionQuery].toolingDisplayAdd2Cart,
+                      "result-feature": "ai_carousel"
+                    }, {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "sliding-panel", { results: queriesResults }, () => [
+                          createVNode(_component_SlidingPanel, {
+                            class: normalizeClass(_ctx.slidingPanelClasses),
+                            "scroll-container-class": _ctx.slidingPanelContainerClasses,
+                            "button-class": _ctx.slidingPanelButtonsClasses,
+                            "reset-on-content-change": false
+                          }, {
+                            "sliding-panel-addons": withCtx(({ arrivedState }) => [
+                              renderSlot(_ctx.$slots, "sliding-panels-addons", { arrivedState })
+                            ]),
+                            "sliding-panel-left-button": withCtx(() => [
+                              renderSlot(_ctx.$slots, "sliding-panels-left-button")
+                            ]),
+                            "sliding-panel-right-button": withCtx(() => [
+                              renderSlot(_ctx.$slots, "sliding-panels-right-button")
+                            ]),
+                            default: withCtx(() => [
+                              createElementVNode("ul", _hoisted_5, [
+                                (openBlock(true), createElementBlock(
+                                  Fragment,
+                                  null,
+                                  renderList(queriesResults, (result) => {
+                                    return openBlock(), createElementBlock("li", {
+                                      key: result.id,
+                                      "data-test": "ai-carousel-suggestion-result"
+                                    }, [
+                                      renderSlot(_ctx.$slots, "result", { result })
+                                    ]);
+                                  }),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["class", "scroll-container-class", "button-class"])
+                        ])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["tooling-display-tagging", "tooling-add2-cart-tagging"])
+                  ])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["payload", "event-metadata"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          renderSlot(_ctx.$slots, "suggestions-extra-content")
+        ])),
         renderSlot(_ctx.$slots, "extra-content"),
         renderSlot(_ctx.$slots, "cta-button")
       ])) : createCommentVNode("v-if", true)

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

@@ -1 +1 @@
-{"version":3,"file":"ai-carousel.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      <slot name=\"sliding-panel\" :suggestions=\"suggestionsSearch\" :tagging=\"tagging\">\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          <div class=\"x-ai-carousel-suggestion\">\n            <ul class=\"x-ai-carousel-suggestion-results\">\n              <DisplayClickProvider\n                v-for=\"suggestion in suggestionsSearch\"\n                :key=\"suggestion.query\"\n                :tooling-display-tagging=\"\n                  tagging?.searchQueries[suggestion.query].toolingDisplayClick\n                \"\n                :tooling-add2-cart-tagging=\"\n                  tagging?.searchQueries[suggestion.query].toolingDisplayAdd2Cart\n                \"\n                result-feature=\"ai_carousel\"\n              >\n                <li\n                  v-for=\"result in suggestion.results\"\n                  :key=\"result.id\"\n                  data-test=\"ai-carousel-suggestion-result\"\n                >\n                  <!-- @slot (required) result card -->\n                  <slot name=\"result\" :result=\"result\" />\n                </li>\n              </DisplayClickProvider>\n            </ul>\n          </div>\n        </SlidingPanel>\n      </slot>\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  ChangeHeight,\n  ChevronDownIcon,\n  CollapseHeight,\n  DisplayClickProvider,\n  SlidingPanel,\n} from '../../../components'\nimport DisplayEmitter from '../../../components/display-emitter.vue'\nimport { use$x, useState } from '../../../composables'\nimport { aiXModule } from '../x-module'\n\nexport default defineComponent({\n  xModule: aiXModule.name,\n  components: {\n    ChangeHeight,\n    DisplayClickProvider,\n    DisplayEmitter,\n    CollapseHeight,\n    AIStarIcon,\n    ChevronDownIcon,\n    SlidingPanel,\n  },\n  props: {\n    /* The title text displayed */\n    title: {\n      type: String,\n    },\n    /* The classes added to the sliding panel. */\n    slidingPanelClasses: {\n      type: String,\n    },\n    /* The classes added to the sliding panel container. */\n    slidingPanelContainerClasses: {\n      type: String,\n    },\n    /* The classes added to the sliding panel buttons. */\n    slidingPanelButtonsClasses: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n    const { query, isNoResults, 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      isNoResults,\n      isTitleOverflowing,\n      queries,\n      query,\n      suggestionsSearch,\n      tagging,\n      title,\n      titleExpanded,\n      titleRef,\n      toggleTitleExpansion,\n    }\n  },\n})\n</script>\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-suggestion {\n  display: flex;\n  gap: 8px;\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":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"ai-carousel.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":["_createBlock","_withCtx","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ import '../../../components/auto-progress-bar.vue2.js';
 import '../../../components/auto-progress-bar.vue3.js';
 import '../../../components/base-dropdown.vue2.js';
 import '../../../components/base-dropdown.vue3.js';
-import '../../../components/base-event-button.vue2.js';
+import BaseEventButton from '../../../components/base-event-button.vue.js';
 import '../../../components/base-grid.vue2.js';
 import '../../../components/base-grid.vue3.js';
 import '../../../components/base-keyboard-navigation.vue2.js';
@@ -44,6 +44,7 @@ import '../../../components/filters/labels/base-rating-filter-label.vue2.js';
 import '../../../components/global-x-bus.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-list.vue2.js';
 import '../../../components/location-provider.vue.js';
@@ -96,39 +97,40 @@ import '../../../plugins/x-plugin.js';
 import 'rxjs';
 import { useState } from '../../../composables/use-state.js';
 import { aiXModule } from '../x-module.js';
+import AiGroupedCarousel from './ai-grouped-carousel.vue.js';
 
 var _sfc_main = defineComponent({
     xModule: aiXModule.name,
     components: {
+        AIStarIcon,
+        AiGroupedCarousel,
+        ArrowRightIcon,
+        BaseEventButton,
         ChangeHeight,
+        ChevronDownIcon,
+        CollapseHeight,
         DisplayClickProvider: _sfc_main$2,
         DisplayEmitter: _sfc_main$1,
-        CollapseHeight,
-        AIStarIcon,
-        ChevronDownIcon,
         SlidingPanel,
     },
     props: {
         /* The title text displayed */
-        title: {
-            type: String,
-        },
+        title: String,
         /* The classes added to the sliding panel. */
-        slidingPanelClasses: {
-            type: String,
-        },
+        slidingPanelClasses: String,
         /* The classes added to the sliding panel container. */
-        slidingPanelContainerClasses: {
-            type: String,
-        },
+        slidingPanelContainerClasses: String,
         /* The classes added to the sliding panel buttons. */
-        slidingPanelButtonsClasses: {
-            type: String,
+        slidingPanelButtonsClasses: String,
+        /* Controls whether the carousel should group results or display N carousels per N queries. */
+        group: {
+            type: Boolean,
+            default: true,
         },
     },
     setup(props) {
         const $x = use$x();
-        const { query, isNoResults, suggestionsSearch, queries, tagging } = useState('ai');
+        const { query, suggestionsSearch, queries, tagging } = useState('ai');
         const emptyTaggingRequest = { url: '', params: {} };
         const titleRef = ref(null);
         const titleExpanded = ref(false);
@@ -173,7 +175,6 @@ var _sfc_main = defineComponent({
         useResizeObserver(titleRef, updateTitleOverflow);
         return {
             emptyTaggingRequest,
-            isNoResults,
             isTitleOverflowing,
             queries,
             query,

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

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

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

@@ -1,6 +1,6 @@
 import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-ai-carousel{--color:var(--x-ai-carousel-color,#bbc9cf);--color-lighter:var(--x-ai-carousel-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;padding:8px 0;position:relative}.x-ai-carousel-title{align-items:flex-start;cursor:pointer;display:flex;font-size:12px;gap:8px;margin:0 14px 8px}.x-ai-carousel-title-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-ai-carousel-title-text--expanded{white-space:normal}.x-ai-carousel-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem;margin-bottom:auto}.x-ai-carousel-title-button{align-items:center;background:none;border:none;color:var(--color);cursor:pointer;display:flex;justify-content:center;margin-bottom:auto;padding:0}.x-ai-carousel-title-button-icon{aspect-ratio:1/1;height:1rem;transition:transform .3s ease}.x-ai-carousel-title-button-icon--expanded{transform:rotate(180deg)}.x-ai-carousel-suggestion{display:flex;gap:8px}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
+var css = ".x-ai-carousel{--color:var(--x-ai-carousel-color,#bbc9cf);--color-lighter:var(--x-ai-carousel-color-lighter,color-mix(in srgb,var(--color) 25%,#fff));background-color:var(--color-lighter);border-radius:1.5rem;padding:8px 0;position:relative}.x-ai-carousel-title{align-items:flex-start;cursor:pointer;display:flex;font-size:12px;gap:8px;margin:0 14px 8px}.x-ai-carousel-title-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-ai-carousel-title-text--expanded{white-space:normal}.x-ai-carousel-title-icon{aspect-ratio:1/1;color:var(--color);flex-shrink:0;height:1rem;margin-bottom:auto}.x-ai-carousel-title-button{align-items:center;background:none;border:none;color:var(--color);cursor:pointer;display:flex;justify-content:center;margin-bottom:auto;padding:0}.x-ai-carousel-title-button-icon{aspect-ratio:1/1;height:1rem;transition:transform .3s ease}.x-ai-carousel-title-button-icon--expanded{transform:rotate(180deg)}.x-ai-carousel-suggestions{display:flex;flex-direction:column;gap:.5rem;padding-bottom:1rem}.x-ai-carousel-suggestion{display:flex;flex-direction:column;gap:8px}.x-ai-carousel-suggestion-query-btn{align-items:center;background-color:transparent;border-color:transparent;cursor:pointer;display:flex;font-weight:700;gap:1rem;margin-left:1rem;margin-right:1rem;width:fit-content}.x-ai-carousel-suggestion-query-btn-icon{aspect-ratio:1/1;height:1rem}.x-ai-carousel-suggestion-results{display:flex;gap:1rem;padding-left:1rem;padding-right:1rem}";
 injectCss(css);
 
 export { css };