{"version":3,"file":"WaitingModal-ClKEbKm6.js","sources":["../../../resources/js/Components/assets/WaitingModal.vue"],"sourcesContent":["\n<script setup>\nimport { usePage } from '@inertiajs/vue3' \nimport { CloseRound } from '@vicons/material'\n\nconst props = defineProps({\n    closable: {\n        type: Boolean,\n        deafult: false\n    },\n\n    loadedUser: {\n        type: Object,\n        default: null\n    },\n\n    effects: {\n        type: Object,\n        default: null\n    }\n})\n\ndefineEmits([ 'close' ])\n\nconst userLogged = computed(() => usePage().props.auth.user)\nconst user = ref(null)\ndocument.body.style.overflow = 'hidden'\n\nconst logo = ref(null)\n\nconst customTopColor = ref(null)\nconst customBottomColor = ref(null)\nconst effectHeight = ref('40px')\nonBeforeMount(() => {\n    if (props.loadedUser) {\n        console.log('teste')\n        user.value = props.loadedUser\n    } else {\n        user.value = userLogged.value\n    }\n\n    //esse if é pra a tela de edição do load da agencia\n    if (props.effects) {\n        if (props.effects.topColor) {\n            customTopColor.value = props.effects.topColor\n        }\n\n        if (props.effects.bottomColor) {\n            customBottomColor.value = props.effects.bottomColor\n        }\n\n        if (props.effects.effect_height) {\n            effectHeight.value = props.effects.effect_height+'px'\n        }\n    } else {\n        if (user.value) {\n            //decidindo quais configurações de efeito usar\n            let effects = null //por padrao nenhuma\n            if (user.value.role == 'agency') {\n                //se for uma agencia logada, usa a dela propria\n                effects = user.value.load_effects\n            } else if (user.value.agency_owners.length > 0) {\n                //se for alguem que é filho de agencia no entanto, usa a da agencia dela\n                const last = user.value.agency_owners.length - 1\n                const owner = user.value.agency_owners[last]\n\n                effects = owner.load_effects\n            }\n\n            if (effects) {\n                customTopColor.value = effects.load_top_color\n                customBottomColor.value = effects.load_bottom_color\n                effectHeight.value = effects.effect_height+'px'\n            }\n        }\n    }\n\n\n    //custom logo aqui\n    if (user.value) {\n        if (user.value.role == 'agency') {\n            logo.value = (user.value.logo) ? user.value.logo : '/images/logo-placeholder.png'\n        } else {\n            if (user.value.agency_owners.length > 0) {\n                //não sendo uma agencia entao vai usar a logo da agencia que cadatrou o cliente\n                const last = user.value.agency_owners.length - 1;\n                const lastOwnerLogo = user.value.agency_owners[last].logo\n\n                if (lastOwnerLogo) {\n                    logo.value = lastOwnerLogo\n                }\n            }\n        }\n    }\n})\n</script>\n\n<template>\n    <Teleport to=\"body\">\n        <div class=\"loadingContainer\">\n\n            <div class=\"loading\">\n                <img\n                    :src=\"logo\"\n                    v-if=\"logo\"\n                    class=\"tw-p-0 tw-object-fill logo\"\n                >\n                <h1 class=\"logo\" v-else>\n                    <span class=\"!tw-text-blue-wc\">Whats.</span>\n                    <span class=\"!tw-text-green-wc\">Company</span>\n                </h1>\n                \n                <!--- \n                    top tw-bg-green-wc\n                    bottom tw-bg-blue-wc\n                -->\n                <div \n                    v-for=\"i in 12\" :key=\"i\" \n                    class=\"strand\"\n                    :style=\"{\n                        height: (effectHeight) ? effectHeight : '40px'\n                    }\"\n                >\n                    <div \n                        class=\"top\" \n                        :style=\"{\n                            'animation-delay': `${i * -0.2}s`,\n                            background: (customTopColor) ? customTopColor :  '#02FF00'\n                        }\"\n                    />\n                    <div \n                        class=\"bottom\" \n                        :style=\"{\n                            'animation-delay': `${-1.5 - (i * 0.2)}s`,\n                            background: (customBottomColor) ? customBottomColor : '#01A5ED'\n                        }\"\n                    />\n                </div>\n            </div>\n            \n            <span \n                class=\"tw-absolute tw-top-[20px] tw-right-[20px] tw-w-auto tw-h-[40px] tw-rounded-md tw-shadow-md \n            tw-bg-blue-wc tw-text-white tw-flex tw-justify-center tw-items-center tw-px-3 tw-cursor-pointer\" \n                v-if=\"closable\"\n                @click=\"$emit('close')\"\n            >\n                <CloseRound class=\"tw-w-5 tw-mr-2\"/>\n                Fechar Exemplo\n            </span>\n        </div>\n        <div class=\"loadingBackdrop\" />\n    </Teleport>\n</template>\n\n<style scoped>\n.logo {\n    @apply tw-flex tw-text-[25px] tw-font-bold tw-absolute;\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n.logo span {\n    @apply !tw-p-0 tw-bg-transparent    \n}\n\n.loadingBackdrop {\n    @apply tw-fixed tw-top-0 tw-left-0 tw-bg-white/90 tw-backdrop-blur-sm tw-z-[1000] tw-w-full tw-h-full;\n    transition: opacity .2s ease-in-out;\n}\n\n.loadingContainer {\n    @apply tw-fixed tw-top-0 tw-left-0 tw-z-[9999] tw-w-full tw-h-full tw-flex tw-flex-col \n    tw-items-center tw-justify-center tw-opacity-100;\n}\n\n.loading {\n    @apply tw-flex tw-w-auto tw-h-[30px] tw-items-center tw-scale-[1.5]\n}\n\n.strand {\n    position: relative;\n    width: 15px;\n}\n\n.top {\n    position: absolute;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    height: 12px;\n    width: 12px;\n    border-radius: 100%;\n    animation: 3s moveTop infinite ease-in-out;\n}\n\n.bottom {\n    position: absolute;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    height: 12px;\n    width: 12px;\n    border-radius: 100%;\n    animation: 3s moveBottom infinite ease-in-out;\n}\n\n@keyframes moveTop {\n    0% {\n        top: 100%;\n        z-index: -3;\n    }\n\n    25% {\n        height: 8px;\n        width: 8px;\n        z-index: -3;\n    }\n\n    50% {\n        top: 0%;\n        z-index: -3;\n    }\n\n    75% {\n        height: 12px;\n        width: 12px;\n        z-index: 3;\n    }\n\n    100% {\n        top: 100%;\n        z-index: 3;\n    }\n}\n\n@keyframes moveBottom {\n    0% {\n        top: 100%;\n        z-index: -3;\n    }\n\n    25% {\n        height: 8px;\n        width: 8px;\n        z-index: -3;\n    }\n\n    50% {\n        top: 0%;\n        z-index: -3;\n    }\n\n    75% {\n        height: 12px;\n        width: 12px;\n        z-index: 3;\n    }\n\n    100% {\n        top: 100%;\n        z-index: 3;\n    }\n}\n</style>"],"names":["props","__props","userLogged","computed","usePage","auth","user","ref","document","body","style","overflow","logo","customTopColor","customBottomColor","effectHeight","onBeforeMount","loadedUser","console","log","value","effects","topColor","bottomColor","effect_height","role","load_effects","agency_owners","length","last","load_top_color","load_bottom_color","lastOwnerLogo"],"mappings":"+ZAKA,MAAMA,EAAQC,EAmBRC,EAAaC,GAAS,IAAMC,IAAUJ,MAAMK,KAAKC,OACjDA,EAAOC,EAAI,MACjBC,SAASC,KAAKC,MAAMC,SAAW,SAE/B,MAAMC,EAAOL,EAAI,MAEXM,EAAiBN,EAAI,MACrBO,EAAoBP,EAAI,MACxBQ,EAAeR,EAAI,eACzBS,GAAc,KASV,GARIhB,EAAMiB,YACNC,QAAQC,IAAI,SACZb,EAAKc,MAAQpB,EAAMiB,YAEnBX,EAAKc,MAAQlB,EAAWkB,MAIxBpB,EAAMqB,QACFrB,EAAMqB,QAAQC,WACdT,EAAeO,MAAQpB,EAAMqB,QAAQC,UAGrCtB,EAAMqB,QAAQE,cACdT,EAAkBM,MAAQpB,EAAMqB,QAAQE,aAGxCvB,EAAMqB,QAAQG,gBACdT,EAAaK,MAAQpB,EAAMqB,QAAQG,cAAc,WAGrD,GAAIlB,EAAKc,MAAO,CAEZ,IAAIC,EAAU,KACd,GAAuB,UAAnBf,EAAKc,MAAMK,KAEXJ,EAAUf,EAAKc,MAAMM,kBAClB,GAAIpB,EAAKc,MAAMO,cAAcC,OAAS,EAAG,CAE5C,MAAMC,EAAOvB,EAAKc,MAAMO,cAAcC,OAAS,EAG/CP,EAFcf,EAAKc,MAAMO,cAAcE,GAEvBH,YAChC,CAEgBL,IACAR,EAAeO,MAAQC,EAAQS,eAC/BhB,EAAkBM,MAAQC,EAAQU,kBAClChB,EAAaK,MAAQC,EAAQG,cAAc,KAE3D,CAKI,GAAIlB,EAAKc,MACL,GAAuB,UAAnBd,EAAKc,MAAMK,KACXb,EAAKQ,MAASd,EAAKc,MAAU,KAAId,EAAKc,MAAMR,KAAO,oCAEnD,GAAIN,EAAKc,MAAMO,cAAcC,OAAS,EAAG,CAErC,MAAMC,EAAOvB,EAAKc,MAAMO,cAAcC,OAAS,EACzCI,EAAgB1B,EAAKc,MAAMO,cAAcE,GAAMjB,KAEjDoB,IACApB,EAAKQ,MAAQY,EAEjC,CAEA"}