From 1014912f76d48473498342456b2b879e3498dc71 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 00:25:11 +0100
Subject: [PATCH 01/10] fix: tooltip arrows

---
 src/lib/components/drop.svelte                | 70 ++++++++++++-------
 src/lib/elements/forms/inputDomain.svelte     |  5 +-
 src/lib/elements/forms/inputEmail.svelte      |  5 +-
 src/lib/elements/forms/inputFile.svelte       |  5 +-
 src/lib/elements/forms/inputPassword.svelte   |  5 +-
 src/lib/elements/forms/inputPhone.svelte      |  5 +-
 src/lib/elements/forms/inputText.svelte       | 10 +--
 .../providers/settingsFormList.svelte         |  6 --
 8 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index f61ff6a24..22253de50 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -14,6 +14,8 @@
     export let fullWidth = false;
     export let fixed = false;
     export let display = 'block';
+    export let arrowSize = 10;
+    export let isPopover = false;
 
     const dispatch = createEventDispatcher<{
         blur: undefined;
@@ -32,13 +34,14 @@
                 {
                     name: 'arrow',
                     options: {
-                        element: arrow
+                        element: arrow,
+                        padding: arrowSize * 2
                     }
                 },
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, noArrow ? 0 : 6]
+                        offset: [-arrowSize, noArrow ? 0 : arrowSize - 2]
                     }
                 },
                 {
@@ -111,10 +114,15 @@
 
 <div
     class="drop-tooltip"
-    class:u-width-full-line={fullWidth}
     bind:this={tooltip}
+    class:u-width-full-line={fullWidth}
+    style:--arrow-size={`${arrowSize}px`}
     style:z-index="10">
-    <div class="drop-arrow" class:u-hide={!show || (show && noArrow)} bind:this={arrow} />
+    <div
+        class="drop-arrow"
+        class:is-popover={isPopover}
+        class:u-hide={!show || (show && noArrow)}
+        bind:this={arrow} />
     {#if show}
         <slot name="list" />
     {/if}
@@ -122,36 +130,50 @@
 
 <!-- svelte-ignore css-unused-selector -->
 <style global lang="scss">
-    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
-        bottom: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
-        top: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='left'] > .drop-arrow {
-        right: -4px;
-    }
-
-    .drop-tooltip[data-popper-placement^='right'] > .drop-arrow {
-        left: -4px;
+    .drop-arrow.is-popover {
+        --drop-arrow-pop-over-bg-color: var(--color-neutral-90);
+        body.theme-light & {
+            --drop-arrow-pop-over-bg-color: var(--color-neutral-0);
+        }
     }
     .drop-arrow,
     .drop-arrow::before {
         position: absolute;
-        width: 8px;
-        height: 8px;
-        z-index: -1;
+        width: var(--arrow-size);
+        height: var(--arrow-size);
+        z-index: 1;
+
+        --drop-arrow-border: 1px solid hsl(var(--color-neutral-85));
+        --drop-arrow-bg-color: hsl(var(--drop-arrow-pop-over-bg-color, var(--color-neutral-105)));
+        body.theme-light & {
+            --drop-arrow-border: 1px solid hsl(var(--color-neutral-10));
+            --drop-arrow-bg-color: hsl(var(--drop-arrow-pop-over-bg-color, var(--color-neutral-0)));
+        }
     }
 
     .drop-arrow::before {
         content: '';
         transform: rotate(45deg);
-        background: hsl(var(--color-neutral-85));
+        background: var(--drop-arrow-bg-color);
+    }
 
-        body.theme-light & {
-            background: hsl(var(--color-neutral-10));
+    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
+        bottom: calc(var(--arrow-size) / -2);
+
+        &::before {
+            border-bottom: var(--drop-arrow-border);
+            border-right: var(--drop-arrow-border);
+            border-bottom-right-radius: 25%;
+        }
+    }
+
+    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
+        top: calc(var(--arrow-size) / -2);
+
+        &::before {
+            border-top: var(--drop-arrow-border);
+            border-left: var(--drop-arrow-border);
+            border-top-left-radius: 25%;
         }
     }
 </style>
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 26f0b972c..007c12e97 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -14,7 +14,6 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let isPopoverDefined = true;
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
@@ -51,8 +50,8 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots.popover && isPopoverDefined}
-            <Drop bind:show display="inline-block">
+        {label}{#if $$slots?.popover}
+            <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
                     type="button"
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index e72c15543..478839bbf 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -17,7 +17,6 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let tooltip: string = null;
-    export let isPopoverDefined = true;
 
     let element: HTMLInputElement;
     let error: string;
@@ -60,8 +59,8 @@
 
 <FormItem>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if $$slots.popover && isPopoverDefined}
-            <Drop bind:show display="inline-block">
+        {label}{#if $$slots?.popover}
+            <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
                     type="button"
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index e15389f36..92da23744 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -13,7 +13,6 @@
     export let optionalText: string = null;
     export let tooltip: string = null;
     export let error: string = null;
-    export let isPopoverDefined = true;
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -96,8 +95,8 @@
 <div>
     {#if label}
         <Label {required} {optionalText} {tooltip} hide={!label}>
-            {label}{#if $$slots.popover && isPopoverDefined}
-                <Drop bind:show display="inline-block">
+            {label}{#if $$slots?.popover}
+                <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
                         type="button"
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 1ddd2826e..d80d16469 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -16,7 +16,6 @@
     export let showPasswordButton = false;
     export let minlength = 8;
     export let maxlength: number = null;
-    export let isPopoverDefined = true;
 
     let element: HTMLInputElement;
     let error: string;
@@ -51,8 +50,8 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots.popover && isPopoverDefined}
-            <Drop bind:show={showPopover} display="inline-block">
+        {label}{#if $$slots?.popover}
+            <Drop isPopover bind:show={showPopover} display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
                     type="button"
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 2d7f87248..6b6989609 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -14,7 +14,6 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let isPopoverDefined = true;
 
     const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
@@ -50,8 +49,8 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots.popover && isPopoverDefined}
-            <Drop bind:show display="inline-block">
+        {label}{#if $$slots?.popover}
+            <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
                     type="button"
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 62169dacf..6240671bc 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -23,7 +23,6 @@
     export let maxlength: number = null;
     export let tooltip: string = null;
     export let isMultiple = false;
-    export let isPopoverDefined = true;
 
     let element: HTMLInputElement;
     let error: string;
@@ -77,8 +76,8 @@
 <svelte:component this={wrapper} {fullWidth}>
     {#if label}
         <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if $$slots.popover && isPopoverDefined}
-                <Drop bind:show display="inline-block">
+            {label}{#if $$slots?.popover}
+                <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
                         type="button"
@@ -88,12 +87,13 @@
                         <span
                             class="icon-info"
                             aria-hidden="true"
-                            style="font-size: var(--icon-size-small)" />
+                            style:font-size="var(--icon-size-small)" />
                     </button>
                     <svelte:fragment slot="list">
                         <div
                             class="dropped card u-max-width-250"
-                            style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                            style:--p-card-padding=".75rem"
+                            style:box-shadow="var(--shadow-large)">
                             <slot name="popover" />
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 609b55790..e0c330642 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -51,7 +51,6 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
                 bind:value={params[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />
@@ -64,7 +63,6 @@
                 placeholder={input.placeholder}
                 required={!input.optional}
                 showPasswordButton
-                isPopoverDefined={input.popover !== undefined}
                 bind:value={params[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />
@@ -76,7 +74,6 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
                 bind:value={params[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />
@@ -88,7 +85,6 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
                 bind:value={params[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />
@@ -100,7 +96,6 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
                 bind:value={params[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />
@@ -111,7 +106,6 @@
                 label={input.label}
                 allowedFileExtensions={input.allowedFileExtensions}
                 required={!input.optional}
-                isPopoverDefined={input.popover !== undefined}
                 bind:files={files[input.name]}>
                 <svelte:fragment slot="popover">
                     <PopoverContent lines={input.popover} {popoverImage} />

From 92b4008a67df34ee0aecf906f057d88deff59cd9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 00:39:15 +0100
Subject: [PATCH 02/10] fix: arrow positioning

---
 src/lib/components/drop.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 22253de50..96f511e2a 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -35,13 +35,13 @@
                     name: 'arrow',
                     options: {
                         element: arrow,
-                        padding: arrowSize * 2
+                        padding: arrowSize * 1.75
                     }
                 },
                 {
                     name: 'offset',
                     options: {
-                        offset: [-arrowSize, noArrow ? 0 : arrowSize - 2]
+                        offset: [-arrowSize, noArrow ? 0 : arrowSize / 1.5 ]
                     }
                 },
                 {

From 90b1d8dad01392692901372e51d1bdd9fea84b6f Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 00:40:53 +0100
Subject: [PATCH 03/10] chore: run formatter

---
 src/lib/components/drop.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 96f511e2a..b6c9b8f56 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -41,7 +41,7 @@
                 {
                     name: 'offset',
                     options: {
-                        offset: [-arrowSize, noArrow ? 0 : arrowSize / 1.5 ]
+                        offset: [-arrowSize, noArrow ? 0 : arrowSize / 1.5]
                     }
                 },
                 {

From 7c4505fb1928bfe3f0bed60542e6506de95d7616 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 02:31:24 +0100
Subject: [PATCH 04/10] fix: popover

---
 src/lib/elements/forms/inputDomain.svelte     |  8 ++--
 src/lib/elements/forms/inputEmail.svelte      |  8 ++--
 src/lib/elements/forms/inputFile.svelte       |  8 ++--
 src/lib/elements/forms/inputPassword.svelte   |  8 ++--
 src/lib/elements/forms/inputPhone.svelte      |  8 ++--
 src/lib/elements/forms/inputText.svelte       |  8 ++--
 .../messaging/providers/popoverContent.svelte | 10 ++---
 .../providers/settingsFormList.svelte         | 43 +++++++++++--------
 8 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 007c12e97..db798dea7 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -14,6 +14,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
@@ -50,7 +52,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -67,7 +69,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 478839bbf..b925a1b62 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import { Drop } from '$lib/components';
@@ -17,6 +17,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let tooltip: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -59,7 +61,7 @@
 
 <FormItem>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -76,7 +78,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 92da23744..d3d88c033 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Drop, Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { Helper, Label } from '.';
 
     export let label: string = null;
@@ -13,6 +13,8 @@
     export let optionalText: string = null;
     export let tooltip: string = null;
     export let error: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -95,7 +97,7 @@
 <div>
     {#if label}
         <Label {required} {optionalText} {tooltip} hide={!label}>
-            {label}{#if $$slots?.popover}
+            {label}{#if popover}
                 <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
@@ -112,7 +114,7 @@
                         <div
                             class="dropped card u-max-width-250"
                             style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                            <slot name="popover" />
+                            <svelte:component this={popover} {...popoverProps} />
                         </div>
                     </svelte:fragment>
                 </Drop>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index d80d16469..7834dad57 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -16,6 +16,8 @@
     export let showPasswordButton = false;
     export let minlength = 8;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -50,7 +52,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show={showPopover} display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -67,7 +69,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 6b6989609..1a39f6400 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -14,6 +14,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
@@ -49,7 +51,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -66,7 +68,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 6240671bc..b7b8de090 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, FormItemPart, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
@@ -23,6 +23,8 @@
     export let maxlength: number = null;
     export let tooltip: string = null;
     export let isMultiple = false;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -76,7 +78,7 @@
 <svelte:component this={wrapper} {fullWidth}>
     {#if label}
         <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if $$slots?.popover}
+            {label}{#if popover}
                 <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
@@ -94,7 +96,7 @@
                             class="dropped card u-max-width-250"
                             style:--p-card-padding=".75rem"
                             style:box-shadow="var(--shadow-large)">
-                            <slot name="popover" />
+                            <svelte:component this={popover} {...popoverProps} />
                         </div>
                     </svelte:fragment>
                 </Drop>
diff --git a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
index f76d7baf6..378e9424d 100644
--- a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
@@ -2,7 +2,7 @@
     import { ImagePreview } from '$lib/components';
 
     export let lines = [];
-    export let popoverImage: { src: { dark: string; light: string }; alt: string } | null = null;
+    export let image: { src: { dark: string; light: string }; alt: string } | null = null;
 </script>
 
 <div class="u-flex-vertical u-gap-16">
@@ -10,11 +10,11 @@
         <p>{@html line}</p>
     {/each}
 
-    {#if popoverImage}
+    {#if image}
         <ImagePreview
-            darkSrc={popoverImage.src.dark}
-            lightSrc={popoverImage.src.light}
-            alt={popoverImage.alt} />
+            darkSrc={image.src.dark}
+            lightSrc={image.src.light}
+            alt={image.alt} />
     {/if}
 </div>
 
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index e0c330642..92baa0d30 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -40,21 +40,31 @@
         | FCMProviderParams
         | APNSProviderParams
     >;
+
+    function getPopoverProps(input: ProviderInput) {
+        if (!input.popover) {
+            return {};
+        }
+        return {
+            lines: input.popover,
+            image: input.popoverImage
+        };
+    }
 </script>
 
 <FormList>
     {#each inputs as input}
-        {@const popoverImage = input.popoverImage}
+        {@const popover = input.popover ? PopoverContent : null}
+        {@const popoverProps = getPopoverProps(input)}
         {#if input.type === 'text'}
             <InputText
                 id={input.name}
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputText>
         {:else if input.type === 'password'}
             <InputPassword
@@ -62,11 +72,10 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 showPasswordButton
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputPassword>
         {:else if input.type === 'email'}
             <InputEmail
@@ -74,10 +83,9 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                popoverProps={getPopoverProps(input)}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputEmail>
         {:else if input.type === 'domain'}
             <InputDomain
@@ -85,10 +93,9 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputDomain>
         {:else if input.type === 'phone'}
             <InputPhone
@@ -96,20 +103,18 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputPhone>
         {:else if input.type === 'file'}
             <InputFile
                 label={input.label}
                 allowedFileExtensions={input.allowedFileExtensions}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:files={files[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputFile>
         {:else if input.type === 'switch'}
             <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>

From 3fb99772b64bb65ecca4075536fbc7e00668dd26 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 02:33:35 +0100
Subject: [PATCH 05/10] fix: use template const for popover props with email
 input

---
 .../messaging/providers/popoverContent.svelte                | 5 +----
 .../messaging/providers/settingsFormList.svelte              | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
index 378e9424d..7b9a1e723 100644
--- a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
@@ -11,10 +11,7 @@
     {/each}
 
     {#if image}
-        <ImagePreview
-            darkSrc={image.src.dark}
-            lightSrc={image.src.light}
-            alt={image.alt} />
+        <ImagePreview darkSrc={image.src.dark} lightSrc={image.src.light} alt={image.alt} />
     {/if}
 </div>
 
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 92baa0d30..8d167bbdf 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -84,7 +84,7 @@
                 placeholder={input.placeholder}
                 required={!input.optional}
                 {popover}
-                popoverProps={getPopoverProps(input)}
+                {popoverProps}
                 bind:value={params[input.name]}>
             </InputEmail>
         {:else if input.type === 'domain'}

From 997b1ec4ee36733aee1fabbc0fad14ad20987a1b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 02:31:24 +0100
Subject: [PATCH 06/10] fix: popover

---
 src/lib/elements/forms/inputDomain.svelte     |  8 ++--
 src/lib/elements/forms/inputEmail.svelte      |  8 ++--
 src/lib/elements/forms/inputFile.svelte       |  8 ++--
 src/lib/elements/forms/inputPassword.svelte   |  8 ++--
 src/lib/elements/forms/inputPhone.svelte      |  8 ++--
 src/lib/elements/forms/inputText.svelte       |  8 ++--
 .../messaging/providers/popoverContent.svelte | 10 ++---
 .../providers/settingsFormList.svelte         | 43 +++++++++++--------
 8 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 007c12e97..db798dea7 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -14,6 +14,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
@@ -50,7 +52,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -67,7 +69,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 478839bbf..b925a1b62 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import { Drop } from '$lib/components';
@@ -17,6 +17,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let tooltip: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -59,7 +61,7 @@
 
 <FormItem>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -76,7 +78,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 92da23744..d3d88c033 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Drop, Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { Helper, Label } from '.';
 
     export let label: string = null;
@@ -13,6 +13,8 @@
     export let optionalText: string = null;
     export let tooltip: string = null;
     export let error: string = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -95,7 +97,7 @@
 <div>
     {#if label}
         <Label {required} {optionalText} {tooltip} hide={!label}>
-            {label}{#if $$slots?.popover}
+            {label}{#if popover}
                 <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
@@ -112,7 +114,7 @@
                         <div
                             class="dropped card u-max-width-250"
                             style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                            <slot name="popover" />
+                            <svelte:component this={popover} {...popoverProps} />
                         </div>
                     </svelte:fragment>
                 </Drop>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index d80d16469..7834dad57 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -16,6 +16,8 @@
     export let showPasswordButton = false;
     export let minlength = 8;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -50,7 +52,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show={showPopover} display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -67,7 +69,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 6b6989609..1a39f6400 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
@@ -14,6 +14,8 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
@@ -49,7 +51,7 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}{#if $$slots?.popover}
+        {label}{#if popover}
             <Drop isPopover bind:show display="inline-block">
                 <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                 &nbsp;<button
@@ -66,7 +68,7 @@
                     <div
                         class="dropped card u-max-width-250"
                         style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
-                        <slot name="popover" />
+                        <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
             </Drop>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 6240671bc..b7b8de090 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { SvelteComponent, onMount } from 'svelte';
     import { FormItem, FormItemPart, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
@@ -23,6 +23,8 @@
     export let maxlength: number = null;
     export let tooltip: string = null;
     export let isMultiple = false;
+    export let popover: typeof SvelteComponent<unknown> = null;
+    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLInputElement;
     let error: string;
@@ -76,7 +78,7 @@
 <svelte:component this={wrapper} {fullWidth}>
     {#if label}
         <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if $$slots?.popover}
+            {label}{#if popover}
                 <Drop isPopover bind:show display="inline-block">
                     <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
                     &nbsp;<button
@@ -94,7 +96,7 @@
                             class="dropped card u-max-width-250"
                             style:--p-card-padding=".75rem"
                             style:box-shadow="var(--shadow-large)">
-                            <slot name="popover" />
+                            <svelte:component this={popover} {...popoverProps} />
                         </div>
                     </svelte:fragment>
                 </Drop>
diff --git a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
index f76d7baf6..378e9424d 100644
--- a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
@@ -2,7 +2,7 @@
     import { ImagePreview } from '$lib/components';
 
     export let lines = [];
-    export let popoverImage: { src: { dark: string; light: string }; alt: string } | null = null;
+    export let image: { src: { dark: string; light: string }; alt: string } | null = null;
 </script>
 
 <div class="u-flex-vertical u-gap-16">
@@ -10,11 +10,11 @@
         <p>{@html line}</p>
     {/each}
 
-    {#if popoverImage}
+    {#if image}
         <ImagePreview
-            darkSrc={popoverImage.src.dark}
-            lightSrc={popoverImage.src.light}
-            alt={popoverImage.alt} />
+            darkSrc={image.src.dark}
+            lightSrc={image.src.light}
+            alt={image.alt} />
     {/if}
 </div>
 
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index e0c330642..92baa0d30 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -40,21 +40,31 @@
         | FCMProviderParams
         | APNSProviderParams
     >;
+
+    function getPopoverProps(input: ProviderInput) {
+        if (!input.popover) {
+            return {};
+        }
+        return {
+            lines: input.popover,
+            image: input.popoverImage
+        };
+    }
 </script>
 
 <FormList>
     {#each inputs as input}
-        {@const popoverImage = input.popoverImage}
+        {@const popover = input.popover ? PopoverContent : null}
+        {@const popoverProps = getPopoverProps(input)}
         {#if input.type === 'text'}
             <InputText
                 id={input.name}
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputText>
         {:else if input.type === 'password'}
             <InputPassword
@@ -62,11 +72,10 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 showPasswordButton
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputPassword>
         {:else if input.type === 'email'}
             <InputEmail
@@ -74,10 +83,9 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                popoverProps={getPopoverProps(input)}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputEmail>
         {:else if input.type === 'domain'}
             <InputDomain
@@ -85,10 +93,9 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputDomain>
         {:else if input.type === 'phone'}
             <InputPhone
@@ -96,20 +103,18 @@
                 label={input.label}
                 placeholder={input.placeholder}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:value={params[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputPhone>
         {:else if input.type === 'file'}
             <InputFile
                 label={input.label}
                 allowedFileExtensions={input.allowedFileExtensions}
                 required={!input.optional}
+                {popover}
+                {popoverProps}
                 bind:files={files[input.name]}>
-                <svelte:fragment slot="popover">
-                    <PopoverContent lines={input.popover} {popoverImage} />
-                </svelte:fragment>
             </InputFile>
         {:else if input.type === 'switch'}
             <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>

From 3e1cecc40ae41457ac866ef038157b0a395a16dc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 02:33:35 +0100
Subject: [PATCH 07/10] fix: use template const for popover props with email
 input

---
 .../messaging/providers/popoverContent.svelte                | 5 +----
 .../messaging/providers/settingsFormList.svelte              | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
index 378e9424d..7b9a1e723 100644
--- a/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/popoverContent.svelte
@@ -11,10 +11,7 @@
     {/each}
 
     {#if image}
-        <ImagePreview
-            darkSrc={image.src.dark}
-            lightSrc={image.src.light}
-            alt={image.alt} />
+        <ImagePreview darkSrc={image.src.dark} lightSrc={image.src.light} alt={image.alt} />
     {/if}
 </div>
 
diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
index 92baa0d30..8d167bbdf 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormList.svelte
@@ -84,7 +84,7 @@
                 placeholder={input.placeholder}
                 required={!input.optional}
                 {popover}
-                popoverProps={getPopoverProps(input)}
+                {popoverProps}
                 bind:value={params[input.name]}>
             </InputEmail>
         {:else if input.type === 'domain'}

From 8f385564085ef7bc3c2778452733f534a29b2cde Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 1 Mar 2024 13:45:46 +0100
Subject: [PATCH 08/10] fix: popover card radius

---
 src/lib/elements/forms/inputDomain.svelte   | 4 +++-
 src/lib/elements/forms/inputEmail.svelte    | 4 +++-
 src/lib/elements/forms/inputFile.svelte     | 4 +++-
 src/lib/elements/forms/inputPassword.svelte | 4 +++-
 src/lib/elements/forms/inputPhone.svelte    | 4 +++-
 src/lib/elements/forms/inputText.svelte     | 1 +
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index db798dea7..91d0e51b0 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -68,7 +68,9 @@
                 <svelte:fragment slot="list">
                     <div
                         class="dropped card u-max-width-250"
-                        style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                        style:--card-border-radius="var(--border-radius-small)"
+                        style:--p-card-padding=".75rem"
+                        style:box-shadow="var(--shadow-large)">
                         <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index b925a1b62..2cd761e4a 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -77,7 +77,9 @@
                 <svelte:fragment slot="list">
                     <div
                         class="dropped card u-max-width-250"
-                        style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                        style:--card-border-radius="var(--border-radius-small)"
+                        style:--p-card-padding=".75rem"
+                        style:box-shadow="var(--shadow-large)">
                         <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index d3d88c033..2de200818 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -113,7 +113,9 @@
                     <svelte:fragment slot="list">
                         <div
                             class="dropped card u-max-width-250"
-                            style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                            style:--card-border-radius="var(--border-radius-small)"
+                            style:--p-card-padding=".75rem"
+                            style:box-shadow="var(--shadow-large)">
                             <svelte:component this={popover} {...popoverProps} />
                         </div>
                     </svelte:fragment>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 7834dad57..423f0db2b 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -68,7 +68,9 @@
                 <svelte:fragment slot="list">
                     <div
                         class="dropped card u-max-width-250"
-                        style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                        style:--card-border-radius="var(--border-radius-small)"
+                        style:--p-card-padding=".75rem"
+                        style:box-shadow="var(--shadow-large)">
                         <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 1a39f6400..23e7c1c81 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -67,7 +67,9 @@
                 <svelte:fragment slot="list">
                     <div
                         class="dropped card u-max-width-250"
-                        style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                        style:--card-border-radius="var(--border-radius-small)"
+                        style:--p-card-padding=".75rem"
+                        style:box-shadow="var(--shadow-large)">
                         <svelte:component this={popover} {...popoverProps} />
                     </div>
                 </svelte:fragment>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index b7b8de090..ac354e3f2 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -95,6 +95,7 @@
                         <div
                             class="dropped card u-max-width-250"
                             style:--p-card-padding=".75rem"
+                            style:--card-border-radius="var(--border-radius-small)"
                             style:box-shadow="var(--shadow-large)">
                             <svelte:component this={popover} {...popoverProps} />
                         </div>

From 3699cb85db7bac2afd9d58e4a2f605afe43f9a13 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 6 Mar 2024 11:38:02 +0100
Subject: [PATCH 09/10] fix: build

---
 .../messaging/providers/settingsFormInput.svelte             | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
index 93062d19a..8b17b758c 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
@@ -41,7 +41,8 @@
     >;
     export let fullWidth = false;
 
-    let popoverImage = input.popoverImage;
+    const popover = input.popover ? PopoverContent : null;
+    const popoverProps = getPopoverProps(input);
 
     function getPopoverProps(input: ProviderInput) {
         if (!input.popover) {
@@ -54,8 +55,6 @@
     }
 </script>
 
-{@const popover = input.popover ? PopoverContent : null}
-{@const popoverProps = getPopoverProps(input)}
 {#if input.type === 'text'}
     <InputText
         id={input.name}

From 581e6954032cdd44af9f4acec15aa97cfaac6e15 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 6 Mar 2024 11:41:55 +0100
Subject: [PATCH 10/10] fix: formatting

---
 .../messaging/providers/settingsFormInput.svelte     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
index 8b17b758c..615e13353 100644
--- a/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/settingsFormInput.svelte
@@ -65,7 +65,7 @@
         {popover}
         {popoverProps}
         {fullWidth}
-        bind:value={params[input.name]}/>
+        bind:value={params[input.name]} />
 {:else if input.type === 'password'}
     <InputPassword
         id={input.name}
@@ -76,7 +76,7 @@
         {popover}
         {popoverProps}
         {fullWidth}
-        bind:value={params[input.name]}/>
+        bind:value={params[input.name]} />
 {:else if input.type === 'email'}
     <InputEmail
         id={input.name}
@@ -87,7 +87,7 @@
         {popover}
         {popoverProps}
         {fullWidth}
-        bind:value={params[input.name]}/>
+        bind:value={params[input.name]} />
 {:else if input.type === 'domain'}
     <InputDomain
         id={input.name}
@@ -97,7 +97,7 @@
         {popover}
         {popoverProps}
         {fullWidth}
-        bind:value={params[input.name]}/>
+        bind:value={params[input.name]} />
 {:else if input.type === 'phone'}
     <InputPhone
         id={input.name}
@@ -107,7 +107,7 @@
         {popover}
         {popoverProps}
         {fullWidth}
-        bind:value={params[input.name]}/>
+        bind:value={params[input.name]} />
 {:else if input.type === 'file'}
     <InputFile
         label={input.label}
@@ -116,7 +116,7 @@
         tooltip={input.tooltip}
         {popover}
         {popoverProps}
-        bind:files={files[input.name]}/>
+        bind:files={files[input.name]} />
 {:else if input.type === 'switch'}
     <InputSwitch label={input.label} id={input.name} bind:value={params[input.name]}>
         <svelte:fragment slot="description">