multi select

frontend/src/lib/components/pagebuilder/form/datepicker.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import { CalendarView } from "fluent-svelte"
+    import type { Writable } from "svelte/store"
+
 
     export let groupTitle: string
     export let datePickerProps: DatePickerProps
-    export let formValues: any
+    export let formValues: Writable<FormValues>
     export let rowNr: number
     export let formCol: FormColumn
 

frontend/src/lib/components/pagebuilder/form/form.svelte

@@ -3,6 +3,7 @@
     import Datepicker from "./datepicker.svelte"
     import FormLabelNumberBlock from "./formLabelNumberBlock.svelte"
     import type { Writable } from "svelte/store"
+    import Select from "./select.svelte"
 
     export let formRow: FormRow
     export let index: number
@@ -135,9 +136,19 @@
                         formValues="{formValues}"
                         rowNr="{index}"
                         formCol="{column}"
-                        
                     />
                 {/if}
+
+                {#if column.showMultiSelect}
+                    <Select
+                        groupTitle="{column.groupTitle}"
+                        formValues="{formValues}"
+                        rowNr="{index}"
+                        formCol="{column}"
+                        options="{column.multiSelectOptions}"
+                    />
+                {/if}
+
                 {#each column.text ?? [] as textField, textFieldIndex}
                     <div>
                         <h3 class="textTitle">{textField.textTitle || ""}</h3>

frontend/src/lib/components/pagebuilder/form/mobileForm.svelte

@@ -3,6 +3,7 @@
     import type { Writable } from "svelte/store"
     import CheckboxGroup from "./checkboxGroup.svelte"
     import Datepicker from "./datepicker.svelte"
+    import Select from "./select.svelte"
     export let formRow: FormRow
     export let formValues: Writable<FormValues>
     export let index: number
@@ -147,6 +148,16 @@
                     formCol="{column}"
                 />
             {/if}
+
+            {#if column.showMultiSelect}
+                <Select
+                    groupTitle="{column.groupTitle}"
+                    formValues="{formValues}"
+                    rowNr="{index}"
+                    formCol="{column}"
+                    options="{column.multiSelectOptions}"
+                />
+            {/if}
             {#each column.text ?? [] as textField, textFieldIndex}
                 <div class="column-{columnIndex} position-{getPosition(column, 5 + textFieldIndex, textFieldIndex)}">
                     <h3 class="textTitle">{textField.textTitle || ""}</h3>

frontend/src/lib/components/pagebuilder/form/select.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import Select from "svelte-select/Select.svelte"
+    import { onMount } from "svelte"
+    import type { Writable } from "svelte/store"
+
+    export let options: MultiSelectOptions[] = []
+    export let groupTitle: string
+
+    export let formValues: Writable<FormValues>
+    export let rowNr: number
+    export let formCol: FormColumn
+
+    let valueStorage: any[] = []
+    let value: string[] = []
+    let values = options.map((option) => ({ label: option.name, value: option.name }))
+    let lastCustomInput: string | null = null
+
+    function setFormValues() {
+        // @ts-ignore
+        $formValues[`selectMultiple_${groupTitle}_${rowNr}_${formCol.multiSelectEmailTitle}`] = {
+            value: value.toString(),
+            required: !formCol.multiSelectNotRequired,
+        }
+    }
+
+    function handleInputChange(e: Event) {
+        const newCustomInput = (e.target as HTMLInputElement).value
+
+        // Remove the last custom input if it exists
+        if (lastCustomInput) {
+            values = values.filter((item) => item.label !== lastCustomInput)
+        }
+
+        // Add the new custom input
+        if (newCustomInput && !values.some((item) => item.label === newCustomInput)) {
+            values = [...values, { label: newCustomInput, value: newCustomInput }]
+        }
+
+        // Update lastCustomInput
+        lastCustomInput = newCustomInput
+    }
+
+    $: {
+        if (value.length) {
+            setFormValues()
+        }
+    }
+
+    onMount(() => {
+        const inputEl = document.querySelector(".svelte-select input")
+        if (inputEl) {
+            inputEl.addEventListener("input", handleInputChange)
+        }
+        return () => {
+            if (inputEl) {
+                inputEl.removeEventListener("input", handleInputChange)
+            }
+        }
+    })
+    $: value = valueStorage.map((item) => item.value)
+</script>
+
+<Select
+    bind:items="{values}"
+    inputAttributes="{{ autocomplete: 'on' }}"
+    placeholder=""
+    showChevron="{true}"
+    clearable="{true}"
+    hideEmptyState="{true}"
+    searchable="{true}"
+    multiple="{true}"
+    bind:value="{valueStorage}"
+/>
+
+<style lang="less" global>
+    @import "../../../assets/css/variables.less";
+    @import "../../../assets/css/svelte-select.less";
+</style>