@dcodegroup-au/page-builder 0.7.7 → 0.7.8

package/dist/page-builder.css

@@ -700,6 +700,9 @@ select {
 .pointer-events-none {
   pointer-events: none;
 }
+.pointer-events-auto {
+  pointer-events: auto;
+}
 .fixed {
   position: fixed;
 }
@@ -742,9 +745,6 @@ select {
 .right-2 {
   right: 0.5rem;
 }
-.right-4 {
-  right: 1rem;
-}
 .right-\[-17px\] {
   right: -17px;
 }
@@ -760,9 +760,6 @@ select {
 .top-6 {
   top: 1.5rem;
 }
-.top-\[-65px\] {
-  top: -65px;
-}
 .top-\[100\%\] {
   top: 100%;
 }
@@ -855,9 +852,6 @@ select {
 .mb-8 {
   margin-bottom: 2rem;
 }
-.mb-\[40px\] {
-  margin-bottom: 40px;
-}
 .mb-\[48px\] {
   margin-bottom: 48px;
 }
@@ -1447,18 +1441,12 @@ select {
 .rounded-br-\[24px\] {
   border-bottom-right-radius: 24px;
 }
-.rounded-br-\[48px\] {
-  border-bottom-right-radius: 48px;
-}
 .rounded-tl-3xl {
   border-top-left-radius: 1.5rem;
 }
 .rounded-tl-\[24px\] {
   border-top-left-radius: 24px;
 }
-.rounded-tl-\[48px\] {
-  border-top-left-radius: 48px;
-}
 .rounded-tr-\[0px\] {
   border-top-right-radius: 0px;
 }
@@ -2102,6 +2090,9 @@ select {
 .\!no-underline {
   text-decoration-line: none !important;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -2901,10 +2892,6 @@ select {
   text-decoration-line: underline;
 }
 
-.hover\:opacity-100:hover {
-  opacity: 1;
-}
-
 .hover\:opacity-60:hover {
   opacity: 0.6;
 }
@@ -3010,11 +2997,6 @@ select {
 
 @media not all and (min-width: 768px) {
 
-  .max-md\:mx-\[30px\] {
-    margin-left: 30px;
-    margin-right: 30px;
-  }
-
   .max-md\:w-full {
     width: 100%;
   }
@@ -3039,6 +3021,10 @@ select {
 
 @media not all and (min-width: 640px) {
 
+  .max-sm\:bottom-0 {
+    bottom: 0px;
+  }
+
   .max-sm\:hidden {
     display: none;
   }
@@ -3084,6 +3070,10 @@ select {
 
 @media (min-width: 640px) {
 
+  .sm\:top-\[-65px\] {
+    top: -65px;
+  }
+
   .sm\:mb-2 {
     margin-bottom: 0.5rem;
   }
@@ -3123,6 +3113,10 @@ select {
     grid-template-columns: auto 240px;
   }
 
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
   .sm\:border-l-4 {
     border-left-width: 4px;
   }
@@ -3131,11 +3125,6 @@ select {
     padding: 0px;
   }
 
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -3150,6 +3139,10 @@ select {
     padding-left: 1rem;
   }
 
+  .sm\:pr-28 {
+    padding-right: 7rem;
+  }
+
   .sm\:pt-10 {
     padding-top: 2.5rem;
   }
@@ -3172,6 +3165,10 @@ select {
 
 @media (min-width: 768px) {
 
+  .md\:-right-28 {
+    right: -7rem;
+  }
+
   .md\:right-\[120px\] {
     right: 120px;
   }
@@ -3278,6 +3275,10 @@ select {
     padding-left: 1.5rem;
   }
 
+  .md\:pr-0 {
+    padding-right: 0px;
+  }
+
   .md\:pt-12 {
     padding-top: 3rem;
   }
@@ -3312,10 +3313,18 @@ select {
 
 @media (min-width: 1024px) {
 
+  .lg\:right-4 {
+    right: 1rem;
+  }
+
   .lg\:-mt-12 {
     margin-top: -3rem;
   }
 
+  .lg\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
   .lg\:mt-\[218px\] {
     margin-top: 218px;
   }
@@ -3422,6 +3431,14 @@ select {
     border-bottom-left-radius: 48px;
   }
 
+  .lg\:rounded-br-\[48px\] {
+    border-bottom-right-radius: 48px;
+  }
+
+  .lg\:rounded-tl-\[48px\] {
+    border-top-left-radius: 48px;
+  }
+
   .lg\:p-16 {
     padding: 4rem;
   }
@@ -3452,6 +3469,10 @@ select {
     padding-right: 4rem;
   }
 
+  .lg\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .lg\:pt-\[164px\] {
     padding-top: 164px;
   }
@@ -3519,11 +3540,6 @@ select {
 
 @media (min-width: 1440px) {
 
-  .\31xl\:mx-0 {
-    margin-left: 0px;
-    margin-right: 0px;
-  }
-
   .\31xl\:max-w-\[1872px\] {
     max-width: 1872px;
   }

package/dist/page-builder.es.js

@@ -46573,17 +46573,17 @@ function getScaleMultipliers(transformElements) {
   });
   return { widthMultiplier, heightMultiplier };
 }
-function getSnapAlignOffsetByItemsToShow(align, itemsToShow2) {
+function getSnapAlignOffsetByItemsToShow(align, itemsToShow) {
   switch (align) {
     case "start":
       return 0;
     case "center":
     case "center-odd":
-      return (itemsToShow2 - 1) / 2;
+      return (itemsToShow - 1) / 2;
     case "center-even":
-      return (itemsToShow2 - 2) / 2;
+      return (itemsToShow - 2) / 2;
     case "end":
-      return itemsToShow2 - 1;
+      return itemsToShow - 1;
     default:
       return 0;
   }
@@ -46603,9 +46603,9 @@ function getSnapAlignOffsetBySlideAndViewport(align, slideSize, viewportSize) {
       return 0;
   }
 }
-function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow: itemsToShow2 }) {
-  if (itemsToShow2 !== void 0) {
-    return getSnapAlignOffsetByItemsToShow(align, itemsToShow2);
+function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow }) {
+  if (itemsToShow !== void 0) {
+    return getSnapAlignOffsetByItemsToShow(align, itemsToShow);
   }
   if (slideSize !== void 0 && viewportSize !== void 0) {
     return getSnapAlignOffsetBySlideAndViewport(align, slideSize, viewportSize);
@@ -47031,9 +47031,9 @@ const Carousel = defineComponent({
       if (isAuto.value) {
         slideSize.value = calculateAverage(slidesRect.value.map((slide) => slide[dimension.value]));
       } else {
-        const itemsToShow2 = Number(config2.itemsToShow);
-        const totalGap = (itemsToShow2 - 1) * config2.gap;
-        slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow2;
+        const itemsToShow = Number(config2.itemsToShow);
+        const totalGap = (itemsToShow - 1) * config2.gap;
+        slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow;
       }
     }
     function updateSlidesData() {
@@ -47315,8 +47315,8 @@ const Carousel = defineComponent({
       if (isAuto.value) {
         return { before: slides.length, after: slides.length };
       }
-      const itemsToShow2 = Number(config2.itemsToShow);
-      const slidesToClone = Math.ceil(itemsToShow2 + (config2.itemsToScroll - 1));
+      const itemsToShow = Number(config2.itemsToShow);
+      const slidesToClone = Math.ceil(itemsToShow + (config2.itemsToScroll - 1));
       const before = slidesToClone - activeSlideIndex.value;
       const after = slidesToClone - (slidesCount.value - (activeSlideIndex.value + 1));
       return {
@@ -47678,14 +47678,14 @@ defineComponent({
   },
   setup(props) {
     let carousel = inject(injectCarousel, null);
-    const itemsToShow2 = computed(() => carousel.config.itemsToShow);
+    const itemsToShow = computed(() => carousel.config.itemsToShow);
     const offset = computed(() => getSnapAlignOffset({
       align: carousel.config.snapAlign,
-      itemsToShow: itemsToShow2.value
+      itemsToShow: itemsToShow.value
     }));
-    const isPaginated = computed(() => props.paginateByItemsToShow && itemsToShow2.value > 1);
-    const currentPage = computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow2.value));
-    const pageCount = computed(() => Math.ceil(carousel.slidesCount / itemsToShow2.value));
+    const isPaginated = computed(() => props.paginateByItemsToShow && itemsToShow.value > 1);
+    const currentPage = computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow.value));
+    const pageCount = computed(() => Math.ceil(carousel.slidesCount / itemsToShow.value));
     const isActive = (slide) => mapNumberToRange(isPaginated.value ? {
       val: currentPage.value,
       max: pageCount.value - 1,
@@ -47774,8 +47774,8 @@ const Slide = defineComponent({
       if (carousel.config.itemsToShow === "auto") {
         return;
       }
-      const itemsToShow2 = carousel.config.itemsToShow;
-      const dimension = carousel.config.gap > 0 && itemsToShow2 > 1 ? `calc(${100 / itemsToShow2}% - ${carousel.config.gap * (itemsToShow2 - 1) / itemsToShow2}px)` : `${100 / itemsToShow2}%`;
+      const itemsToShow = carousel.config.itemsToShow;
+      const dimension = carousel.config.gap > 0 && itemsToShow > 1 ? `calc(${100 / itemsToShow}% - ${carousel.config.gap * (itemsToShow - 1) / itemsToShow}px)` : `${100 / itemsToShow}%`;
       return carousel.isVertical ? { height: dimension } : { width: dimension };
     });
     carousel.slideRegistry.registerSlide(instance, props.index);
@@ -48014,7 +48014,7 @@ const _sfc_main$p = {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e, _f, _g;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-col gap-4 sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
+        class: normalizeClass(["flex flex-col gap-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
       }, [
         ((_b = component.value) == null ? void 0 : _b.title) ? (openBlock(), createElementBlock("p", {
           key: 0,
@@ -48454,13 +48454,12 @@ const _hoisted_10$a = {
 const _hoisted_11$9 = ["innerHTML"];
 const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
 const _hoisted_13$7 = ["href"];
-const _hoisted_14$6 = { class: "absolute top-[-65px] right-4 flex gap-4" };
+const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 md:-right-28 lg:right-4 flex gap-4" };
 const _hoisted_15$4 = {
   key: 0,
-  class: "flex justify-center mb-[40px]"
+  class: "flex sm:justify-center mb-6 lg:mb-10"
 };
 const _hoisted_16$2 = ["href", "target"];
-const itemsToShow = 4;
 const _sfc_main$j = {
   __name: "CarouselPresenter",
   props: {
@@ -48478,20 +48477,30 @@ const _sfc_main$j = {
     const VCarouselPrimaryButton = inject("VCarouselPrimaryButton", _sfc_main$k);
     const props = __props;
     const currentSlide = ref(0);
+    const itemsToShow = ref(4);
     const slides = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
     const windowWidth = ref(480);
+    const slideWidth = ref(480);
     onMounted(() => {
       windowWidth.value = window.innerWidth;
+      adjustSlides();
       window.addEventListener("resize", updateWidth);
     });
     onUnmounted(() => {
       window.removeEventListener("resize", updateWidth);
     });
+    const activeRightButton = computed(() => {
+      return currentSlide.value <= slides.length - itemsToShow.value;
+    });
+    const activeLeftButton = computed(() => {
+      return currentSlide.value !== 0;
+    });
     const updateWidth = () => {
       windowWidth.value = window.innerWidth;
+      adjustSlides();
     };
     const nextSlide = () => {
-      if (currentSlide.value <= slides.length - itemsToShow) {
+      if (currentSlide.value <= slides.length - itemsToShow.value) {
         currentSlide.value++;
       }
     };
@@ -48500,12 +48509,22 @@ const _sfc_main$j = {
         currentSlide.value--;
       }
     };
+    const adjustSlides = () => {
+      if (windowWidth.value < 512) {
+        itemsToShow.value = 2;
+        slideWidth.value = windowWidth.value - 32;
+      } else if (windowWidth.value < 1120) {
+        itemsToShow.value = 2;
+      } else if (windowWidth.value < 1630) {
+        itemsToShow.value = 3;
+      }
+    };
     return (_ctx, _cache) => {
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$y, [
         createElementVNode("div", {
           class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
-          style: normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= 480 ? 480 : windowWidth.value) + 24)}px)` })
+          style: normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
         }, [
           (openBlock(), createElementBlock(Fragment, null, renderList(slides, (slide, index) => {
             return createElementVNode("div", {
@@ -48575,16 +48594,16 @@ const _sfc_main$j = {
         createElementVNode("div", _hoisted_14$6, [
           createElementVNode("button", {
             onClick: prevSlide,
-            class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+            class: normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-none": !activeLeftButton.value }])
           }, [
             createVNode(unref(ChevronLeft), { class: "w-6 h-6" })
-          ]),
+          ], 2),
           createElementVNode("button", {
             onClick: nextSlide,
-            class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+            class: normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
           }, [
             createVNode(unref(ChevronRight), { class: "w-6 h-6" })
-          ])
+          ], 2)
         ]),
         ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
           createElementVNode("a", {
@@ -48601,7 +48620,7 @@ const _sfc_main$j = {
   }
 };
 const _hoisted_1$x = { class: "pb-container" };
-const _hoisted_2$g = { class: "max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]" };
+const _hoisted_2$g = { class: "rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0" };
 const _sfc_main$i = {
   __name: "CollectionCarousel",
   props: {
@@ -48622,7 +48641,7 @@ const _sfc_main$i = {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["overflow-hidden", { "rounded-br-[48px] rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
+        class: normalizeClass(["overflow-hidden", { "rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
       }, [
         createElementVNode("div", _hoisted_1$x, [
           createElementVNode("div", _hoisted_2$g, [

package/dist/page-builder.umd.js

@@ -46576,17 +46576,17 @@ ${escapeText(this.code(index, length))}
     });
     return { widthMultiplier, heightMultiplier };
   }
-  function getSnapAlignOffsetByItemsToShow(align, itemsToShow2) {
+  function getSnapAlignOffsetByItemsToShow(align, itemsToShow) {
     switch (align) {
       case "start":
         return 0;
       case "center":
       case "center-odd":
-        return (itemsToShow2 - 1) / 2;
+        return (itemsToShow - 1) / 2;
       case "center-even":
-        return (itemsToShow2 - 2) / 2;
+        return (itemsToShow - 2) / 2;
       case "end":
-        return itemsToShow2 - 1;
+        return itemsToShow - 1;
       default:
         return 0;
     }
@@ -46606,9 +46606,9 @@ ${escapeText(this.code(index, length))}
         return 0;
     }
   }
-  function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow: itemsToShow2 }) {
-    if (itemsToShow2 !== void 0) {
-      return getSnapAlignOffsetByItemsToShow(align, itemsToShow2);
+  function getSnapAlignOffset({ slideSize, viewportSize, align, itemsToShow }) {
+    if (itemsToShow !== void 0) {
+      return getSnapAlignOffsetByItemsToShow(align, itemsToShow);
     }
     if (slideSize !== void 0 && viewportSize !== void 0) {
       return getSnapAlignOffsetBySlideAndViewport(align, slideSize, viewportSize);
@@ -47034,9 +47034,9 @@ ${escapeText(this.code(index, length))}
         if (isAuto.value) {
           slideSize.value = calculateAverage(slidesRect.value.map((slide) => slide[dimension.value]));
         } else {
-          const itemsToShow2 = Number(config2.itemsToShow);
-          const totalGap = (itemsToShow2 - 1) * config2.gap;
-          slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow2;
+          const itemsToShow = Number(config2.itemsToShow);
+          const totalGap = (itemsToShow - 1) * config2.gap;
+          slideSize.value = (viewportRect.value[dimension.value] - totalGap) / itemsToShow;
         }
       }
       function updateSlidesData() {
@@ -47318,8 +47318,8 @@ ${escapeText(this.code(index, length))}
         if (isAuto.value) {
           return { before: slides.length, after: slides.length };
         }
-        const itemsToShow2 = Number(config2.itemsToShow);
-        const slidesToClone = Math.ceil(itemsToShow2 + (config2.itemsToScroll - 1));
+        const itemsToShow = Number(config2.itemsToShow);
+        const slidesToClone = Math.ceil(itemsToShow + (config2.itemsToScroll - 1));
         const before = slidesToClone - activeSlideIndex.value;
         const after = slidesToClone - (slidesCount.value - (activeSlideIndex.value + 1));
         return {
@@ -47681,14 +47681,14 @@ ${escapeText(this.code(index, length))}
     },
     setup(props) {
       let carousel = vue.inject(injectCarousel, null);
-      const itemsToShow2 = vue.computed(() => carousel.config.itemsToShow);
+      const itemsToShow = vue.computed(() => carousel.config.itemsToShow);
       const offset = vue.computed(() => getSnapAlignOffset({
         align: carousel.config.snapAlign,
-        itemsToShow: itemsToShow2.value
+        itemsToShow: itemsToShow.value
       }));
-      const isPaginated = vue.computed(() => props.paginateByItemsToShow && itemsToShow2.value > 1);
-      const currentPage = vue.computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow2.value));
-      const pageCount = vue.computed(() => Math.ceil(carousel.slidesCount / itemsToShow2.value));
+      const isPaginated = vue.computed(() => props.paginateByItemsToShow && itemsToShow.value > 1);
+      const currentPage = vue.computed(() => Math.ceil((carousel.activeSlide - offset.value) / itemsToShow.value));
+      const pageCount = vue.computed(() => Math.ceil(carousel.slidesCount / itemsToShow.value));
       const isActive = (slide) => mapNumberToRange(isPaginated.value ? {
         val: currentPage.value,
         max: pageCount.value - 1,
@@ -47777,8 +47777,8 @@ ${escapeText(this.code(index, length))}
         if (carousel.config.itemsToShow === "auto") {
           return;
         }
-        const itemsToShow2 = carousel.config.itemsToShow;
-        const dimension = carousel.config.gap > 0 && itemsToShow2 > 1 ? `calc(${100 / itemsToShow2}% - ${carousel.config.gap * (itemsToShow2 - 1) / itemsToShow2}px)` : `${100 / itemsToShow2}%`;
+        const itemsToShow = carousel.config.itemsToShow;
+        const dimension = carousel.config.gap > 0 && itemsToShow > 1 ? `calc(${100 / itemsToShow}% - ${carousel.config.gap * (itemsToShow - 1) / itemsToShow}px)` : `${100 / itemsToShow}%`;
         return carousel.isVertical ? { height: dimension } : { width: dimension };
       });
       carousel.slideRegistry.registerSlide(instance, props.index);
@@ -48017,7 +48017,7 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d, _e, _f, _g;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-col gap-4 sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
+          class: vue.normalizeClass(["flex flex-col gap-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
         }, [
           ((_b = component.value) == null ? void 0 : _b.title) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 0,
@@ -48457,13 +48457,12 @@ ${escapeText(this.code(index, length))}
   const _hoisted_11$9 = ["innerHTML"];
   const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
   const _hoisted_13$7 = ["href"];
-  const _hoisted_14$6 = { class: "absolute top-[-65px] right-4 flex gap-4" };
+  const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 md:-right-28 lg:right-4 flex gap-4" };
   const _hoisted_15$4 = {
     key: 0,
-    class: "flex justify-center mb-[40px]"
+    class: "flex sm:justify-center mb-6 lg:mb-10"
   };
   const _hoisted_16$2 = ["href", "target"];
-  const itemsToShow = 4;
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48481,20 +48480,30 @@ ${escapeText(this.code(index, length))}
       const VCarouselPrimaryButton = vue.inject("VCarouselPrimaryButton", _sfc_main$k);
       const props = __props;
       const currentSlide = vue.ref(0);
+      const itemsToShow = vue.ref(4);
       const slides = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
       const windowWidth = vue.ref(480);
+      const slideWidth = vue.ref(480);
       vue.onMounted(() => {
         windowWidth.value = window.innerWidth;
+        adjustSlides();
         window.addEventListener("resize", updateWidth);
       });
       vue.onUnmounted(() => {
         window.removeEventListener("resize", updateWidth);
       });
+      const activeRightButton = vue.computed(() => {
+        return currentSlide.value <= slides.length - itemsToShow.value;
+      });
+      const activeLeftButton = vue.computed(() => {
+        return currentSlide.value !== 0;
+      });
       const updateWidth = () => {
         windowWidth.value = window.innerWidth;
+        adjustSlides();
       };
       const nextSlide = () => {
-        if (currentSlide.value <= slides.length - itemsToShow) {
+        if (currentSlide.value <= slides.length - itemsToShow.value) {
           currentSlide.value++;
         }
       };
@@ -48503,12 +48512,22 @@ ${escapeText(this.code(index, length))}
           currentSlide.value--;
         }
       };
+      const adjustSlides = () => {
+        if (windowWidth.value < 512) {
+          itemsToShow.value = 2;
+          slideWidth.value = windowWidth.value - 32;
+        } else if (windowWidth.value < 1120) {
+          itemsToShow.value = 2;
+        } else if (windowWidth.value < 1630) {
+          itemsToShow.value = 3;
+        }
+      };
       return (_ctx, _cache) => {
         var _a2;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
           vue.createElementVNode("div", {
             class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
-            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= 480 ? 480 : windowWidth.value) + 24)}px)` })
+            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
           }, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(slides, (slide, index) => {
               return vue.createElementVNode("div", {
@@ -48578,16 +48597,16 @@ ${escapeText(this.code(index, length))}
           vue.createElementVNode("div", _hoisted_14$6, [
             vue.createElementVNode("button", {
               onClick: prevSlide,
-              class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+              class: vue.normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-none": !activeLeftButton.value }])
             }, [
               vue.createVNode(vue.unref(ChevronLeft), { class: "w-6 h-6" })
-            ]),
+            ], 2),
             vue.createElementVNode("button", {
               onClick: nextSlide,
-              class: "p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+              class: vue.normalizeClass(["p-2.5 bg-white text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
             }, [
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
-            ])
+            ], 2)
           ]),
           ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
             vue.createElementVNode("a", {
@@ -48604,7 +48623,7 @@ ${escapeText(this.code(index, length))}
     }
   };
   const _hoisted_1$x = { class: "pb-container" };
-  const _hoisted_2$g = { class: "max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]" };
+  const _hoisted_2$g = { class: "rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0" };
   const _sfc_main$i = {
     __name: "CollectionCarousel",
     props: {
@@ -48625,7 +48644,7 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["overflow-hidden", { "rounded-br-[48px] rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
+          class: vue.normalizeClass(["overflow-hidden", { "rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100": (_a = section.value) == null ? void 0 : _a.has_background }])
         }, [
           vue.createElementVNode("div", _hoisted_1$x, [
             vue.createElementVNode("div", _hoisted_2$g, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/presenters/components/CarouselPresenter.vue

@@ -3,7 +3,7 @@
     <!-- Slider Wrapper -->
     <div
         class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
-        :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= 480 ? 480 : windowWidth) + 24)}px)` }"
+        :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
     >
       <div
           v-for="(slide, index) in slides"
@@ -64,21 +64,23 @@
     </div>
 
     <!-- Control Buttons -->
-    <div class="absolute top-[-65px] right-4 flex gap-4">
+    <div class="absolute max-sm:bottom-0 sm:top-[-65px] right-0 md:-right-28 lg:right-4 flex gap-4">
       <button
           @click="prevSlide"
-          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+          class="p-2.5 bg-white text-navy-800 rounded-full opacity-100"
+          :class="{'opacity-50 pointer-events-none': !activeLeftButton}"
       >
         <ChevronLeft class="w-6 h-6" />
       </button>
       <button
           @click="nextSlide"
-          class="p-2.5 bg-white text-navy-800 rounded-full hover:opacity-100 opacity-50"
+          class="p-2.5 bg-white text-navy-800 rounded-full opacity-100"
+          :class="{'opacity-50 pointer-events-auto': !activeRightButton}"
       >
         <ChevronRight class="w-6 h-6" />
       </button>
     </div>
-    <div v-if="component?.button" class="flex justify-center mb-[40px]">
+    <div v-if="component?.button" class="flex sm:justify-center mb-6 lg:mb-10">
       <a
           class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
           :href="formatUrl(component.button.url)"
@@ -91,7 +93,7 @@
 </template>
 
 <script setup>
-import { ref, inject, onMounted, onUnmounted } from 'vue'
+import { ref, inject, onMounted, onUnmounted, computed } from 'vue';
 import Clock from "@/assets/img/icons/clock.svg";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
@@ -115,12 +117,14 @@ const props = defineProps({
 });
 
 const currentSlide = ref(0); // Start at 0
-const itemsToShow = 4; // Number of items to show at a time
+const itemsToShow = ref(4); // Number of items to show at a time
 const slides = [...props.component.content?.items || []];
 const windowWidth = ref(480)
+const slideWidth = ref(480)
 
 onMounted(() => {
   windowWidth.value = window.innerWidth
+  adjustSlides();
   window.addEventListener('resize', updateWidth)
 })
 
@@ -128,13 +132,22 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateWidth)
 })
 
+const activeRightButton = computed(() => {
+  return currentSlide.value <= slides.length - itemsToShow.value;
+})
+
+const activeLeftButton = computed(() => {
+  return currentSlide.value !== 0;
+})
+
 const updateWidth = () => {
-  windowWidth.value = window.innerWidth
+  windowWidth.value = window.innerWidth;
+  adjustSlides();
 }
 
 // Navigate to the next slide
 const nextSlide = () => {
-  if (currentSlide.value <= slides.length - itemsToShow) {
+  if (currentSlide.value <= slides.length - itemsToShow.value) {
     currentSlide.value++;
   }
 };
@@ -145,6 +158,17 @@ const prevSlide = () => {
     currentSlide.value--;
   }
 };
+
+const adjustSlides = () => {
+  if (windowWidth.value < 512) {
+    itemsToShow.value = 2;
+    slideWidth.value = windowWidth.value - 32;
+  } else if (windowWidth.value < 1120) {
+    itemsToShow.value = 2;
+  } else if (windowWidth.value < 1630) {
+    itemsToShow.value = 3;
+  }
+}
 </script>
 <style>
 .multiline-ellipsis {

package/src/components/presenters/components/HeaderPresenter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 sm:px-0 px-4" :class="{'items-center': component?.center}">
+  <div class="flex flex-col gap-4" :class="{'items-center': component?.center}">
     <p
         v-if="component?.title"
         class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-white"

package/src/components/presenters/modules/CollectionCarousel.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
+  <div class="overflow-hidden" :class="{'rounded-br-3xl lg:rounded-br-[48px] rounded-tl-3xl lg:rounded-tl-[48px] bg-aqua-100': section?.has_background}">
     <div class="pb-container">
-      <div class="max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]">
+      <div class="rounded-3xl lg:rounded-[48px] pt-6 lg:pt-10 sm:pr-28 md:pr-0">
         <VHeaderPresenter :component="headerComponent" />
       </div>
     </div>