chore(deps-dev): upgrade prettier-plugin-svelte (#498)

src/UIShell/GlobalHeader/HeaderAction.svelte

@@ -40,22 +40,6 @@
   let refPanel = null;
 </script>
 
-<style>
-  .action-text {
-    font-size: 16px;
-    line-height: 20px;
-    text-decoration: none;
-    color: #fff;
-    width: 100%;
-    padding: 0 1rem;
-  }
-
-  .action-text > span {
-    margin-left: 0.75rem;
-    vertical-align: top;
-  }
-</style>
-
 <svelte:window
   on:click="{({ target }) => {
     if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
@@ -89,9 +73,28 @@
       bind:this="{refPanel}"
       class:bx--header-panel="{true}"
       class:bx--header-panel--expanded="{true}"
-      transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
+      transition:slide="{{
+        ...transition,
+        duration: transition === false ? 0 : transition.duration,
+      }}"
     >
       <slot />
     </div>
   {/if}
 </div>
+
+<style>
+  .action-text {
+    font-size: 16px;
+    line-height: 20px;
+    text-decoration: none;
+    color: #fff;
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .action-text > span {
+    margin-left: 0.75rem;
+    vertical-align: top;
+  }
+</style>

src/UIShell/GlobalHeader/HeaderActionLink.svelte

@@ -20,16 +20,6 @@
   import Icon from "../../Icon/Icon.svelte";
 </script>
 
-<style>
-  .action-link {
-    text-align: center;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    padding-top: 10px;
-  }
-</style>
-
 <a
   bind:this="{ref}"
   class:bx--header__action="{true}"
@@ -41,3 +31,13 @@
 >
   <Icon render="{icon}" />
 </a>
+
+<style>
+  .action-link {
+    text-align: center;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-top: 10px;
+  }
+</style>

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -54,6 +54,87 @@
   $: showResults = $searchStore ? true : false;
 </script>
 
+<svelte:window
+  on:mouseup="{({ target }) => {
+    if (target && elTypeSearch) {
+      if (!elTypeSearch.contains(target)) {
+        searchIsActive = false;
+        isSearchFocus = false;
+      }
+    }
+  }}"
+/>
+
+<div
+  bind:this="{elTypeSearch}"
+  role="search"
+  class="search-wrapper"
+  class:search-wrapper-hidden="{!searchIsActive}"
+  class:search-focus="{isSearchFocus || searchIsActive}"
+>
+  <div
+    id="right-panel-action-search"
+    class="search-wrapper-2"
+    role="combobox"
+    aria-expanded="{searchIsActive}"
+  >
+    <button
+      tabindex="{searchTabIndex}"
+      aria-label="Search"
+      class:bx--header__action="{true}"
+      class:btn-search="{true}"
+      class:btn-search-disabled="{searchIsActive}"
+      on:click="{() => {
+        isSearchFocus = true;
+        searchIsActive = true;
+        dispatch('focusInputSearch');
+      }}"
+      type="button"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Search" tabindex="0" render="{Search20}" />
+    </button>
+    <input
+      bind:this="{elInput}"
+      id="input-search-field"
+      type="text"
+      autocomplete="off"
+      tabindex="{closeTabIndex}"
+      class="input-search"
+      class:input-hidden="{!searchIsActive}"
+      placeholder="Search"
+      on:focus="{() => dispatch('focusInputSearch')}"
+      on:focusout="{() => dispatch('focusOutInputSearch')}"
+      on:input="{dispatchInputs}"
+    />
+    <button
+      id="right-panel-close-search"
+      tabindex="{closeTabIndex}"
+      class:bx--header__action="{true}"
+      class:btn-clear="{true}"
+      class:btn-clear-hidden="{!searchIsActive}"
+      type="button"
+      aria-label="Clear search"
+      on:click="{() => {
+        isSearchFocus = false;
+        searchIsActive = false;
+        searchStore.clear();
+      }}"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Close" tabindex="0" render="{Close20}" />
+    </button>
+  </div>
+</div>
+
 <style>
   .search-wrapper {
     position: relative;
@@ -140,84 +221,3 @@
     display: none;
   }
 </style>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
-  }}"
-/>
-
-<div
-  bind:this="{elTypeSearch}"
-  role="search"
-  class="search-wrapper"
-  class:search-wrapper-hidden="{!searchIsActive}"
-  class:search-focus="{isSearchFocus || searchIsActive}"
->
-  <div
-    id="right-panel-action-search"
-    class="search-wrapper-2"
-    role="combobox"
-    aria-expanded="{searchIsActive}"
-  >
-    <button
-      tabindex="{searchTabIndex}"
-      aria-label="Search"
-      class:bx--header__action="{true}"
-      class:btn-search="{true}"
-      class:btn-search-disabled="{searchIsActive}"
-      on:click="{() => {
-        isSearchFocus = true;
-        searchIsActive = true;
-        dispatch('focusInputSearch');
-      }}"
-      type="button"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
-    </button>
-    <input
-      bind:this="{elInput}"
-      id="input-search-field"
-      type="text"
-      autocomplete="off"
-      tabindex="{closeTabIndex}"
-      class="input-search"
-      class:input-hidden="{!searchIsActive}"
-      placeholder="Search"
-      on:focus="{() => dispatch('focusInputSearch')}"
-      on:focusout="{() => dispatch('focusOutInputSearch')}"
-      on:input="{dispatchInputs}"
-    />
-    <button
-      id="right-panel-close-search"
-      tabindex="{closeTabIndex}"
-      class:bx--header__action="{true}"
-      class:btn-clear="{true}"
-      class:btn-clear-hidden="{!searchIsActive}"
-      type="button"
-      aria-label="Clear search"
-      on:click="{() => {
-        isSearchFocus = false;
-        searchIsActive = false;
-        searchStore.clear();
-      }}"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
-    </button>
-  </div>
-</div>

src/UIShell/GlobalHeader/HeaderPanelDivider.svelte

@@ -1,3 +1,9 @@
+<li class="subject-divider">
+  <span>
+    <slot />
+  </span>
+</li>
+
 <style>
   .subject-divider {
     color: #525252;
@@ -14,9 +20,3 @@
     color: #c6c6c6;
   }
 </style>
-
-<li class="subject-divider">
-  <span>
-    <slot />
-  </span>
-</li>