@fmidev/smartmet-alert-client 4.2.7 → 4.7.0-alpha.0

package/src/AlertClientVue.vue

@@ -0,0 +1,170 @@
+<template>
+  <AlertClient
+    v-if="visible"
+    :refresh-interval="refreshIntervalNormalized"
+    :default-day="selectedDayNormalized"
+    :static-days="staticDaysNormalized"
+    :start-from="startFrom"
+    :region-list-enabled="regionListEnabledNormalized"
+    :gray-scale-selector="grayScaleSelectorNormalized"
+    :current-time="currentTime"
+    :warnings-data="warningsData"
+    :daily-warning-types="dailyWarningTypesNormalized"
+    :geometry-id="geometryIdNormalized"
+    :language="language"
+    :theme="themeClass"
+    :sleep="sleepNormalized"
+    :loading="loading"
+    :spinner-enabled="spinnerEnabledNormalized"
+    @loaded="onLoaded"
+    @theme-changed="onThemeChanged"
+    @update-warnings="fetchWarnings" />
+</template>
+<script>
+/**
+ * Vue wrapper component for AlertClient.
+ * Accepts native JavaScript types (Number, Boolean) unlike the web component
+ * version which only accepts strings.
+ */
+import AlertClient from './components/AlertClient.vue'
+import alertClientCore, { toBool, toNum } from './mixins/alertClientCore'
+import config from './mixins/config'
+import utils from './mixins/utils'
+
+export default {
+  name: 'AlertClientVue',
+  components: {
+    AlertClient,
+  },
+  mixins: [config, utils, alertClientCore],
+  props: {
+    currentDate: {
+      type: [String, Date],
+      default: null,
+    },
+    baseUrl: {
+      type: String,
+      default: 'https://www.ilmatieteenlaitos.fi/geoserver/alert/ows',
+    },
+    selectedDay: {
+      type: [String, Number],
+      default: 0,
+    },
+    regionListEnabled: {
+      type: [String, Boolean],
+      default: true,
+    },
+    spinnerEnabled: {
+      type: [String, Boolean],
+      default: true,
+    },
+    grayScaleSelector: {
+      type: [String, Boolean],
+      default: true,
+    },
+    staticDays: {
+      type: [String, Boolean],
+      default: true,
+    },
+    startFrom: {
+      type: String,
+      default: '',
+    },
+    weatherUpdated: {
+      type: String,
+      default: '',
+    },
+    floodUpdated: {
+      type: String,
+      default: '',
+    },
+    weatherWarnings: {
+      type: String,
+      default: '',
+    },
+    floodWarnings: {
+      type: String,
+      default: '',
+    },
+    warnings: {
+      type: [String, Object],
+      default: null,
+    },
+    dailyWarningTypes: {
+      type: [String, Array],
+      default: () => [],
+    },
+    refreshInterval: {
+      type: [String, Number],
+      default: 900000, // 1000 * 60 * 15
+    },
+    geometryId: {
+      type: [String, Number],
+      default: () => Number(config.props.defaultGeometryId) || 2021,
+    },
+    language: {
+      type: String,
+      default: import.meta.env.VITE_LANGUAGE || 'fi',
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+    fontScale: {
+      type: [String, Number],
+      default: 1,
+    },
+    sleep: {
+      type: [String, Boolean],
+      default: true,
+    },
+    debugMode: {
+      type: [String, Boolean],
+      default: false,
+    },
+  },
+  computed: {
+    // Type normalizers for mixed-type props
+    selectedDayNormalized() {
+      return toNum(this.selectedDay, 0)
+    },
+    regionListEnabledNormalized() {
+      return toBool(this.regionListEnabled, true)
+    },
+    grayScaleSelectorNormalized() {
+      return toBool(this.grayScaleSelector, true)
+    },
+    staticDaysNormalized() {
+      return toBool(this.staticDays, true)
+    },
+    dailyWarningTypesNormalized() {
+      if (Array.isArray(this.dailyWarningTypes)) return this.dailyWarningTypes
+      if (
+        typeof this.dailyWarningTypes === 'string' &&
+        this.dailyWarningTypes
+      ) {
+        return this.dailyWarningTypes.split(',').map((item) => item.trim())
+      }
+      return []
+    },
+    refreshIntervalNormalized() {
+      return toNum(this.refreshInterval, 900000)
+    },
+    geometryIdNormalized() {
+      return toNum(this.geometryId, 2021)
+    },
+    sleepNormalized() {
+      return toBool(this.sleep, true)
+    },
+    spinnerEnabledNormalized() {
+      return toBool(this.spinnerEnabled, true)
+    },
+    debugModeNormalized() {
+      return toBool(this.debugMode, false)
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import './scss/utilities.scss';
+</style>

package/src/App.vue

@@ -1,29 +1,33 @@
 <template>
   <AlertClient
     v-if="visible"
-    :refresh-interval="refreshIntervalParsed"
-    :default-day="selectedDayParsed"
-    :static-days="staticDaysParsed"
+    :refresh-interval="refreshIntervalNormalized"
+    :default-day="selectedDayNormalized"
+    :static-days="staticDaysNormalized"
     :start-from="startFrom"
-    :region-list-enabled="regionListEnabledParsed"
-    :gray-scale-selector="grayScaleSelectorParsed"
+    :region-list-enabled="regionListEnabledNormalized"
+    :gray-scale-selector="grayScaleSelectorNormalized"
     :current-time="currentTime"
     :warnings-data="warningsData"
-    :daily-warning-types="dailyWarningTypesParsed"
-    :geometry-id="geometryIdParsed"
+    :daily-warning-types="dailyWarningTypesNormalized"
+    :geometry-id="geometryIdNormalized"
     :language="language"
     :theme="themeClass"
-    :sleep="sleepParsed"
+    :sleep="sleepNormalized"
     :loading="loading"
-    :spinner-enabled="spinnerEnabledParsed"
+    :spinner-enabled="spinnerEnabledNormalized"
     @loaded="onLoaded"
-    @themeChanged="onThemeChanged"
+    @theme-changed="onThemeChanged"
     @update-warnings="fetchWarnings" />
 </template>
 <script>
-import fetch from 'cross-fetch'
-
+/**
+ * Web component wrapper for AlertClient.
+ * All props are strings (HTML attribute limitation).
+ * Use AlertClientVue.vue for native Vue usage with proper types.
+ */
 import AlertClient from './components/AlertClient.vue'
+import alertClientCore, { toBool, toNum } from './mixins/alertClientCore'
 import config from './mixins/config'
 import utils from './mixins/utils'
 
@@ -32,7 +36,7 @@ export default {
   components: {
     AlertClient,
   },
-  mixins: [config, utils],
+  mixins: [config, utils, alertClientCore],
   props: {
     currentDate: {
       type: String,
@@ -66,10 +70,22 @@ export default {
       type: String,
       default: '',
     },
-    weatherUpdated: String,
-    floodUpdated: String,
-    weatherWarnings: String,
-    floodWarnings: String,
+    weatherUpdated: {
+      type: String,
+      default: '',
+    },
+    floodUpdated: {
+      type: String,
+      default: '',
+    },
+    weatherWarnings: {
+      type: String,
+      default: '',
+    },
+    floodWarnings: {
+      type: String,
+      default: '',
+    },
     warnings: {
       type: String,
       default: '',
@@ -94,11 +110,11 @@ export default {
       type: String,
       default: 'light',
     },
-    sleep: {
+    fontScale: {
       type: String,
-      default: 'true',
+      default: '1',
     },
-    spinnerEnabled: {
+    sleep: {
       type: String,
       default: 'true',
     },
@@ -107,177 +123,43 @@ export default {
       default: 'false',
     },
   },
-  data() {
-    return {
-      loading: 1,
-      updatedAt: null,
-      refreshedAt: null,
-      themeClass: `${this.theme}-theme`,
-      warningsData: null,
-      visible: true,
-    }
-  },
   computed: {
-    selectedDayParsed() {
-      return Number(this.selectedDay)
+    // String-to-type normalizers for web component props
+    selectedDayNormalized() {
+      return toNum(this.selectedDay, 0)
     },
-    regionListEnabledParsed() {
-      return this.regionListEnabled.toLowerCase() !== 'false'
+    regionListEnabledNormalized() {
+      return toBool(this.regionListEnabled, true)
     },
-    grayScaleSelectorParsed() {
-      return this.grayScaleSelector.toLowerCase() !== 'false'
+    grayScaleSelectorNormalized() {
+      return toBool(this.grayScaleSelector, true)
     },
-    staticDaysParsed() {
-      return this.staticDays.toLowerCase() !== 'false'
+    staticDaysNormalized() {
+      return toBool(this.staticDays, true)
     },
-    dailyWarningTypesParsed() {
+    dailyWarningTypesNormalized() {
       return this.dailyWarningTypes
         ? this.dailyWarningTypes.split(',').map((item) => item.trim())
         : []
     },
-    refreshIntervalParsed() {
-      return Number(this.refreshInterval)
-    },
-    geometryIdParsed() {
-      return Number(this.geometryId)
-    },
-    sleepParsed() {
-      return this.sleep.toLowerCase() !== 'false'
-    },
-    spinnerEnabledParsed() {
-      return this.spinnerEnabled.toLowerCase() !== 'false'
-    },
-    weatherUpdatedType() {
-      return 'weather_update_time'
-    },
-    floodUpdatedType() {
-      return 'flood_update_time'
-    },
-    weatherWarningsType() {
-      return 'weather_finland_active_all'
-    },
-    floodWarningsType() {
-      return 'flood_finland_active_all'
-    },
-    weatherUpdatedQuery() {
-      return this.weatherUpdated || `${this.query}${this.weatherUpdatedType}`
-    },
-    floodUpdatedQuery() {
-      return this.floodUpdated || `${this.query}${this.floodUpdatedType}`
-    },
-    weatherWarningsQuery() {
-      return this.weatherWarnings || `${this.query}${this.weatherWarningsType}`
-    },
-    floodWarningsQuery() {
-      return (
-        this.floodWarnings ||
-        `${this.query}${this.floodWarningsType}${this.floodFilter}`
-      )
-    },
-    query() {
-      return '?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=1000&outputFormat=application%2Fjson&typeName='
-    },
-    floodSupportedSeverities() {
-      return ['moderate', 'severe', 'extreme']
-    },
-    floodFilter() {
-      return `${this.floodSupportedSeverities.reduce(
-        (filter, severity, index) =>
-          `${filter + (index === 0 ? '' : ',')}%27${severity.toUpperCase()}%27`,
-        '&cql_filter=severity%20IN%20('
-      )})%20AND%20language=%27${this.capLanguage()}%27`
-    },
-    capLanguage() {
-      return () =>
-        ({
-          fi: 'fi-FI',
-          sv: 'sv-SV',
-          en: 'en-US',
-        })[this.language]
-    },
-    currentTime() {
-      if (this.refreshedAt) {
-        return this.refreshedAt
-      }
-      if (this.currentDate) {
-        return new Date(this.currentDate).getTime()
-      }
-      return Date.now()
-    },
-  },
-  created() {
-    if (this.warnings) {
-      this.warningsData = JSON.parse(this.warnings)
-    }
-  },
-  serverPrefetch() {
-    if (!this.warnings) {
-      return this.fetchWarnings()
-    }
-  },
-  methods: {
-    onLoaded(loaded) {
-      if (loaded !== 0) {
-        this.loading = loaded === -1 ? -1 : 0
-      }
+    refreshIntervalNormalized() {
+      return toNum(this.refreshInterval, 900000)
     },
-    onThemeChanged(newTheme) {
-      this.themeClass = `${
-        newTheme != null && newTheme.length > 0 ? newTheme : this.theme
-      }-theme`
+    geometryIdNormalized() {
+      return toNum(this.geometryId, 2021)
     },
-    fetchWarnings() {
-      this.loading = 1
-      if (this.debugMode.toLowerCase() !== 'false') {
-        console.log(`Updating warnings at ${new Date()}`)
-      }
-      const queries = new Map()
-        .set(
-          `${this.baseUrl}${this.weatherUpdatedQuery}`,
-          this.weatherUpdatedType
-        )
-        .set(`${this.baseUrl}${this.floodUpdatedQuery}`, this.floodUpdatedType)
-        .set(
-          `${this.baseUrl}${this.weatherWarningsQuery}`,
-          this.weatherWarningsType
-        )
-        .set(
-          `${this.baseUrl}${this.floodWarningsQuery}`,
-          this.floodWarningsType
-        )
-      const responseData = {}
-      return Promise.allSettled(
-        [...queries.keys()].map(async (query) =>
-          fetch(query).then((response) =>
-            response
-              .json()
-              .then((json) => {
-                const currentTime = Date.now()
-                if (this.updatedAt != null) {
-                  this.refreshedAt = currentTime
-                }
-                this.updatedAt = currentTime
-                responseData[queries.get(query)] = json
-              })
-              .catch((error) => {
-                this.loading = -1
-                console.log(error)
-              })
-          )
-        )
-      ).then(() => {
-        this.warningsData = responseData
-      })
+    sleepNormalized() {
+      return toBool(this.sleep, true)
     },
-    show() {
-      this.visible = true
+    spinnerEnabledNormalized() {
+      return toBool(this.spinnerEnabled, true)
     },
-    hide() {
-      this.visible = false
+    debugModeNormalized() {
+      return toBool(this.debugMode, false)
     },
   },
 }
 </script>
-<style>
-@import 'bootstrap/dist/css/bootstrap.min.css';
+<style lang="scss">
+@import './scss/utilities.scss';
 </style>

package/src/assets/img/ui/arrow-down.svg

@@ -1,14 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow-down-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-732.000000, -738.000000)" stroke="#979797" stroke-width="1.5">
-            <g id="arrow-down-symbol" transform="translate(733.000000, 739.000000)">
-                <polyline id="fill-1" transform="translate(6.500000, 3.000000) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8">
+  <title>arrow-down-symbol</title>
+  <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 1 7.5 7 1 1"/>
+</svg>

package/src/assets/img/ui/arrow-up.svg

@@ -1,14 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
-    <title>arrow-up-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-670.000000, -738.000000)" stroke="#979797" stroke-width="1.5">
-            <g id="arrow-up-symbol" transform="translate(671.000000, 739.000000)">
-                <polyline id="fill-1" transform="translate(6.500000, 3.000000) scale(1, -1) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8">
+  <title>arrow-up-symbol</title>
+  <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 7 7.5 1 1 7"/>
+</svg>

package/src/assets/img/ui/clear.svg

@@ -1,21 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.8.2 (29753) - http://www.bohemiancoding.com/sketch -->
-    <title>close icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Layouts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="varoitukset-tablet-aktiivinen-varoitussymboli-v1" transform="translate(-710.000000, -241.000000)">
-            <g id="legenda" transform="translate(514.000000, 240.000000)">
-                <g id="poista-valinnat-linkki" transform="translate(106.000000, 1.000000)">
-                    <g id="close-icon" transform="translate(90.000000, 0.000000)">
-                        <circle id="oval" fill="#56B8E5" cx="7" cy="7" r="7"></circle>
-                        <g id="Group" transform="translate(7.156854, 7.156854) rotate(-315.000000) translate(-7.156854, -7.156854) translate(3.156854, 3.156854)" fill="#FFFFFF">
-                            <path d="M4.5,4.5 L4.5,7 C4.5,7.27614237 4.27614237,7.5 4,7.5 C3.72385763,7.5 3.5,7.27614237 3.5,7 L3.5,4.5 L1,4.5 C0.723857625,4.5 0.5,4.27614237 0.5,4 C0.5,3.72385763 0.723857625,3.5 1,3.5 L3.5,3.5 L3.5,1 C3.5,0.723857625 3.72385763,0.5 4,0.5 C4.27614237,0.5 4.5,0.723857625 4.5,1 L4.5,3.5 L7,3.5 C7.27614237,3.5 7.5,3.72385763 7.5,4 C7.5,4.27614237 7.27614237,4.5 7,4.5 L4.5,4.5 L4.5,4.5 Z" id="x"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+  <title>close icon</title>
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="7" cy="7" r="7" fill="#56b8e5"/>
+    <path fill="#fff" d="M7.157 7.864 5.389 9.632a.5.5 0 0 1-.707-.707L6.45 7.157 4.682 5.389a.5.5 0 0 1 .707-.707L7.157 6.45l1.768-1.768a.5.5 0 0 1 .707.707L7.864 7.157l1.768 1.768a.5.5 0 0 1-.707.707z"/>
+  </g>
+</svg>

package/src/assets/img/ui/close.svg

@@ -1,15 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
-    <title>close-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Symbols" transform="translate(-793.000000, -735.000000)" stroke="#000000" stroke-width="1.5">
-            <g id="close-symbol" transform="translate(794.000000, 736.000000)">
-                <path d="M0,9.19238816 L9.19238816,0" id="fill-2"></path>
-                <path d="M0,0 L9.19238816,9.19238816" id="fill-1"></path>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11">
+  <title>close-symbol</title>
+  <path fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M1 10.192 10.192 1M1 1l9.192 9.192"/>
+</svg>

package/src/assets/img/ui/toggle-selected.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
+  <defs>
+    <clipPath id="outer-clip">
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
+    </clipPath>
+    <clipPath id="inner-clip">
+      <path d="M35 5h16a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H35Z"/>
+    </clipPath>
+  </defs>
+  <rect width="55" height="20" y="5" fill="#767676" stroke="#767676" clip-path="url(#outer-clip)" rx="4" ry="4"/>
+  <path fill="#fff" stroke="#767676" d="M35 5h16a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H35Z" clip-path="url(#inner-clip)"/>
+</svg>

package/src/assets/img/ui/toggle-unselected.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
+  <defs>
+    <clipPath id="outer-clip">
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
+    </clipPath>
+    <clipPath id="inner-clip">
+      <path d="M4 5h16v20H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4"/>
+    </clipPath>
+  </defs>
+  <rect width="55" height="20" y="5" fill="#ebebeb" stroke="#767676" clip-path="url(#outer-clip)" rx="4" ry="4"/>
+  <path fill="#fff" stroke="#767676" d="M4 5h16v20H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4Z" clip-path="url(#inner-clip)"/>
+</svg>

package/src/assets/img/warning/cold-weather.svg

@@ -1,7 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
-<g id="surface1">
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.5px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 13.828125 21.453125 C 12.722656 21.453125 11.820312 20.554688 11.820312 19.445312 C 11.820312 18.882812 12.050781 18.359375 12.46875 17.976562 L 12.46875 17.972656 C 12.589844 17.859375 12.667969 17.699219 12.667969 17.519531 L 12.667969 7.382812 C 12.667969 6.742188 13.1875 6.222656 13.828125 6.222656 C 14.46875 6.222656 14.992188 6.742188 14.992188 7.382812 L 14.992188 17.519531 C 14.992188 17.699219 15.070312 17.859375 15.191406 17.972656 L 15.191406 17.976562 C 15.609375 18.359375 15.835938 18.882812 15.835938 19.445312 C 15.835938 20.554688 14.9375 21.453125 13.828125 21.453125 Z M 17.503906 9.894531 C 17.792969 9.894531 18.023438 9.660156 18.023438 9.375 C 18.023438 9.089844 17.792969 8.855469 17.503906 8.855469 L 16.234375 8.855469 L 16.234375 8.203125 L 17.503906 8.203125 C 17.792969 8.203125 18.023438 7.96875 18.023438 7.683594 C 18.023438 7.398438 17.792969 7.164062 17.503906 7.164062 L 16.226562 7.164062 C 16.113281 5.941406 15.082031 4.976562 13.828125 4.976562 C 12.503906 4.976562 11.425781 6.058594 11.425781 7.382812 L 11.425781 17.265625 C 10.882812 17.859375 10.578125 18.640625 10.578125 19.445312 C 10.578125 21.238281 12.035156 22.699219 13.828125 22.699219 C 15.621094 22.699219 17.082031 21.238281 17.082031 19.445312 C 17.082031 18.640625 16.777344 17.859375 16.234375 17.265625 L 16.234375 11.585938 L 17.503906 11.585938 C 17.792969 11.585938 18.023438 11.355469 18.023438 11.066406 C 18.023438 10.78125 17.792969 10.550781 17.503906 10.550781 L 16.234375 10.550781 L 16.234375 9.894531 Z M 17.503906 9.894531 "/>
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 1px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 14.367188 18.234375 L 14.367188 12.691406 C 14.367188 12.390625 14.128906 12.152344 13.828125 12.152344 C 13.53125 12.152344 13.289062 12.390625 13.289062 12.691406 L 13.289062 18.234375 C 12.824219 18.441406 12.5 18.90625 12.5 19.445312 C 12.5 20.179688 13.097656 20.773438 13.828125 20.773438 C 14.5625 20.773438 15.15625 20.179688 15.15625 19.445312 C 15.15625 18.90625 14.832031 18.441406 14.367188 18.234375 "/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+  <path fill="#221f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M13.828 21.453a2.01 2.01 0 0 1-2.008-2.008c0-.562.23-1.086.649-1.468v-.004a.62.62 0 0 0 .199-.453V7.383a1.16 1.16 0 0 1 2.324 0V17.52c0 .18.078.34.2.453v.004c.417.382.644.906.644 1.468 0 1.11-.899 2.008-2.008 2.008Zm3.676-11.558a.52.52 0 1 0 0-1.04h-1.27v-.652h1.27a.52.52 0 1 0 0-1.039h-1.277a2.414 2.414 0 0 0-2.399-2.187 2.41 2.41 0 0 0-2.402 2.406v9.883a3.24 3.24 0 0 0-.848 2.18 3.256 3.256 0 0 0 3.25 3.253 3.26 3.26 0 0 0 3.254-3.254 3.24 3.24 0 0 0-.848-2.18v-5.68h1.27a.517.517 0 1 0 0-1.034h-1.27v-.656Zm0 0" paint-order="stroke"/>
+  <path fill="#221f20" fill-rule="evenodd" stroke="#fff" d="M14.367 18.234v-5.543c0-.3-.238-.539-.539-.539a.54.54 0 0 0-.539.54v5.542a1.327 1.327 0 1 0 1.867 1.211c0-.539-.324-1.004-.789-1.21" paint-order="stroke"/>
 </svg>

package/src/assets/img/warning/flood-level-3.svg

@@ -1,8 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
-<g id="surface1">
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.2px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.72549%,12.156863%,12.54902%);fill-opacity:1;" d="M 21.542969 17.964844 C 20.371094 17.964844 19.757812 18.617188 19.265625 19.140625 C 18.828125 19.609375 18.480469 19.980469 17.765625 19.980469 C 17.050781 19.980469 16.703125 19.609375 16.265625 19.140625 C 15.773438 18.617188 15.160156 17.964844 13.988281 17.964844 C 12.8125 17.964844 12.199219 18.617188 11.707031 19.140625 C 11.269531 19.609375 10.921875 19.976562 10.207031 19.976562 C 9.492188 19.976562 9.148438 19.609375 8.707031 19.140625 C 8.214844 18.617188 7.605469 17.964844 6.429688 17.964844 C 6.132812 17.964844 5.894531 18.203125 5.894531 18.5 C 5.894531 18.792969 6.132812 19.03125 6.429688 19.03125 L 6.441406 19.03125 C 7.144531 19.035156 7.492188 19.40625 7.929688 19.871094 C 8.421875 20.394531 9.03125 21.046875 10.207031 21.046875 C 11.382812 21.046875 11.996094 20.394531 12.484375 19.871094 C 12.925781 19.402344 13.273438 19.03125 13.988281 19.03125 C 14.699219 19.03125 15.046875 19.402344 15.488281 19.871094 C 15.980469 20.394531 16.589844 21.046875 17.765625 21.046875 C 18.941406 21.046875 19.554688 20.394531 20.042969 19.871094 C 20.480469 19.40625 20.828125 19.039062 21.535156 19.03125 L 21.542969 19.03125 C 21.839844 19.03125 22.078125 18.792969 22.078125 18.5 C 22.078125 18.203125 21.839844 17.964844 21.542969 17.964844 Z M 21.542969 17.964844 "/>
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.2px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.72549%,12.156863%,12.54902%);fill-opacity:1;" d="M 20.386719 11.488281 L 13.933594 6.632812 L 7.480469 11.488281 L 9.886719 11.488281 L 9.886719 18.070312 L 9.90625 18.070312 C 10.667969 18.070312 11.035156 17.675781 11.503906 17.175781 C 12.027344 16.617188 12.679688 15.921875 13.933594 15.921875 C 15.1875 15.921875 15.835938 16.617188 16.359375 17.175781 C 16.828125 17.675781 17.199219 18.070312 17.957031 18.070312 L 17.976562 18.070312 L 17.976562 11.488281 Z M 15.074219 13.90625 L 12.753906 13.90625 L 12.753906 11.589844 L 15.074219 11.589844 Z M 15.074219 13.90625 "/>
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.2px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.72549%,12.156863%,12.54902%);fill-opacity:1;" d="M 21.542969 15.527344 C 20.371094 15.527344 19.757812 16.179688 19.265625 16.703125 C 18.828125 17.171875 18.480469 17.542969 17.765625 17.542969 C 17.050781 17.542969 16.707031 17.171875 16.265625 16.703125 C 15.773438 16.179688 15.164062 15.527344 13.988281 15.527344 C 12.8125 15.527344 12.199219 16.179688 11.707031 16.703125 C 11.269531 17.171875 10.921875 17.542969 10.207031 17.542969 C 9.492188 17.542969 9.148438 17.171875 8.707031 16.703125 C 8.214844 16.179688 7.605469 15.527344 6.429688 15.527344 C 6.132812 15.527344 5.894531 15.765625 5.894531 16.0625 C 5.894531 16.355469 6.132812 16.59375 6.429688 16.59375 L 6.4375 16.59375 C 7.144531 16.597656 7.492188 16.96875 7.929688 17.433594 C 8.417969 17.957031 9.03125 18.609375 10.207031 18.609375 C 11.382812 18.609375 11.996094 17.957031 12.484375 17.433594 C 12.925781 16.964844 13.273438 16.59375 13.988281 16.59375 C 14.699219 16.59375 15.046875 16.964844 15.488281 17.433594 C 15.980469 17.957031 16.589844 18.609375 17.765625 18.609375 C 18.941406 18.609375 19.554688 17.957031 20.042969 17.433594 C 20.480469 16.96875 20.828125 16.597656 21.535156 16.59375 L 21.542969 16.59375 C 21.734375 16.59375 21.910156 16.492188 22.007812 16.328125 C 22.101562 16.164062 22.101562 15.960938 22.007812 15.792969 C 21.910156 15.628906 21.734375 15.527344 21.542969 15.527344 Z M 21.542969 15.527344 "/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+  <path fill="#231f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.2" d="M21.543 17.965c-1.172 0-1.785.652-2.277 1.176-.438.468-.786.84-1.5.84-.715 0-1.063-.372-1.5-.84-.493-.524-1.106-1.176-2.278-1.176-1.175 0-1.789.652-2.281 1.176-.437.468-.785.836-1.5.836s-1.059-.368-1.5-.836c-.492-.524-1.102-1.176-2.277-1.176a.533.533 0 1 0 0 1.066h.011c.704.004 1.051.375 1.489.84.492.524 1.101 1.176 2.277 1.176s1.79-.652 2.277-1.176c.442-.469.79-.84 1.504-.84.711 0 1.059.371 1.5.84.492.524 1.102 1.176 2.278 1.176s1.789-.652 2.277-1.176c.437-.465.785-.832 1.492-.84h.008a.533.533 0 1 0 0-1.066Zm0 0" paint-order="stroke"/>
+  <path fill="#231f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.2" d="m20.387 11.488-6.453-4.855-6.454 4.855h2.407v6.582h.02c.761 0 1.128-.394 1.597-.894.523-.559 1.176-1.254 2.43-1.254s1.902.695 2.425 1.254c.47.5.84.894 1.598.894h.02v-6.582Zm-5.313 2.418h-2.32V11.59h2.32Zm0 0" paint-order="stroke"/>
+  <path fill="#231f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.2" d="M21.543 15.527c-1.172 0-1.785.653-2.277 1.176-.438.469-.786.84-1.5.84-.715 0-1.059-.371-1.5-.84-.493-.523-1.102-1.176-2.278-1.176s-1.789.653-2.281 1.176c-.437.469-.785.84-1.5.84s-1.059-.371-1.5-.84c-.492-.523-1.102-1.176-2.277-1.176a.533.533 0 1 0 0 1.067h.008c.707.004 1.054.375 1.492.84.488.523 1.101 1.175 2.277 1.175s1.79-.652 2.277-1.175c.442-.47.79-.84 1.504-.84.711 0 1.059.37 1.5.84.492.523 1.102 1.175 2.278 1.175s1.789-.652 2.277-1.175c.437-.465.785-.836 1.492-.84h.008a.54.54 0 0 0 .465-.266.54.54 0 0 0 0-.535.54.54 0 0 0-.465-.266Zm0 0" paint-order="stroke"/>
 </svg>

package/src/assets/img/warning/forest-fire-weather.svg

@@ -1,7 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
-<g id="surface1">
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.5px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 17.992188 12.910156 C 18.265625 14.246094 16.886719 16.019531 16.394531 15.089844 C 16.152344 14.632812 16.546875 13.894531 16.683594 13.460938 C 16.910156 12.742188 17.089844 11.980469 17.058594 11.222656 C 16.96875 8.910156 15.054688 5.578125 12.042969 5.601562 C 13.71875 7.621094 9.484375 9.496094 10.328125 13.910156 C 9.578125 13.78125 9.035156 12.359375 9.035156 12.359375 C 9.035156 12.359375 7.273438 18.726562 12.558594 18.726562 C 11.25 17.902344 10.289062 16.695312 10.25 15.304688 C 10.25 15.304688 11.398438 16.257812 12.414062 16.214844 C 11.648438 14.226562 13.027344 12.148438 14.742188 11.414062 C 14.175781 12.597656 13.578125 14.074219 13.753906 15.40625 C 14.027344 17.46875 16.335938 17.34375 17.816406 16.050781 C 17.816406 16.929688 16.609375 18.023438 15.855469 18.726562 C 20.917969 17.769531 19.09375 13.390625 17.992188 12.910156 "/>
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.5px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 8.089844 20.925781 L 20.527344 20.925781 L 20.527344 19.714844 L 8.089844 19.714844 Z M 8.089844 20.925781 "/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+  <path fill="#221f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M17.992 12.91c.274 1.336-1.105 3.11-1.597 2.18-.243-.457.152-1.195.289-1.63.226-.718.406-1.48.375-2.237-.09-2.313-2.004-5.645-5.016-5.621 1.676 2.02-2.559 3.894-1.715 8.308-.75-.129-1.293-1.55-1.293-1.55s-1.762 6.367 3.524 6.367c-1.309-.825-2.27-2.032-2.309-3.422 0 0 1.148.953 2.164.91-.766-1.988.613-4.067 2.328-4.8-.566 1.183-1.164 2.66-.988 3.991.273 2.063 2.582 1.938 4.062.645 0 .879-1.207 1.972-1.96 2.676 5.062-.957 3.238-5.336 2.136-5.817M8.09 20.926h12.437v-1.211H8.09Zm0 0" paint-order="stroke"/>
 </svg>