@vcmap/ui 5.0.0-rc.30 → 5.0.0-rc.31

package/src/components/icons/WallIcon.vue

@@ -1,22 +1,19 @@
 <!-- eslint-disable max-len -->
 <template>
   <svg
-    id="icon_24_wall"
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
     viewBox="0 0 24 24"
   >
-    <g id="Gruppe_1440" data-name="Gruppe 1440" transform="translate(3 1)">
+    <g id="Gruppe_1440" transform="translate(3 1)">
       <path
         id="Pfad_530"
-        data-name="Pfad 530"
         d="M16.158,20h-3V2h3V7h2V1a1,1,0,0,0-1-1H12.593a1,1,0,0,0-.2.02L.805,2.33A1,1,0,0,0,0,3.311V15.864a1,1,0,0,0,.59.913L12,21.912a1,1,0,0,0,.41.088h4.745a1,1,0,0,0,1-1V15h-2ZM2,4.131l9.158-1.825V19.339L2,15.218Z"
         fill="currentColor"
       />
       <path
         id="Pfad_531"
-        data-name="Pfad 531"
         d="M17.158,8a3,3,0,1,0,3,3,3,3,0,0,0-3-3"
         fill="currentColor"
       />

package/src/components/icons/WandIcon.vue

@@ -2,164 +2,116 @@
 
 <template>
   <svg
-    id="icon_wizard"
     xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
     viewBox="0 0 16 16"
   >
     <g id="wand" transform="translate(1.706 1.705)">
-      <g
-        id="Gruppe_1465"
-        data-name="Gruppe 1465"
-        transform="translate(0 10.491)"
-      >
-        <g id="Gruppe_1464" data-name="Gruppe 1464">
+      <g id="Gruppe_1465" transform="translate(0 10.491)">
+        <g id="Gruppe_1464">
           <path
             id="Pfad_540"
-            data-name="Pfad 540"
             d="M1.574,22.1a.476.476,0,0,1-.367-.157L.157,20.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,1.574,22.1Z"
             transform="translate(0 -20)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1467"
-        data-name="Gruppe 1467"
-        transform="translate(1.049 1.049)"
-      >
-        <g id="Gruppe_1466" data-name="Gruppe 1466">
+      <g id="Gruppe_1467" transform="translate(1.049 1.049)">
+        <g id="Gruppe_1466">
           <path
             id="Pfad_541"
-            data-name="Pfad 541"
             d="M2.525,13.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L12.648,2.157a.519.519,0,1,1,.734.734L2.892,13.382A.476.476,0,0,1,2.525,13.54Z"
             transform="translate(-2 -2)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1469"
-        data-name="Gruppe 1469"
-        transform="translate(10.491 0)"
-      >
-        <g id="Gruppe_1468" data-name="Gruppe 1468">
+      <g id="Gruppe_1469" transform="translate(10.491 0)">
+        <g id="Gruppe_1468">
           <path
             id="Pfad_542"
-            data-name="Pfad 542"
             d="M21.574,2.1a.476.476,0,0,1-.367-.157L20.157.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,21.574,2.1Z"
             transform="translate(-20 0)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g id="Gruppe_1471" data-name="Gruppe 1471" transform="translate(0 0)">
-        <g id="Gruppe_1470" data-name="Gruppe 1470">
+      <g id="Gruppe_1471" transform="translate(0 0)">
+        <g id="Gruppe_1470">
           <path
             id="Pfad_543"
-            data-name="Pfad 543"
             d="M.525,11.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L10.648.157a.507.507,0,0,1,.734,0,.507.507,0,0,1,0,.734L.892,11.382A.476.476,0,0,1,.525,11.54Z"
             transform="translate(0 0)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1473"
-        data-name="Gruppe 1473"
-        transform="translate(8.393 2.098)"
-      >
-        <g id="Gruppe_1472" data-name="Gruppe 1472">
+      <g id="Gruppe_1473" transform="translate(8.393 2.098)">
+        <g id="Gruppe_1472">
           <path
             id="Pfad_544"
-            data-name="Pfad 544"
             d="M17.574,6.1a.476.476,0,0,1-.367-.157L16.157,4.892a.519.519,0,0,1,.734-.734l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,17.574,6.1Z"
             transform="translate(-16 -4)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1475"
-        data-name="Gruppe 1475"
-        transform="translate(7.344 7.344)"
-      >
-        <g id="Gruppe_1474" data-name="Gruppe 1474">
+      <g id="Gruppe_1475" transform="translate(7.344 7.344)">
+        <g id="Gruppe_1474">
           <path
             id="Pfad_545"
-            data-name="Pfad 545"
             d="M14.525,16.1A.5.5,0,0,1,14,15.574V14.525a.525.525,0,1,1,1.049,0v1.049A.5.5,0,0,1,14.525,16.1Z"
             transform="translate(-14 -14)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g id="Gruppe_1477" data-name="Gruppe 1477" transform="translate(7.344)">
-        <g id="Gruppe_1476" data-name="Gruppe 1476">
+      <g id="Gruppe_1477" transform="translate(7.344)">
+        <g id="Gruppe_1476">
           <path
             id="Pfad_546"
-            data-name="Pfad 546"
             d="M14.525,2.1A.5.5,0,0,1,14,1.574V.525a.525.525,0,0,1,1.049,0V1.574A.5.5,0,0,1,14.525,2.1Z"
             transform="translate(-14)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1479"
-        data-name="Gruppe 1479"
-        transform="translate(3.147 4.196)"
-      >
-        <g id="Gruppe_1478" data-name="Gruppe 1478">
+      <g id="Gruppe_1479" transform="translate(3.147 4.196)">
+        <g id="Gruppe_1478">
           <path
             id="Pfad_547"
-            data-name="Pfad 547"
             d="M7.574,9.049H6.525A.525.525,0,0,1,6.525,8H7.574a.525.525,0,0,1,0,1.049Z"
             transform="translate(-6 -8)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1481"
-        data-name="Gruppe 1481"
-        transform="translate(10.491 4.196)"
-      >
-        <g id="Gruppe_1480" data-name="Gruppe 1480">
+      <g id="Gruppe_1481" transform="translate(10.491 4.196)">
+        <g id="Gruppe_1480">
           <path
             id="Pfad_548"
-            data-name="Pfad 548"
             d="M21.574,9.049H20.525a.525.525,0,0,1,0-1.049h1.049a.525.525,0,1,1,0,1.049Z"
             transform="translate(-20 -8)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1483"
-        data-name="Gruppe 1483"
-        transform="translate(3.986 0.839)"
-      >
-        <g id="Gruppe_1482" data-name="Gruppe 1482">
+      <g id="Gruppe_1483" transform="translate(3.986 0.839)">
+        <g id="Gruppe_1482">
           <path
             id="Pfad_549"
-            data-name="Pfad 549"
             d="M9.279,3.8a.476.476,0,0,1-.367-.157L7.757,2.492a.519.519,0,0,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.326.326,0,0,1,9.279,3.8Z"
             transform="translate(-7.6 -1.6)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1485"
-        data-name="Gruppe 1485"
-        transform="translate(9.599 6.452)"
-      >
-        <g id="Gruppe_1484" data-name="Gruppe 1484">
+      <g id="Gruppe_1485" transform="translate(9.599 6.452)">
+        <g id="Gruppe_1484">
           <path
             id="Pfad_550"
-            data-name="Pfad 550"
             d="M19.926,14.451a.476.476,0,0,1-.367-.157l-1.1-1.1a.519.519,0,1,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.567.567,0,0,1,19.926,14.451Z"
             transform="translate(-18.3 -12.3)"
             fill="currentColor"

package/src/components/lists/VcsList.vue

@@ -324,17 +324,23 @@
        */
       let draggedItem = null;
 
+      const isDraggable = computed(() => {
+        return query.value === '' && props.draggable;
+      });
+
       /**
        * @param {MouseEvent} e
        * @param {number} targetIndex
        */
       function drop(e, targetIndex) {
-        if (draggedItem !== null && targetIndex !== undefined) {
-          emit('item-moved', { item: draggedItem, targetIndex });
+        if (isDraggable.value) {
+          if (draggedItem !== null && targetIndex !== undefined) {
+            emit('item-moved', { item: draggedItem, targetIndex });
+          }
+          draggedItem = null;
+          dragging.value = undefined;
+          document.removeEventListener('mouseup', drop);
         }
-        draggedItem = null;
-        dragging.value = undefined;
-        document.removeEventListener('mouseup', drop);
       }
 
       /**
@@ -343,19 +349,19 @@
        * @param {number} index
        */
       function drag(e, item, index) {
-        dragging.value = index;
-        draggedItem = item;
-        e.dataTransfer.effectAllowed = 'move';
-        document.addEventListener('mouseup', drop);
+        if (isDraggable.value) {
+          dragging.value = index;
+          draggedItem = item;
+          e.dataTransfer.effectAllowed = 'move';
+          document.addEventListener('mouseup', drop);
+        }
       }
 
       return {
         query,
         hovering,
         dragging,
-        isDraggable: computed(() => {
-          return query.value === '' && props.draggable;
-        }),
+        isDraggable,
         borderBottom,
         borderTop,
         lightenEven,

package/src/components/plugins/AbstractConfigEditor.vue

@@ -8,10 +8,10 @@
         </div>
         <div class="d-flex gap-2 w-full justify-end">
           <VcsFormButton type="submit" variant="filled" :disabled="!isValid">
-            {{ $t('appConfigurator.apply') }}
+            {{ $t('components.apply') }}
           </VcsFormButton>
           <VcsFormButton @click.stop="cancel">
-            {{ $t('appConfigurator.cancel') }}
+            {{ $t('components.cancel') }}
           </VcsFormButton>
           <VcsActionButtonList :actions="actions" button="VcsFormButton" />
         </div>

package/src/components/tables/VcsDataTable.vue

@@ -52,7 +52,7 @@
       <template v-slot:header.data-table-select="{ props, on }">
         <div v-if="on">
           <v-icon
-            v-if="value.length === totalNumber"
+            v-if="props.value"
             @click="on.input(false)"
             class="vcs-select-icon"
           >

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -1,6 +1,8 @@
 <template>
   <VcsFormSection
-    heading="components.vectorProperties.header"
+    :heading="$attrs.heading || 'components.vectorProperties.header'"
+    :expandable="$attrs.expandable"
+    :start-open="$attrs.startOpen"
     :header-actions="[
       {
         name: 'reset',
@@ -81,6 +83,7 @@
             type="number"
             unit="m"
             :placeholder="'groundLevel' in value ? '0 m' : ''"
+            clearable
           />
         </v-col>
       </v-row>
@@ -110,7 +113,12 @@
                       : `${scaleByDistanceDefault[index]}`
                     : ''
                 "
-                :rules="[(v) => !isNaN(v) || 'components.validation.required']"
+                :rules="[
+                  (v) =>
+                    !hasScaleByDistance ||
+                    !isNaN(v) ||
+                    'components.validation.required',
+                ]"
               />
             </v-col>
           </v-row>
@@ -134,7 +142,10 @@
             type="number"
             :disabled="!hasEyeOffset"
             :prefix="dimensionsUpperCase[index]"
-            :rules="[(v) => !isNaN(v) || 'components.validation.required']"
+            :rules="[
+              (v) =>
+                !hasEyeOffset || !isNaN(v) || 'components.validation.required',
+            ]"
             :placeholder="
               'eyeOffset' in value ? `${eyeOffsetDefault[index]} m` : ''
             "
@@ -178,6 +189,8 @@
     </v-container>
     <v-divider
       v-if="
+        !hideDividers &&
+        show3DProperties &&
         [
           'extrudedHeight',
           'skirt',
@@ -185,13 +198,12 @@
           'storeysBelowGround',
           'storeyHeightsAboveGround',
           'storeyHeightsBelowGround',
-        ].some((prop) => visibleProperties.has(prop)) && show3DProperties
+        ].some((prop) => visibleProperties.has(prop))
       "
     />
     <v-container class="px-1 py-0" v-if="show3DProperties">
       <v-row
         v-if="
-          visibleProperties.has('extrudedHeight') ||
           visibleProperties.has('storeysAboveGround') ||
           visibleProperties.has('storeyHeightsAboveGround')
         "
@@ -205,9 +217,15 @@
       </v-row>
       <v-row v-if="visibleProperties.has('extrudedHeight')" no-gutters>
         <v-col>
-          <VcsLabel html-for="vp-extruded-height" class="px-4">{{
-            $t('components.vectorProperties.extrudedHeight')
-          }}</VcsLabel>
+          <VcsLabel
+            html-for="vp-extruded-height"
+            :class="{
+              'px-4':
+                visibleProperties.has('storeysAboveGround') ||
+                visibleProperties.has('storeyHeightsAboveGround'),
+            }"
+            >{{ $t('components.vectorProperties.extrudedHeight') }}</VcsLabel
+          >
         </v-col>
         <v-col>
           <VcsTextField
@@ -217,6 +235,7 @@
             type="number"
             unit="m"
             :placeholder="'extrudedHeight' in value ? '0 m' : ''"
+            clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
             ]"
@@ -236,6 +255,7 @@
             v-model.number="storeysAboveGround"
             type="number"
             :placeholder="'storeysAboveGround' in value ? '0' : ''"
+            clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
             ]"
@@ -259,12 +279,12 @@
             type="number"
             v-model="storeyHeights.storeyHeightsAboveGround.value"
             placeholder="3"
+            :rules="[(v) => !(v <= 0) || 'components.validation.notValid']"
           />
         </v-col>
       </v-row>
       <v-row
         v-if="
-          visibleProperties.has('skirt') ||
           visibleProperties.has('storeysBelowGround') ||
           visibleProperties.has('storeyHeightsBelowGround')
         "
@@ -278,9 +298,15 @@
       </v-row>
       <v-row v-if="visibleProperties.has('skirt')" no-gutters>
         <v-col>
-          <VcsLabel html-for="vp-skirt" class="px-4">{{
-            $t('components.vectorProperties.skirt')
-          }}</VcsLabel>
+          <VcsLabel
+            html-for="vp-skirt"
+            :class="{
+              'px-4':
+                visibleProperties.has('storeysBelowGround') ||
+                visibleProperties.has('storeyHeightsBelowGround'),
+            }"
+            >{{ $t('components.vectorProperties.skirt') }}</VcsLabel
+          >
         </v-col>
         <v-col>
           <VcsTextField
@@ -290,6 +316,7 @@
             type="number"
             unit="m"
             :placeholder="'skirt' in value ? '0 m' : ''"
+            clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
             ]"
@@ -309,6 +336,7 @@
             v-model.number="storeysBelowGround"
             type="number"
             :placeholder="'storeysBelowGround' in value ? '0' : ''"
+            clearable
             :rules="[
               (v) => v >= 0 || isNaN(v) || 'components.validation.notValid',
             ]"
@@ -338,6 +366,8 @@
     </v-container>
     <v-divider
       v-if="
+        !hideDividers &&
+        show3DProperties &&
         [
           'modelUrl',
           'modelScaleX',
@@ -347,7 +377,7 @@
           'modelPitch',
           'modelRoll',
           'baseUrl',
-        ].some((prop) => visibleProperties.has(prop)) && show3DProperties
+        ].some((prop) => visibleProperties.has(prop))
       "
     />
     <v-container class="px-1 py-0" v-if="show3DProperties">
@@ -397,6 +427,7 @@
             type="number"
             :placeholder="'modelHeading' in value ? '0 °' : ''"
             unit="°"
+            clearable
           />
         </v-col>
       </v-row>
@@ -413,6 +444,7 @@
             type="number"
             :placeholder="'modelPitch' in value ? '0 °' : ''"
             unit="°"
+            clearable
           />
         </v-col>
       </v-row>
@@ -427,6 +459,7 @@
             type="number"
             :placeholder="'modelRoll' in value ? '0 °' : ''"
             unit="°"
+            clearable
           />
         </v-col>
       </v-row>
@@ -501,6 +534,10 @@
    * @vue-prop {import("@vcmap/core").VectorPropertiesOptions} valueDefault - The default VectorPropertiesOptions that are applied when clicking the "Reset" button.
    * @vue-prop {Array<string>} properties - The keys of the VectorPropertiesOptions that should be editable. If a key is not within this array, the corresponding input field is not shown.
    * @vue-prop {boolean} show3DProperties - Whether the 3D related properties should be shown or not.
+   * @vue-prop {boolean} hideDividers - Wether the dividers, which group similar properties, should be hidden.
+   * @vue-prop {string} [heading='Vector properties'] - Title of the form section, will be translated.
+   * @vue-prop {boolean} [expandable=false] - If true, form section can be toggled.
+   * @vue-prop {boolean} [startOpen=false] - If form section starts open.
    * @vue-event {import("@vcmap/core").VectorPropertiesOptions} input - Emits the updated VectorPropertiesOptions each time a property is changed.
    * @vue-event {import("@vcmap/core").VectorPropertiesOptions} propertyChange - Emits the updated VectorPropertiesOptions, containing only the keys that changed, each time a property is changed.
    */
@@ -535,6 +572,10 @@
         type: Boolean,
         default: true,
       },
+      hideDividers: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { emit }) {
       const visibleProperties = computed(() => {
@@ -641,8 +682,10 @@
                 get() {
                   if (Array.isArray(props.value?.[key])) {
                     return props.value?.[key];
-                  } else {
+                  } else if (props.value?.[key] > 0) {
                     return [props.value?.[key]];
+                  } else {
+                    return [];
                   }
                 },
                 set(value) {

package/src/contentTree/contentTreeCollection.js

@@ -17,6 +17,7 @@ import { ButtonLocation } from '../manager/navbarManager.js';
  * @type {symbol}
  */
 const subTreeOpenStateSymbol = Symbol('SubTreeOpenState');
+const subTreeItemWeight = Symbol('SubTreeItemWeight');
 
 /**
  * @typedef {Object} ParentTreeViewItem
@@ -39,9 +40,9 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._app = app;
 
-    const recreateTree = () => {
+    const recreateTree = (resetSubTreeButtons) => {
       if (!this._suspendListeners) {
-        this._setTreeView();
+        this._setTreeView(resetSubTreeButtons);
       }
     };
 
@@ -76,7 +77,7 @@ class ContentTreeCollection extends IndexedCollection {
           this._subTreeViewItems.value.delete(child.name);
         }
       }),
-      this.moved.addEventListener(recreateTree),
+      this.moved.addEventListener(() => recreateTree(true)),
     ];
     /**
      * This is the default content tree.
@@ -128,9 +129,9 @@ class ContentTreeCollection extends IndexedCollection {
     const { action, destroy } = createToggleAction(
       // TODO icon & title are not reactive
       {
-        name: subTreeViewItem.name,
+        name: subTreeViewItem.title ?? subTreeViewItem.name,
         icon: subTreeViewItem.icon,
-        title: subTreeViewItem.title,
+        title: subTreeViewItem.tooltip,
       },
       {
         component: LayerTree,
@@ -149,7 +150,7 @@ class ContentTreeCollection extends IndexedCollection {
     );
 
     this._app.navbarManager.add(
-      { id, action, weight: 100 },
+      { id, action, weight: subTreeViewItem[subTreeItemWeight] },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
@@ -162,11 +163,13 @@ class ContentTreeCollection extends IndexedCollection {
   }
 
   /**
+   * @param {boolean} [resetSubtreeButtons=false]
    * @private
    */
-  _setTreeView() {
+  _setTreeView(resetSubtreeButtons = false) {
     /** @type {Map<string, ParentTreeViewItem>} */
     const baseTreeMap = new Map();
+    let maxWeight = 0;
     [...this._array]
       .sort((a, b) => {
         const depthA = a.name.split('.').length;
@@ -183,6 +186,10 @@ class ContentTreeCollection extends IndexedCollection {
         const treeViewItem = item.getTreeViewItem();
         const namespace = treeViewItem.name.split('.');
         const name = namespace.pop();
+        maxWeight = item.weight > maxWeight ? item.weight : maxWeight;
+        if (namespace.length === 0) {
+          treeViewItem[subTreeItemWeight] = item.weight;
+        }
         /** @type {ParentTreeViewItem} */
         let parentItem = { children: baseTreeMap };
         namespace.forEach((parentName) => {
@@ -208,6 +215,7 @@ class ContentTreeCollection extends IndexedCollection {
     const topLevelItems = [...baseTreeMap.values()].map(setChildren);
     const defaultSubTreeViewItem = this._defaultSubtreeItem.getTreeViewItem();
     defaultSubTreeViewItem.children.splice(0);
+    defaultSubTreeViewItem[subTreeItemWeight] = maxWeight + 1;
     defaultSubTreeViewItem.children.push(
       ...topLevelItems.filter((i) => !i[subTreeSymbol]),
     );
@@ -217,11 +225,17 @@ class ContentTreeCollection extends IndexedCollection {
     ];
 
     subTrees.forEach((subTree) => {
-      if (!this._app.navbarManager.has(subTree.name)) {
+      if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
+        this._subTreeListeners.get(subTree.name)?.();
         this._subTreeListeners.set(
           subTree.name,
           this._createSubtreeActionButton(subTree),
         );
+      } else {
+        const buttonComponent = this._app.navbarManager.get(subTree.name);
+        if (buttonComponent.weight !== subTree[subTreeItemWeight]) {
+          buttonComponent.weight = subTree[subTreeItemWeight];
+        }
       }
     });
   }
@@ -243,7 +257,14 @@ class ContentTreeCollection extends IndexedCollection {
    * @readonly
    */
   get subTreeIds() {
-    return [...this._subTreeViewItems.value.keys()];
+    const [defaultItem, ...rest] = [...this._subTreeViewItems.value.entries()];
+    rest.sort(([, a], [, b]) => {
+      if (a[subTreeItemWeight] === b[subTreeItemWeight]) {
+        return 0;
+      }
+      return a[subTreeItemWeight] > b[subTreeItemWeight] ? -1 : 1;
+    });
+    return [defaultItem, ...rest].map(([id]) => id);
   }
 
   /**

package/src/i18n/de.js

@@ -52,6 +52,8 @@ const messages = {
   components: {
     pin: 'Fenster andocken',
     close: 'Fenster schließen',
+    apply: 'Anwenden',
+    cancel: 'Abbrechen',
     vcsFormSection: {
       help: 'Hilfe anzeigen',
     },
@@ -128,6 +130,11 @@ const messages = {
       skirt: 'Skirts',
       modelScale: 'Modell Skalierung',
     },
+    validation: {
+      allowedRange: 'Erlaubter Wertebereich',
+      notValid: 'Eingabe nicht gültig',
+      required: 'Eingabe ist erforderlich',
+    },
   },
   settings: {
     title: 'Einstellungen',
@@ -143,11 +150,6 @@ const messages = {
     title: 'Hilfe',
     tooltip: 'Externe Hilfeseite in neuem Browser Tab öffnen',
   },
-  validation: {
-    allowedRange: 'Erlaubter Wertebereich',
-    notValid: 'Eingabe nicht gültig',
-    required: 'Eingabe ist erforderlich',
-  },
   featureInfo: {
     activateToolTitle: 'Informationswerkzeug aktivieren',
     deactivateToolTitle: 'Informationswerkzeug deaktivieren',
@@ -176,6 +178,7 @@ const messages = {
     attributions: {
       title: 'Attributionen',
       tooltip: 'Öffne Attributionsfenster',
+      empty: 'Aktuell sind keine Attributionseinträge verfügbar.',
     },
   },
   notification: {