{"version":3,"sources":["webpack:///./src/components/NFTCard.vue?e2c6","webpack:///src/components/NFTCard.vue","webpack:///./src/components/NFTCard.vue?02b2","webpack:///./src/components/NFTCard.vue","webpack:///./src/components/NFTCard.vue?032d"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","isLoading","attrs","link","name","soldOut","image","_v","_s","translate","count","price","_e","staticRenderFns","component"],"mappings":"kHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,cAAc,CAACE,YAAY,WAAWC,MAAM,CAAC,aAAcP,EAAIQ,WAAWC,MAAM,CAAC,GAAKT,EAAIU,KAAK,OAAS,WAAW,CAACN,EAAG,MAAM,CAACE,YAAY,sBAAsBG,MAAM,CAAC,MAAQT,EAAIW,OAAO,CAACP,EAAG,MAAM,CAACE,YAAY,YAAYC,MAAM,CAAC,kBAAmBP,EAAIY,SAASH,MAAM,CAAC,IAAMT,EAAIa,MAAM,IAAMb,EAAIW,UAAUP,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,KAAK,CAACE,YAAY,QAAQG,MAAM,CAAC,MAAQT,EAAIW,OAAO,CAACX,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIgB,UAAU,YAAchB,EAAIW,OAAO,OAAOP,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,aAAa,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIgB,UAAU,iCAAiC,IAAIhB,EAAIe,GAAGf,EAAIiB,OAAO,OAAOb,EAAG,MAAM,CAACE,YAAY,aAAa,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIkB,OAAO,eAAgBlB,EAAW,QAAEI,EAAG,KAAK,CAACE,YAAY,gBAAgB,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIgB,UAAU,gCAAgC,OAAOhB,EAAImB,KAAMnB,EAAa,UAAEI,EAAG,iBAAiB,CAACK,MAAM,CAAC,MAAQ,MAAMT,EAAImB,MAAM,IACl9BC,EAAkB,G,wBC0BtB,GACE,WAAF,CACI,eAAJ,QAGE,MAAF,CACI,SAAJ,CACM,KAAN,OACM,UAAN,GAEI,MAAJ,CACM,KAAN,OACM,UAAN,GAEI,KAAJ,CACM,KAAN,OACM,UAAN,GAEI,MAAJ,CACM,KAAN,OACM,UAAN,GAEI,MAAJ,CACM,KAAN,OACM,UAAN,GAEI,UAAJ,CACM,KAAN,QACM,UAAN,IAIE,SAAF,CACI,KADJ,WAEM,MAAN,uBAEI,QAJJ,WAKM,OAAN,kCAIE,QAAF,CACI,UADJ,SACA,GACA,iDCtEiV,I,wBCQ7UC,EAAY,eACd,EACAtB,EACAqB,GACA,EACA,KACA,WACA,MAIa,OAAAC,E,kECnBf","file":"js/chunk-8971cb68.614e4796.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('router-link',{staticClass:\"nft-card\",class:{'bg-loading': _vm.isLoading},attrs:{\"to\":_vm.link,\"target\":\"_blank\"}},[_c('div',{staticClass:\"nft-image-container\",attrs:{\"title\":_vm.name}},[_c('img',{staticClass:\"nft-image\",class:{'nft-unavailable': _vm.soldOut},attrs:{\"src\":_vm.image,\"alt\":_vm.name}})]),_c('div',{staticClass:\"nft-card-desc\"},[_c('h4',{staticClass:\"title\",attrs:{\"title\":_vm.name}},[_vm._v(\" \"+_vm._s(_vm.translate('nft_name_' + _vm.name))+\" \")]),_c('div',[_c('div',{staticClass:\"nft-count\"},[_vm._v(\" \"+_vm._s(_vm.translate('home_page_nft_card_available'))+\" \"+_vm._s(_vm.count)+\" \")]),_c('div',{staticClass:\"nft-price\"},[_vm._v(\" \"+_vm._s(_vm.price)+\" XYM \")])])]),(_vm.soldOut)?_c('h3',{staticClass:\"nft-sold-out\"},[_vm._v(\" \"+_vm._s(_vm.translate('home_page_nft_card_sold_out'))+\" \")]):_vm._e(),(_vm.isLoading)?_c('LoadingSpinner',{attrs:{\"small\":\"\"}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <router-link class=\"nft-card\" :class=\"{'bg-loading': isLoading}\" :to=\"link\" target=\"_blank\">\n        <div class=\"nft-image-container\" :title=\"name\">\n            <img class=\"nft-image\" :class=\"{'nft-unavailable': soldOut}\" :src=\"image\" :alt=\"name\" />\n        </div>\n        <div class=\"nft-card-desc\">\n            <h4 class=\"title\" :title=\"name\">\n                {{ translate('nft_name_' + name) }}\n            </h4>\n            <div>\n                <div class=\"nft-count\">\n                    {{translate('home_page_nft_card_available')}} {{ count }}\n                </div>\n                <div class=\"nft-price\">\n                    {{ price }} XYM\n                </div>\n            </div>\n        </div>\n        <h3 v-if=\"soldOut\" class=\"nft-sold-out\">\n            {{translate('home_page_nft_card_sold_out')}}\n        </h3>\n        <LoadingSpinner small v-if=\"isLoading\" />\n    </router-link>\n</template>\n\n<script>\nimport LoadingSpinner from '../components/LoadingSpinner.vue';\nexport default {\n    components: {\n        LoadingSpinner\n    },\n\n    props: {\n        mosaicId: {\n            type: String,\n            required: true\n        },\n        image: {\n            type: String,\n            required: true\n        },\n        name: {\n            type: String,\n            required: true\n        },\n        price: {\n            type: Number,\n            required: true\n        },\n        count: {\n            type: Number,\n            required: true\n        },\n        isLoading: {\n            type: Boolean,\n            required: true\n        },\n    },\n\n    computed: {\n        link() {\n            return '/nft/' + this.mosaicId;\n        },\n        soldOut() {\n            return this.count === 0 && !this.isLoading;\n        }\n    },\n\n    methods: {\n        translate(key) {\n\t\t\treturn this.$store.getters['ui/translate'](key);\n\t\t}\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.nft-card {\n    z-index: 3;\n\tposition: relative;\n    width: 100%;\n    display: inline-block;\n    border: 3px solid #000;\n    border-radius: $border-radius;\n    box-shadow: $box-shadow;\n    background: var(--color-darkmode-bg-main);\n    cursor: pointer;\n    transition: all .2s ease-in-out;\n\n    &:hover {\n        text-decoration: none;\n        transform: scale(1.01);\n    }\n}\n\n.nft-image-container {\n    animation: bg-loading\n        1.5s\n        ease-out\n        0s\n        alternate\n        infinite\n        none\n        running;\n    min-height: 128px;\n}\n\n.nft-image {\n    width: 100%;\n}\n\n.nft-card-desc {\n    border-top: 3px solid #000;\n    background: var(--color-darkmode-form-bg);\n    padding: 5px 5px;\n    color: var(--color-darkmode-text-subtitle);\n\n    .title {\n        width: 90%;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .nft-count {\n        position: absolute;\n    }\n\n    .nft-price {\n        color: var(--color-flag-blue-lighter);\n        text-align: right;\n        width: 100%;\n        opacity: 1;\n    }\n}\n\n.nft-unavailable {\n    opacity: 0.5;\n    filter: saturate(0.3);\n}\n\n.nft-sold-out {\n    position: absolute;\n    top: 40%;\n    left: 20%;\n    transform: rotate(-45deg);\n    white-space: nowrap;\n    color: var(--color-darkmode-form-text);\n    border: 5px solid var(--color-darkmode-form-text);\n}\n\n@media #{$screen-mobile} {\n\n}\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NFTCard.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NFTCard.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./NFTCard.vue?vue&type=template&id=7e808a81&scoped=true&\"\nimport script from \"./NFTCard.vue?vue&type=script&lang=js&\"\nexport * from \"./NFTCard.vue?vue&type=script&lang=js&\"\nimport style0 from \"./NFTCard.vue?vue&type=style&index=0&id=7e808a81&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7e808a81\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NFTCard.vue?vue&type=style&index=0&id=7e808a81&lang=scss&scoped=true&\""],"sourceRoot":""}