@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.24

package/src/notifier/notifierComponent.vue

@@ -2,17 +2,17 @@
   <div>
     <v-snackbar
       dark
-      v-for="(notification) in notifications"
+      v-for="notification in notifications"
       :key="notification.id"
       v-model="notification.open"
       :timeout="notification.timeout"
     >
-      <v-icon
-        :color="notification.type"
-      >
+      <v-icon :color="notification.type">
         {{ icon[notification.type] }}
       </v-icon>
-      <span class="snack-title">{{ $t(notification.title || defaultTitle[notification.type]) }}</span>
+      <span class="snack-title">{{
+        $t(notification.title || defaultTitle[notification.type])
+      }}</span>
       <template #action="{ attrs }">
         <VcsButton
           icon="mdi-close"
@@ -62,23 +62,23 @@
 </script>
 
 <style lang="scss" scoped>
-.v-snack{
-  ::v-deep{
-    .v-snack__content{
-      display: grid;
-      gap: 8px 4px;
-      grid-template-columns: 20px auto;
-      .v-icon{
-        grid-row-start: 1;
-        grid-row-end: 3;
-        align-self: start;
-        font-size: 17px;
+  .v-snack {
+    ::v-deep {
+      .v-snack__content {
+        display: grid;
+        gap: 8px 4px;
+        grid-template-columns: 20px auto;
+        .v-icon {
+          grid-row-start: 1;
+          grid-row-end: 3;
+          align-self: start;
+          font-size: 17px;
+        }
+      }
+      .v-snack__action {
+        align-self: flex-start;
+        margin-top: 4px;
       }
-    }
-    .v-snack__action{
-      align-self: flex-start;
-      margin-top: 4px;
     }
   }
-}
 </style>

package/src/pluginHelper.js

@@ -61,7 +61,9 @@ export function getPluginAssetUrl(app, pluginName, asset) {
 export function isValidPackageName(name) {
   check(name, String);
 
-  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    name,
+  );
 }
 
 /**
@@ -73,9 +75,15 @@ export async function loadPlugin(name, config) {
   let module = config.entry;
 
   if (!/^(https?:\/\/|\/)/.test(module)) {
-    module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
+    module = `${window.location.origin}${window.location.pathname.replace(
+      /\/?$/,
+      '/',
+    )}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
+  } else if (module === 'http://localhost/_test') {
+    // early escape to bypass module loading for testing, see VcsUiApp.spec.js
+    return null;
   }
 
   // if (!context.security.isTrustedUrl(module)) { XXX missing pipeline security
@@ -85,13 +93,16 @@ export async function loadPlugin(name, config) {
 
   try {
     let plugin;
-    if (window.VcsPluginLoaderFunction) { // TODO PluginLoaderfunction needs to be documented.
+    if (window.VcsPluginLoaderFunction) {
+      // TODO PluginLoaderfunction needs to be documented.
       plugin = await window.VcsPluginLoaderFunction(name, module);
     } else {
       plugin = await import(/* @vite-ignore */ module);
     }
     if (plugin.default == null || typeof plugin.default !== 'function') {
-      getLogger().error(`plugin ${name} does not provide a default exported function`);
+      getLogger().error(
+        `plugin ${name} does not provide a default exported function`,
+      );
       return null;
     }
     const baseUrl = new URL(module);
@@ -128,9 +139,7 @@ export function getPluginEntry(base, pluginBase) {
   }
   const baseSubs = baseUrl.pathname.split('/');
   const pluginSubs = pluginBaseUrl.pathname.split('/');
-  return pluginSubs
-    .filter((sub, idx) => sub !== baseSubs[idx])
-    .join('/');
+  return pluginSubs.filter((sub, idx) => sub !== baseSubs[idx]).join('/');
 }
 
 /**
@@ -140,7 +149,10 @@ export function getPluginEntry(base, pluginBase) {
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
   serializedPlugin.name = plugin.name;
-  serializedPlugin.entry = getPluginEntry(window.location.href, plugin[pluginBaseUrlSymbol]);
+  serializedPlugin.entry = getPluginEntry(
+    window.location.href,
+    plugin[pluginBaseUrlSymbol],
+  );
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;
@@ -151,7 +163,9 @@ export function serializePlugin(plugin) {
  * @returns {Promise<VcsPlugin>}
  */
 export async function deserializePlugin(serializedPlugin) {
-  const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
+  const reincarnation = await serializedPlugin[pluginFactorySymbol](
+    serializedPlugin,
+  );
   reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
   reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
   return reincarnation;

package/src/search/resultItem.vue

@@ -1,17 +1,11 @@
 <template>
-  <div
-    class="ma-1 d-flex flex-row align-center"
-    v-if="item"
-  >
+  <div class="ma-2 d-flex flex-row align-center" v-if="item">
     <v-list-item-icon v-if="item.icon" class="px-1">
       <v-icon>
         {{ item.icon }}
       </v-icon>
     </v-list-item-icon>
-    <div
-      class="px-2 d-flex align-center"
-      :title="$t('search.select')"
-    >
+    <div class="px-2 d-flex align-center" :title="$t('search.select')">
       <span v-html="marked" />
     </div>
     <VcsActionButtonList
@@ -38,11 +32,14 @@
   function markText(text, query) {
     let replacement = text;
     if (query) {
-      const partials = query.split(/[.,\s]/)
-        .filter(partial => partial.trim());
+      const partials = query
+        .split(/[.,\s]/)
+        .filter((partial) => partial.trim());
       partials.forEach((partial) => {
-        replacement = replacement
-          .replaceAll(new RegExp(`(^|[^>])(${partial})`, 'ig'), '<span class="primary--text">$2</span>');
+        replacement = replacement.replaceAll(
+          new RegExp(`(^|[^>])(${partial})`, 'ig'),
+          '<span class="primary--text">$2</span>',
+        );
       });
     }
     return replacement;
@@ -84,6 +81,4 @@
   };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/search/resultsComponent.vue

@@ -1,22 +1,13 @@
 <template>
   <v-list dense class="ma-0 overflow-y-auto vcs-search-results">
-    <v-list-item-group
-      v-model="highlighted"
-    >
-      <v-list-item
-        v-for="(item, index) in results"
-        :key="index"
-        class="px-0"
-      >
+    <v-list-item-group v-model="highlighted">
+      <v-list-item v-for="(item, index) in results" :key="index" class="px-0">
         <v-list-item-content>
-          <ResultItem
-            :item="item"
-            :query="query"
-            class="cursor-pointer"
-          />
+          <ResultItem :item="item" :query="query" class="cursor-pointer" />
           <v-divider
             v-if="index < results.length - 1"
             :key="index"
+            class="base lighten-3"
           />
         </v-list-item-content>
       </v-list-item>
@@ -26,7 +17,13 @@
 
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
-  import { VDivider, VList, VListItem, VListItemContent, VListItemGroup } from 'vuetify/lib';
+  import {
+    VDivider,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemGroup,
+  } from 'vuetify/lib';
   import ResultItem from './resultItem.vue';
 
   /**
@@ -59,16 +56,23 @@
       const highlightedRef = ref(-1);
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const selectedListener = app.featureInfo.featureChanged.addEventListener((feature) => {
-        if (highlightedRef.value >= 0) {
-          if (feature && props.results[highlightedRef.value].feature === feature) {
-            return;
+      const selectedListener = app.featureInfo.featureChanged.addEventListener(
+        (feature) => {
+          if (highlightedRef.value >= 0) {
+            if (
+              feature &&
+              props.results[highlightedRef.value].feature === feature
+            ) {
+              return;
+            }
+            highlightedRef.value = -1;
+          } else if (feature) {
+            highlightedRef.value = props.results.findIndex(
+              (r) => r.feature === feature,
+            );
           }
-          highlightedRef.value = -1;
-        } else if (feature) {
-          highlightedRef.value = props.results.findIndex(r => r.feature === feature);
-        }
-      });
+        },
+      );
 
       onUnmounted(() => {
         selectedListener();
@@ -76,7 +80,9 @@
 
       return {
         highlighted: computed({
-          get() { return highlightedRef.value; },
+          get() {
+            return highlightedRef.value;
+          },
           set(value) {
             highlightedRef.value = value;
             if (value >= 0) {

package/src/search/search.js

@@ -6,14 +6,18 @@ import {
   VcsEvent,
   vcsLayerName,
   VectorLayer,
-  VectorStyleItem, Viewpoint,
+  VectorStyleItem,
+  Viewpoint,
 } from '@vcmap/core';
 import { shallowRef } from 'vue';
 import { check } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
+import {
+  getDefaultPrimaryColor,
+  getColorByKey,
+} from '../vuePlugins/vuetify.js';
 import { getViewpointFromFeature } from '../actions/actionHelper.js';
 
 /**
@@ -27,7 +31,6 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @property {import("ol").Feature|undefined} [feature] If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
  */
 
-
 /**
  * @interface SearchImpl
  * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
@@ -43,7 +46,9 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  */
 function getPointResultIcon(color) {
   return {
-    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(color)}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
+      color,
+    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
     scale: 1,
     color,
   };
@@ -104,7 +109,6 @@ function setupSearchResultLayer(app) {
  */
 const searchImplOwnerSymbol = Symbol('featureInfoView');
 
-
 /**
  * Collection of SearchImpl
  * @extends {IndexedCollection<SearchImpl<ResultItem>>}
@@ -185,7 +189,9 @@ class Search extends IndexedCollection {
     check(owner, [String, vcsAppSymbol]);
     check(item.search, Function);
     if (item.name !== owner) {
-      getLogger('Search').warning('SearchImplementations must be named as the plugin they are owned by.');
+      getLogger('Search').warning(
+        'SearchImplementations must be named as the plugin they are owned by.',
+      );
     }
     item[searchImplOwnerSymbol] = owner;
     super.add(item, index);
@@ -212,8 +218,12 @@ class Search extends IndexedCollection {
    */
   async search(q) {
     this.clearResults();
-    const promises = await Promise.allSettled([...this._array].map(impl => impl.search(q)));
-    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    const promises = await Promise.allSettled(
+      [...this._array].map((impl) => impl.search(q)),
+    );
+    const isAborted = promises.some(
+      (r) => r.status === 'rejected' && r.reason?.name === 'AbortError',
+    );
     if (!isAborted) {
       const results = promises
         .map((o) => {
@@ -226,7 +236,7 @@ class Search extends IndexedCollection {
         .flat();
 
       this._currentResults.value = results
-        .filter(r => r.feature || r.clicked)
+        .filter((r) => r.feature || r.clicked)
         .map((item) => {
           if (item.feature) {
             this._resultLayer.addFeatures([item.feature]);
@@ -254,13 +264,17 @@ class Search extends IndexedCollection {
    * @returns {Promise<Array<string>>}
    */
   async suggest(q) {
-    const promises = await Promise.allSettled([...this._array].map((impl) => {
-      if (impl.suggest) {
-        return impl.suggest(q);
-      }
-      return Promise.resolve([]);
-    }));
-    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    const promises = await Promise.allSettled(
+      [...this._array].map((impl) => {
+        if (impl.suggest) {
+          return impl.suggest(q);
+        }
+        return Promise.resolve([]);
+      }),
+    );
+    const isAborted = promises.some(
+      (r) => r.status === 'rejected' && r.reason?.name === 'AbortError',
+    );
     if (isAborted) {
       return [];
     }
@@ -280,7 +294,7 @@ class Search extends IndexedCollection {
    * Aborting any ongoing request
    */
   abort() {
-    [...this._array].forEach(impl => impl.abort?.());
+    [...this._array].forEach((impl) => impl.abort?.());
   }
 
   /**
@@ -306,7 +320,10 @@ class Search extends IndexedCollection {
     }
     this._resultLayer.removeAllFeatures();
     this._resultLayer.deactivate();
-    if (this._app.featureInfo.selectedFeature?.[vcsLayerName] === this._resultLayer.name) {
+    if (
+      this._app.featureInfo.selectedFeature?.[vcsLayerName] ===
+      this._resultLayer.name
+    ) {
       this._app.featureInfo.clear();
     }
   }
@@ -315,7 +332,7 @@ class Search extends IndexedCollection {
    * @inheritDoc
    */
   destroy() {
-    [...this._array].forEach(impl => impl.destroy());
+    [...this._array].forEach((impl) => impl.destroy());
     this.resultsChanged.destroy();
     this._destroyResultLayer();
     super.destroy();

package/src/search/searchComponent.vue

@@ -1,13 +1,9 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 mx-1">
-      <v-icon
-        class="mx-2"
-      >
-        $vcsSearch
-      </v-icon>
+    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+      <v-icon class="pa-1"> $vcsSearch </v-icon>
       <VcsTextField
-        class="font-size-14 d-inline-block user-select-none w-full mx-2"
+        class="d-inline-block user-select-none w-full mx-1"
         autofocus
         :loading="searching"
         clearable
@@ -18,7 +14,7 @@
         @input="reset"
       />
     </span>
-    <v-divider class="mt-1" v-if="!!results.length" />
+    <v-divider class="mt-1 base darken-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
     <v-divider v-if="!!results.length" />
     <VcsButton
@@ -31,8 +27,22 @@
   </v-sheet>
 </template>
 
-<style>
-
+<style lang="scss" scoped>
+  ::v-deep {
+    .v-input {
+      fieldset {
+        padding: 0 !important;
+      }
+      fieldset,
+      input {
+        border-color: transparent !important;
+      }
+    }
+    .v-icon .v-icon__component {
+      width: 16px;
+      height: 16px;
+    }
+  }
 </style>
 
 <script>

package/src/setup.js

@@ -1,9 +1,9 @@
-import Vue from 'vue';
-
-// eslint-disable-next-line no-unused-vars
-import * as core from '@vcmap/core';
-// pull in entire core for vcsClassRegistry
-
-Vue.config.productionTip = false;
-
-window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';
+import Vue from 'vue';
+
+// eslint-disable-next-line no-unused-vars
+import * as core from '@vcmap/core';
+// pull in entire core for vcsClassRegistry
+
+Vue.config.productionTip = false;
+
+window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';

package/src/state.js

@@ -200,20 +200,31 @@ function writeUrlAppState(state, maxLength) {
 
   state.layers.forEach((layerState) => {
     const layerUrlState = writeUrlLayerState(layerState);
-    if ((JSON.stringify(urlState).length + JSON.stringify(layerUrlState).length) < maxLength) {
+    if (
+      JSON.stringify(urlState).length + JSON.stringify(layerUrlState).length <
+      maxLength
+    ) {
       urlState[3].push(layerUrlState);
     }
   });
 
   state.plugins.forEach((pluginState) => {
     const urlPluginState = writeUrlPluginState(pluginState);
-    if ((JSON.stringify(urlState).length + JSON.stringify(urlPluginState).length) < maxLength) {
+    if (
+      JSON.stringify(urlState).length + JSON.stringify(urlPluginState).length <
+      maxLength
+    ) {
       urlState[4].push(urlPluginState);
     }
   });
 
-  if (urlState[3].length !== state.layers.length || urlState[4].length !== state.plugins.length) {
-    getLogger('StateManagement').warning('State too large for URL: Not all layers and plugins are represented');
+  if (
+    urlState[3].length !== state.layers.length ||
+    urlState[4].length !== state.plugins.length
+  ) {
+    getLogger('StateManagement').warning(
+      'State too large for URL: Not all layers and plugins are represented',
+    );
   }
 
   return urlState;
@@ -230,7 +241,9 @@ export function getStateFromURL(url) {
     try {
       return parseUrlAppState(JSON.parse(url.searchParams.get('state')));
     } catch (e) {
-      getLogger('StateManager').error('failed to parse the state URL parameter');
+      getLogger('StateManager').error(
+        'failed to parse the state URL parameter',
+      );
     }
   }
   return createEmptyState();
@@ -252,5 +265,8 @@ export function setStateToUrl(state, url) {
   check(url, URL);
 
   const maxLength = MAX_URL_LENGTH - url.toString().length;
-  url.searchParams.set('state', JSON.stringify(writeUrlAppState(state, maxLength)));
+  url.searchParams.set(
+    'state',
+    JSON.stringify(writeUrlAppState(state, maxLength)),
+  );
 }

package/src/styles/_typography.scss

@@ -36,5 +36,4 @@
     font-size: 12px;
     font-weight: normal;
   }
-
 }

package/src/styles/shades.scss

@@ -1,2 +1,4 @@
-
-$shades: ('black': #222222, 'white': #FFFFFF);
+$shades: (
+  'black': #222222,
+  'white': #ffffff,
+);

package/src/styles/utils/_border.scss

@@ -4,4 +4,4 @@
 
 .border-2--primary {
   border: 2px solid var(--v-primary-base);
-}
+}

package/src/styles/utils/_display.scss

@@ -1,3 +1,3 @@
 .d-contents {
   display: contents;
-}
+}