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

package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-values.vue

@@ -0,0 +1,214 @@
+<script>
+</script>
+<template>
+    <div id="i0b24" class="product-multi-val-attr-wrapper gjs-selected">
+        <div id="ic7a9" class="button-attribute-wrapper button-style-1">
+            <div id="i69qb" class="row g-2">
+                <div id="icsef" class="col-6 value-item position-relative"><input id="button_attr_1" type="radio"
+                        name="button_attribute" value="1" checked="checked"
+                        class="buttonInput position-absolute w-100 h-100"><label id="ine0r" for="button_attr_1"
+                        class="value-label"><img id="ix1ye" src="https://via.placeholder.com/28" width="28" height="28"
+                            class="button-img"><span id="ih6ke" class="value-title">Option 1</span></label></div>
+                <div id="ikn3f" class="col-6 value-item position-relative"><input id="button_attr_2" type="radio"
+                        name="button_attribute" value="2" class="buttonInput position-absolute w-100 h-100"><label
+                        id="ily9o" for="button_attr_2" class="value-label"><img id="iu7uw"
+                            src="https://via.placeholder.com/28" width="28" height="28" class="button-img"><span
+                            id="ie09h" class="value-title">Option 2</span></label></div>
+                <div id="icq0x" class="col-6 value-item position-relative"><input id="button_attr_3" type="radio"
+                        name="button_attribute" value="3" class="buttonInput position-absolute w-100 h-100"><label
+                        id="i3pb4" for="button_attr_3" class="value-label"><img id="i7pj6"
+                            src="https://via.placeholder.com/28" width="28" height="28" class="button-img"><span
+                            id="i92u5" class="value-title">Option 3</span></label></div>
+                <div id="i2fag" class="col-6 value-item position-relative"><input id="button_attr_4" type="radio"
+                        name="button_attribute" value="4" class="buttonInput position-absolute w-100 h-100"><label
+                        id="iobrh" for="button_attr_4" class="value-label"><img id="ibtrj"
+                            src="https://via.placeholder.com/28" width="28" height="28" class="button-img"><span
+                            id="isx1f" class="value-title">Option 4</span></label></div>
+            </div>
+        </div>
+        <div id="ippj5" class="product-radio-wrapper radio-style-1">
+            <div id="i2xgl" class="row g-2">
+                <div id="i2ikk" class="col-6 value-item position-relative"><input id="attribute_1" type="radio"
+                        name="product_attribute" value="1" checked="checked"
+                        class="buttonInput position-absolute w-100 h-100"><label id="i44pr" for="attribute_1"
+                        class="value-label">
+                        <div id="i78wb" class="radio-icon"><span id="iabji" class="radio-outer"><span id="iu1uf"
+                                    class="radio-inner"></span></span></div>
+                        <span id="i0yfa" class="value-title">Option 1</span>
+                    </label></div>
+                <div id="imcwl" class="col-6 value-item position-relative"><input id="attribute_2" type="radio"
+                        name="product_attribute" value="2" class="buttonInput position-absolute w-100 h-100"><label
+                        id="iok5i" for="attribute_2" class="value-label">
+                        <div id="iex4q" class="radio-icon"><span id="iet3j" class="radio-outer"><span id="i8fwi"
+                                    class="radio-inner"></span></span></div>
+                        <span id="i91ql" class="value-title">Option 2</span>
+                    </label></div>
+                <div id="inr5f" class="col-6 value-item position-relative"><input id="attribute_3" type="radio"
+                        name="product_attribute" value="3" class="buttonInput position-absolute w-100 h-100"><label
+                        id="iwcno" for="attribute_3" class="value-label">
+                        <div id="ifbyr" class="radio-icon"><span id="i9ziw" class="radio-outer"><span id="ig8ng"
+                                    class="radio-inner"></span></span></div>
+                        <span id="ibaud" class="value-title">Option 3</span>
+                    </label></div>
+                <div id="i4agj" class="col-6 value-item position-relative"><input id="attribute_4" type="radio"
+                        name="product_attribute" value="4" class="buttonInput position-absolute w-100 h-100"><label
+                        id="irtqh" for="attribute_4" class="value-label">
+                        <div id="if15x" class="radio-icon"><span id="iqrxv" class="radio-outer"><span id="iyghg"
+                                    class="radio-inner"></span></span></div>
+                        <span id="i9cug" class="value-title">Option 4</span>
+                    </label></div>
+            </div>
+        </div>
+        <div id="i2alo" class="dropdown-attribute-wrapper dropdown-style-1">
+            <div id="iokk3" class="dropdown-select position-relative"><input id="dropdown_selected" type="radio"
+                    name="dropdown_attribute" value="1" checked="checked"
+                    class="dropdownInput position-absolute w-100 h-100"><span id="ijjf6" class="selected-title">Select
+                    Option</span></div>
+            <ul id="il10w" class="dropdown-options position-absolute list-unstyled">
+                <li id="i97l6" class="option-item position-relative is-selected"><input id="dropdown_option_1"
+                        type="radio" name="dropdown_attribute_option" value="1"
+                        class="dropdownOptionInput position-absolute w-100 h-100"><span id="i2wwl"
+                        class="option-title">Option 1</span></li>
+                <li id="itqt1" class="option-item position-relative"><input id="dropdown_option_2" type="radio"
+                        name="dropdown_attribute_option" value="2"
+                        class="dropdownOptionInput position-absolute w-100 h-100"><span id="iy8qm"
+                        class="option-title">Option 2</span></li>
+                <li id="ieal9" class="option-item position-relative"><input id="dropdown_option_3" type="radio"
+                        name="dropdown_attribute_option" value="3"
+                        class="dropdownOptionInput position-absolute w-100 h-100"><span id="i5kgep"
+                        class="option-title">Option 3</span></li>
+            </ul>
+        </div>
+        <div id="ihv3ne" class="dropdown-icon-attribute-wrapper dropdown-style-1">
+            <div id="ic08jx" class="dropdown-select position-relative"><input id="dropdown_icon_selected" type="radio"
+                    name="dropdown_icon_attribute" value="1" checked="checked"
+                    class="dropdownInput position-absolute w-100 h-100"><img id="iijzg3"
+                    src="https://via.placeholder.com/32" class="selected-icon"><span id="ihly5g"
+                    class="selected-title">Select Option</span>
+            </div>
+            <ul id="izdfcp" class="dropdown-options position-absolute list-unstyled" style="display: none;">
+                <li id="iyjnab" class="option-item position-relative is-selected"><input id="dropdown_icon_option_1"
+                        type="radio" name="dropdown_icon_attribute_option" value="1"
+                        class="dropdownOptionInput position-absolute w-100 h-100"><img id="i3m8cg"
+                        src="https://via.placeholder.com/32" class="option-icon"><span id="isxql6"
+                        class="option-title">Option 1</span></li>
+                <li id="i4uf3v" class="option-item position-relative"><input id="dropdown_icon_option_2" type="radio"
+                        name="dropdown_icon_attribute_option" value="2"
+                        class="dropdownOptionInput position-absolute w-100 h-100">
+                    <div id="is1135" style="background-color: #ff6b6b" class="option-icon-color"></div><span id="i7a1ys"
+                        class="option-title">Option 2</span>
+                </li>
+                <li id="icfq7b" class="option-item position-relative"><input id="dropdown_icon_option_3" type="radio"
+                        name="dropdown_icon_attribute_option" value="3"
+                        class="dropdownOptionInput position-absolute w-100 h-100">
+                    <div id="i4iljy" style="background-color: #4ecdc4" class="option-icon-color"></div><span id="ia36w1"
+                        class="option-title">Option 3</span>
+                </li>
+            </ul>
+        </div>
+        <div id="i5zugl" class="imagebox-attribute-wrapper imagebox-style-1">
+            <div id="i4t0uc" class="row g-2">
+                <div id="itmlyt" class="col-4 value-item position-relative"><input id="imagebox_attr_1" type="radio"
+                        name="imagebox_attribute" value="1" checked="checked"
+                        class="imageboxInput position-absolute w-100 h-100"><label id="idsqx4" for="imagebox_attr_1"
+                        class="value-label"><img id="i228j3" src="https://via.placeholder.com/100"
+                            class="imagebox-img"><span id="i7b2kq" class="value-title">Option 1</span></label></div>
+                <div id="i6wyud" class="col-4 value-item position-relative"><input id="imagebox_attr_2" type="radio"
+                        name="imagebox_attribute" value="2" class="imageboxInput position-absolute w-100 h-100"><label
+                        id="iepyxg" for="imagebox_attr_2" class="value-label"><img id="i0fclr"
+                            src="https://via.placeholder.com/100/ff6b6b" class="imagebox-img"><span id="iq9flj"
+                            class="value-title">Option 2</span></label></div>
+                <div id="itx68b" class="col-4 value-item position-relative"><input id="imagebox_attr_3" type="radio"
+                        name="imagebox_attribute" value="3" class="imageboxInput position-absolute w-100 h-100"><label
+                        id="i3jzbd" for="imagebox_attr_3" class="value-label"><img id="i338ud"
+                            src="https://via.placeholder.com/100/4ecdc4" class="imagebox-img"><span id="i4qzkt"
+                            class="value-title">Option 3</span></label></div>
+            </div>
+        </div>
+        <div id="i0ddkn" class="imagebox-magnifier-attribute-wrapper imagebox-style-1">
+            <div id="iwdhsh" class="row g-2">
+                <div id="iha6tk" class="col-4 value-item position-relative"><input id="imagebox_magnifier_attr_1"
+                        type="radio" name="imagebox_magnifier_attribute" value="1" checked="checked"
+                        class="imageboxInput position-absolute w-100 h-100"><label id="iomp9x"
+                        for="imagebox_magnifier_attr_1" class="value-label">
+                        <div id="ijpn5f" class="image-container position-relative"><svg id="ii693k"
+                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 512 512"
+                                class="magnifier-icon position-absolute">
+                                <path id="iuv1ss" 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">
+                                </path>
+                            </svg><img id="i7tvxd" src="https://via.placeholder.com/100"
+                                data-large="https://via.placeholder.com/450" class="imagebox-img"></div><span
+                            id="i0vlqh" class="value-title">Option 1</span>
+                    </label></div>
+                <div id="ixn7tb" class="col-4 value-item position-relative"><input id="imagebox_magnifier_attr_2"
+                        type="radio" name="imagebox_magnifier_attribute" value="2"
+                        class="imageboxInput position-absolute w-100 h-100"><label id="ifnz1k"
+                        for="imagebox_magnifier_attr_2" class="value-label">
+                        <div id="i50oua" class="image-container position-relative"><svg id="itc5kt"
+                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 512 512"
+                                class="magnifier-icon position-absolute">
+                                <path id="i0hdgi" 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">
+                                </path>
+                            </svg><img id="i7r80m" src="https://via.placeholder.com/100/ff6b6b"
+                                data-large="https://via.placeholder.com/450/ff6b6b" class="imagebox-img"></div><span
+                            id="i35td4" class="value-title">Option 2</span>
+                    </label></div>
+                <div id="ifqv2t" class="col-4 value-item position-relative"><input id="imagebox_magnifier_attr_3"
+                        type="radio" name="imagebox_magnifier_attribute" value="3"
+                        class="imageboxInput position-absolute w-100 h-100"><label id="ih8vf3"
+                        for="imagebox_magnifier_attr_3" class="value-label">
+                        <div id="ixbanv" class="image-container position-relative"><svg id="iz6glb"
+                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 512 512"
+                                class="magnifier-icon position-absolute">
+                                <path id="il9vhi" 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">
+                                </path>
+                            </svg><img id="iiptm5" src="https://via.placeholder.com/100/4ecdc4"
+                                data-large="https://via.placeholder.com/450/4ecdc4" class="imagebox-img"></div><span
+                            id="iljq8c" class="value-title">Option 3</span>
+                    </label></div>
+            </div>
+            <div id="i44d31" class="magnifier-modal">
+                <div id="ibfcy2" class="modal-overlay"></div>
+                <div id="idkf6g" class="modal-content-wrapper"><button id="igd9j8" type="button" aria-label="Close"
+                        class="btn-close">×</button>
+                    <div id="ic6qng" class="modal-image-container"><img id="iga40w" alt="Large view"
+                            class="modal-image">
+                        <div id="isb2kj" class="image-title"></div>
+                    </div>
+                    <div id="i7m3uk" class="modal-nav"><button id="ia9o5i" type="button"
+                            class="nav-btn prev-btn">‹</button><button id="idss7n" type="button"
+                            class="nav-btn next-btn">›</button></div>
+                </div>
+            </div>
+        </div>
+        <div id="iinzcs" class="swatch-attribute-wrapper swatch-style-1">
+            <div id="iugwf8" class="row g-2">
+                <div id="ixl119" class="col-4 value-item position-relative"><input id="swatch_attr_1" type="radio"
+                        name="swatch_attribute" value="1" checked="checked"
+                        class="swatchInput position-absolute w-100 h-100"><label id="i7z0iv" for="swatch_attr_1"
+                        class="value-label">
+                        <div id="icev7v" class="image-container"><img id="i1kae1" src="https://via.placeholder.com/100"
+                                class="w-100 h-100 object-fit-contain"></div><span id="ivmadj" class="value-title">Color
+                            1</span>
+                    </label></div>
+                <div id="i18l3k" class="col-4 value-item position-relative"><input id="swatch_attr_2" type="radio"
+                        name="swatch_attribute" value="2" class="swatchInput position-absolute w-100 h-100"><label
+                        id="i674sr" for="swatch_attr_2" class="value-label">
+                        <div id="ihj4xy" class="image-container">
+                            <div id="ikonst" style="background-color: #ff6b6b" class="swatch-iconcolor"></div>
+                        </div><span id="ikzoxp" class="value-title">Color 2</span>
+                    </label></div>
+                <div id="i7b3q2" class="col-4 value-item position-relative"><input id="swatch_attr_3" type="radio"
+                        name="swatch_attribute" value="3" class="swatchInput position-absolute w-100 h-100"><label
+                        id="iqhdsk" for="swatch_attr_3" class="value-label">
+                        <div id="ipxysk" class="image-container">
+                            <div id="iwl73x" style="background-color: #4ecdc4" class="swatch-iconcolor"></div>
+                        </div><span id="ip2nhg" class="value-title">Color 3</span>
+                    </label></div>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-values.vue.d.ts

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

package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.d.vue.ts

@@ -0,0 +1,13 @@
+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;
+    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 product?: Record<string, any> | undefined;
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent } from "vue";
+const { attribute, group, product } = defineProps({ "attribute": Object, "group": Object, "product": Object });
+const { DesignComponent } = useAttributeTypeDynamic(attribute, group, product.template);
+</script>
+
+<template>
+      <component :is="DesignComponent" :group="group" :attribute="attribute" />
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.vue.d.ts

@@ -0,0 +1,13 @@
+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;
+    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 product?: Record<string, any> | undefined;
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

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

@@ -0,0 +1,13 @@
+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;
+    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 product?: Record<string, any> | undefined;
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

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

@@ -0,0 +1,9 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent } from "vue";
+const { attribute, group, product } = defineProps({ "attribute": Object, "group": Object, product: Object });
+const { DesignComponent } = useAttributeTypeDynamic(attribute, group, product.template);
+</script>
+
+<template>
+      <component :is="DesignComponent" :group="group" :attribute="attribute" />
+</template>

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

@@ -0,0 +1,13 @@
+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;
+    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 product?: Record<string, any> | undefined;
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.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>;
+    attribute?: 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;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { ref } from "vue";
+const { attribute } = defineProps({ "attribute": Object });
+const showContent = ref(false);
+const activePopup = ref("");
+const showContentPopUp = ((currentPopup, css, contentType = "text") => {
+  let tagData = {
+    content_id: attribute.title,
+    content_type: contentType
+    // or "text"
+  };
+  GTM_Attribute_Content(tagData);
+  let styleId = "popupcontent";
+  const existingStyleTag = document.getElementById(styleId);
+  if (existingStyleTag) {
+    existingStyleTag.remove();
+  }
+  const styleTag = document.createElement("style");
+  styleTag.id = styleId;
+  styleTag.innerHTML = `.content_modal { ${css} }.modal-content video {
+    height: unset !important;
+}`;
+  document.head.appendChild(styleTag);
+  showContent.value = true;
+  activePopup.value = currentPopup;
+});
+const hideContent = () => {
+  showContent.value = false;
+  activePopup.value = "";
+};
+const sortContents = ((contentData) => {
+  return contentData.sort((a, b) => b.iconstyle_id - a.iconstyle_id);
+});
+</script>
+
+<template>
+    <div class="content-icons" v-if="attribute.content.length > 0">
+        <div class="content-icon" v-for="(content, index) in sortContents(attribute.content)">
+            <i @click="showContentPopUp(`attributcontent${content.id}_${index}`, content.content.css)"
+                v-if="content.iconstyle_id == 1" data-bs-toggle="modal"
+                :data-bs-target="`#attributcontent${content.id}_${index}`" class="text-primary fas fa-question-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="1.5">
+                        <path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0" />
+                        <path d="M12 13.496c0-2.003 2-1.503 2-3.506c0-2.659-4-2.659-4 0m2 6.007v-.5" />
+                    </g>
+                </svg>
+            </i>
+            <i @click="showContentPopUp(`attributcontent${content.id}_${index}`, content.content.css,'video')"
+                v-if="content.iconstyle_id == 2" data-bs-toggle="modal"
+                :data-bs-target="`#attributcontent${content.id}_${index}`" class="text-primary fas fa-play-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
+                    <g fill="none" stroke="currentColor" stroke-width="1">
+                        <path d="M14.5 8a6.5 6.5 0 1 1-13 0a6.5 6.5 0 0 1 13 0Z" />
+                        <path d="M11 8L6.5 5v6z" />
+                    </g>
+                </svg>
+            </i>
+            <i @click="showContentPopUp(`attributcontent${content.id}_${index}`, content.content.css)"
+                v-if="content.iconstyle_id == 3" data-bs-toggle="modal"
+                :data-bs-target="`#attributcontent${content.id}_${index}`"
+                class="text-primary fas fa-exclamation-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="1">
+                        <path stroke-width="1.5"
+                            d="M12 2.5A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 1 0 19 0A9.5 9.5 0 0 0 12 2.5m-.005 4.222v6.334" />
+                        <path stroke-width="2" d="M12.044 16.557h-.01" />
+                    </g>
+                </svg></i>
+            <i @click="showContentPopUp(`attributcontent${content.id}_${index}`, content.content.css)"
+                v-if="content.iconstyle_id == 4" data-bs-toggle="modal"
+                :data-bs-target="`#attributcontent${content.id}_${index}`" class="text-primary fas fa-info-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="1.5">
+                        <path d="M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0" />
+                        <path d="M12 16v-5h-.5m0 5h1M12 8.5V8" />
+                    </g>
+                </svg>
+            </i>
+            <i @click="showContentPopUp(`attributcontent${content.id}_${index}`, content.content.css)"
+                v-if="content.iconstyle_id == 5" data-bs-toggle="modal"
+                :data-bs-target="`#attributcontent${content.id}_${index}`" class="text-primary fas fa-image">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3.5a8.5 8.5 0 0 0-6.51 13.965l4.934-4.843a2.25 2.25 0 0 1 3.152 0l4.935 4.843A8.5 8.5 0 0 0 12 3.5m5.449 15.024l-4.924-4.831a.75.75 0 0 0-1.05 0L6.55 18.524A8.47 8.47 0 0 0 12 20.5a8.47 8.47 0 0 0 5.449-1.976M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12m13.25-2.5a.75.75 0 1 1 0-1.5a.75.75 0 0 1 0 1.5m0 1.5a2.25 2.25 0 1 0 0-4.5a2.25 2.25 0 0 0 0 4.5"/></svg>
+            </i>
+
+            <div class="modals modal"
+                v-if="showContent == true && activePopup == `attributcontent${content.id}_${index}`">
+                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+                    <div class="modal-content rounded-4">
+                        <div class="modal-header bg-secondary py-1">
+                            <h3 class="modal-title w-100 fs-4 fw-semibold text-center fw-normal text-white">
+                                {{ content.title }}
+                            </h3>
+                            <span type="button" @click="hideContent()" class="btn-close text-white"
+                                aria-label="Close"></span>
+                        </div>
+                        <div class="modal-body " v-html="content.content.html">
+
+                        </div>
+                    </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 .image {
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+}
+
+@media only screen and (max-width: 768px) {
+  .modal-dialog {
+    width: 100% !important;
+  }
+}
+</style>
+
+<style scoped>
+.content-icons{display:inline-flex!important;flex-wrap:wrap!important;gap:5px;margin-left:5px}.content-icon i{cursor:pointer}.content-icon i:hover{color:unset!important}.modal-content :deep(iframe){min-height:268px!important}.modal-content :deep(video){width:100%}.modal-content :deep(h1){font-size:22px;font-weight:600;margin-top:10px}.modal.show .modal-dialog{opacity:1}.btn-close{filter:brightness(0) invert(1);height:10px;opacity:1;position:absolute;right:15px;top:15px;width:10px}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.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>;
+    attribute?: 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;
+};

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

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

package/dist/runtime/components/product/customProduct/AttributesComponents/SingleAttribute.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { defineProps } from "vue";
+const { attribute, group, product } = defineProps(["attribute", "group", "product"]);
+const { AttributeComponent, currentTemplate } = useSingleAttributeDynamic(attribute, group, product.template);
+</script>
+
+<template>
+  <div v-show="!attribute.hide" class="single-attribute"
+    :class="`attributeof${attribute.parent} attribute${attribute.id}`">
+    <component :is="AttributeComponent" :product v-show="!attribute.hide" class="my-2 py-2 gy-3" :group="group"
+      :attribute="attribute" />
+  </div>
+</template>
+
+<style scoped>
+.single-attribute :deep(.attribute-label) {
+  font-family: Poppins, Georgia, Times New Roman, Times, serif;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: break-spaces;
+}
+.single-attribute :deep(.value-label) {
+  font-family: Poppins, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+}
+</style>
+
+<style scoped>
+@media screen and (max-width: 500px) {
+  .single-attribute:deep() .value-item {
+    min-width: 30%;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,13 @@
+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;
+    slide?: 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;
+    readonly slide?: Record<string, any> | undefined;
+};