{"version":3,"file":"stylesheets/4652.css?h=c4b3251f5c9e4e02a7c6","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,CCzFA,oDACI,yCACA,YACA,aACA,uBACA,kBAEJ,yBACI,kEAEA,mBAEA,0CACA,oDACA,qDACA,YACA,oEACA,UACA,kBAEA,kCACI,mCAEA,sDACI,mBAKZ,+BACI,YACA,WACA,gBAGJ,qCACI,wBACA,gBACA,gBACA,cACA,gBACA,kBACA,kBAGJ,wDACI,kBACA,MACA,QACA,SACA,OAEA,UACA,WACA,YACA,UC+BJ,sBACA,WACA","sources":["webpack://@studip/core/./resources/vue/components/stock-images/Thumbnail.vue","webpack://@studip/core/./resources/vue/components/stock-images/MetadataBox.vue","webpack://@studip/core/./resources/vue/components/stock-images/UploadBox.vue","webpack://@studip/core/./resources/vue/components/stock-images/UploadDialog.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","\n#stock-images-upload-box-drag-area {\n    background-color: var(--content-color-20);\n    height: 100%;\n    margin: -15px;\n    padding: 18px 15px 10px;\n    text-align: center;\n}\n.holder {\n    align-items: center;\n    border-color: var(--content-color-60);\n    border-radius: 0.5em;\n    border-style: dashed;\n    border-width: 1px;\n    box-sizing: border-box;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    padding: 0;\n    position: relative;\n\n    &.dragging {\n        background-color: var(--base-color);\n\n        .icon-upload + strong {\n            color: var(--white);\n        }\n    }\n}\n\n.box-centered {\n    height: auto;\n    width: 100%;\n    max-height: 100%;\n}\n\n.icon-upload + strong {\n    color: var(--base-color);\n    font-size: 1.5em;\n    line-height: 1.2;\n    display: block;\n    font-weight: 500;\n    text-align: center;\n    margin: 0 2em 14px;\n}\n\n.upload-button-holder input[type='file'] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n}\n","<template>\n    <studip-dialog\n        v-if=\"show\"\n        height=\"720\"\n        width=\"960\"\n        :title=\"$gettext('Bild hinzufügen')\"\n        @close=\"onCancel\"\n        closeClass=\"cancel\"\n        :closeText=\"$gettext('Abbrechen')\"\n    >\n        <template #dialogContent>\n            <form id=\"stock-images-upload-form\" class=\"default\" @submit.prevent=\"onSubmit\">\n                <UploadBox v-if=\"state === STATES.IDLE\" @upload=\"onUpload\" />\n                <MetadataBox\n                    v-if=\"state === STATES.UPLOADED\"\n                    :file=\"file\"\n                    :metadata=\"metadata\"\n                    :suggested-tags=\"suggestedTags\"\n                    @change=\"onChangeMetadata\"\n                />\n            </form>\n        </template>\n\n        <template #dialogButtons>\n            <button\n                form=\"stock-images-upload-form\"\n                type=\"submit\"\n                class=\"button accept\"\n                :disabled=\"state !== STATES.UPLOADED\"\n            >\n                {{ $gettext('Hinzufügen') }}\n            </button>\n        </template>\n    </studip-dialog>\n</template>\n<script>\nimport MetadataBox from './MetadataBox.vue';\nimport UploadBox from './UploadBox.vue';\nimport { mapActions } from 'vuex';\n\nconst STATES = { IDLE: 'idle', UPLOADED: 'uploaded' };\n\nexport default {\n    props: ['show', 'suggestedTags'],\n    components: { MetadataBox, UploadBox },\n    data: () => ({\n        file: null,\n        metadata: {\n            title: '',\n            description: '',\n            author: '',\n            license: '',\n            tags: [],\n        },\n        state: STATES.IDLE,\n        STATES,\n    }),\n    methods: {\n        onCancel() {\n            this.$emit('cancel');\n            this.resetLocalCopy();\n        },\n        onChangeMetadata(metadata) {\n            this.metadata = metadata;\n        },\n        onSubmit() {\n            this.$emit('confirm', { file: this.file, metadata: this.metadata });\n        },\n        onUpload({ file }) {\n            this.file = file;\n            this.state = STATES.UPLOADED;\n        },\n        resetLocalCopy() {\n            this.file = null;\n            this.metadata = {};\n            this.state = STATES.IDLE;\n        },\n    },\n    watch: {\n        show() {\n            this.resetLocalCopy();\n        },\n    },\n};\n</script>\n\n<style scoped>\nform {\n    height: 100%;\n}\n</style>\n"],"names":[],"sourceRoot":""}