https://www.rheem.com/vike/assets/chunks/chunk-BeoUtKWY.js

1import { s as script } from "./chunk-C23mm6na.js";
2import { R as RmcIcon } from "./chunk-Bov-RE3A.js";
3import { l as logNotFoundImages } from "./chunk-DbvqV5UP.js";
4import { j as defineComponent, W as useTemplateRef, X as useAttrs, c as computed, r as ref, w as watch, k as onMounted, _ as _export_sfc, o as openBlock, e as createElementBlock, q as createVNode, Y as normalizeProps, Z as guardReactiveProps, y as createCommentVNode, N as withDirectives, $ as vShow, f as createBaseVNode, m as mergeProps, F as Fragment } from "./chunk-Cy-M6TJt.js";
5const _sfc_main = /* @__PURE__ */ defineComponent({
6  ...{ inheritAttrs: false },
7  __name: "RmcImageAsync",
8  props: {
9    skeletonProps: { default: () => ({ size: "100%" }) },
10    productId: {}
11  },
12  setup(__props, { expose: __expose }) {
13    __expose();
14    const img = useTemplateRef("img");
15    const attrs = useAttrs();
16    const restAttrs = computed(() => {
17      const copy = { ...attrs };
18      delete copy.src;
19      return copy;
20    });
21    const loaded = ref(false);
22    const hasFailed = ref(false);
23    function applySrc(url) {
24      const trimmed = (url ?? "").trim();
25      if (!trimmed) {
26        loaded.value = false;
27        hasFailed.value = false;
28        return;
29      }
30      const el = img.value;
31      if (!el) {
32        return;
33      }
34      loaded.value = false;
35      hasFailed.value = false;
36      el.onload = () => {
37        loaded.value = true;
38      };
39      el.onerror = () => {
40        hasFailed.value = true;
41        void handleLogNotFoundImage(trimmed);
42      };
43      el.src = trimmed;
44    }
45    watch(
46      () => attrs.src ?? "",
47      (url) => {
48        applySrc(url);
49      },
50      { flush: "post" }
51    );
52    onMounted(() => {
53      applySrc(attrs.src ?? "");
54    });
55    async function handleLogNotFoundImage(imageUrl) {
56      if (!__props.productId) return;
57      const formData = new FormData();
58      formData.append("image", imageUrl);
59      formData.append("productId", __props.productId);
60      try {
61        await logNotFoundImages(formData);
62      } catch (error) {
63        console.error(error);
64      }
65    }
66    const __returned__ = { img, attrs, restAttrs, loaded, hasFailed, applySrc, handleLogNotFoundImage, get Skeleton() {
67      return script;
68    }, RmcIcon };
69    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
70    return __returned__;
71  }
72});
73const _hoisted_1 = {
74  key: 0,
75  class: "d-flex justify-content-center align-items-center img-placeholder position-relative"
76};
77const _hoisted_2 = {
78  key: 1,
79  class: "d-flex flex-column justify-content-center align-items-center rmc-gap-2xl"
80};
81function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
82  return openBlock(), createElementBlock(Fragment, null, [
83    !$setup.loaded && !$setup.hasFailed ? (openBlock(), createElementBlock("div", _hoisted_1, [
84      createVNode($setup["Skeleton"], normalizeProps(guardReactiveProps($props.skeletonProps)), null, 16)
85    ])) : createCommentVNode("", true),
86    withDirectives(createBaseVNode("img", mergeProps({ ref: "img" }, $setup.restAttrs), null, 16), [
87      [vShow, $setup.loaded]
88    ]),
89    $setup.hasFailed ? (openBlock(), createElementBlock("span", _hoisted_2, [
90      createVNode($setup["RmcIcon"], { "icon-name": "no-image" }),
91      _cache[0] || (_cache[0] = createBaseVNode("span", { class: "rmc-ty-eyebrow-lg rmc-color-gray-dark-400" }, "Image coming soon", -1))
92    ])) : createCommentVNode("", true)
93  ], 64);
94}
95const RmcImageAsync = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-57395762"], ["__file", "RmcImageAsync.vue"]]);
96export {
97  RmcImageAsync as R
98};