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

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

@@ -0,0 +1,108 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const options = ref(props.attribute.values);
+const selectedOption = ref(options.value[0]);
+const isOpen = ref(false);
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+const selectOption = (option) => {
+  selectedOption.value = option;
+  isOpen.value = false;
+};
+const closeDropDown = () => {
+  isOpen.value = false;
+};
+const ChangeValue = ((value) => {
+  const aid = props.attribute.id;
+  const gid = props.group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+});
+const swatchimagesSrcset = ((swatchImage) => {
+  let swatchImage64 = swatchImage.replace(/.webp/gi, "64.webp");
+  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 swatchImage64;
+});
+</script>
+
+<template>
+<div class="dropdown-icon-attribute-wrapper dropdown-style-1 row">
+    <div class="col-md-4 mb-3">
+        <label class="attribute-label mt-lg-2">
+            {{ attribute.title }}
+            <span v-if="attribute.required" class="text-danger">*</span>
+            <contentPopup :attribute="attribute" />
+        </label>
+    </div>
+    <div class="col-md-8">
+        <div class="dropdown-select position-relative" @mouseleave="closeDropDown()">
+            <!-- Selected value display with icon/color -->
+            <div class="selected position-relative rounded-2 ps-2" @click="toggleDropdown">
+                <img v-if="selectedOption.swatch && selectedOption.swatch != ''" 
+                    :src="swatchimagesSrcset(selectedOption.swatch)" 
+                    class="selected-icon"
+                    height="100%" />
+                <div v-else-if="selectedOption.iconcolor && selectedOption.iconcolor != null" 
+                    class="selected-icon-color" 
+                    :style="{ backgroundColor: selectedOption.iconcolor }"></div>
+                
+                <input 
+                    :data-label="attribute.title"
+                    class="dropdownInput position-absolute w-100 h-100"
+                    :value="selectedOption.id"
+                    :required="attribute.required"
+                    type="radio"
+                    :name="`dropdown_icon_attribute_${attribute.id}`"
+                    :id="`dropdown_icon_selected_${attribute.id}`"
+                    :checked="selectedOption.id === selectedOption.id"
+                />
+                <span class="selected-title">{{ selectedOption.title || 'Select Option' }}</span>
+            </div>
+            
+            <!-- Dropdown options with icons/colors -->
+            <ul v-show="isOpen" class="dropdown-options position-absolute list-unstyled">
+                <li 
+                    v-for="option in options" 
+                    :key="option.id"
+                    @click="selectOption(option), ChangeValue(option.id)"
+                    class="option-item position-relative"
+                    :class="{ 'is-selected': option.id === selectedOption.id }"
+                >
+                    <input 
+                        :required="attribute.required"
+                        class="dropdownOptionInput position-absolute w-100 h-100"
+                        :data-attributevalue="attribute.parent"
+                        :data-child="option.parent"
+                        :value="option.id"
+                        :data-value="option.id"
+                        type="radio"
+                        :name="`dropdown_icon_attribute_option_${attribute.id}`"
+                        :id="`dropdown_icon_option_${attribute.id}_${option.id}`"
+                        :checked="option.id === selectedOption.id"
+                    />
+                    
+                    <!-- Option icon/color display -->
+                    <img v-if="option.swatch && option.swatch != ''" 
+                        :src="swatchimagesSrcset(option.swatch)" 
+                        class="option-icon"
+                        width="32" />
+                    <div v-else-if="option.iconcolor && option.iconcolor != null" 
+                        class="option-icon-color" 
+                        :style="{ backgroundColor: option.iconcolor }"></div>
+                    
+                    <span class="option-title">{{ option.title }}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdownWithIcon.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/AttributesComponents/Styles/height.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/height.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { defineProps, ref, onMounted } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+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 = "";
+  }
+};
+const onInput = () => {
+  userModified.value = true;
+};
+onMounted(() => {
+  SelecteValue.value = getDefaultValue();
+});
+</script>
+
+<template>
+  <div  
+       class="height-attribute-wrapper" :class="{ 'gjs-selected': false }">
+    <div  class="height-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="height-input form-control mainHeightInput"
+            :data-label="attribute.title"
+            v-model="SelecteValue"
+            @change="ChangeValue(SelecteValue)"
+            @focus="onInputFocus"
+            @input="onInput"
+            @blur="handleBlur"
+            :data-attributevalue="attribute.parent"
+            :data-child="attribute.parent"
+            :data-value="attribute.id"
+            :data-title="attribute.title"
+            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>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/height.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/AttributesComponents/Styles/imageBox.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?: 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/imageBox.vue

@@ -0,0 +1,87 @@
+<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 SelectedItem = attribute.values.find((i) => i.selected === true);
+const SelecteValue = ref(0);
+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 swatchimagesSrcset = ((swatchImage) => {
+  let swatchImage64 = swatchImage.replace(/.webp/gi, "64.webp");
+  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="imagebox-attribute-wrapper imagebox-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 in attribute.values" :key="item.id">
+                <div class="value-item position-relative h-100">
+                    <input 
+                        :required="attribute.required"
+                        class="imageboxInput position-absolute w-100 h-100"
+                        :data-label="attribute.title"
+                        v-model="selectedValue"
+                        @change="ChangeValue(item.id, item)"
+                        :data-attributevalue="attribute.parent"
+                        :data-child="item.parent"
+                        :value="item.id"
+                        :data-value="item.id"
+                        type="radio"
+                        :name="`imagebox_attribute_${attribute.id}`"
+                        :id="`imagebox_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="`imagebox_attr_${attribute.id}_${item.id}`">
+                        
+                        <!-- Image or color swatch display -->
+                        <div class="image-container w-100 mb-2">
+                            <img v-if="item.swatch" 
+                                :src="swatchimagesSrcset(item.swatch)" 
+                                class="imagebox-img w-100 h-100 object-fit-cover"
+                                width="100%" />
+                            <div v-else-if="item.iconcolor" 
+                                class="imagebox-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>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBox.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/imageBoxWithMagnifier.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?: 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/imageBoxWithMagnifier.vue

@@ -0,0 +1,219 @@
+<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") {
+  }
+  if (attribute.typeLabel == "style") {
+  }
+});
+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) => {
+  let swatchImage64 = swatchImage.replace(/.webp/gi, "64.webp");
+  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="imagebox-magnifier-attribute-wrapper imagebox-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="imageboxInput position-absolute w-100 h-100"
+                        v-model="selectedValue"
+                        :data-label="attribute.title"
+                        :required="attribute.required"
+                        @change="ChangeValue(item.id, item)"
+                        :data-attributevalue="attribute.parent"
+                        :data-child="item.parent"
+                        :value="item.id"
+                        :data-value="item.id"
+                        type="radio"
+                        :name="`imagebox_magnifier_attribute_${attribute.id}`"
+                        :id="`imagebox_magnifier_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="`imagebox_magnifier_attr_${attribute.id}_${item.id}`">
+                        
+                        <!-- Image container with magnifier icon -->
+                        <div class="image-container position-relative w-100 mb-2">
+                            <!-- Magnifier icon for zoom -->
+                            <svg 
+                                @click.stop="showColorLargeImage(item.id, item.parent)"
+                                xmlns="http://www.w3.org/2000/svg" 
+                                width="20" 
+                                height="20" 
+                                viewBox="0 0 512 512"
+                                class="magnifier-icon position-absolute p-1"
+                                :class="{ 'd-none d-md-block': true }">
+                                <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 -->
+                            <img v-if="item.swatch" 
+                                :src="swatchimagesSrcset(item.swatch)" 
+                                :data-large="item.large_image || item.swatch"
+                                class="imagebox-img w-100 h-100 object-fit-cover"
+                                width="100%" />
+                            <div v-else-if="item.iconcolor" 
+                                class="imagebox-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/Lightbox Modal -->
+    <div class="magnifier-modal" :class="{ 'active': colorspopupShow }" v-if="colorspopupShow">
+        <div class="modal-overlay" @click="closeColorPopup()"></div>
+        <div class="modal-content-wrapper">
+            <button @click="closeColorPopup()" type="button" class="btn-close" aria-label="Close">×</button>
+            
+            <div class="modal-image-container">
+                <!-- Current large image display -->
+                <div v-for="(item, index) in filteredColorItems" :key="item.id"
+                     v-show="currentImageIndex === index">
+                    <img v-if="item.swatch" 
+                         :src="item.large_image || item.swatch" 
+                         :alt="item.title"
+                         class="modal-image" />
+                    <div v-else-if="item.iconcolor" 
+                         class="modal-color-swatch"
+                         :style="{ backgroundColor: item.iconcolor }"></div>
+                </div>
+                
+                <!-- Image title -->
+                <div class="image-title h3 fw-bold" v-if="currentImageItem">
+                    {{ currentImageItem.title }}
+                </div>
+            </div>
+
+            <!-- Navigation buttons -->
+            <div class="modal-nav" v-if="filteredColorItems.length > 1">
+                <button @click="prevColorImage()" type="button" class="nav-btn prev-btn">
+                    <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="nextColorImage()" type="button" class="nav-btn next-btn">
+                    <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>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBoxWithMagnifier.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/message.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/message.vue

@@ -0,0 +1,36 @@
+<script setup>
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const SelecteValue = ref(props.attribute.value);
+const ChangeValue = ((value) => {
+  const aid = props.attribute.id;
+  const gid = props.group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+});
+</script>
+
+<template>
+<div id="ivotd8" class="message-attribute-wrapper gjs-selected">
+  <div id="in9ueh" class="message-attribute-wrapper label-top">
+    
+    <label id="iisvyi" class="attribute-label">
+      Message
+      <span id="i7591c" class="required-mark">*</span>
+    </label>
+    
+    <textarea
+      id="attribute_message_value"
+      name="attribute_id[message]"
+      placeholder="Enter your message"
+      required="required"
+      rows="4"
+      class="message-textarea gjs-hovered"
+    ></textarea>
+  
+  </div>
+</div>
+</template>