'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');

var script = vue.defineComponent({
    name: "TsImageLoader",
    props: {
        photoUrl: {
            type: String,
            required: true,
        },
        customClass: {
            type: String,
            default: "",
        },
        customStyle: {
            type: String,
            default: "",
        },
    },
    setup(props) {
        const image = vue.ref("");
        const imageUrl = vue.ref("");
        const setImage = () => {
            imageUrl.value = props.photoUrl || "";
            const highResImage = new Image();
            highResImage.onload = function () {
                image.value = imageUrl.value;
            };
            highResImage.src = imageUrl.value;
        };
        vue.onMounted(() => {
            setImage();
        });
        return {
            image,
            imageUrl,
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createElementBlock("div", {
    id: "",
    class: vue.normalizeClass(`${_ctx.customClass} blend-in`),
    style: vue.normalizeStyle([{"background-size":"cover","background-repeat":"no-repeat","background-position":"center"}, ` ${
      _ctx.imageUrl ? `background-image:url(${_ctx.imageUrl});` : ''
    }  ${_ctx.customStyle}`])
  }, [
    vue.renderSlot(_ctx.$slots, "default")
  ], 6 /* CLASS, STYLE */))
}

script.render = render;
script.__file = "src/components/TsImageLoader/index.vue";

exports["default"] = script;
