{"version":3,"file":"stylesheets/2332.css?h=f19b0a7d198b1a36c339","mappings":"AA4BA,yCACA,0EACA,iBACA,CACA,6CACA,iBACA,cACA,eACA,CAEA,qBACA,cACA,YACA,eACA,UACA,CC6BA,sCACA,qDACA,OACA,CACA,sDACA,8BACA,uCADA,iBACA,YACA,eACA,CACA,qDACA,6BACA,uCADA,gBACA,WACA,CACA,yDAGA,0BACA,wBAHA,eACA,gBACA,uBACA,sBACA","sources":["webpack://@studip/core/./resources/vue/components/stock-images/Thumbnail.vue","webpack://@studip/core/./resources/vue/components/stock-images/MetadataBox.vue"],"sourcesContent":["<template>\n    <div class=\"stock-images-thumbnail\" v-if=\"url\">\n        <div :style=\"{ width }\">\n            <img :src=\"url\" :style=\"{ 'object-fit': contain ? 'contain' : 'cover' }\" role=\"presentation\" />\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    props: {\n        url: {\n            type: String,\n            required: true,\n        },\n        width: {\n            type: String,\n            default: '6rem',\n        },\n        contain: {\n            type: Boolean,\n            default: false\n        }\n    },\n};\n</script>\n\n<style scoped>\n.stock-images-thumbnail {\n    display: inline-flex;\n    position: relative;\n}\n.stock-images-thumbnail > div {\n    aspect-ratio: 1/1;\n    display: block;\n    overflow: hidden;\n}\n\nimg {\n    display: block;\n    height: 100%;\n    max-width: 100%;\n    width: 100%;\n}\n</style>\n","<template>\n    <div class=\"upload-metadata-box\">\n        <div>\n            <ThumbnailCard\n                v-if=\"fileURL\"\n                :height=\"height ?? 0\"\n                :mime-type=\"file.type\"\n                :size=\"file.size\"\n                :url=\"fileURL\"\n                :width=\"width ?? 0\"\n            />\n        </div>\n        <div>\n            <AttributesFieldset :metadata=\"metadata\" :suggested-tags=\"suggestedTags\" @change=\"onChange\" />\n        </div>\n    </div>\n</template>\n\n<script>\nimport ThumbnailCard from './ThumbnailCard.vue';\nimport AttributesFieldset from './AttributesFieldset.vue';\nimport { getFormat } from './format.js';\n\nexport default {\n    props: ['file', 'metadata', 'suggestedTags'],\n\n    components: { AttributesFieldset, ThumbnailCard },\n\n    data: () => ({\n        fileURL: null,\n        height: null,\n        image: null,\n        width: null,\n    }),\n\n    computed: {\n        tags: {\n            get() {\n                return this.metadata.tags;\n            },\n            set(tags) {\n                this.$set(this.metadata, 'tags', tags);\n            },\n        },\n    },\n\n    methods: {\n        onChange(metadata) {\n            this.$emit('change', metadata);\n        },\n    },\n\n    mounted() {\n        this.fileURL = URL.createObjectURL(this.file);\n        this.image = new Image();\n        this.image.onload = ({ target }) => {\n            this.height = target.height;\n            this.width = target.width;\n        };\n        this.image.src = this.fileURL;\n        this.$set(this.metadata, 'title', this.file.name);\n    },\n\n    beforeDestroy() {\n        if (this.fileURL) {\n            URL.revokeObjectURL(this.fileURL);\n        }\n    },\n};\n</script>\n\n<style scoped>\n.upload-metadata-box {\n    display: flex;\n    gap: 1em;\n}\n.upload-metadata-box > div:first-child {\n    flex-basis: 200px;\n    flex-grow: 0;\n    overflow: hidden;\n}\n.upload-metadata-box > div:last-child {\n    flex-basis: 30em;\n    flex-grow: 1;\n}\n.upload-metadata-box div:first-child ul {\n    font-size: 0.9em;\n    line-height: 1.5;\n    margin-block-start: 1em;\n    padding-inline-start: 0;\n}\n</style>\n"],"names":[],"sourceRoot":""}