@hcengineering/ui 0.7.0

package/src/components/internal/SettingsPopup.svelte

@@ -0,0 +1,246 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { type IntlString, getMetadata } from '@hcengineering/platform'
+  import { getContext } from 'svelte'
+  import { type Readable } from 'svelte/store'
+
+  import FontSize from './icons/FontSize.svelte'
+  import Language from './icons/Language.svelte'
+
+  import ThemeButton from './ThemeButton.svelte'
+  import ui, {
+    Html,
+    Icon,
+    Label,
+    ModernPopup,
+    showPopup,
+    deviceOptionsStore as deviceInfo,
+    modalStore,
+    eventToHTMLElement
+  } from '../..'
+  import EmojiStyle from './icons/EmojiStyle.svelte'
+
+  const { currentFontSize, setFontSize } = getContext<{
+    currentFontSize: Readable<string>
+    setFontSize: (value: string) => void
+  }>('fontsize')
+
+  const { currentTheme, setTheme } = getContext<{ currentTheme: Readable<string>, setTheme: (theme: string) => void }>(
+    'theme'
+  )
+
+  const { currentLanguage, setLanguage } = getContext<{
+    currentLanguage: Readable<string>
+    setLanguage: (language: string) => void
+  }>('lang')
+
+  const { currentEmoji, setEmoji } = getContext<{
+    currentEmoji: Readable<string>
+    setEmoji: (emoji: string) => void
+  }>('emoji')
+
+  const fontsizes: Array<{ id: string, label: IntlString, size: number }> = [
+    { id: 'normal-font', label: ui.string.Spacious, size: 16 },
+    { id: 'small-font', label: ui.string.Compact, size: 14 }
+  ]
+
+  const themes: Array<{ id: string, label: IntlString }> = [
+    { id: 'theme-light', label: ui.string.ThemeLight },
+    { id: 'theme-dark', label: ui.string.ThemeDark },
+    { id: 'theme-system', label: ui.string.ThemeSystem }
+  ]
+
+  const emojis: Array<{ id: string, label: IntlString }> = [
+    { id: 'emoji-system', label: ui.string.EmojiSystem },
+    { id: 'emoji-noto', label: ui.string.EmojiNoto }
+  ]
+
+  const uiLangs = new Set(getMetadata(ui.metadata.Languages))
+  const langs = [
+    { id: 'en', label: ui.string.English, logo: '&#x1F1FA;&#x1F1F8;' },
+    { id: 'pt', label: ui.string.Portuguese, logo: '&#x1F1F5;&#x1F1F9;' },
+    { id: 'es', label: ui.string.Spanish, logo: '&#x1F1EA;&#x1F1F8;' },
+    { id: 'ru', label: ui.string.Russian, logo: '&#x1F1F7;&#x1F1FA;' },
+    { id: 'zh', label: ui.string.Chinese, logo: '&#x1F1E8;&#x1F1F3;' },
+    { id: 'fr', label: ui.string.French, logo: '&#x1F1EB;&#x1F1F7;' },
+    { id: 'it', label: ui.string.Italian, logo: '&#x1F1EE;&#x1F1F9;' },
+    { id: 'cs', label: ui.string.Czech, logo: '&#x1F1E8;&#x1F1FF;' },
+    { id: 'de', label: ui.string.German, logo: '&#x1F1E9;&#x1F1EA;' },
+    { id: 'ja', label: ui.string.Japanese, logo: '&#x1F1EF;&#x1F1F5;' }
+  ].filter((lang) => uiLangs.has(lang.id))
+
+  if (langs.findIndex((l) => l.id === $currentLanguage) < 0 && langs.length !== 0) {
+    setLanguage(langs[0].id)
+  }
+
+  if (langs.length === 0) {
+    console.error(
+      `List of configured UI languages: [${getMetadata(ui.metadata.Languages)?.join(
+        ', '
+      )}] doesn't contain any languages available in the app. Please check you configuration.`
+    )
+  }
+
+  function selectFontSize (size: string): void {
+    if ($currentFontSize === size) return
+    setFontSize(size)
+    $modalStore = $modalStore
+  }
+
+  function selectTheme (theme: string): void {
+    if ($currentTheme === theme) return
+    setTheme(theme)
+  }
+
+  function selectLanguage (language: string): void {
+    if ($currentLanguage === language) return
+    setLanguage(language)
+  }
+
+  function selectEmoji (emoji: string): void {
+    if ($currentEmoji === emoji) return
+    setEmoji(emoji)
+  }
+
+  $: $deviceInfo.theme = $currentTheme
+  $: fontsize = fontsizes.find((fs) => fs.id === $currentFontSize) ?? fontsizes[0]
+  $: language = langs.find((lang) => lang.id === $currentLanguage) ?? langs[0]
+  $: emoji = emojis.find((e) => e.id === $currentEmoji) ?? emojis[0]
+</script>
+
+<div class="antiPopup thinStyle">
+  <div class="ap-space" />
+
+  <div class="ap-scroll">
+    <div class="ap-box">
+      <div class="flex-row-center m-4">
+        {#each themes as theme}
+          {@const selected = $currentTheme === theme.id}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="statusPopup-option"
+            class:selected
+            on:click={() => {
+              selectTheme(theme.id)
+            }}
+          >
+            <ThemeButton theme={theme.id} focused={$currentTheme} />
+            <span class="label overflow-label">
+              <Label label={theme.label} />
+            </span>
+          </div>
+        {/each}
+      </div>
+
+      <div class="ap-menuItem separator halfMargin" />
+
+      <button
+        class="ap-menuItem antiPopup-submenu withIcon noMargin flex-row-center flex-grow"
+        on:click={(ev) => {
+          const items = fontsizes.map((p) => {
+            return {
+              ...p,
+              icon: FontSize,
+              iconProps: {
+                size: p.size
+              }
+            }
+          })
+          showPopup(ModernPopup, { items, selected: fontsize.id }, eventToHTMLElement(ev), (id) => {
+            if (id !== undefined) {
+              selectFontSize(id)
+            }
+          })
+        }}
+      >
+        <div class="flex-between flex-grow">
+          <div class="flex-row-center">
+            <div class="icon mr-2"><FontSize size={'16px'} /></div>
+            <span class="label font-medium"><Label label={ui.string.FontSize} /></span>
+          </div>
+          <div class="flex-row-center pr-4">
+            <Label label={fontsize.label} />
+          </div>
+        </div>
+      </button>
+
+      <div class="ap-menuItem separator halfMargin" />
+
+      <button
+        class="ap-menuItem antiPopup-submenu withIcon noMargin flex-row-center flex-grow"
+        on:click={(ev) => {
+          const items = emojis.map((p) => {
+            return {
+              ...p
+            }
+          })
+          showPopup(ModernPopup, { items, selected: emoji.id }, eventToHTMLElement(ev), (id) => {
+            if (id !== undefined) {
+              selectEmoji(id)
+            }
+          })
+        }}
+      >
+        <div class="flex-between flex-grow">
+          <div class="flex-row-center">
+            <div class="icon mr-2"><EmojiStyle size={'16px'} /></div>
+            <span class="label font-medium"><Label label={ui.string.EmojiStyle} /></span>
+          </div>
+          <div class="flex-row-center pr-4">
+            <Label label={emoji.label} />
+          </div>
+        </div>
+      </button>
+
+      <div class="ap-menuItem separator halfMargin" />
+
+      <button
+        class="ap-menuItem antiPopup-submenu withIcon noMargin flex-row-center flex-grow"
+        on:click={(ev) => {
+          const items = langs.map((p) => {
+            return {
+              ...p,
+              icon: Html,
+              iconProps: {
+                value: p.logo
+              }
+            }
+          })
+          showPopup(ModernPopup, { items, selected: language.id }, eventToHTMLElement(ev), (id) => {
+            if (id !== undefined) {
+              selectLanguage(id)
+            }
+          })
+        }}
+      >
+        <div class="flex-between flex-grow">
+          <div class="flex-row-center">
+            <div class="icon mr-2"><Icon icon={Language} size={'small'} /></div>
+            <span class="label font-medium"><Label label={ui.string.Language} /></span>
+          </div>
+          <div class="flex-row-center pr-4">
+            <div class="label text-lgd">
+              <Html value={language.logo} />
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+
+  <div class="ap-space" />
+</div>

package/src/components/internal/ThemeButton.svelte

@@ -0,0 +1,151 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import FontSize from './icons/FontSize.svelte'
+  import CheckCircled from './icons/CheckCircled.svelte'
+
+  export let theme: string
+  export let focused: string
+
+  let btn: HTMLButtonElement
+
+  onMount(() => {
+    if (focused === theme) btn.focus()
+  })
+</script>
+
+<button
+  bind:this={btn}
+  class="antiButton regular sh-no-shape jf-center bs-none no-focus statusPopupThemeButton"
+  class:focused={theme === focused}
+  class:both={theme === 'theme-system'}
+>
+  {#if theme === 'theme-light' || theme === 'theme-system'}
+    <div class="light-container">
+      <div class="paper"><FontSize size={'small'} /></div>
+    </div>
+  {/if}
+  {#if theme === 'theme-dark' || theme === 'theme-system'}
+    <div class="dark-container">
+      <div class="paper"><FontSize size={'small'} /></div>
+    </div>
+  {/if}
+  {#if focused === theme}
+    <CheckCircled />
+  {/if}
+</button>
+
+<style lang="scss">
+  :global(.statusPopupThemeButton svg.check) {
+    position: absolute;
+    bottom: 3px;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+  }
+  .statusPopupThemeButton {
+    position: relative;
+    flex-shrink: 0;
+    width: 76px;
+    height: 56px;
+    border-radius: 6px;
+
+    .light-container {
+      background-color: #f5f5f5;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+
+      .paper {
+        color: #000000cc;
+        background-color: #fff;
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        border-left: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    }
+    .dark-container {
+      background-color: #3f3f3f;
+
+      .paper {
+        color: #ffffffcc;
+        background-color: #161516;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        border-left: 1px solid rgba(255, 255, 255, 0.2);
+      }
+    }
+    .light-container,
+    .dark-container {
+      overflow: hidden;
+      height: 100%;
+
+      .paper {
+        padding: 6px 0 0 6px;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px 0px 5.5px 0px;
+      }
+    }
+    &.both {
+      .light-container {
+        border-right: none;
+        border-radius: 5.75px 0 0 5.75px;
+      }
+      .dark-container {
+        border-radius: 0 5.75px 5.75px 0;
+      }
+      .light-container,
+      .dark-container {
+        width: 50%;
+
+        .paper {
+          margin: 16px 0 0 8px;
+        }
+      }
+    }
+    &:not(.both) {
+      .dark-container {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      .light-container,
+      .dark-container {
+        width: 100%;
+        border-radius: 5.75px;
+
+        .paper {
+          margin: 16px 0 0 16px;
+        }
+      }
+    }
+
+    &:hover:not(:focus) {
+      .light-container .paper {
+        color: #000;
+        background-color: #f2f2f2;
+      }
+      .dark-container .paper {
+        color: #fff;
+        background-color: #222222;
+      }
+    }
+    &.focused::before,
+    &:focus::before {
+      position: absolute;
+      content: '';
+      inset: -3px;
+      border: 1px solid var(--primary-button-default);
+      border-radius: 8.5px;
+      cursor: default;
+    }
+  }
+</style>

package/src/components/internal/icons/CheckCircled.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let fill: string = 'var(--primary-button-default)'
+</script>
+
+<svg class="svg-16px check" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.11101 2.17959C5.26216 1.41042 6.61553 0.999878 8 0.999878C9.85652 0.999878 11.637 1.73738 12.9497 3.05013C14.2625 4.36288 15 6.14336 15 7.99988C15 9.38435 14.5895 10.7377 13.8203 11.8889C13.0511 13.04 11.9579 13.9372 10.6788 14.467C9.3997 14.9968 7.99224 15.1355 6.63437 14.8654C5.2765 14.5953 4.02922 13.9286 3.05026 12.9496C2.07129 11.9707 1.4046 10.7234 1.13451 9.36551C0.86441 8.00764 1.00303 6.60018 1.53285 5.32109C2.06266 4.04201 2.95987 2.94876 4.11101 2.17959ZM11.3536 6.35355C11.5488 6.15829 11.5488 5.84171 11.3536 5.64645C11.1583 5.45118 10.8417 5.45118 10.6464 5.64645L7 9.29289L5.35355 7.64645C5.15829 7.45118 4.84171 7.45118 4.64645 7.64645C4.45118 7.84171 4.45118 8.15829 4.64645 8.35355L6.64645 10.3536C6.84171 10.5488 7.15829 10.5488 7.35355 10.3536L11.3536 6.35355Z"
+  />
+</svg>

package/src/components/internal/icons/Computer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M20.5,3.2h-17C2.5,3.2,1.8,4,1.8,5v10c0,1,0.8,1.8,1.8,1.8h5.2v3H7c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2.5h5H17c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-1.8v-3h5.2c1,0,1.8-0.8,1.8-1.8V5C22.2,4,21.5,3.2,20.5,3.2z M13.8,19.8h-3.5v-3h3.5V19.8z M20.8,15c0,0.1-0.1,0.2-0.2,0.2h-6h-5h-6c-0.1,0-0.2-0.1-0.2-0.2V5c0-0.1,0.1-0.2,0.2-0.2h17c0.1,0,0.2,0.1,0.2,0.2V15z"
+    />
+    <path
+      d="M13,12.8h-2c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2c0.4,0,0.8-0.3,0.8-0.8C13.8,13.1,13.4,12.8,13,12.8z"
+    />
+  </g>
+</svg>

package/src/components/internal/icons/EmojiStyle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} {fill} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10,2c4.4,0,8,3.6,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8C2,5.6,5.6,2,10,2z M10,3c-3.9,0-7,3.1-7,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C17,6.1,13.9,3,10,3z M7.2,12.4c1.5,1.5,3.9,1.6,5.5,0.2l0.2-0.2c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.4,0.1,0.6l-0.1,0.1l0,0c-2,2-5.1,1.9-7.1,0c-0.2-0.2-0.2-0.5,0-0.7C6.6,12.2,7,12.2,7.2,12.4z M12.5,7.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S11.9,7.5,12.5,7.5z M7.5,7.5c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S6.9,7.5,7.5,7.5z"
+  />
+</svg>

package/src/components/internal/icons/FontSize.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M23.8382 23.1294C26.1022 23.1294 27.7617 21.7172 27.7617 19.797V18.7192L24.134 18.9422C22.0501 19.0661 20.9695 19.797 20.9695 21.0854C20.9695 22.3242 22.0886 23.1294 23.8382 23.1294ZM23.3622 25C20.545 25 18.6797 23.4391 18.6797 21.073C18.6797 18.7812 20.5064 17.4309 23.8767 17.2327L27.7617 17.0097V15.8947C27.7617 14.2347 26.6296 13.318 24.5843 13.318C22.9763 13.318 21.7799 14.1108 21.5098 15.3744H19.3615C19.4258 13.1198 21.7027 11.3978 24.61 11.3978C27.8903 11.3978 30 13.0826 30 15.7089V24.8761H27.8775V22.5596H27.826C27.0413 24.0461 25.3047 25 23.3622 25Z"
+  />
+  <path
+    d="M15.5458 24.8761L13.6805 19.7598H6.29658L4.4313 24.8761H2L8.84365 7H11.1334L17.9771 24.8761H15.5458ZM9.94996 9.71301L6.97837 17.8644H12.9987L10.0271 9.71301H9.94996Z"
+  />
+</svg>

package/src/components/internal/icons/Language.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4.68191 1.69187C4.87991 1.49938 4.88436 1.18283 4.69187 0.984833C4.49938 0.786842 4.18283 0.782385 3.98483 0.974878C2.65823 2.26464 1.83337 4.06435 1.83337 6.05505C1.83337 9.59167 4.43291 12.5202 7.83337 13.0729V14.1667H7.00004C6.7239 14.1667 6.50004 14.3906 6.50004 14.6667C6.50004 14.9429 6.7239 15.1667 7.00004 15.1667H9.66671C9.94285 15.1667 10.1667 14.9429 10.1667 14.6667C10.1667 14.3906 9.94285 14.1667 9.66671 14.1667H8.83337V13.1648C8.88878 13.1661 8.94434 13.1667 9.00004 13.1667C10.9518 13.1667 12.7227 12.3918 14.0152 11.1352C14.2132 10.9427 14.2177 10.6262 14.0252 10.4282C13.8327 10.2302 13.5162 10.2257 13.3182 10.4182C12.2056 11.4999 10.6823 12.1667 9.00004 12.1667C5.59037 12.1667 2.83337 9.42653 2.83337 6.05505C2.83337 4.34666 3.54004 2.80204 4.68191 1.69187Z"
+    fill="#84868B"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.1667 6.00004C14.1667 3.14657 11.8535 0.833374 9.00004 0.833374C6.14657 0.833374 3.83337 3.14657 3.83337 6.00004C3.83337 8.85351 6.14657 11.1667 9.00004 11.1667C11.8535 11.1667 14.1667 8.85351 14.1667 6.00004ZM10.4809 2.1042C12.051 2.70134 13.1667 4.2204 13.1667 6.00004C13.1667 6.05806 13.1655 6.11581 13.1632 6.17325C12.6127 6.21617 12.2572 6.46117 12.0059 6.6343L11.9834 6.6498C11.7159 6.83381 11.622 6.88121 11.4314 6.84309C10.588 6.67441 9.91228 6.65022 9.42916 6.87348C9.16608 6.99505 8.96919 7.18556 8.84651 7.43242C8.7297 7.66746 8.69443 7.92441 8.69443 8.16744C8.69443 8.59239 8.69082 8.71663 8.66595 8.81643C8.6436 8.90609 8.60163 8.98698 8.4156 9.3069C8.29623 9.51219 8.17257 9.78133 8.16691 10.0834C6.26494 9.69742 4.83337 8.01591 4.83337 6.00004C4.83337 4.93814 5.23061 3.96903 5.8846 3.23318C5.99594 3.29692 6.12615 3.41985 6.35256 3.65906C7.16302 4.51543 8.09936 4.69029 8.81521 4.31208C9.07412 4.17529 9.24817 3.99547 9.35513 3.77965C9.44011 3.60819 9.4714 3.42827 9.48901 3.32701L9.49446 3.29611C9.51553 3.18052 9.52807 3.15412 9.53787 3.13932C9.54107 3.13436 9.56782 3.09285 9.69883 3.04094C10.1188 2.87452 10.3883 2.54386 10.4722 2.14918C10.4754 2.13421 10.4783 2.11921 10.4809 2.1042ZM12.5502 7.47369C12.7083 7.36492 12.8367 7.27751 12.984 7.22419C12.4784 8.87157 10.9791 10.0842 9.18534 10.1627C9.18342 10.1598 9.18179 10.1571 9.1804 10.1548C9.17035 10.1376 9.16748 10.1253 9.16683 10.1108C9.16493 10.0679 9.18335 9.97592 9.28007 9.80958L9.30549 9.76591C9.45445 9.51018 9.57539 9.30254 9.63627 9.05825C9.68712 8.8542 9.69367 8.63306 9.69439 8.35499C9.6945 8.31317 9.69448 8.27006 9.69445 8.22552L9.69443 8.16744C9.69443 8.01307 9.7182 7.92539 9.74202 7.87746C9.75998 7.84133 9.78532 7.8105 9.84864 7.78124C9.9615 7.72909 10.1734 7.69224 10.5449 7.72185C10.732 7.73676 10.9596 7.76852 11.2353 7.82366C11.86 7.94863 12.264 7.67061 12.5407 7.48024L12.5502 7.47369ZM9.4995 1.863C9.33574 1.84344 9.16907 1.83337 9.00004 1.83337C8.12977 1.83337 7.32181 2.10018 6.6535 2.55646C6.80213 2.67993 6.93823 2.82311 7.07885 2.97168C7.66786 3.59405 8.13098 3.54259 8.34807 3.4279C8.43679 3.38102 8.45311 3.34785 8.45873 3.33641L8.45914 3.33558C8.47687 3.29981 8.48428 3.26156 8.51067 3.11678C8.53273 2.99578 8.5711 2.78807 8.7039 2.58751C8.84434 2.37543 9.05399 2.22081 9.33046 2.11126C9.44573 2.06559 9.4812 2.00164 9.49401 1.94135C9.49878 1.9189 9.50098 1.89249 9.4995 1.863Z"
+    fill="#84868B"
+  />
+</svg>

package/src/components/internal/icons/Phone.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M17,1.2H7c-1.2,0-2.2,1-2.2,2.2v17c0,1.2,1,2.2,2.2,2.2h10c1.2,0,2.2-1,2.2-2.2v-17C19.2,2.3,18.2,1.2,17,1.2z M17.8,20.5c0,0.4-0.3,0.8-0.8,0.8H7c-0.4,0-0.8-0.3-0.8-0.8v-17c0-0.4,0.3-0.8,0.8-0.8h10c0.4,0,0.8,0.3,0.8,0.8V20.5z"
+    />
+    <path
+      d="M11,5.8h2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8C10.2,5.4,10.6,5.8,11,5.8z"
+    />
+    <path
+      d="M14,18.2h-4c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8 C14.8,18.6,14.4,18.2,14,18.2z"
+    />
+  </g>
+</svg>

package/src/components/internal/icons/Search.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: string = '16px'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg style:width={size} style:height={size} viewBox="0 0 32 32" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M20.0391 21.4533C18.1316 23.0434 15.6775 24 13 24C6.92487 24 2 19.0751 2 13C2 6.92487 6.92487 2 13 2C19.0751 2 24 6.92487 24 13C24 15.6775 23.0434 18.1316 21.4533 20.0391L28.7071 27.2929C29.0976 27.6834 29.0976 28.3166 28.7071 28.7071C28.3166 29.0976 27.6834 29.0976 27.2929 28.7071L20.0391 21.4533ZM22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4C17.9706 4 22 8.02944 22 13Z"
+  />
+</svg>

package/src/components/internal/icons/Settings.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.01306 5.16635C6.44825 5.16635 5.17975 6.43488 5.17975 7.99968C5.17975 9.56449 6.44825 10.833 8.01306 10.833C9.57787 10.833 10.8464 9.56449 10.8464 7.99968C10.8464 6.43488 9.57787 5.16635 8.01306 5.16635ZM6.17975 7.99968C6.17975 6.98715 7.00054 6.16635 8.01306 6.16635C9.02559 6.16635 9.8464 6.98716 9.8464 7.99968C9.8464 9.01221 9.02559 9.83302 8.01306 9.83302C7.00054 9.83302 6.17975 9.01221 6.17975 7.99968Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9.01276 0.857195C9.19802 0.878387 9.39287 0.927398 9.57467 1.0587C9.75638 1.18994 9.86431 1.35948 9.94284 1.5286L10.3687 2.74466C10.5232 3.13398 11.0213 3.40667 11.4315 3.31757C11.5632 3.28045 11.6955 3.24015 11.8283 3.19968C12.1669 3.09648 12.5089 2.99226 12.8544 2.93741C13.0503 2.90631 13.2645 2.90235 13.486 2.99244C13.7075 3.08252 13.8582 3.23486 13.9769 3.39372C14.3457 3.88756 14.6868 4.48217 14.9302 5.04432C15.0048 5.21665 15.0598 5.41117 15.0363 5.6355C15.0127 5.85987 14.9184 6.03886 14.8096 6.1919C14.5901 6.50055 14.3256 6.78305 14.0636 7.06289C13.9561 7.17773 13.849 7.29211 13.7457 7.40767C13.6614 7.52189 13.5733 7.77006 13.5733 8.00482C13.5733 8.23975 13.6613 8.48779 13.7456 8.60202C13.8491 8.71767 13.9563 8.83215 14.0638 8.94707C14.3257 9.22686 14.5901 9.50931 14.8096 9.81784C14.9184 9.97089 15.0127 10.1497 15.0363 10.3741C15.0598 10.5985 15.0048 10.7931 14.9302 10.9654C14.8069 11.2502 14.6439 11.5211 14.4824 11.7897C14.4218 11.8905 14.3613 11.991 14.3032 12.0918C14.2894 12.1158 14.2756 12.14 14.2617 12.1643C14.069 12.5015 13.8614 12.8646 13.4861 13.0172C13.2646 13.1074 13.0503 13.1034 12.8544 13.0723C12.509 13.0175 12.167 12.9132 11.8284 12.8101C11.6956 12.7696 11.5633 12.7292 11.4315 12.6921C11.0204 12.6028 10.5236 12.8745 10.3688 13.265C10.3314 13.3768 10.2958 13.4902 10.2601 13.604C10.1669 13.9013 10.0728 14.2013 9.94284 14.4812C9.8643 14.6503 9.75643 14.8198 9.57471 14.9511C9.3929 15.0824 9.19801 15.1314 9.01274 15.1526C8.38742 15.2241 7.6923 15.2237 7.07082 15.1526C6.88555 15.1314 6.69072 15.0824 6.5089 14.9512C6.32721 14.8199 6.21923 14.6503 6.1407 14.4812C6.01083 14.2014 5.91682 13.9017 5.8236 13.6044C5.78787 13.4905 5.75226 13.377 5.71478 13.2651C5.56037 12.8757 5.06221 12.603 4.65206 12.6921C4.52027 12.7292 4.38797 12.7696 4.25517 12.81C3.91655 12.9132 3.57459 13.0175 3.22911 13.0723C3.03328 13.1034 2.81907 13.1074 2.59758 13.0173C2.37612 12.9272 2.2253 12.7748 2.10668 12.616L1.15338 10.9654C1.07875 10.7931 1.0237 10.5986 1.04727 10.3742C1.07084 10.1498 1.16513 9.97089 1.27398 9.81783C1.49336 9.50935 1.75777 9.22689 2.01966 8.94712C2.12726 8.83217 2.23444 8.71768 2.3379 8.60201C2.42218 8.48782 2.51023 8.23979 2.51023 8.00482C2.51023 7.76996 2.42214 7.52183 2.3379 7.40771C2.23442 7.29203 2.12723 7.17751 2.0196 7.06254C1.75773 6.7828 1.49334 6.50036 1.27398 6.1919C1.16514 6.03886 1.07084 5.85998 1.04727 5.63558C1.02369 5.4112 1.07875 5.21664 1.15337 5.0443C1.39655 4.48272 1.73828 3.88698 2.10669 3.39371C2.22534 3.23486 2.37605 3.08252 2.5975 2.99244C2.81904 2.90235 3.03327 2.90631 3.22911 2.93741C3.57459 2.99226 3.91663 3.09649 4.2553 3.19969C4.38807 3.24016 4.52034 3.28046 4.65208 3.31757C4.93548 3.37913 5.16239 3.26963 5.39858 3.13335C5.72825 2.91643 5.84685 2.48578 5.95934 2.07736C6.01356 1.88047 6.06636 1.68875 6.1407 1.52863C6.21923 1.3595 6.32712 1.18995 6.50884 1.0587C6.69066 0.927409 6.88552 0.878391 7.07081 0.857195C7.69227 0.786104 8.38744 0.785663 9.01276 0.857195ZM3.51023 8.00482C3.51023 7.57992 3.36494 7.09428 3.1153 6.77828C2.97191 6.59675 2.81241 6.42982 2.65287 6.26284C2.45471 6.05544 2.25648 5.84797 2.08891 5.61235C2.0401 5.54371 2.03744 5.51924 2.07103 5.44167C2.28382 4.95027 2.58553 4.42372 2.90789 3.99211C2.9611 3.92087 2.98456 3.9111 3.0723 3.92504C3.38962 3.97542 3.70504 4.07306 4.017 4.16963C4.15103 4.21113 4.28442 4.25242 4.41705 4.28968C5.31054 4.49573 6.32508 3.94612 6.65195 3.0939C6.68978 2.98116 6.72527 2.86616 6.76092 2.75067C6.84484 2.47878 6.9296 2.20415 7.04772 1.94973C7.08289 1.87398 7.0998 1.8604 7.18446 1.85072C7.73099 1.7882 8.34931 1.78782 8.89911 1.85072C8.98217 1.86022 8.99994 1.87242 9.03585 1.94976C9.154 2.2042 9.23874 2.47883 9.32266 2.75077C9.35829 2.86622 9.39377 2.98119 9.43159 3.09392C9.61869 3.58167 9.98435 3.88305 10.42 4.13427C10.8041 4.33166 11.2457 4.38674 11.6665 4.28968C11.8573 4.24569 12.0436 4.18721 12.2298 4.12874C12.4865 4.04815 12.7432 3.9676 13.0112 3.92504C13.0991 3.91109 13.1225 3.92088 13.1757 3.9921C13.498 4.42371 13.7997 4.95025 14.0125 5.44165C14.0452 5.51725 14.0429 5.54452 13.9946 5.61235C13.7889 5.90158 13.539 6.16665 13.2917 6.42902C13.182 6.54537 13.0728 6.66119 12.9682 6.77835C12.7187 7.09428 12.5733 7.57985 12.5733 8.00482C12.5733 8.42989 12.7186 8.91534 12.9682 9.23137C13.1116 9.41302 13.2712 9.58004 13.4308 9.74712C13.6289 9.95444 13.8271 10.1618 13.9946 10.3974C14.0448 10.468 14.0462 10.4902 14.0125 10.5681C13.7981 11.0632 13.4966 11.5879 13.1756 12.0176C13.1215 12.0901 13.1022 12.0991 13.0112 12.0847C12.694 12.0343 12.3786 11.9367 12.0667 11.8401C11.9326 11.7986 11.7992 11.7573 11.6665 11.72C10.7726 11.5138 9.75835 12.0636 9.43162 12.9159C9.3938 13.0286 9.35832 13.1436 9.32269 13.259C9.23876 13.531 9.15399 13.8056 9.03585 14.06C9.00124 14.1346 8.98061 14.1497 8.89913 14.1591C8.3493 14.2219 7.731 14.2216 7.18444 14.1591C7.10305 14.1498 7.08188 14.1337 7.04772 14.0601C6.92959 13.8056 6.84484 13.531 6.76092 13.2591C6.72528 13.1436 6.68978 13.0286 6.65194 12.9159C6.32021 12.0508 5.30246 11.5158 4.40534 11.7227C4.27435 11.7596 4.1426 11.8005 4.01023 11.8415C3.70054 11.9375 3.38739 12.0347 3.07232 12.0847C2.98457 12.0986 2.96109 12.0888 2.90789 12.0176C2.58554 11.586 2.28383 11.0595 2.07102 10.5681C2.03822 10.4923 2.04107 10.4647 2.08891 10.3974C2.2946 10.1082 2.54449 9.8431 2.79184 9.58074C2.90154 9.46438 3.01074 9.34856 3.11535 9.23139C3.36498 8.91533 3.51023 8.42985 3.51023 8.00482Z"
+  />
+</svg>

package/src/components/internal/icons/Theme.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14S23.7,2,16,2z M12.4,27.5c-1.5-0.5-2.9-1.2-4.1-2.2c-0.6-0.5-1.1-1-1.6-1.6c-1-1.2-1.7-2.6-2.2-4.1C4.2,18.4,4,17.2,4,16C4,9.4,9.4,4,16,4v24C14.8,28,13.6,27.8,12.4,27.5z"
+  />
+</svg>

package/src/components/internal/icons/WiFi.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-16px" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g stroke={fill}>
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M12,10.9c-2.7,0-5.1,1.1-6.8,3.1C5,14.3,5,14.7,5.4,14.9s0.7,0.2,0.9-0.1c1.4-1.6,3.5-2.5,5.8-2.5s4.4,0.9,5.8,2.6 c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1c0.3-0.2,0.3-0.7,0.1-0.9C17.2,11.9,14.7,10.9,12,10.9z"
+    />
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M12,17.9c-1.1,0-2.3,0.5-2.9,1.1c-0.2,0.2-0.2,0.7,0,0.9c0.2,0.2,0.7,0.2,0.9,0c0.9-1,3.1-1,4.1,0c0.1,0.1,0.3,0.2,0.5,0.2 c0.2,0,0.3-0.1,0.5-0.2c0.2-0.2,0.2-0.7,0-0.9C14.3,18.4,13.1,17.9,12,17.9z"
+    />
+    <path
+      stroke-width={fill !== 'currentColor' ? 2 : 1}
+      d="M23.9,9.7C20.8,6,16.5,3.8,12,3.8S3.2,6,0.2,9.7c-0.2,0.3-0.2,0.7,0.1,0.9c0.3,0.2,0.7,0.2,0.9-0.1 c2.7-3.4,6.7-5.3,10.7-5.3s8,1.9,10.7,5.4c0.1,0.1,0.3,0.2,0.6,0.2c0.1,0,0.3,0,0.5-0.1C24,10.5,24.1,10,23.9,9.7z"
+    />
+  </g>
+</svg>

package/src/components/notifications/Notification.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+
+  import { Notification } from './Notification'
+  import Component from '../Component.svelte'
+  import store from './store'
+
+  export let notification: Notification
+
+  const { id, closeTimeout } = notification
+
+  const removeNotificationHandler = () => {
+    store.removeNotification(id)
+  }
+
+  let timeout: any | null = null
+
+  if (closeTimeout) {
+    timeout = setTimeout(removeNotificationHandler, closeTimeout)
+  }
+
+  onDestroy(() => {
+    removeNotificationHandler()
+    if (closeTimeout && timeout) {
+      clearTimeout(timeout)
+    }
+  })
+</script>
+
+{#if typeof notification.component === 'string'}
+  <Component is={notification.component} props={{ notification, onRemove: removeNotificationHandler }} />
+{:else}
+  <svelte:component this={notification.component} {notification} onRemove={removeNotificationHandler} />
+{/if}

package/src/components/notifications/Notification.ts

@@ -0,0 +1,16 @@
+import { type NotificationPosition } from './NotificationPosition'
+import { type NotificationSeverity } from './NotificationSeverity'
+import { type AnyComponent, type AnySvelteComponent } from '../../types'
+
+export interface Notification {
+  id: string
+  title: string
+  group?: string
+  component: AnyComponent | AnySvelteComponent
+  subTitle?: string
+  subTitlePostfix?: string
+  position: NotificationPosition
+  severity?: NotificationSeverity
+  params?: Record<string, any>
+  closeTimeout?: number
+}

package/src/components/notifications/NotificationPosition.ts

@@ -0,0 +1,6 @@
+export enum NotificationPosition {
+  BottomLeft,
+  BottomRight,
+  TopLeft,
+  TopRight
+}

package/src/components/notifications/NotificationSeverity.ts

@@ -0,0 +1,6 @@
+export enum NotificationSeverity {
+  Info,
+  Success,
+  Warning,
+  Error
+}