flowrix 1.0.1-beta.147 → 1.0.1-beta.149

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/swatch.vue

@@ -0,0 +1,220 @@
+<script setup>
+import contentPopup from "../PopupContent/Popup.vue";
+import orderSample from "./orderSample/button.vue";
+const CustomScript = useCustomeScriptDynamic();
+const { attribute, group } = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(attribute);
+const SelecteValue = ref(0);
+const SelectedItem = attribute.values.find((i) => i.selected === true);
+if (SelectedItem) {
+  SelecteValue.value = SelectedItem.id;
+}
+const ChangeValue = ((value, item) => {
+  const aid = attribute.id;
+  const gid = group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+  if (attribute.typeLabel == "swatch") {
+    GTM_select_item_color(attribute, item, group);
+  }
+  if (attribute.typeLabel == "style") {
+    GTM_select_item_collection(attribute, item, group);
+  }
+});
+const colorspopupShow = ref(false);
+const colorspopupParent = ref(0);
+const activeImageId = ref(0);
+const showColorLargeImage = ((index, Parent) => {
+  colorspopupShow.value = true;
+  colorspopupParent.value = Parent;
+  activeImageId.value = index;
+  setTimeout(function() {
+    let colorimages = document.querySelector(".colors-images");
+    let images = colorimages.querySelectorAll(".colors-image");
+    images.forEach((image) => {
+      image.style.display = "none";
+      image.classList.remove("active");
+    });
+    let colorimage = colorimages.querySelector(".ColorImageIndex_" + index);
+    colorimage.style.display = "block";
+    colorimage.classList.add("active");
+  }, 500);
+});
+const closecolorspopup = (() => {
+  colorspopupShow.value = false;
+  activeImageId.value = 0;
+});
+const NextColorImage = (() => {
+  let colorimages = document.querySelector(".colors-images");
+  let curentImage = colorimages.querySelector(".colors-image.active");
+  let children = colorimages.querySelectorAll(".colors-image");
+  let firstChild = children[0];
+  if (curentImage.nextSibling != null && curentImage.nextSibling.classList != void 0 && Object.values(curentImage.nextSibling.classList).indexOf("colors-image") > -1) {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    curentImage.nextSibling.style.display = "block";
+    curentImage.nextSibling.classList.add("active");
+    const nextImageClass = Array.from(curentImage.nextSibling.classList).find((c) => c.startsWith("ColorImageIndex_"));
+    if (nextImageClass) {
+      activeImageId.value = parseInt(nextImageClass.replace("ColorImageIndex_", ""));
+    }
+  } else {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    firstChild.style.display = "block";
+    firstChild.classList.add("active");
+    const firstImageClass = Array.from(firstChild.classList).find((c) => c.startsWith("ColorImageIndex_"));
+    if (firstImageClass) {
+      activeImageId.value = parseInt(firstImageClass.replace("ColorImageIndex_", ""));
+    }
+  }
+});
+const PrevColorImage = (() => {
+  let colorimages = document.querySelector(".colors-images");
+  let curentImage = colorimages.querySelector(".colors-image.active");
+  let children = colorimages.querySelectorAll(".colors-image");
+  let lastChild = children[children.length - 1];
+  if (curentImage.previousSibling != null && curentImage.previousSibling.classList != void 0 && Object.values(curentImage.previousSibling.classList).indexOf("colors-image") > -1) {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    curentImage.previousSibling.style.display = "block";
+    curentImage.previousSibling.classList.add("active");
+    const prevImageClass = Array.from(curentImage.previousSibling.classList).find((c) => c.startsWith("ColorImageIndex_"));
+    if (prevImageClass) {
+      activeImageId.value = parseInt(prevImageClass.replace("ColorImageIndex_", ""));
+    }
+  } else {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    lastChild.style.display = "block";
+    lastChild.classList.add("active");
+    const lastImageClass = Array.from(lastChild.classList).find((c) => c.startsWith("ColorImageIndex_"));
+    if (lastImageClass) {
+      activeImageId.value = parseInt(lastImageClass.replace("ColorImageIndex_", ""));
+    }
+  }
+});
+const get_itemsByParent = ((items, parent) => {
+  return items.filter((item) => item.parent === parent);
+});
+const swatchimagesSrcset = ((swatchImage) => {
+  var swatchImage = swatchImage;
+  let swatchImage150 = swatchImage.replace(/.webp/gi, "150.webp");
+  let swatchImage320 = swatchImage.replace(/.webp/gi, "320.webp");
+  let swatchImage640 = swatchImage.replace(/.webp/gi, "640.webp");
+  let swatchImage1024 = swatchImage.replace(/.webp/gi, "1024.webp");
+  return swatchImage150;
+});
+</script>
+
+<template>
+   <div class="swatch-attribute-wrapper swatch-style-1 row">
+    <div class="col-md-4">
+        <label class="attribute-label">
+            {{ attribute.title }}
+            <span v-if="attribute.required" class="text-danger">*</span>
+            <contentPopup :attribute="attribute" />
+        </label>
+    </div>
+    <div class="col-md-8">
+        <div class="row g-2 attribute-values">
+            <div class="col-4" v-for="(item, index) in attribute.values" :key="item.id">
+                <div class="value-item position-relative h-100">
+                    <input 
+                        class="swatchInput position-absolute w-100 h-100"
+                        v-model="selectedValue"
+                        :data-label="attribute.title"
+                        @change="ChangeValue(item.id, item)"
+                        :data-attributevalue="attribute.parent"
+                        :required="attribute.required"
+                        :data-child="item.parent"
+                        :value="item.id"
+                        :data-value="item.id"
+                        type="radio"
+                        :name="`swatch_attribute_${attribute.id}`"
+                        :id="`swatch_attr_${attribute.id}_${item.id}`"
+                        :checked="selectedValue === item.id"
+                    />
+                    <label 
+                        class="value-label border h-100 d-flex flex-column align-items-center justify-content-center p-2"
+                        :for="`swatch_attr_${attribute.id}_${item.id}`">
+                        
+                        <!-- Image container with magnifier icon -->
+                        <div class="image-container position-relative w-100 mb-2">
+                            <!-- Magnifier icon for zoom (visible on desktop) -->
+                            <svg 
+                                @click.stop="showColorLargeImage(item.id, item.parent)"
+                                xmlns="http://www.w3.org/2000/svg" 
+                                width="25" 
+                                height="25" 
+                                viewBox="0 0 512 512" 
+                                class="magnifier-icon position-absolute p-1 d-none d-md-block">
+                                <path fill="currentColor"
+                                    d="M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208M208 352a144 144 0 1 0 0-288a144 144 0 1 0 0 288" />
+                            </svg>
+
+                            <!-- Image or color swatch display -->
+                            <img v-if="item.swatch" 
+                                :src="swatchimagesSrcset(item.swatch)" 
+                                class="w-100 h-100 object-fit-contain"
+                                width="100%" />
+                            <div v-else-if="item.iconcolor" 
+                                class="swatch-iconcolor w-100 h-100"
+                                :style="{ backgroundColor: item.iconcolor }"></div>
+                        </div>
+                        
+                        <!-- Title and order sample -->
+                        <span class="value-title text-center">{{ item.title }}</span>
+                        <orderSample :attribute="attribute" :item="item" :group="group" />
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Magnifier Modal/Popup -->
+    <div class="colorspopup" :class="{ 'active': magnifierShow }" v-if="magnifierShow">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <button @click="closeMagnifier()" type="button" class="btn-close" aria-label="Close"></button>
+                
+                <div class="modal-body colors-images">
+                    <div 
+                        v-for="(item, index) in itemsByParent" 
+                        :key="index"
+                        :class="['colors-image', `ColorImageIndex_${item.id}`, { 'highlighted': item.id === activeImageId }]">
+                        
+                        <!-- Large image or color display -->
+                        <img v-if="item.swatch" :src="getLargeImageUrl(item)" width="100%">
+                        <div v-else-if="item.iconcolor" 
+                            :style="{ backgroundColor: item.iconcolor }"
+                            class="item-iconcolor"></div>
+                        
+                        <!-- Image title -->
+                        <div class="text-center mt-2">
+                            <div class="h3 fw-bold image-title">{{ item.title }}</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Navigation buttons -->
+                <div class="colorImagesNav">
+                    <button @click="prevImage()" type="button">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
+                            <path fill="currentColor"
+                                d="m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z" />
+                        </svg>
+                    </button>
+                    <button @click="nextImage()" type="button">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
+                            <path fill="currentColor"
+                                d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/swatch.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: any;
+    group?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: any;
+    readonly group?: any;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { defineProps, ref } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+const { attribute, group } = defineProps(["attribute", "group"]);
+const { script } = useSingleValue(attribute);
+const SelecteValue = ref(attribute.value);
+const ChangeValue = ((value) => {
+  const emojiRegex = /[\p{Emoji_Presentation}\p{Extended_Pictographic}]|&#\d+;/gu;
+  value = value.replace(emojiRegex, "");
+  SelecteValue.value = value;
+  const aid = attribute.id;
+  const gid = group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+});
+</script>
+
+<template>
+   <div id="i3g6pg" class="text-attribute-wrapper">
+  <div id="isw7vv" class="text-attribute-wrapper label-top">
+    
+    <label id="i2ocof" class="attribute-label">
+      Text
+      <span id="inumny" class="required-mark">*</span>
+    </label>
+
+    <div id="itcvde" class="input-group">
+      
+      <span id="ixrpwf" class="input-icon d-none">
+        <img id="iuj7gz" alt="Text" width="25">
+      </span>
+
+      <input
+        id="attribute_text_value"
+        type="text"
+        name="attribute_id[text]"
+        placeholder="Enter text"
+        required="required"
+        class="text-input"
+      >
+    
+    </div>
+  </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: any;
+    group?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: any;
+    readonly group?: any;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent, onMounted, watch } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomScript();
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const SelecteValue = ref(props.attribute.value);
+const correctValue = ref(true);
+const userModified = ref(false);
+const ChangeValue = ((value) => {
+  SelecteValue.value = Math.floor(Number(value));
+  value = Math.floor(Number(value));
+  correctValue.value = true;
+  if (SelecteValue.value < props.attribute.min) {
+    correctValue.value = false;
+  } else if (SelecteValue.value > props.attribute.max) {
+    correctValue.value = false;
+  } else {
+    const aid = props.attribute.id;
+    const gid = props.group.id;
+    const vid = value;
+    CustomScript.SelectedOptions = { aid, gid, vid };
+    CustomScript.initprocess();
+  }
+});
+const getDefaultValue = () => {
+  return props.attribute.value;
+};
+const handleBlur = () => {
+  if (!SelecteValue.value || SelecteValue.value.trim() === "") {
+    if (!userModified.value || SelecteValue.value === "") {
+      SelecteValue.value = getDefaultValue();
+      const realValue = props.attribute.value;
+      ChangeValue(realValue);
+    }
+  }
+};
+const onInputFocus = () => {
+  userModified.value = true;
+  if (SelecteValue.value == getDefaultValue()) {
+    SelecteValue.value = "";
+  }
+};
+onMounted(() => {
+  SelecteValue.value = getDefaultValue();
+});
+</script>
+
+<template>
+  <div data-gjs-type="product-attribute-width" class="width-attribute-wrapper" :class="{ 'gjs-selected': false }">
+    <div class="width-attribute-wrapper label-top row align-items-center">
+      <div class="col-md-4">
+        <label class="attribute-label">
+          {{ attribute.title }}
+          <span v-if="attribute.required" class="required-mark text-danger">*</span>
+          <contentPopup :attribute="attribute" />
+        </label>
+      </div>
+      <div class="col-md-8">
+        <small class="min-max-text" :class="{ 'd-none': !attribute.min && !attribute.max }">
+          Min {{ attribute.min }}mm. Max {{ attribute.max }}mm
+        </small>
+        <div class="input-group d-flex align-items-stretch">
+          <span class="input-icon" :class="{ 'd-none': !attribute.swatch }">
+            <span class="input-group-text h-100">
+              <img :src="attribute.swatch" :alt="attribute.title" width="28">
+            </span>
+          </span>
+          <input :id="`attribute_${attribute.id}_value`" type="text" :name="`attribute_id[${attribute.id}]`"
+            :placeholder="attribute.placeholder || '1000'" :required="attribute.required"
+            class="width-input form-control mainwidthInput" :data-label="attribute.title" v-model="SelecteValue"
+            @change="ChangeValue(SelecteValue)" @focus="onInputFocus" @blur="handleBlur"
+            :data-attributevalue="attribute.parent" :data-child="attribute.parent" :data-value="attribute.id"
+            :data-title="attribute.title" onkeypress="return event.charCode >= 48 && event.charCode <= 57"
+            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
+            :class="{ 'text-muted': !userModified && SelecteValue == getDefaultValue() }" />
+          <span class="input-unit input-group-append">
+            <span class="input-group-text h-100">mm</span>
+          </span>
+        </div>
+        <p v-if="correctValue == false" class="error-message text-danger small d-flex justify-content-end mt-1">
+          Should be greater than {{ attribute.min }}mm and less than {{ attribute.max }}mm
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-muted{opacity:.8}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/ConfirmPopup.d.vue.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    message?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly message?: any;
+};

package/dist/runtime/components/product/customProduct/ConfirmPopup.vue

@@ -0,0 +1,25 @@
+<script setup>
+const { message } = defineProps(["message"]);
+</script>
+
+<template>
+    <div class="confirmPopup">
+        <div class="confirmPopup_body overflow-hidden pb-4 rounded-4 p-0">
+            <div class="bg-secondary py-3 px-4 text-white fs-3 mb-4">With this selection following selections will be changed Control Type:</div>
+            <ul class="px-4">
+                <li class="d-flex align-items-center gap-3" v-for="msg in message">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M4 12h12.25L11 6.75l.66-.75l6.5 6.5l-6.5 6.5l-.66-.75L16.25 13H4z"/></svg>
+                    {{msg}}
+                </li>
+            </ul>
+            <div class="popupbuttons mt-5 gap-5 d-flex justify-content-center align-items-center">
+                <span id="ChangeAttributeNo" class="seconday-btn">Cancele</span>
+                <button id="ChangeAttributeYes" class="orange-btn">Confirm</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.confirmPopup{align-items:center;background:rgba(0,0,0,.11);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999999}.confirmPopup .confirmPopup_body{background:#fff;width:40%}
+</style>

package/dist/runtime/components/product/customProduct/ConfirmPopup.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    message?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly message?: any;
+};

package/dist/runtime/components/product/customProduct/RequiredPopUp.d.vue.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    fields?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fields?: any;
+};

package/dist/runtime/components/product/customProduct/RequiredPopUp.vue

@@ -0,0 +1,49 @@
+<script setup>
+const { fields } = defineProps(["fields"]);
+</script>
+
+<template>
+    <div>
+        <div class="modals modal">
+            <div class="modal-dialog modal-sm modal-dialog-centered opacity-100">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title text-start fs-4 fw-bold">Please provide the missing information before adding to the cart.</h4>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="$emit('closeRequried')" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p class="text-danger text-start" v-for="(field,key) in fields">{{ key+1 }}) <b>{{ field.name }}</b></p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary btn-lg text-white" @click="$emit('closeRequried')" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal {
+  z-index: 9999909999;
+  background-color: rgba(51, 51, 51, 0.55);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+.modal .modal-dialog {
+  max-width: 700px;
+  width: 50%;
+}
+.modal .modal-dialog .image {
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+}
+
+@media only screen and (max-width: 768px) {
+  .modal-dialog {
+    width: 100% !important;
+  }
+}
+</style>

package/dist/runtime/components/product/customProduct/RequiredPopUp.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    fields?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fields?: any;
+};

package/dist/runtime/components/product/customProduct/Reviews.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    reviews?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    reviews?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/customProduct/Reviews.vue

@@ -0,0 +1,25 @@
+<script setup>
+const props = defineProps(["reviews"]);
+const reviewCount = computed(() => {
+  return props.reviews?.length || 0;
+});
+const averageRating = computed(() => {
+  if (!props.reviews || props.reviews.length === 0) return 0;
+  const sum = props.reviews.reduce((acc, review) => acc + (review.rating || 0), 0);
+  const average = sum / props.reviews.length;
+  return average.toFixed(1);
+});
+</script>
+
+<template>
+    <div class="d-flex flex-row-reverse justify-content-end d-xl-block gap-1 mt-4 mt-xl-0">
+        <div class="review-from">{{ averageRating }} from</div>
+        <a href="#reviews" class="reviews-count d-block order-first order-xl-last text-decoration-none">{{ reviewCount }} Reviews</a>
+        <span v-for="n in 5" :key="n" class="text-secondary">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                <path fill="currentColor"
+                    d="m7.325 18.923l1.24-5.313l-4.123-3.572l5.431-.47L12 4.557l2.127 5.01l5.43.47l-4.123 3.572l1.241 5.313L12 16.102z" />
+            </svg>
+        </span>
+    </div>
+</template>

package/dist/runtime/components/product/customProduct/Reviews.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    reviews?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    reviews?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/product/customProduct/SingleStep.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/SingleStep.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { defineProps } from "vue";
+const { group, product } = defineProps({ "group": Object, "product": Object });
+const { useCustomScript, SingleAttribute } = useSingleStepDynamic(group, product.template);
+</script>
+
+<template>
+    <template v-for="attribute in group.attributes">
+        <component :is="SingleAttribute" :product :group="group" :attribute="attribute" />
+    </template>
+</template>

package/dist/runtime/components/product/customProduct/SingleStep.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/Steps.d.vue.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    product?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly product?: Record<string, any> | undefined;
+};