{"version":3,"file":"stylesheets/4246.css?h=1d360e6ac9eecacd17f9","mappings":"AA4BA,yCACA,0EACA,iBACA,CACA,6CACA,iBACA,cACA,eACA,CAEA,qBACA,cACA,YACA,eACA,UACA,CC6DA,mCACA,YACA,gBACA,SACA,CAEA,yCACA,YACA,gBAEA,kBACA,CAEA,iFAJA,oDASA,CALA,wCACA,+CAEA,2DAFA,mBAEA,0CACA,QACA,CAEA,uDACA,mBACA,wBADA,kBACA,sBACA,CAEA,wCACA,qBACA,CAEA,wEAEA,eACA,WACA,CACA,mCACA,qDACA,SACA,iBACA,CACA,kCACA,mCACA,YACA,mBACA,eACA,kBACA,CACA,sCAIA,wBAHA,qDAEA,aACA,uBAFA,UAGA,CAEA,yCAEA,mBADA,eACA,iBACA","sources":["webpack://@studip/core/./resources/vue/components/stock-images/Thumbnail.vue","webpack://@studip/core/./resources/vue/components/stock-images/ImagesListItem.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    <tr @click=\"onSelect\">\n        <td>\n            <label>\n                <input type=\"checkbox\" :checked=\"isChecked\" @change=\"onCheckboxChange\" />\n                <span class=\"sr-only\">{{\n                    $gettextInterpolate($gettext('%{context} auswählen'), { context: stockImage.attributes.title })\n                }}</span>\n            </label>\n        </td>\n        <td>\n            <div>\n                <Thumbnail\n                    v-if=\"thumbnailUrl\"\n                    :url=\"thumbnailUrl\"\n                    width=\"6rem\"\n                    style=\"background: var(--light-gray-color-40)\"\n                    contain\n                />\n                <div>\n                    <div>{{ stockImage.attributes.title }}</div>\n                    <div>\n                        <span class=\"stock-image-author\">{{ stockImage.attributes.author }}</span>\n                        <span class=\"stock-image-tags\">\n                            <button\n                                type=\"button\"\n                                class=\"stock-image-tag\"\n                                v-for=\"tag in stockImage.attributes.tags\"\n                                :key=\"tag\"\n                                @click=\"onTagClick(tag)\"\n                            >\n                                {{ tag }}\n                            </button>\n                        </span>\n                    </div>\n\n                    <ul class=\"stock-image-palette\" :title=\"$gettext('Bildfarben')\" role=\"presentation\">\n                        <li\n                            v-for=\"(color, index) in palette\"\n                            :key=\"index\"\n                            :style=\"`background-color: rgb(${color[0]} ${color[1]} ${color[2]});`\"\n                            :alt=\"color.join(',')\"\n                        ></li>\n                    </ul>\n                </div>\n            </div>\n        </td>\n        <td>\n            <studip-icon shape=\"file-pic\" alt=\"\" />\n            {{ imageFormat(stockImage) }}\n        </td>\n        <td><studip-file-size :size=\"stockImage.attributes.size\" /></td>\n        <td>{{ stockImage.attributes.width }} × {{ stockImage.attributes.height }}</td>\n    </tr>\n</template>\n<script>\nimport Thumbnail from './Thumbnail.vue';\nimport { getFormat } from './format.js';\n\nexport default {\n    props: {\n        stockImage: {\n            type: Object,\n            required: true,\n        },\n        isChecked: {\n            type: Boolean,\n            default: false,\n        },\n    },\n    components: {\n        Thumbnail,\n    },\n    computed: {\n        palette() {\n            return this.stockImage.attributes.palette ?? [];\n        },\n        thumbnailUrl() {\n            return (\n                this.stockImage.attributes['download-urls'].small ??\n                this.stockImage.attributes['download-urls'].original\n            );\n        },\n    },\n    methods: {\n        imageFormat(image) {\n            return getFormat(image.attributes['mime-type']);\n        },\n        onCheckboxChange() {\n            this.$emit('checked');\n        },\n        onSelect({ target }) {\n            if (!['INPUT', 'LABEL', 'BUTTON'].includes(target.tagName)) {\n                this.$emit('select');\n            }\n        },\n        onTagClick(tag) {\n            this.$emit('search', tag);\n        },\n    },\n};\n</script>\n\n<style scoped>\ntr > td:nth-child(1) {\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n}\n\ntr > td:nth-child(1) > label {\n    height: 100%;\n    min-height: 100%;\n    display: flex;\n    padding-inline: 1em;\n}\n\ntr > td:nth-child(2) > div {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    gap: 1rem;\n}\n\ntr > td:nth-child(2) > div div:last-child {\n    flex: 1;\n    margin-inline-end: 1rem;\n}\n\ntr > td:nth-child(3) img {\n    vertical-align: middle;\n}\n\n.stock-image-author,\n.stock-image-tags {\n    font-size: 0.8em;\n    opacity: 0.75;\n}\n.stock-image-tags {\n    display: flex;\n    gap: 0.5em;\n    margin-block: 0.5em;\n}\n.stock-image-tag {\n    background-color: var(--base-color);\n    border: none;\n    color: var(--white);\n    cursor: pointer;\n    padding: 0.25em 0.5em;\n}\n.stock-image-palette {\n    display: flex;\n    width: 100%;\n    height: 0.25em;\n    padding-inline-start: 0;\n}\n\n.stock-image-palette li {\n    display: inline;\n    flex: 1;\n}\n</style>\n"],"names":[],"sourceRoot":""}