@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-beta.0

package/src/App.vue

@@ -1,315 +1,173 @@
 <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"
-    :language="language"
+    :daily-warning-types="dailyWarningTypesNormalized"
+    :geometry-id="geometryIdNormalized"
+    :language="language as 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'
+<script setup lang="ts">
+/**
+ * Web component wrapper for AlertClient.
+ * All props are strings (HTML attribute limitation).
+ * Use AlertClientVue.vue for native Vue usage with proper types.
+ */
+import { computed, toRef, onMounted, type Ref } from 'vue'
 
 import AlertClient from './components/AlertClient.vue'
-import config from './mixins/config'
-import utils from './mixins/utils'
+import { useAlertClient, toBool, toNum } from './composables/useAlertClient'
+import type { Language, WarningsData } from '@/types'
 
-export default {
+// Define component name for web component registration
+defineOptions({
   name: 'App',
-  components: {
-    AlertClient,
-  },
-  mixins: [config, utils],
-  props: {
-    currentDate: {
-      type: String,
-      default: null,
-    },
-    baseUrl: {
-      type: String,
-      default: 'https://www.ilmatieteenlaitos.fi/geoserver/alert/ows',
-    },
-    selectedDay: {
-      type: String,
-      default: '0',
-    },
-    regionListEnabled: {
-      type: String,
-      default: 'true',
-    },
-    spinnerEnabled: {
-      type: String,
-      default: 'true',
-    },
-    grayScaleSelector: {
-      type: String,
-      default: 'true',
-    },
-    staticDays: {
-      type: String,
-      default: 'true',
-    },
-    startFrom: {
-      type: String,
-      default: '',
-    },
-    weatherUpdated: String,
-    floodUpdated: String,
-    weatherWarnings: String,
-    floodWarnings: String,
-    warnings: {
-      type: String,
-      default: '',
-    },
-    dailyWarningTypes: {
-      type: String,
-      default: '',
-    },
-    refreshInterval: {
-      type: String,
-      default: '900000', // 1000 * 60 * 15
-    },
-    geometryId: {
-      type: String,
-      default: config.props.defaultGeometryId || '2021',
-    },
-    language: {
-      type: String,
-      default: import.meta.env.VITE_LANGUAGE || 'fi',
-    },
-    theme: {
-      type: String,
-      default: 'light',
-    },
-    fontScale: {
-      type: String,
-      default: '1',
-    },
-    sleep: {
-      type: String,
-      default: 'true',
-    },
-    spinnerEnabled: {
-      type: String,
-      default: 'true',
-    },
-    debugMode: {
-      type: String,
-      default: 'false',
-    },
-  },
-  data() {
-    return {
-      loading: 1,
-      updatedAt: null,
-      refreshedAt: null,
-      themeClass: `${this.theme}-theme`,
-      warningsData: null,
-      visible: true,
-    }
-  },
-  computed: {
-    selectedDayParsed() {
-      return Number(this.selectedDay)
-    },
-    regionListEnabledParsed() {
-      return this.regionListEnabled.toLowerCase() !== 'false'
-    },
-    grayScaleSelectorParsed() {
-      return this.grayScaleSelector.toLowerCase() !== 'false'
-    },
-    staticDaysParsed() {
-      return this.staticDays.toLowerCase() !== 'false'
-    },
-    dailyWarningTypesParsed() {
-      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)
-    }
-  },
-  mounted() {
-    if (this.fontScale != null && this.fontScale.trim() !== ''
-    && Number(this.fontScale) !== 1) {
-      const newFontScale = Number(this.fontScale)
-      if (!Number.isNaN(newFontScale)) {
-        let originalFontSize
-        if (
-          typeof window !== 'undefined' &&
-          typeof document !== 'undefined' &&
-          document.documentElement &&
-          window.getComputedStyle
-        ) {
-          const htmlElement = document.documentElement
-          const computedStyle = window.getComputedStyle(htmlElement)
-          originalFontSize = parseFloat(computedStyle.fontSize)
-        }
-        if (originalFontSize == null || Number.isNaN(originalFontSize)) {
-          originalFontSize = 16 // Fallback
-        }
-        const scaledFontSize = newFontScale * originalFontSize
-        const newFontSize = Math.round(scaledFontSize * 100) / 100
-        document.documentElement.style.fontSize = `${newFontSize}px`
-      }
-    }
-  },
-  serverPrefetch() {
-    if (!this.warnings) {
-      return this.fetchWarnings()
-    }
+})
+
+// Default geometry ID from config
+const DEFAULT_GEOMETRY_ID = '2021'
+
+// Props definition - all strings for web component compatibility
+const props = withDefaults(
+  defineProps<{
+    currentDate?: string
+    baseUrl?: string
+    selectedDay?: string
+    regionListEnabled?: string
+    spinnerEnabled?: string
+    grayScaleSelector?: string
+    staticDays?: string
+    startFrom?: string
+    weatherUpdated?: string
+    floodUpdated?: string
+    weatherWarnings?: string
+    floodWarnings?: string
+    warnings?: string
+    dailyWarningTypes?: string
+    refreshInterval?: string
+    geometryId?: string
+    language?: string
+    theme?: string
+    fontScale?: string
+    sleep?: string
+    debugMode?: string
+  }>(),
+  {
+    currentDate: '',
+    baseUrl: 'https://www.ilmatieteenlaitos.fi/geoserver/alert/ows',
+    selectedDay: '0',
+    regionListEnabled: 'true',
+    spinnerEnabled: 'true',
+    grayScaleSelector: 'true',
+    staticDays: 'true',
+    startFrom: '',
+    weatherUpdated: '',
+    floodUpdated: '',
+    weatherWarnings: '',
+    floodWarnings: '',
+    warnings: '',
+    dailyWarningTypes: '',
+    refreshInterval: '900000', // 1000 * 60 * 15
+    geometryId: DEFAULT_GEOMETRY_ID,
+    language: (import.meta.env.VITE_LANGUAGE as string) || 'fi',
+    theme: 'light',
+    fontScale: '1',
+    sleep: 'true',
+    debugMode: 'false',
+  }
+)
+
+// String-to-type normalizers for web component props
+const selectedDayNormalized = computed(() => toNum(props.selectedDay, 0))
+const regionListEnabledNormalized = computed(() =>
+  toBool(props.regionListEnabled, true)
+)
+const grayScaleSelectorNormalized = computed(() =>
+  toBool(props.grayScaleSelector, true)
+)
+const staticDaysNormalized = computed(() => toBool(props.staticDays, true))
+const dailyWarningTypesNormalized = computed<string[]>(() => {
+  if (props.dailyWarningTypes) {
+    return props.dailyWarningTypes.split(',').map((item) => item.trim())
+  }
+  return []
+})
+const refreshIntervalNormalized = computed(() =>
+  toNum(props.refreshInterval, 900000)
+)
+const geometryIdNormalized = computed(() => toNum(props.geometryId, 2021))
+const sleepNormalized = computed(() => toBool(props.sleep, true))
+const spinnerEnabledNormalized = computed(() =>
+  toBool(props.spinnerEnabled, true)
+)
+const debugModeNormalized = computed(() => toBool(props.debugMode, false))
+
+// Computed refs for language (needs proper typing for composable)
+const languageRef = computed(() => props.language as Language)
+
+// Computed ref for warnings data (parse JSON string if provided)
+const warningsRef = computed<WarningsData | string | null>(() => {
+  if (!props.warnings) return null
+  return props.warnings
+})
+
+// Setup composable with refs to props
+const {
+  loading,
+  themeClass,
+  warningsData,
+  visible,
+  currentTime,
+  onLoaded,
+  onThemeChanged,
+  fetchWarnings,
+  initializeWarnings,
+  applyFontScale,
+} = useAlertClient({
+  baseUrl: toRef(props, 'baseUrl'),
+  language: languageRef as Ref<Language>,
+  theme: toRef(props, 'theme'),
+  warnings: warningsRef,
+  currentDate: toRef(props, 'currentDate'),
+  fontScale: toRef(props, 'fontScale'),
+  debugMode: debugModeNormalized,
+  weatherUpdated: toRef(props, 'weatherUpdated'),
+  floodUpdated: toRef(props, 'floodUpdated'),
+  weatherWarnings: toRef(props, 'weatherWarnings'),
+  floodWarnings: toRef(props, 'floodWarnings'),
+})
+
+// Initialize warnings from props (equivalent to created hook)
+initializeWarnings()
+
+// Apply font scale on mount
+onMounted(() => {
+  applyFontScale()
+})
+
+// Expose methods for external access (web component API)
+defineExpose({
+  show: () => {
+    visible.value = true
   },
-  methods: {
-    onLoaded(loaded) {
-      if (loaded !== 0) {
-        this.loading = loaded === -1 ? -1 : 0
-      }
-    },
-    onThemeChanged(newTheme) {
-      this.themeClass = `${
-        newTheme != null && newTheme.length > 0 ? newTheme : this.theme
-      }-theme`
-    },
-    fetchWarnings() {
-      if (this.warnings) {
-        return
-      }
-      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
-      })
-    },
-    show() {
-      this.visible = true
-    },
-    hide() {
-      this.visible = false
-    },
+  hide: () => {
+    visible.value = 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,11 +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">
-    <title>arrow-down-symbol</title>
-    <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="#ffffff" 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,11 +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">
-    <title>arrow-up-symbol</title>
-    <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="#ffffff" 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

@@ -1,13 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
   <defs>
     <clipPath id="outer-clip">
-      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
     </clipPath>
     <clipPath id="inner-clip">
-      <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z"/>
+      <path d="M35 5h16a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H35Z"/>
     </clipPath>
   </defs>
-  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#767676" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
-  <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+  <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

@@ -1,13 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
   <defs>
     <clipPath id="outer-clip">
-      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
     </clipPath>
     <clipPath id="inner-clip">
-      <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z"/>
+      <path d="M4 5h16v20H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4"/>
     </clipPath>
   </defs>
-  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#ebebeb" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
-  <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+  <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>