{"version":3,"file":"stylesheets/407.css?h=e7e527d6ec5962055de2","mappings":"AAoGA,sBACA,iDAGA,+CAHA,oBACA,0CACA,qDACA,8BACA,UACA,CAEA,uBAEA,uCACA,4BAFA,YACA,YACA,2BACA,UACA,CAEA,wCACA,gBACA,mBACA,CAEA,wBACA,+CAGA,wDAEA,6CALA,mBACA,yCACA,YACA,uDACA,qDACA,uBACA,WACA,CAEA,+BACA,kCACA,CAEA,yCAEA,0BADA,8BACA,wBACA,CAEA,4CACA,gDACA,CAEA,8BAEA,8BAEA,0DACA,oDACA,aALA,sBAMA,CAEA,yEAEA,UACA","sources":["webpack://@studip/core/./resources/vue/components/SearchWithFilter.vue"],"sourcesContent":["<template>\n    <div>\n        <form @submit.prevent=\"onSearch\">\n            <slot name=\"filters\"></slot>\n\n            <input\n                :id=\"`search-bar-input-${searchId}`\"\n                class=\"search-bar-input\"\n                type=\"text\"\n                v-model=\"searchTerm\"\n                :aria-label=\"$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')\"\n            />\n\n            <button\n                v-if=\"showSearchResults\"\n                class=\"search-bar-erase\"\n                type=\"button\"\n                :title=\"$gettext('Suchformular zurücksetzen')\"\n                @click=\"onReset\"\n            >\n                <StudipIcon shape=\"decline\" :size=\"20\" />\n            </button>\n\n            <button\n                type=\"button\"\n                :title=\"$gettext('Suchfilter einstellen')\"\n                class=\"search-bar-filter\"\n                :class=\"{ active: showFilterPanel }\"\n                @click=\"onToggleFilterPanel\"\n                :aria-controls=\"`search-bar-filter-panel-${searchId}`\"\n                :aria-expanded=\"showFilterPanel ? 'true' : 'false'\"\n            >\n                <StudipIcon shape=\"filter\" :role=\"showFilterPanel ? 'info_alt' : 'clickable'\" :size=\"20\" alt=\"\" />\n            </button>\n\n            <button\n                type=\"submit\"\n                :value=\"$gettext('Suchen')\"\n                :aria-controls=\"`search-bar-input-${searchId}`\"\n                class=\"submit-search\"\n                :title=\"$gettext('Suche starten')\"\n            >\n                <StudipIcon shape=\"search\" :size=\"20\" role=\"presentation\" alt=\"\" />\n            </button>\n        </form>\n        <div :id=\"`search-bar-filter-panel-${searchId}`\" class=\"filterpanel\" ref=\"filterPanel\" v-if=\"showFilterPanel\">\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport StudipIcon from './StudipIcon.vue';\n\nlet searchIndex = 0;\n\nexport default {\n    props: {\n        query: {\n            type: String,\n            required: true,\n        },\n    },\n    components: {\n        StudipIcon,\n    },\n    data: () => ({\n        searchId: searchIndex++,\n        showFilterPanel: false,\n        searchTerm: '',\n    }),\n    computed: {\n        showSearchResults() {\n            return this.query.length > 0;\n        },\n    },\n    methods: {\n        onReset() {\n            this.searchTerm = '';\n            this.onSearch();\n        },\n        onSearch() {\n            this.$emit('search', this.searchTerm);\n        },\n        onToggleFilterPanel() {\n            this.showFilterPanel = !this.showFilterPanel;\n        },\n    },\n    mounted() {\n        this.searchTerm = this.query;\n    },\n    watch: {\n        query(searchTerm) {\n            this.searchTerm = searchTerm;\n        },\n    },\n};\n</script>\n\n<style scoped>\nform {\n    align-items: stretch;\n    border: thin solid var(--content-color-40);\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n}\n\ninput {\n    border: none;\n    flex-grow: 1;\n    padding-inline-start: 0.75em;\n    width: 100%;\n}\n\ninput.search-bar-input {\n    line-height: 1.5;\n    padding-block: 0.25em;\n}\n\nbutton {\n    align-items: center;\n    background-color: var(--content-color-20);\n    border: none;\n    border-inline-start: thin solid var(--content-color-40);\n    display: flex;\n    justify-content: center;\n    width: 2.5em;\n}\n\nbutton.active {\n    background-color: var(--base-color);\n}\n\nbutton.search-bar-erase {\n    background-color: var(--white);\n    border-inline-start: none;\n}\n\n.search-bar-filter--remove {\n    margin-inline-start: 5px;\n}\n\n.filterpanel {\n    width: calc(100% + 2px);\n    background-color: var(--white);\n    border: thin solid var(--content-color-40);\n    border-top: none;\n    box-sizing: border-box;\n    padding: 10px;\n}\n\n.filterpanel::before,\n.filterpanel::after {\n    right: 50px;\n}\n</style>\n"],"names":[],"sourceRoot":""}