@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/icons/SkipNextIcon.vue

@@ -2,6 +2,8 @@
 
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
-    <path id="Path_92" data-name="Path 92" d="M7,15.377a1,1,0,0,0,1.669.744l3.753-3.378a1,1,0,0,0,.075-1.412q-.036-.039-.075-.075L8.67,7.878A1,1,0,0,0,7,8.622ZM14,8v8a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H15A1,1,0,0,0,14,8Z" transform="translate(-7 -7)" fill="currentColor" />
+    <g id="streamline-icon-button-previous_24x24" transform="translate(-7 -7)">
+      <path id="Pfad_92" d="M7,15.377a1,1,0,0,0,1.669.744l3.753-3.378a1,1,0,0,0,.075-1.412q-.036-.039-.075-.075L8.67,7.878A1,1,0,0,0,7,8.622ZM14,8v8a1,1,0,0,0,1,1h1a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H15A1,1,0,0,0,14,8Z" fill="currentColor" />
+    </g>
   </svg>
 </template>

package/src/icons/TerrainBoxIcon.vue

@@ -0,0 +1,9 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="Gruppe_1899" transform="translate(-2000 -128)">
+      <path id="Pfad_721" d="M1144.555,583.9a.894.894,0,0,0,.031-.173.836.836,0,0,0,.008-.139,1,1,0,0,0-.032-.151.714.714,0,0,0-.055-.152.505.505,0,0,0-.018-.052.887.887,0,0,0-.065-.07.723.723,0,0,0-.112-.123.788.788,0,0,0-.134-.088.89.89,0,0,0-.083-.055l-11.2-4.48a.807.807,0,0,0-.6,0l-11.2,4.48a.6.6,0,0,0-.084.057.745.745,0,0,0-.131.084.769.769,0,0,0-.115.126.63.63,0,0,0-.063.068.478.478,0,0,0-.018.052.727.727,0,0,0-.055.152,1,1,0,0,0-.032.151.81.81,0,0,0,.008.139.9.9,0,0,0,.031.173c.007.016,0,.034.01.05s.034.047.049.075a.768.768,0,0,0,.1.146.793.793,0,0,0,.117.105.951.951,0,0,0,.075.068l6.148,3.688h0l5.051,3.03.013,0a.785.785,0,0,0,.807,0l.013,0,4.9-2.941,0,0,6.294-3.776.018-.016c.016-.011.028-.027.042-.039a.774.774,0,0,0,.242-.3c.008-.016.028-.024.034-.041S1144.549,583.919,1144.555,583.9Zm-21.343-.105,8.572-3.43v4.171l-4.189,1.89Zm14.245,2.711-4.053-1.956v-4.186l8.572,3.43Z" transform="translate(879.405 -444.361)" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/icons/ToolsIcon.vue

@@ -1,35 +1,9 @@
 <!-- eslint-disable max-len -->
 <template>
-  <svg>
-    <rect id="size" width="24" height="24" fill="none" />
-    <g id="Group_719" data-name="Group 719" transform="translate(-0.001)">
-      <rect
-        id="Rectangle_667"
-        data-name="Rectangle 667"
-        width="5"
-        height="1"
-        transform="translate(5.001 19)"
-        fill="currentColor"
-      />
-      <rect
-        id="Rectangle_668"
-        data-name="Rectangle 668"
-        width="2"
-        height="10"
-        transform="translate(8 8)"
-        fill="currentColor"
-      />
-      <path id="Path_366" data-name="Path 366" d="M7.957,3.3a.5.5,0,0,0-.913,0L5.176,7H9.825Z" fill="currentColor" />
-      <path id="Path_367" data-name="Path 367" d="M5,21.5a2.5,2.5,0,1,0,5,0V21H5v.5Z" fill="currentColor" />
-      <rect
-        id="Rectangle_669"
-        data-name="Rectangle 669"
-        width="2"
-        height="10"
-        transform="translate(5.001 8)"
-        fill="currentColor"
-      />
-      <path id="Path_368" data-name="Path 368" d="M18.5,0h-6a.5.5,0,0,0-.5.5V3h2.5a.5.5,0,0,1,0,1H12V7h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3h2.5a.5.5,0,0,1,0,1H12v3.5a.5.5,0,0,0,.5.5h6a.5.5,0,0,0,.5-.5V.5A.5.5,0,0,0,18.5,0Z" fill="currentColor" />
+  <svg id="icon_24_tools" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="Gruppe_1966" transform="translate(-500.726 -577.125)">
+      <path id="Pfad_763" d="M519,578h-6a1,1,0,0,0-1,1v20a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V579A1,1,0,0,0,519,578Zm-1,20h-4v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h4Z" transform="translate(0.726 0.125)" fill="currentColor" />
+      <path id="Pfad_764" d="M507.363,580.719a1,1,0,0,0-1.827,0l-2,4.5a1,1,0,0,0-.086.406v11.5a3,3,0,0,0,6,0v-11.5a1,1,0,0,0-.087-.406Zm-1.913,6.9h2v7.511h-2Zm1-4.027.9,2.027h-1.8Zm0,14.538a1,1,0,0,1-1-1h2A1,1,0,0,1,506.45,598.125Z" transform="translate(0.275)" fill="currentColor" />
     </g>
   </svg>
 </template>

package/src/icons/UploadIcon.vue

@@ -1,14 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    id="streamline-icon-cloud-upload_24x24_1_"
-    data-name="streamline-icon-cloud-upload@24x24 (1)"
-    xmlns="http://www.w3.org/2000/svg"
-    width="25.717"
-    height="24"
-    viewBox="0 0 25.717 24"
-  >
-    <path id="Path_121" data-name="Path 121" d="M25.713,11.1a6.236,6.236,0,0,0-1.9-4.464,6.117,6.117,0,0,0-3.693-1.7.267.267,0,0,1-.2-.129A8.232,8.232,0,0,0,4.811,7.266a.268.268,0,0,1-.243.214A4.918,4.918,0,0,0,0,12.381,4.632,4.632,0,0,0,1.324,15.82,5.912,5.912,0,0,0,5.187,17.3a1.071,1.071,0,1,0-.032-2.143A3.525,3.525,0,0,1,2.828,14.3a2.544,2.544,0,0,1-.685-1.919A2.775,2.775,0,0,1,5.487,9.664,1.071,1.071,0,0,0,6.752,8.83a1.043,1.043,0,0,0,.02-.151A6.092,6.092,0,0,1,18.365,6.442a1.031,1.031,0,0,0,1.008.611,3.965,3.965,0,0,1,2.955,1.126A4.02,4.02,0,0,1,23.571,11.1a4.109,4.109,0,0,1-3.683,4.057,1.071,1.071,0,0,0,.141,2.134,1.018,1.018,0,0,0,.14-.01A6.221,6.221,0,0,0,25.713,11.1Zm-12.1-1.526a1.072,1.072,0,0,0-1.515,0l-3.75,3.75a1.071,1.071,0,0,0,.757,1.833h1.875a.266.266,0,0,1,.268.266v7.77a1.607,1.607,0,1,0,3.214,0V15.424a.266.266,0,0,1,.266-.268h1.877a1.071,1.071,0,0,0,.757-1.829Z" transform="translate(0.004 -0.799)" fill="currentColor" />
+  <svg id="icon_24_export" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path id="Pfad_592" d="M24,10.411a5.82,5.82,0,0,0-1.772-4.166A5.708,5.708,0,0,0,18.778,4.66a.249.249,0,0,1-.191-.12,7.683,7.683,0,0,0-14.1,2.294.25.25,0,0,1-.227.2A4.589,4.589,0,0,0,0,11.607a4.322,4.322,0,0,0,1.236,3.209A5.517,5.517,0,0,0,4.84,16.2a1,1,0,1,0-.03-2,3.29,3.29,0,0,1-2.172-.8A2.374,2.374,0,0,1,2,11.607,2.589,2.589,0,0,1,5.12,9.072,1,1,0,0,0,6.3,8.294a.974.974,0,0,0,.019-.141A5.685,5.685,0,0,1,17.138,6.065a.962.962,0,0,0,.941.57,3.7,3.7,0,0,1,2.758,1.051A3.751,3.751,0,0,1,22,10.411,3.834,3.834,0,0,1,18.559,14.2a1,1,0,0,0,.132,1.992.95.95,0,0,0,.131-.009A5.805,5.805,0,0,0,24,10.411ZM12.7,8.988a1,1,0,0,0-1.414,0l-3.5,3.5A1,1,0,0,0,8.5,14.2h1.75a.248.248,0,0,1,.25.248V21.7a1.5,1.5,0,0,0,3,0V14.448a.248.248,0,0,1,.248-.25H15.5a1,1,0,0,0,.707-1.707Z" transform="translate(0.004 0.193)" fill="currentColor" />
   </svg>
 </template>

package/src/icons/UserProfileIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon-profile" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path id="Vereinigungsmenge_60" d="M10931.333,16339.334a.333.333,0,0,1-.332-.332v-1.259a2.342,2.342,0,0,1,1.546-2.2l3.12-1.111v-1.472a4.628,4.628,0,0,1-1.648-4.048,3.038,3.038,0,0,0,1.566.418,3.663,3.663,0,0,0,2.489-1.033,2.285,2.285,0,0,0,1.952,1.091,4.388,4.388,0,0,0,1.3-.229,4.637,4.637,0,0,1-1.661,3.8v1.472l3.121,1.111a2.337,2.337,0,0,1,1.546,2.2V16339a.334.334,0,0,1-.332.332Zm7.049-11.785a.315.315,0,0,0-.3-.168.323.323,0,0,0-.286.18,2.756,2.756,0,0,1-2.215,1.107,2.6,2.6,0,0,1-1.456-.455,3.839,3.839,0,0,1,3.539-3.215,3.9,3.9,0,0,1,3.6,3.489c-.382.095-.722.181-.742.185a2.582,2.582,0,0,1-.492.052C10939.337,16328.724,10938.849,16328.364,10938.382,16327.549Z" transform="translate(-10929.668 -16324)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/UserShareIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon-collaborator-share" xmlns="http://www.w3.org/2000/svg" width="16" height="16.007" viewBox="0 0 16 16.007">
+    <path id="Pfad_81" d="M9.167,9.333A2.761,2.761,0,0,1,10,9.463a.167.167,0,0,0,.133-.017l.709-.425a.167.167,0,0,0,.067-.206c-.025-.061-.051-.12-.08-.179-.359-.717-1.538-1.15-3.169-1.751l-.419-.153a.4.4,0,0,1-.092-.207,1.721,1.721,0,0,1,.039-.867,3.744,3.744,0,0,0,.977-2.876A2.559,2.559,0,0,0,5.667,0a2.567,2.567,0,0,0-2.5,2.783,3.737,3.737,0,0,0,.971,2.865,1.636,1.636,0,0,1,.049.877.405.405,0,0,1-.09.206l-.421.155C2.04,7.485.861,7.919.5,8.636A6.125,6.125,0,0,0,0,11a.333.333,0,0,0,.333.333H6.353a.168.168,0,0,0,.157-.111A2.825,2.825,0,0,1,9.167,9.333ZM16,14.167a1.827,1.827,0,0,0-3.091-1.326.168.168,0,0,1-.177.034l-1.63-.652a.167.167,0,0,1-.1-.145.931.931,0,0,0-.011-.108.164.164,0,0,1,.079-.165l1.893-1.139a.166.166,0,0,1,.18.006A1.813,1.813,0,0,0,14.167,11a1.833,1.833,0,1,0-1.833-1.833h0a1.616,1.616,0,0,0,.014.2.164.164,0,0,1-.079.165l-1.893,1.141a.166.166,0,0,1-.18-.006,1.809,1.809,0,0,0-1.029-.327,1.833,1.833,0,1,0,1.258,3.159.168.168,0,0,1,.177-.034l1.63.652a.167.167,0,0,1,.1.149A1.833,1.833,0,0,0,16,14.167Z" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/VideoRecorderIcon.vue

@@ -1,14 +1,10 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg
-    id="streamline-icon-camera-studio_24x24"
-    data-name="streamline-icon-camera-studio@24x24"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="20.999"
-    viewBox="0 0 24 20.999"
-  >
-    <path id="Path_15" data-name="Path 15" d="M23.5,12.989a1.175,1.175,0,0,0-1.121-.066L19.653,14.06a.251.251,0,0,0-.154.231v5.416a.251.251,0,0,0,.154.231l2.73,1.137a1.154,1.154,0,0,0,1.122-.066A1.178,1.178,0,0,0,24,20V14A1.178,1.178,0,0,0,23.5,12.989ZM2.5,11.5h14A1.5,1.5,0,0,1,18,13v8a1.5,1.5,0,0,1-1.5,1.5H2.5A1.5,1.5,0,0,1,1,21V13A1.5,1.5,0,0,1,2.5,11.5Zm2-10A4.5,4.5,0,1,1,0,6,4.5,4.5,0,0,1,4.5,1.5Zm9,3a3,3,0,1,1-3,3A3,3,0,0,1,13.5,4.5Z" transform="translate(0 -1.5)" fill="currentColor" />
+  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+    <g id="Gruppe_2012" transform="translate(-1592 -578)">
+      <path id="Pfad_791" d="M1614,591.174a2.154,2.154,0,0,0-.834-1.8l-.05-.035a1.975,1.975,0,0,0-1.962-.145l-2.17.973a2.409,2.409,0,0,0-.6-1.441,2.188,2.188,0,0,0-1.611-.727h-11.532a2.305,2.305,0,0,0-2.235,2.363v7.274a2.305,2.305,0,0,0,2.235,2.363h11.53a2.285,2.285,0,0,0,2.216-2.165l2.12.947a1.921,1.921,0,0,0,.892.218,2.075,2.075,0,0,0,1.171-.372,2.135,2.135,0,0,0,.835-1.761Zm-7,6.463c0,.208-.124.363-.235.363h-11.53c-.111,0-.235-.155-.235-.363v-7.274c0-.208.124-.363.235-.363h11.531a.187.187,0,0,1,.13.07.44.44,0,0,1,.1.293Zm4.97-.656L1610,596.1v-4.2l1.982-.894a.32.32,0,0,1,.017.127v5.769C1612,596.965,1611.974,597.019,1611.97,596.981Z" fill="currentColor" />
+      <path id="Pfad_792" d="M1601.215,585.665A3.494,3.494,0,1,0,1604.5,581h0a3.482,3.482,0,0,0-2.583,1.161,5,5,0,1,0-.7,3.5ZM1604.5,583a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,1604.5,583Zm-7.5,3a3,3,0,1,1,3-3A3,3,0,0,1,1597,586Z" fill="currentColor" />
+    </g>
   </svg>
 </template>

package/src/icons/ViewpointFlightIcon.vue

@@ -0,0 +1,11 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_viewpoint-flight" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="Gruppe_2014" transform="translate(-698 -606)">
+      <path id="Pfad_802" d="M720.4,609.465a2.061,2.061,0,0,0-1.467-.611h-1l-.374-.373a1.635,1.635,0,0,0-1.163-.481h-1.788a1.636,1.636,0,0,0-1.164.482l-.371.372h-1A2.075,2.075,0,0,0,710,610.929v3.425a2.074,2.074,0,0,0,2.071,2.073h1.3l5.561,0A2.075,2.075,0,0,0,721,614.354v-3.422A2.056,2.056,0,0,0,720.4,609.465Zm-1.4,4.888a.072.072,0,0,1-.072.072l-6.857,0a.072.072,0,0,1-.071-.073v-3.427a.072.072,0,0,1,.071-.073h1.3a1.157,1.157,0,0,0,.877-.353l.5-.5h1.495l.5.5a1.209,1.209,0,0,0,.854.351h1.323a.081.081,0,0,1,.071.074Z" fill="currentColor" />
+      <path id="Pfad_803" d="M715.5,611.071a1.465,1.465,0,1,0,1.464,1.464A1.465,1.465,0,0,0,715.5,611.071Z" fill="currentColor" />
+      <path id="Pfad_804" d="M720,618h-6a1,1,0,0,0,0,2h2v2h-3.382a3.927,3.927,0,0,0-5.236,0H704v-2h2a1,1,0,0,0,0-2h-6a1,1,0,0,0,0,2h2v2a1,1,0,0,0,0,2h4.142a3.937,3.937,0,0,0-.142,1v2a1,1,0,0,0,2,0v-2a1.978,1.978,0,0,1,.278-1h3.444a1.978,1.978,0,0,1,.278,1v2a1,1,0,0,0,2,0v-2a3.937,3.937,0,0,0-.142-1H718a1,1,0,0,0,0-2v-2h2a1,1,0,0,0,0-2Z" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/icons/ViewpointIcon.vue

@@ -0,0 +1,11 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_viewpoint-static" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="Gruppe_2013" transform="translate(-664 -604.83)">
+      <path id="Pfad_798" d="M676,610.232a3.884,3.884,0,1,0,3.884,3.884A3.889,3.889,0,0,0,676,610.232ZM676,616a1.884,1.884,0,1,1,1.884-1.884A1.886,1.886,0,0,1,676,616Z" fill="currentColor" />
+      <path id="Pfad_799" d="M684.153,609.205a2.883,2.883,0,0,0-2.058-.854H680l-.893-.892a2.163,2.163,0,0,0-1.517-.629h-3.18a2.16,2.16,0,0,0-1.517.63l-.89.891h-2.1A2.908,2.908,0,0,0,667,611.259v6.092a2.908,2.908,0,0,0,2.905,2.9h2.3l9.887,0a2.911,2.911,0,0,0,2.906-2.9v-6.09A2.886,2.886,0,0,0,684.153,609.205ZM683,617.349a.906.906,0,0,1-.906.9l-12.189,0a.905.905,0,0,1-.905-.9v-6.1a.905.905,0,0,1,.905-.9h2.341a1.556,1.556,0,0,0,.986-.4l1.075-1.076a.148.148,0,0,1,.1-.043h3.18a.145.145,0,0,1,.1.044l1.078,1.075a1.371,1.371,0,0,0,.973.4H682.1a.9.9,0,0,1,.639.265.9.9,0,0,1,.264.643Z" fill="currentColor" />
+      <path id="Pfad_800" d="M678.1,621h-3.843a1.466,1.466,0,0,0-1.2,2.311l3.119,4.424,3.12-4.424A1.467,1.467,0,0,0,678.1,621Zm-1.922,3.265L675.289,623h1.783Z" fill="currentColor" />
+    </g>
+  </svg>
+</template>

package/src/icons/Viewshed360Icon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_viewshed_360" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path id="Vereinigungsmenge_64" d="M11218.5,13309.529c0-.3.01-.878,3-.981,0-.007,0-.014,0-.021v-6a1,1,0,0,1,2,0v6c0,.007,0,.014,0,.021,2.992.1,3,.685,3,.981,0,.324,0,1-4,1S11218.5,13309.854,11218.5,13309.529Zm-2.89-12.895a.733.733,0,0,1,0-.781,8.084,8.084,0,0,1,13.776,0,.738.738,0,0,1,0,.784,8.084,8.084,0,0,1-13.776,0Zm2.735-1.6a8.278,8.278,0,0,0-1.188,1.212,8.185,8.185,0,0,0,1.188,1.21,7.3,7.3,0,0,0,1.3.854,3.508,3.508,0,0,1,0-4.129A7.288,7.288,0,0,0,11218.348,13295.032Zm7.677,1.212a3.5,3.5,0,0,1-.668,2.062,7.226,7.226,0,0,0,1.289-.852,8.051,8.051,0,0,0,1.192-1.21,7.821,7.821,0,0,0-1.192-1.209,7.359,7.359,0,0,0-1.289-.855A3.5,3.5,0,0,1,11226.024,13296.244Zm-5.562,0a2.039,2.039,0,1,0,2.037-2.041A2.039,2.039,0,0,0,11220.463,13296.244Zm.929,0a1.12,1.12,0,0,1,1.349-1.085.6.6,0,0,0-.083.3.6.6,0,0,0,.922.518,1.115,1.115,0,0,1-1.079,1.373A1.108,1.108,0,0,1,11221.392,13296.244Z" transform="translate(-11210.5 -13288.027)" fill="currentColor" stroke="none" />
+  </svg>
+</template>

package/src/icons/ViewshedConeIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_viewshed_cone" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path id="Pfad_797" d="M1099,464v-1a1,1,0,0,1,2,0v1a1,1,0,0,1-2,0Zm5.95,3.05a.993.993,0,0,0,.707-.293l.707-.707a1,1,0,1,0-1.414-1.414l-.707.707a1,1,0,0,0,.707,1.707Zm-9.193,8.193a1,1,0,0,0-1.414,0l-.707.707a1,1,0,1,0,1.414,1.414l.707-.707A1,1,0,0,0,1095.757,475.243ZM1108,470h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-14,1a1,1,0,0,0-1-1h-1a1,1,0,0,0,0,2h1A1,1,0,0,0,1094,471Zm11.657,4.243a1,1,0,0,0-1.414,1.414l.707.707a1,1,0,1,0,1.414-1.414Zm-11.314-8.486a1,1,0,1,0,1.414-1.414l-.707-.707a1,1,0,1,0-1.414,1.414ZM1096,471a4,4,0,1,1,4,4A4,4,0,0,1,1096,471Zm2,0a2,2,0,1,0,2-2A2,2,0,0,0,1098,471Zm3,10.018c0-.006,0-.012,0-.018v-4a1,1,0,0,0-2,0v4c0,.006,0,.012,0,.018-2.993.1-3,.687-3,.982,0,.325,0,1,4,1s4-.675,4-1C1104,481.7,1103.989,481.123,1101,481.018Zm8,1.982,1.732-3h-3.464Zm0-7-1.732,3h3.464Z" transform="translate(-1088 -460)" fill="currentColor" />
+  </svg>
+</template>

package/src/icons/ViewshedIcon.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_24_viewshed" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path id="Vereinigungsmenge_63" d="M11153,13347a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Zm1-2h1v-3h-1Zm-4.225-.145-7.018-4.244c-.1.135-.19.282-.3.409a6.143,6.143,0,0,1-1.179,1.008.513.513,0,0,1-.274.081.5.5,0,0,1-.419-.229.5.5,0,0,1,.147-.689,5.168,5.168,0,0,0,.981-.841c.073-.08.124-.174.19-.258l-1.42-.857a1,1,0,0,1-.482-.857v-2.82a1,1,0,0,1,.526-.878l1.4-.757a4.936,4.936,0,0,0-1.049-1.012.5.5,0,0,1,.576-.817,6.029,6.029,0,0,1,1.363,1.347l11.7-6.321a1,1,0,0,1,1.477.881v10a1,1,0,0,1-1,1h-3.705v5a1,1,0,0,1-1,1A1.022,1.022,0,0,1,11149.776,13344.856Zm-6.056-9.63a5.706,5.706,0,0,1-.03,3.611l5.6,3.39V13338a1,1,0,0,1,1-1H11154v-7.322Zm-1.722.932v1.657l.807.489a4.659,4.659,0,0,0,.021-2.593Zm-6,.84,2.636-1.43a3,3,0,0,1,.091,2.687Z" transform="translate(-11134 -13325)" fill="currentColor" stroke="none" />
+  </svg>
+</template>

package/src/icons/WallIcon.vue

@@ -1,14 +1,9 @@
 <!-- eslint-disable max-len -->
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.158" height="22" viewBox="0 0 20.158 22">
-    <defs>
-      <clipPath id="clip-path">
-        <rect id="Rectangle_843" data-name="Rectangle 843" width="20.158" height="22" fill="currentColor" />
-      </clipPath>
-    </defs>
-    <g id="Group_1440" data-name="Group 1440" clip-path="url(#clip-path)">
-      <path id="Path_530" data-name="Path 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="Path_531" data-name="Path 531" d="M17.158,8a3,3,0,1,0,3,3,3,3,0,0,0-3-3" fill="currentColor" />
+  <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)">
+      <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" />
     </g>
   </svg>
 </template>

package/src/legend/legendHelper.js

@@ -0,0 +1,193 @@
+import { getShapeFromOptions } from '@vcmap/core';
+import Vue, { reactive } from 'vue';
+
+/**
+ * @enum {string}
+ * @property {string} Image - an image
+ * @property {string} IFRAME - an iframe
+ * @property {string} Style - a parametric style element
+ */
+export const LegendType = {
+  Image: 'ImageLegendItem',
+  Iframe: 'IframeLegendItem',
+  Style: 'StyleLegendItem',
+};
+
+/**
+ * @enum {string}
+ */
+export const StyleRowType = {
+  Stroke: 'StrokeLegendRow',
+  Fill: 'FillLegendRow',
+  Circle: 'CircleLegendRow',
+  Icon: 'IconLegendRow',
+  Shape: 'RegularShapeLegendRow',
+  Text: 'TextLegendRow',
+};
+
+/**
+ * @typedef {Object} LegendItem
+ * @property {LegendType} type - determines rendering, specialised properties are type based.
+ */
+
+/**
+ * @typedef {LegendItem} ImageLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ * @property {string} [tooltip] - Optional further explanation of the legend
+ */
+
+/**
+ * @typedef {LegendItem} IframeLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ */
+
+
+/**
+ * @typedef {LegendItem} StyleLegendItem
+ * @property {number} [colNr=2] Number of columns. Valid values are 1 or 2. Per default 2.
+ * @property {Array<StyleLegendRow>} rows - style definitions with description
+ */
+
+/**
+ * @typedef {Object} StyleLegendRow
+ * @property {StyleRowType} type - determines rendering of the row, specialised properties are type based.
+ * @property {string} title - Description of the style. Can be an i18n string
+ * @property {string} [tooltip] - Optional further explanation of the legend row
+ */
+
+/**
+ * @typedef {StyleLegendRow} StrokeLegendRow
+ * @property {import("ol/style/Stroke").Options} stroke
+ */
+
+/**
+ * @typedef {StyleLegendRow} FillLegendRow
+ * @property {import("ol/style/Fill").Options} fill
+ * @property {import("ol/style/Stroke").Options} [stroke]
+ */
+
+/**
+ * @typedef {StyleLegendRow} CircleLegendRow
+ * @property {import("ol/style/Circle").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} IconLegendRow
+ * @property {import("ol/style/Icon").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} RegularShapeLegendRow
+ * @property {import("ol/style/RegularShape").Options} image
+ */
+
+/**
+ * @typedef {StyleLegendRow} TextLegendRow
+ * @property {import("ol/style/Text").Options} text
+ * @property {string} [label='Text']
+ */
+
+/**
+ * @type {import("ol/style/Image").Options} image
+ * @return {string}
+ */
+export function getImageSrcFromShape(image) {
+  if (image.src) {
+    return image.src;
+  }
+  const shape = getShapeFromOptions(image);
+  const imageRep = shape.getImage(1);
+  return imageRep.currentSrc || imageRep.toDataURL();
+}
+
+/**
+ * @typedef {Object} LegendEntry
+ * @property {string} title - layer or entry name
+ * @property {Array<LegendItem>} legend - legend properties
+ * @property {Array<VcsAction>} actions - popout actions
+ */
+
+/**
+ * creates a LegendEntry with title, options and optionally popout action to the entries array
+ * @param {string} title
+ * @param {Array<LegendItem>} legend
+ * @returns {LegendEntry}
+ */
+export function createLayerLegendEntry(title, legend) {
+  const actions = [];
+  legend.forEach((item) => {
+    // XXX only one popout button allowed. Rethink if use case for multiple popout buttons comes up.
+    if (item.src && item.popoutBtn && actions.length < 1) {
+      actions.push({
+        name: 'legendPopoutAction',
+        icon: 'mdi-open-in-new',
+        title: 'legend.openInNew',
+        callback: () => window.open(item.src, '_blank'),
+      });
+    }
+  });
+  return { title, legend, actions };
+}
+
+/**
+ *
+ * @param {VcsUiApp} app
+ * @returns {{entries: import("vue").Reactive<{string,LegendEntry}>, destroy: (function():void)}}
+ */
+export function getLegendEntries(app) {
+  /**
+   * @type {import("vue").Reactive<{string,LegendEntry}>}
+   */
+  const entries = reactive({});
+  /**
+   * @type {Object<string,function():void>}
+   */
+  const styleChangedListener = {};
+
+  /**
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  function removeEntryForLayer(layer) {
+    const key = layer.name;
+    Vue.delete(entries, key); // XXX Vue.delete can be removed on Vue3
+    if (styleChangedListener[key]) {
+      styleChangedListener[key]();
+      delete styleChangedListener[key];
+    }
+  }
+
+  /**
+   * adds or removes a LegendEntry on layer state changes and layer style changes
+   * adds a styleChangedListener for all layers changing its state
+   * @param {import("@vcmap/core").Layer} layer
+   */
+  function syncLayerLegendEntries(layer) {
+    removeEntryForLayer(layer);
+    if (layer.active) {
+      const key = layer.name;
+      const title = layer.properties.title || layer.name;
+      const legend = layer.style?.properties?.legend ?? layer.properties?.legend;
+      if (legend) {
+        Vue.set(entries, key, createLayerLegendEntry(title, legend)); // XXX Vue.set can be removed on Vue3
+      }
+      if (layer.styleChanged) {
+        styleChangedListener[layer.name] = layer.styleChanged.addEventListener(() => syncLayerLegendEntries(layer));
+      }
+    }
+  }
+
+  const destroyChangedListener = app.layers.stateChanged.addEventListener(syncLayerLegendEntries);
+  const destroyRemovedListener = app.layers.removed.addEventListener(removeEntryForLayer);
+
+  [...app.layers].forEach(syncLayerLegendEntries);
+
+  const destroy = () => {
+    destroyChangedListener();
+    destroyRemovedListener();
+    Object.values(styleChangedListener).forEach(cb => cb());
+  };
+
+  return { entries, destroy };
+}

package/src/legend/styleLegendItem.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-list dense>
+    <v-layout wrap :column="item.colNr === 1">
+      <v-flex
+        v-for="(row, idx) in item.rows"
+        :key="idx"
+        :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
+      >
+        <v-list-item dense>
+          <v-list-item-icon class="pr-2">
+            <v-img
+              v-if="row.type === StyleRowType.Icon || row.type === StyleRowType.Shape"
+              width="32"
+              height="24"
+              contain
+              :src="getImageSrcFromShape(row.image)"
+            />
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" v-else>
+              <text
+                v-if="row.type === StyleRowType.Text"
+                :style="`font:${row.text.font}`"
+                x="0"
+                y="17"
+                :stroke="getColor(row.text?.stroke?.color)"
+                :stroke-linecap="row.text?.stroke?.lineCap"
+                :stroke-linejoin="row.text?.stroke?.lineJoin"
+                :stroke-dasharray="row.text?.stroke?.lineDash"
+                :stroke-dashoffset="row.text?.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.text?.stroke?.miterLimit"
+                :stroke-width="row.text?.stroke?.width"
+                :fill="getColor(row.text?.fill?.color) || 'rgba(255,255,255,0)'"
+              >
+                {{ $t(row.label || 'legend.defaultLabelText') }}
+              </text>
+              <line
+                v-else-if="row.type === StyleRowType.Stroke"
+                x1="0"
+                y1="12"
+                x2="32"
+                y2="12"
+                :stroke="getColor(row.stroke?.color)"
+                :stroke-linecap="row.stroke?.lineCap"
+                :stroke-linejoin="row.stroke?.lineJoin"
+                :stroke-dasharray="row.stroke?.lineDash"
+                :stroke-dashoffset="row.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.stroke?.miterLimit"
+                :stroke-width="row.stroke?.width"
+              />
+              <rect
+                v-else-if="row.type === StyleRowType.Fill"
+                width="32"
+                height="24"
+                :stroke="getColor(row.stroke?.color)"
+                :stroke-linecap="row.stroke?.lineCap"
+                :stroke-linejoin="row.stroke?.lineJoin"
+                :stroke-dasharray="row.stroke?.lineDash"
+                :stroke-dashoffset="row.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.stroke?.miterLimit"
+                :stroke-width="row.stroke?.width"
+                :fill="getColor(row.fill?.color) || 'rgba(255,255,255,0)'"
+              />
+              <circle
+                v-else-if="row.type === StyleRowType.Circle"
+                cx="16"
+                cy="12"
+                :r="row.image?.radius || 8"
+                :stroke="getColor(row.image?.stroke?.color)"
+                :stroke-linecap="row.image?.stroke?.lineCap"
+                :stroke-linejoin="row.image?.stroke?.lineJoin"
+                :stroke-dasharray="row.image?.stroke?.lineDash"
+                :stroke-dashoffset="row.image?.stroke?.lineDashOffset"
+                :stroke-miterlimit="row.image?.stroke?.miterLimit"
+                :stroke-width="row.image?.stroke?.width"
+                :fill="getColor(row.image?.fill?.color) || 'rgba(255,255,255,0)'"
+              />
+            </svg>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title
+              class="pt-2"
+              :title="$t(row.tooltip || row.title)"
+            >
+              {{ $t(row.title) }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-flex>
+    </v-layout>
+  </v-list>
+</template>
+
+<script>
+
+  import { getStringColor } from '@vcmap/core';
+  import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
+
+  /**
+   * @description A component rendering vector styles as list using {@link https://vuetifyjs.com/en/api/v-list-row v-list-row}
+   * @vue-prop {StyleLegendItem} item - an item with multiple rows of style information and corresponding title
+   */
+  export default {
+    name: 'StyleLegendItem',
+    components: { },
+    props: {
+      item: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      return {
+        StyleRowType,
+        getImageSrcFromShape,
+        getColor(color) {
+          if (color) {
+            return getStringColor(color);
+          }
+          return null;
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+.v-list-item--dense {
+  height: 32px;
+}
+</style>

package/src/legend/vcsLegend.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-card
+    class="overflow-y-auto"
+    max-height="500"
+  >
+    <v-expansion-panels
+      accordion
+      multiple
+    >
+      <v-expansion-panel
+        v-for="(entry,i) in entries"
+        :key="i"
+        class="pa-0 ma-0"
+      >
+        <v-expansion-panel-header hide-actions>
+          {{ $t(entry.title) }}
+          <template #default="{ open }">
+            <div class="d-flex">
+              <v-icon :class="{ 'v-treeview-node__toggle': !open }">
+                mdi-chevron-down
+              </v-icon>
+              <VcsTreeviewLeaf class="w-full" :item="entry" />
+            </div>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-list dense>
+            <div v-for="(item, idx) in entry.legend" :key="idx">
+              <div v-if="item.type === LegendType.Image" class="mx-2">
+                <v-img :src="$t(item.src)" max-width="287" class="mx-2" :title="item.tooltip" />
+              </div>
+              <div v-else-if="item.type === LegendType.Iframe" class="mx-2">
+                <iframe
+                  :id="`legendIframe${idx}`"
+                  :src="$t(item.src)"
+                  scrolling="no"
+                  width="287"
+                  frameBorder="0"
+                  @load="setIframeHeight(`legendIframe${idx}`)"
+                />
+              </div>
+              <style-legend-item v-else :item="item" class="mx-2" />
+            </div>
+          </v-list>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-card>
+</template>
+
+<script>
+
+  import { LegendType } from './legendHelper.js';
+  import StyleLegendItem from './styleLegendItem.vue';
+  import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
+
+  /**
+   * @description A component rendering configured legend information for active layers.
+   * @vue-prop {import("vue").Reactive<{string,LegendEntry}>} entries - legend entries to be displayed
+   */
+  export default {
+    name: 'VcsLegend',
+    components: { VcsTreeviewLeaf, StyleLegendItem },
+    props: {
+      entries: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      /**
+       * adapts the iframe height on load
+       * @param {string} id - iframe's html id
+       */
+      const setIframeHeight = (id) => {
+        const iframe = document.getElementById(id);
+        iframe.style.height = `${iframe.contentWindow.document.documentElement.scrollHeight}px`;
+      };
+
+      return {
+        LegendType,
+        setIframeHeight,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+.v-list-item--dense {
+  height: 32px;
+}
+</style>