diff --git a/src/components/InflectionButton.vue b/src/components/InflectionButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b912dbe30e523cb21260729f276e6ad1ee01d7f
--- /dev/null
+++ b/src/components/InflectionButton.vue
@@ -0,0 +1,256 @@
+<!-- eslint-disable -->
+<template>
+
+ <div class="inflection-wrapper" v-if="inflected && !$parent.collapsed">
+
+ <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
+ <span>{{inflection_button_text}}</span><span class = "inflection-arrow"><v-icon right>{{inflection_arrow}}</v-icon></span>
+ </v-btn>
+ <div class="inflection-canvas" v-if="inflection_expanded">
+ <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
+ </div>
+
+</div>
+</template>
+
+<script>
+ /* eslint-disable */
+import helpers from '../utils/helpers.js'
+
+import inflectionTable from 'inflection-table'
+
+export default {
+ name: 'InflectionButton',
+ props: {
+ lemmas: Array,
+ dictionary: String,
+ article_id: Number
+ },
+ computed: {
+ header_text: function() {
+ return this.lemmas.map(lemma => lemma.lemma).join(', ')
+ },
+ secondary_header_text: function() {
+ let a_forms = []
+ this.lemmas.forEach((lemma, i) => {
+ if (lemma.paradigm_info[0] && lemma.paradigm_info[0].inflection_group == 'VERB') {
+ let inf2 = lemma.paradigm_info[0].inflection[1] && lemma.paradigm_info[0].inflection[1].word_form
+ if (inf2 && inf2.length) {
+ a_forms.push(inf2)
+ }
+ }
+ });
+ return a_forms.join(', ')
+ },
+ inflect_tooltip: function() {
+ return this.dictionary == 'bm' ? 'Klikk for å se bøyinger' : 'Klikk for å sjå bøyingar'
+ },
+ inflection_button_text: function() {
+ return {
+ "bm": {false: "Se bøyning", true: "Skjul bøyning"},
+ "nn": {false: "Sjå bøying", true: "Skjul bøying"}
+ }[this.dictionary][this.inflection_expanded]
+ },
+ inflection_arrow: function() {
+ return this.inflection_expanded? "expand_less" : "expand_more"
+ },
+ group_list: function() {
+ return helpers.group_list(this.lemmas, this.dictionary)
+ },
+ inflection_classes: function() {
+ let inf_classes = new Set()
+ let ureg = false
+ this.lemmas.forEach((lemma, i) => {
+
+ if (lemma.inflection_class) inf_classes.add(lemma.inflection_class)
+ else ureg = true
+
+ })
+ if (inf_classes.size){
+
+ let class_array = Array.from(inf_classes).sort()
+ if (ureg) class_array.push("ureg.")
+ let class_list
+ if (class_array.length < 3) {
+ class_list = class_array.join(" og ")
+ }
+ else {
+ class_list = class_array.slice(0, -1).join(", ") + " og " + class_array[class_array.length -1]
+ }
+
+ return " ("+ class_list +")"
+ }
+ },
+ inflection_groups_by_lemma: function() {
+ let components = Object.keys(this.$options.components)
+ return this.lemmas.map(
+ function(lemma_){
+ let inflection_groups = lemma_.paradigm_info.reduce((acc, std) => Object.assign(acc, {[std.inflection_group]: []}), {})
+ lemma_.paradigm_info.forEach(std => inflection_groups[std.inflection_group].push(std))
+ return {
+ lemma: lemma_.lemma,
+ inflection_groups: Object.fromEntries(Object.entries(inflection_groups).filter(e => components.includes(e[0].replace('/', '_'))))
+ }
+ }
+ )
+ },
+ lemmas_with_word_class_and_lang: function() {
+ return this.lemmas.map(lemma => Object.assign({language: this.dictionary == 'bm' ? 'nob' : 'nno',
+ word_class: lemma.paradigm_info[0].inflection_group.split('_')[0]}, lemma))
+ },
+ inflected: function()Â {
+ return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
+ },
+ },
+ components: {
+ inflectionTable
+ },
+ data: function() {
+ return {
+ inflect_reported: false,
+ menu: false,
+ inflection_expanded: false
+ }
+ },
+ methods: {
+ toggle: function()Â {
+ this.inflection_expanded = !this.inflection_expanded
+ if (! this.inflect_reported) {
+ this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
+ }
+ this.inflect_reported = true
+
+ }
+ }
+}
+
+</script>
+
+<style>
+
+
+article h2 {
+ padding-top: 4px;
+ padding-bottom: 0px;
+ font-family: Inria Serif;
+ font-size: 30px;
+}
+
+article h2.secondary_header {
+ padding-top: 0px;
+ padding-bottom: 4px;
+}
+
+.info-button {
+ margin-left: 6px;
+ margin-right: -2px;
+ height: 10px;
+ width: 10px;
+}
+
+.word-classification {
+ text-decoration: underline dashed;
+}
+
+.dict-label {
+ color: var(--v-primary-base) ;
+ font-weight: bold;
+ padding-left: 5px;
+ position: absolute;
+ top: 0px;
+ left: 15px;
+ font-variant-caps: all-small-caps;
+}
+
+
+.show-inflection .v-icon {
+ color: var(--v-primary-base) !important;
+}
+
+
+.inflection-arrow {
+ position: absolute;
+ right: -4px;
+ margin-left: 3px;
+ font-size: 10px;
+}
+
+@keyframes open {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.inflection-canvas {
+ overflow-x: auto;
+ /*position: absolute;*/
+ z-index: 5;
+ background-color: rgba(255, 255, 255, 0);
+ /*max-width: 100vw;*/
+ padding-top: 10px;
+}
+
+
+.inflection-wrapper {
+ color: var(--v-text-base);
+ width: min-content;
+ font-size: 14px;
+ overflow-x: auto;
+ margin-top: 10px;
+}
+
+#search_results .xs .inflection-wrapper, #search_results .sm .inflection-wrapper {
+ display: none;
+}
+
+.context {
+ color: var(--v-primary-lighten4) !important;
+}
+
+div.lemma {
+ display: none;
+}
+
+table {
+ border-collapse: collapse;
+ margin-top: 5px;
+ border-color: var(--v-primary-base);
+}
+
+th, td {
+ border: solid 1px;
+ padding: 5px;
+}
+
+th {
+ background-color: var(--v-button-base);
+}
+
+.infl-label {
+ text-align: center;
+ vertical-align: top;
+}
+
+article:not(.righ_hand_column) .inflection-canvas {
+ left: -35px;
+}
+
+
+td.hilite {
+ background-color: var(--v-tertiary-base);
+ text-align: center
+}
+
+.article_header {
+ display: flex;
+ align-items: baseline;
+}
+
+.hgno {
+ padding-left: 3px;
+}
+
+</style>