{"version":3,"file":"VariativeBlock-f3c7bebf.js","sources":["../../../resources/js/lib/component/Loading.svelte","../../../resources/js/lib/products/particles/VariativeBlock.svelte"],"sourcesContent":["<script>\r\n    export let color = \"#000\";\r\n    export let size = 128;\r\n</script>\r\n\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" width=\"{size}px\" height=\"{size}px\" viewBox=\"0 0 128 128\">\r\n    <path fill={color} fill-opacity=\"1\" d=\"M64.4 16a49 49 0 0 0-50 48 51 51 0 0 0 50 52.2 53 53 0 0 0 54-52c-.7-48-45-55.7-45-55.7s45.3 3.8 49 55.6c.8 32-24.8 59.5-58 60.2-33 .8-61.4-25.7-62-60C1.3 29.8 28.8.6 64.3 0c0 0 8.5 0 8.7 8.4 0 8-8.6 7.6-8.6 7.6z\"></path>\r\n</svg>\r\n\r\n<style>\r\n    svg{\r\n        animation: rotate 3s linear infinite forwards;\r\n    }\r\n    @keyframes rotate{\r\n        0%{\r\n            transform: rotate(0deg);\r\n        }\r\n        100%{\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n</style>","<script>\r\n    import { createEventDispatcher, onMount } from \"svelte\";\r\n    import Loading from \"../../component/Loading.svelte\";\r\n    import { url } from \"../../utils/api\";\r\n\r\n    export let variants = [];\r\n    export let active = getActive();\r\n    export let imageHash = '';\r\n    const dispatch = createEventDispatcher();\r\n\r\n    let image = '';\r\n    let lightColor = '';\r\n    let loading = true;\r\n\r\n    function handleClickVariant(index){\r\n        active = index;\r\n        loading = true;\r\n        dispatch('change', {\r\n            index,\r\n            image,\r\n            lightColor\r\n        })\r\n    }\r\n    function getActive(){\r\n        let active = 0;\r\n        variants.filter((variant, index)=>{\r\n            if(variant.active){\r\n                active = index;\r\n                return true;\r\n            }\r\n        });\r\n        return active;\r\n    }\r\n    onMount(()=>{\r\n        dispatch('change', {\r\n            index: active,\r\n            image,\r\n            lightColor\r\n        });\r\n    })\r\n\r\n\r\n\r\n    $: image = '/resources/assets'+url.path+'/variants/'+variants[active].name+'.webp'+imageHash;\r\n    $: if(variants[active].bg == 'texture'){\r\n        lightColor = 'url(/resources/assets'+url.path+'/textures/'+variants[active].name+'.webp'+imageHash+')';\r\n    }else{\r\n        lightColor = variants[active].bg;\r\n    }\r\n</script>\r\n\r\n<div class=\"variative_wrap\">\r\n    <div class=\"image_wrap\" class:imgLoading={loading}>\r\n        {#if variants[active].name}\r\n            <img \r\n                src={image} \r\n                loading=\"lazy\" \r\n                alt=\"\"\r\n                on:load={()=>{\r\n                    loading = false;\r\n                }}\r\n            />\r\n        {/if}\r\n        <div class=\"loading\">\r\n            <Loading color=\"#737373\"/>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"light\"\r\n        style:--lightColor={lightColor}\r\n    ></div>\r\n    <div class=\"variant_list\">\r\n        <div class=\"variant_wrap\">\r\n            {#each variants as {bg,name}, index}\r\n                <button \r\n                    class=\"variant\" \r\n                    style:--type=\"var(--{bg=='texture'? bg : 'bg'})\"\r\n                    style:--bg={bg} \r\n                    style:--texture={bg=='texture' ? 'url(/resources/assets'+url.path+'/textures/'+name+'.webp'+imageHash+')': ''}\r\n                    class:active={active == index}\r\n                    on:click={()=>{handleClickVariant(index)}}\r\n                    type=\"button\"\r\n                ></button>\r\n            {/each}\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<style lang=\"postcss\">\r\n    .imgLoading{\r\n        & img{\r\n            opacity: 0;\r\n        }\r\n        & .loading{\r\n            opacity: 1;\r\n        }\r\n    }\r\n    .variative_wrap{\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        overflow: hidden;\r\n        height: 100%;\r\n        border-radius: 40px;\r\n        /* animation: disco 3s ease-out forwards infinite; */\r\n    }\r\n    img{\r\n        transition: opacity .3s ease-out;\r\n        &{\r\n            @media (max-width:540px) {\r\n                max-width: 80%;\r\n            }\r\n        }\r\n    }\r\n    .loading{\r\n        opacity: 0;\r\n        position: absolute 50% 0 0 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: opacity .3s ease-out;\r\n        size: 128px;\r\n    }\r\n    .variant{\r\n        height: 0;\r\n        position: relative;\r\n        padding: 50% 0;\r\n        border: none;\r\n        border-radius: 50%;\r\n        background: var(--type);\r\n        background-repeat: no-repeat;\r\n        background-size: cover;\r\n\r\n        &.active{\r\n            border: solid #fff 3px;\r\n            padding: calc(50% - 3px) 0;\r\n        }\r\n        &::after{\r\n            border-radius: 50%;\r\n            content: '';\r\n            position: absolute 0;\r\n            display: block;\r\n            size: 100%;\r\n            background: linear-gradient(0deg, #0004 0%, #fff4 100%);\r\n            opacity: 0;\r\n        }\r\n        &:not(.active):hover::after{\r\n            opacity: 1;\r\n            transition: .2s ease-out;\r\n        }\r\n    }\r\n    .light{\r\n        z-index: 1;\r\n        size: 60% 0;\r\n        padding: 20% 0 0;\r\n        position: absolute 71% 0 auto;\r\n        margin: 0 auto;\r\n        border-radius: 50% 50% 0 0;\r\n        background: var(--lightColor);\r\n        opacity: .5;\r\n        filter: blur(33px) hue-rotate(8deg) contrast(1.6);\r\n        perspective: 200px;\r\n        animation: light 3s both infinite alternate ease-out;\r\n\r\n        &::before{\r\n            content: '';\r\n            position: absolute * 0 100%;\r\n            /* margin: 0 auto;\r\n            size: 150px 0;\r\n            border-bottom: 200px solid var(--lightColor);\r\n            border-left: 100px solid transparent;\r\n            border-right: 100px solid transparent;*/\r\n            filter: brightness(0.5) hue-rotate(-10deg) blur(10px);\r\n            opacity: .7;\r\n            background: var(--lightColor);\r\n            border: 1px solid;\r\n            transform: rotateX(40deg) scale(1,10);\r\n            transform-origin: 50% 100%;\r\n            border-radius: 10px 10px 0 0;\r\n            height: 200%;\r\n            width: 100%;\r\n            content: '';\r\n            animation: lightshadow 3s both infinite alternate ease-out;\r\n        }\r\n    }\r\n    .image_wrap{\r\n        position: relative;\r\n        z-index: 2;\r\n        display: flex;\r\n        size: 100%;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex: 77.7% 0 0;\r\n        min-height: 300px;\r\n    }\r\n    .variant_list{\r\n        z-index: 2;\r\n        overflow-y: auto;\r\n        position: relative;\r\n        display: flex;\r\n        flex: auto 1 1;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 18px;\r\n        flex-wrap: wrap;\r\n        background: var(--input);\r\n        &{\r\n            @media (min-width:768px) {\r\n                padding: 18px 18px 8px;\r\n            }\r\n        }\r\n    }\r\n    .variant_wrap{\r\n        display: grid;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        min-height: 50px;\r\n        grid-template-columns: repeat(auto-fit, minmax(28px, 32px));\r\n        &{\r\n            max-width: 372px;\r\n            @media (min-width:992px) {\r\n                max-width: 552px;\r\n            }\r\n        }\r\n        width: 100%;\r\n    }\r\n    /* @keyframes disco{\r\n        0%{\r\n            filter: hue-rotate(0deg);\r\n        }\r\n        100%{\r\n            filter: hue-rotate(360deg);\r\n        }\r\n    } */\r\n    @keyframes light{\r\n        0%{\r\n            opacity: .45;\r\n        }\r\n        100%{\r\n            opacity: .65;\r\n        }\r\n    }\r\n    @keyframes lightshadow{\r\n        0%{\r\n            opacity: .4;\r\n            /* bottom: 100%; */\r\n        }\r\n        100%{\r\n            /* bottom: 80%; */\r\n            opacity: .8;\r\n        }\r\n    }\r\n</style>"],"names":["ctx","insert","target","svg","anchor","append","path","color","$$props","size","attr","img","img_src_value","style___type","toggle_class","button","set_style","url","dirty","create_if_block","i","div5","div1","div0","div2","div4","div3","variants","active","getActive","imageHash","dispatch","createEventDispatcher","image","lightColor","loading","handleClickVariant","index","$$invalidate","variant","onMount"],"mappings":"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"}