Refactoring: convert language input element into svelte,remove many obsolete classes

src/UI/Popup/LanguageElement/LanguageElement.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import LanguageQuestion from "./LanguageQuestion.svelte"
+  import LanguageAnswer from "./LanguageAnswer.svelte"
+  import Tr from "../../Base/Tr.svelte"
+  import Translations from "../../i18n/Translations"
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
+  import type { Feature } from "geojson"
+  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import EditButton from "../TagRendering/EditButton.svelte"
+
+  export let key: string
+  export let tags: UIEventSource<Record<string, string>>
+
+  export let state: SpecialVisualizationState
+  export let feature: Feature
+  export let layer: LayerConfig | undefined
+
+  export let question: string
+  export let on_no_known_languages: string = undefined
+  export let single_render: string
+  export let item_render: string
+  export let render_all: string // Should contain one `{list()}`
+  let prefix = key + ":"
+  let foundLanguages = tags.map((tags) => {
+    const foundLanguages: string[] = []
+    for (const k in tags) {
+      const v = tags[k]
+      if (v !== "yes") {
+        continue
+      }
+      if (k.startsWith(prefix)) {
+        foundLanguages.push(k.substring(prefix.length))
+      }
+    }
+    return foundLanguages
+  })
+
+  const forceInputMode = new UIEventSource(false)
+
+</script>
+
+{#if $foundLanguages.length === 0 && on_no_known_languages && !$forceInputMode}
+  <div class="p-1 flex items-center justify-between low-interaction rounded">
+    <div>
+      {on_no_known_languages}
+    </div>
+    <EditButton on:click={_ => forceInputMode.setData(true)} />
+  </div>
+{:else if $forceInputMode || $foundLanguages.length === 0}
+  <LanguageQuestion {question} {foundLanguages} {prefix} {state} {tags} {feature} {layer}
+                    on:save={_ => forceInputMode.setData(false)}>
+    <span slot="cancel-button">
+    {#if $forceInputMode}
+      <button on:click={_ => forceInputMode.setData(false)}>
+        <Tr t={Translations.t.general.cancel} />
+      </button>
+      {/if}
+    </span>
+  </LanguageQuestion>
+{:else}
+  <div class="p-2 flex items-center justify-between low-interaction rounded">
+    <div>
+      <LanguageAnswer {single_render} {item_render} {render_all} languages={foundLanguages} {state} {tags} { feature}
+                      {layer} />
+    </div>
+    <EditButton on:click={_ => forceInputMode.setData(true)} />
+  </div>
+{/if}