@dcodegroup-au/page-builder 0.8.3 → 0.8.4

package/dist/page-builder.css

@@ -727,6 +727,9 @@ select {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-10 {
+  bottom: 2.5rem;
+}
 .bottom-\[40px\] {
   bottom: 40px;
 }
@@ -867,9 +870,6 @@ select {
 .mr-3 {
   margin-right: 0.75rem;
 }
-.mr-6 {
-  margin-right: 1.5rem;
-}
 .mr-\[40px\] {
   margin-right: 40px;
 }
@@ -1273,6 +1273,9 @@ select {
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1318,9 +1321,6 @@ select {
 .\!gap-4 {
   gap: 1rem !important;
 }
-.gap-0 {
-  gap: 0px;
-}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -3152,6 +3152,14 @@ select {
     margin-top: 2rem;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:h-5 {
     height: 1.25rem;
   }
@@ -3180,18 +3188,23 @@ select {
     max-width: 324px;
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .md\:\!translate-x-0 {
+    --tw-translate-x: 0px !important;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
   }
 
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .md\:flex-row {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:\!gap-8 {
     gap: 2rem !important;
   }
@@ -3235,6 +3248,11 @@ select {
     padding-right: 6rem;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -3895,7 +3913,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-aab1688f] {
+.card[data-v-269a5876] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -45236,7 +45236,7 @@ const _hoisted_15$7 = {
 };
 const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_18$3 = { key: 2 };
+const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
   props: {
@@ -45436,7 +45436,7 @@ const _sfc_main$C = {
                       sites: _ctx.sites,
                       forms: __props.forms
                     }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : createCommentVNode("", true)
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$3, [
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$2, [
                     createVNode(_sfc_main$P, {
                       "is-vertical": "",
                       field: "image",
@@ -46195,7 +46195,7 @@ const _hoisted_15$6 = {
 };
 const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
 const _hoisted_17$2 = ["value"];
-const _hoisted_18$2 = {
+const _hoisted_18$1 = {
   key: 1,
   class: "rounded-xl bg-gray-50 px-6 py-5"
 };
@@ -46360,7 +46360,7 @@ const _sfc_main$t = {
                 _cache[2] || (_cache[2] = createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
               ])
             ])) : createCommentVNode("", true),
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$1, [
               createVNode(Instructions)
             ])) : createCommentVNode("", true),
             (openBlock(), createBlock(resolveDynamicComponent(currentComponent.value), {
@@ -48545,13 +48545,13 @@ const _sfc_main$j = {
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$y, [
         createElementVNode("div", {
-          class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
+          class: "slider-wrapper flex transition-transform duration-500 gap-6 mb-6",
           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", {
               key: index,
-              class: normalizeClass(["slider-item flex-shrink-0 mr-6 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
+              class: normalizeClass(["slider-item flex-shrink-0 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
             }, [
               createElementVNode("div", {
                 class: normalizeClass(["w-full p-4 rounded-lg md:rounded-2xl", { "bg-gray-50 h-full flex flex-col justify-between": !__props.hasBackground, "bg-white": __props.hasBackground }])
@@ -48699,36 +48699,35 @@ function render$e(_ctx, _cache) {
   ]));
 }
 const PlayButton = { render: render$e };
-const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
-const _hoisted_2$f = {
+const _hoisted_1$v = {
   key: 0,
   class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
 };
-const _hoisted_3$f = {
+const _hoisted_2$f = {
   key: 0,
   class: "w-full h-[281px] md:rounded-2xl"
 };
-const _hoisted_4$f = ["src"];
-const _hoisted_5$f = ["onClick"];
-const _hoisted_6$f = ["src"];
-const _hoisted_7$e = ["href"];
-const _hoisted_8$d = ["src"];
-const _hoisted_9$d = ["href"];
-const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
-const _hoisted_11$8 = {
+const _hoisted_3$f = ["src"];
+const _hoisted_4$f = ["onClick"];
+const _hoisted_5$f = ["src"];
+const _hoisted_6$f = ["href"];
+const _hoisted_7$e = ["src"];
+const _hoisted_8$d = ["href"];
+const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+const _hoisted_10$9 = {
   key: 0,
-  class: "flex gap-2"
+  class: "flex gap-2 flex-wrap"
 };
+const _hoisted_11$8 = ["href"];
 const _hoisted_12$6 = ["href"];
-const _hoisted_13$6 = ["href"];
-const _hoisted_14$5 = { class: "flex justify-between" };
-const _hoisted_15$4 = ["innerHTML"];
-const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
-const _hoisted_17$1 = {
+const _hoisted_13$6 = { class: "flex justify-between" };
+const _hoisted_14$5 = ["innerHTML"];
+const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
+const _hoisted_16$1 = {
   key: 0,
   class: "flex justify-center"
 };
-const _hoisted_18$1 = ["href", "target"];
+const _hoisted_17$1 = ["href", "target"];
 const _sfc_main$h = {
   __name: "CollectionGridPresenter",
   props: {
@@ -48740,6 +48739,37 @@ const _sfc_main$h = {
   setup(__props) {
     var _a, _b;
     const props = __props;
+    const currentSlide = ref(0);
+    const windowWidth = ref(480);
+    const slideWidth = ref(480);
+    onMounted(() => {
+      windowWidth.value = window.innerWidth;
+      slideWidth.value = windowWidth.value - 32;
+      window.addEventListener("resize", updateWidth);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", updateWidth);
+    });
+    const activeRightButton = computed(() => {
+      return currentSlide.value <= items.length - 2;
+    });
+    const activeLeftButton = computed(() => {
+      return currentSlide.value !== 0;
+    });
+    const updateWidth = () => {
+      windowWidth.value = window.innerWidth;
+      slideWidth.value = windowWidth.value - 32;
+    };
+    const nextSlide = () => {
+      if (currentSlide.value <= items.length - 2) {
+        currentSlide.value++;
+      }
+    };
+    const prevSlide = () => {
+      if (currentSlide.value > 0) {
+        currentSlide.value--;
+      }
+    };
     let items = [];
     if (props.component.type === "news_grid") {
       items = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
@@ -48773,25 +48803,28 @@ const _sfc_main$h = {
       return `https://www.youtube.com/embed/${id}`;
     };
     return (_ctx, _cache) => {
-      var _a2, _b2;
+      var _a2, _b2, _c;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-col items-center gap-6 pb-[40px] pt-[24px]", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
+        class: normalizeClass(["flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
       }, [
-        createElementVNode("div", _hoisted_1$v, [
+        createElementVNode("div", {
+          class: "flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0",
+          style: normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (card, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: "card bg-white sm:p-0 px-4 w-full"
+              class: "card bg-white sm:p-0 md:px-4 w-full flex-shrink-0"
             }, [
-              __props.component.type === "video_grid" ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
-                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_3$f, [
+              __props.component.type === "video_grid" ? (openBlock(), createElementBlock("div", _hoisted_1$v, [
+                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
                   createElementVNode("iframe", {
                     src: getEmbedUrl(card),
                     frameborder: "0",
                     allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                     allowfullscreen: "",
                     class: "w-full h-full"
-                  }, null, 8, _hoisted_4$f)
+                  }, null, 8, _hoisted_3$f)
                 ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   createElementVNode("video", {
                     onClick: ($event) => togglePlayPause(index),
@@ -48804,8 +48837,8 @@ const _sfc_main$h = {
                   }, [
                     createElementVNode("source", {
                       src: `${card.video}#t=2`
-                    }, null, 8, _hoisted_6$f)
-                  ], 8, _hoisted_5$f),
+                    }, null, 8, _hoisted_5$f)
+                  ], 8, _hoisted_4$f),
                   !isPlaying.value[index] ? (openBlock(), createBlock(unref(PlayButton), {
                     key: 0,
                     class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
@@ -48823,8 +48856,8 @@ const _sfc_main$h = {
                   src: card.image,
                   alt: "Card Image",
                   class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
-                }, null, 8, _hoisted_8$d)
-              ], 8, _hoisted_7$e)) : (openBlock(), createElementBlock("a", {
+                }, null, 8, _hoisted_7$e)
+              ], 8, _hoisted_6$f)) : (openBlock(), createElementBlock("a", {
                 key: 2,
                 href: (card == null ? void 0 : card.link) ? unref(formatUrl)(card.link) : "javascript:void(0)",
                 class: "mb-4 w-full",
@@ -48836,15 +48869,15 @@ const _sfc_main$h = {
                   alt: "No Available",
                   src: _imports_0
                 }, null, -1)
-              ]), 8, _hoisted_9$d)),
-              createElementVNode("div", _hoisted_10$9, [
-                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
+              ]), 8, _hoisted_8$d)),
+              createElementVNode("div", _hoisted_9$d, [
+                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(card.categories, (tag) => {
                     return openBlock(), createElementBlock("a", {
                       key: tag,
                       href: tag.link ? unref(formatUrl)(tag.link) : "javascript:void(0)",
                       class: normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
-                    }, toDisplayString(tag.name), 11, _hoisted_12$6);
+                    }, toDisplayString(tag.name), 11, _hoisted_11$8);
                   }), 128))
                 ])) : createCommentVNode("", true),
                 (card == null ? void 0 : card.link) ? (openBlock(), createElementBlock("a", {
@@ -48854,20 +48887,36 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_14$5, [
+                  createElementVNode("div", _hoisted_13$6, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_15$4),
+                    }, null, 8, _hoisted_14$5),
                     createVNode(unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                   ])
-                ], 8, _hoisted_13$6)) : createCommentVNode("", true),
-                createElementVNode("p", _hoisted_16$1, toDisplayString(card.dateTime), 1)
+                ], 8, _hoisted_12$6)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_15$4, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
-        ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_17$1, [
+        ], 4),
+        createElementVNode("div", {
+          class: normalizeClass(["md:hidden absolute right-0 flex gap-4", Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? "bottom-10" : "bottom-0"])
+        }, [
+          createElementVNode("button", {
+            onClick: prevSlide,
+            class: normalizeClass(["p-2.5 bg-aqua-100 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: normalizeClass(["p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
+          }, [
+            createVNode(unref(ChevronRight), { class: "w-6 h-6" })
+          ], 2)
+        ], 2),
+        Object.keys(unref(button)).length && ((_c = unref(button)) == null ? void 0 : _c.show) ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
           createElementVNode("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: unref(formatUrl)(unref(button).url),
@@ -48875,13 +48924,13 @@ const _sfc_main$h = {
           }, [
             createTextVNode(toDisplayString(unref(button).title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_18$1)
+          ], 8, _hoisted_17$1)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
+const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-269a5876"]]);
 const _hoisted_1$u = { class: "overflow-hidden" };
 const _sfc_main$g = {
   __name: "CollectionGrid",

package/dist/page-builder.umd.js

@@ -45239,7 +45239,7 @@ ${escapeText(this.code(index, length))}
   };
   const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_18$3 = { key: 2 };
+  const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
     props: {
@@ -45439,7 +45439,7 @@ ${escapeText(this.code(index, length))}
                         sites: _ctx.sites,
                         forms: __props.forms
                       }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : vue.createCommentVNode("", true)
-                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$3, [
+                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
                       vue.createVNode(_sfc_main$P, {
                         "is-vertical": "",
                         field: "image",
@@ -46198,7 +46198,7 @@ ${escapeText(this.code(index, length))}
   };
   const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
   const _hoisted_17$2 = ["value"];
-  const _hoisted_18$2 = {
+  const _hoisted_18$1 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
   };
@@ -46363,7 +46363,7 @@ ${escapeText(this.code(index, length))}
                   _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
                 ])
               ])) : vue.createCommentVNode("", true),
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [
                 vue.createVNode(Instructions)
               ])) : vue.createCommentVNode("", true),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(currentComponent.value), {
@@ -48548,13 +48548,13 @@ ${escapeText(this.code(index, length))}
         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",
+            class: "slider-wrapper flex transition-transform duration-500 gap-6 mb-6",
             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", {
                 key: index,
-                class: vue.normalizeClass(["slider-item flex-shrink-0 mr-6 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
+                class: vue.normalizeClass(["slider-item flex-shrink-0 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
               }, [
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(["w-full p-4 rounded-lg md:rounded-2xl", { "bg-gray-50 h-full flex flex-col justify-between": !__props.hasBackground, "bg-white": __props.hasBackground }])
@@ -48702,36 +48702,35 @@ ${escapeText(this.code(index, length))}
     ]));
   }
   const PlayButton = { render: render$e };
-  const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
-  const _hoisted_2$f = {
+  const _hoisted_1$v = {
     key: 0,
     class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
   };
-  const _hoisted_3$f = {
+  const _hoisted_2$f = {
     key: 0,
     class: "w-full h-[281px] md:rounded-2xl"
   };
-  const _hoisted_4$f = ["src"];
-  const _hoisted_5$f = ["onClick"];
-  const _hoisted_6$f = ["src"];
-  const _hoisted_7$e = ["href"];
-  const _hoisted_8$d = ["src"];
-  const _hoisted_9$d = ["href"];
-  const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_11$8 = {
+  const _hoisted_3$f = ["src"];
+  const _hoisted_4$f = ["onClick"];
+  const _hoisted_5$f = ["src"];
+  const _hoisted_6$f = ["href"];
+  const _hoisted_7$e = ["src"];
+  const _hoisted_8$d = ["href"];
+  const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_10$9 = {
     key: 0,
-    class: "flex gap-2"
+    class: "flex gap-2 flex-wrap"
   };
+  const _hoisted_11$8 = ["href"];
   const _hoisted_12$6 = ["href"];
-  const _hoisted_13$6 = ["href"];
-  const _hoisted_14$5 = { class: "flex justify-between" };
-  const _hoisted_15$4 = ["innerHTML"];
-  const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_17$1 = {
+  const _hoisted_13$6 = { class: "flex justify-between" };
+  const _hoisted_14$5 = ["innerHTML"];
+  const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_16$1 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_18$1 = ["href", "target"];
+  const _hoisted_17$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48743,6 +48742,37 @@ ${escapeText(this.code(index, length))}
     setup(__props) {
       var _a, _b;
       const props = __props;
+      const currentSlide = vue.ref(0);
+      const windowWidth = vue.ref(480);
+      const slideWidth = vue.ref(480);
+      vue.onMounted(() => {
+        windowWidth.value = window.innerWidth;
+        slideWidth.value = windowWidth.value - 32;
+        window.addEventListener("resize", updateWidth);
+      });
+      vue.onUnmounted(() => {
+        window.removeEventListener("resize", updateWidth);
+      });
+      const activeRightButton = vue.computed(() => {
+        return currentSlide.value <= items.length - 2;
+      });
+      const activeLeftButton = vue.computed(() => {
+        return currentSlide.value !== 0;
+      });
+      const updateWidth = () => {
+        windowWidth.value = window.innerWidth;
+        slideWidth.value = windowWidth.value - 32;
+      };
+      const nextSlide = () => {
+        if (currentSlide.value <= items.length - 2) {
+          currentSlide.value++;
+        }
+      };
+      const prevSlide = () => {
+        if (currentSlide.value > 0) {
+          currentSlide.value--;
+        }
+      };
       let items = [];
       if (props.component.type === "news_grid") {
         items = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
@@ -48776,25 +48806,28 @@ ${escapeText(this.code(index, length))}
         return `https://www.youtube.com/embed/${id}`;
       };
       return (_ctx, _cache) => {
-        var _a2, _b2;
+        var _a2, _b2, _c;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-col items-center gap-6 pb-[40px] pt-[24px]", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
+          class: vue.normalizeClass(["flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
         }, [
-          vue.createElementVNode("div", _hoisted_1$v, [
+          vue.createElementVNode("div", {
+            class: "flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0",
+            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
+          }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (card, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
-                class: "card bg-white sm:p-0 px-4 w-full"
+                class: "card bg-white sm:p-0 md:px-4 w-full flex-shrink-0"
               }, [
-                __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
-                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [
+                __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
                     vue.createElementVNode("iframe", {
                       src: getEmbedUrl(card),
                       frameborder: "0",
                       allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                       allowfullscreen: "",
                       class: "w-full h-full"
-                    }, null, 8, _hoisted_4$f)
+                    }, null, 8, _hoisted_3$f)
                   ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                     vue.createElementVNode("video", {
                       onClick: ($event) => togglePlayPause(index),
@@ -48807,8 +48840,8 @@ ${escapeText(this.code(index, length))}
                     }, [
                       vue.createElementVNode("source", {
                         src: `${card.video}#t=2`
-                      }, null, 8, _hoisted_6$f)
-                    ], 8, _hoisted_5$f),
+                      }, null, 8, _hoisted_5$f)
+                    ], 8, _hoisted_4$f),
                     !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
                       key: 0,
                       class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
@@ -48826,8 +48859,8 @@ ${escapeText(this.code(index, length))}
                     src: card.image,
                     alt: "Card Image",
                     class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
-                  }, null, 8, _hoisted_8$d)
-                ], 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("a", {
+                  }, null, 8, _hoisted_7$e)
+                ], 8, _hoisted_6$f)) : (vue.openBlock(), vue.createElementBlock("a", {
                   key: 2,
                   href: (card == null ? void 0 : card.link) ? vue.unref(formatUrl)(card.link) : "javascript:void(0)",
                   class: "mb-4 w-full",
@@ -48839,15 +48872,15 @@ ${escapeText(this.code(index, length))}
                     alt: "No Available",
                     src: _imports_0
                   }, null, -1)
-                ]), 8, _hoisted_9$d)),
-                vue.createElementVNode("div", _hoisted_10$9, [
-                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$8, [
+                ]), 8, _hoisted_8$d)),
+                vue.createElementVNode("div", _hoisted_9$d, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
                       return vue.openBlock(), vue.createElementBlock("a", {
                         key: tag,
                         href: tag.link ? vue.unref(formatUrl)(tag.link) : "javascript:void(0)",
                         class: vue.normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
-                      }, vue.toDisplayString(tag.name), 11, _hoisted_12$6);
+                      }, vue.toDisplayString(tag.name), 11, _hoisted_11$8);
                     }), 128))
                   ])) : vue.createCommentVNode("", true),
                   (card == null ? void 0 : card.link) ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -48857,20 +48890,36 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_14$5, [
+                    vue.createElementVNode("div", _hoisted_13$6, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_15$4),
+                      }, null, 8, _hoisted_14$5),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_13$6)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_16$1, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_12$6)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_15$4, vue.toDisplayString(card.dateTime), 1)
                 ])
               ]);
             }), 128))
-          ]),
-          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
+          ], 4),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["md:hidden absolute right-0 flex gap-4", Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? "bottom-10" : "bottom-0"])
+          }, [
+            vue.createElementVNode("button", {
+              onClick: prevSlide,
+              class: vue.normalizeClass(["p-2.5 bg-aqua-100 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: vue.normalizeClass(["p-2.5 bg-aqua-100 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)
+          ], 2),
+          Object.keys(vue.unref(button)).length && ((_c = vue.unref(button)) == null ? void 0 : _c.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
             vue.createElementVNode("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: vue.unref(formatUrl)(vue.unref(button).url),
@@ -48878,13 +48927,13 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(vue.unref(button).title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_18$1)
+            ], 8, _hoisted_17$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-269a5876"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",

package/package.json

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

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

@@ -2,13 +2,13 @@
   <div class="relative">
     <!-- Slider Wrapper -->
     <div
-        class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
+        class="slider-wrapper flex transition-transform duration-500 gap-6 mb-6"
         :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
     >
       <div
           v-for="(slide, index) in slides"
           :key="index"
-          class="slider-item flex-shrink-0 mr-6 w-[480px] max-w-full"
+          class="slider-item flex-shrink-0 w-[480px] max-w-full"
           :class="{'h-[318px]': !hasBackground, 'h-full': hasBackground}"
       >
         <div class="w-full p-4 rounded-lg md:rounded-2xl" :class="{'bg-gray-50 h-full flex flex-col justify-between': !hasBackground, 'bg-white': hasBackground}">
@@ -119,8 +119,8 @@ const props = defineProps({
 const currentSlide = ref(0); // Start at 0
 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)
+const windowWidth = ref(480);
+const slideWidth = ref(480);
 
 onMounted(() => {
   windowWidth.value = window.innerWidth

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
-      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4 w-full">
+  <div class="flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
+    <div class="flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0"
+         :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
+    >
+      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 md:px-4 w-full flex-shrink-0">
         <div v-if="component.type === 'video_grid'" class="relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden">
           <div v-if="card?.youtube_url && getEmbedUrl(card)" class="w-full h-[281px] md:rounded-2xl">
             <iframe
@@ -48,7 +50,7 @@
           <img class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl" alt="No Available" src="@/assets/img/no_image_available.jpeg">
         </a>
         <div class="flex flex-col gap-2 items-start text-left w-full">
-          <div v-if="card.categories && card.categories.length" class="flex gap-2">
+          <div v-if="card.categories && card.categories.length" class="flex gap-2 flex-wrap">
             <a
                 v-for="tag in card.categories"
                 :key="tag"
@@ -75,6 +77,25 @@
         </div>
       </div>
     </div>
+    <!-- Control Buttons -->
+    <div class="md:hidden absolute right-0 flex gap-4"
+         :class="Object.keys(button).length && button?.show ? 'bottom-10' : 'bottom-0'"
+    >
+      <button
+        @click="prevSlide"
+        class="p-2.5 bg-aqua-100 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-aqua-100 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="Object.keys(button).length && button?.show" class="flex justify-center">
       <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"
@@ -89,7 +110,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import ChevronRight from "@/assets/img/icons/chevron-right.svg";
+import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import PlayButton from "@/assets/svg/play.svg";
 import { formatUrl } from "@/components/helpers/common";
@@ -101,6 +124,47 @@ const props = defineProps({
   },
 });
 
+const currentSlide = ref(0);
+const windowWidth = ref(480);
+const slideWidth = ref(480);
+
+onMounted(() => {
+  windowWidth.value = window.innerWidth
+  slideWidth.value = windowWidth.value - 32;
+  window.addEventListener('resize', updateWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
+
+const activeRightButton = computed(() => {
+  return currentSlide.value <= items.length - 2;
+})
+
+const activeLeftButton = computed(() => {
+  return currentSlide.value !== 0;
+})
+
+const updateWidth = () => {
+  windowWidth.value = window.innerWidth;
+  slideWidth.value = windowWidth.value - 32;
+}
+
+// Navigate to the next slide
+const nextSlide = () => {
+  if (currentSlide.value <= items.length - 2) {
+    currentSlide.value++;
+  }
+};
+
+// Navigate to the previous slide
+const prevSlide = () => {
+  if (currentSlide.value > 0) {
+    currentSlide.value--;
+  }
+};
+
 let items = [];
 if (props.component.type === 'news_grid') {
   items = [...props.component.content?.items || []];