multi select

frontend/src/lib/assets/css/svelte-select.less

@@ -0,0 +1,65 @@
+.svelte-select {
+    height: 55px !important;
+    margin-bottom: 20px;
+
+    margin: 5px 0px !important;
+    box-shadow: 0 0 25px 10px var(--opposite-bg-color-5) !important;
+    padding: 10px 20px !important;
+    border: 0px solid var(--opposite-bg-color) !important;
+    border-bottom: 3px solid var(--heading-font-color) !important;
+    outline: 0px solid var(--opposite-bg-color) !important;
+    color: var(--opposite-bg-color) !important;
+    background-color: var(--background-color) !important;
+    resize: none !important;
+    .value-container {
+        input {
+            padding-top: 20px;
+        }
+        .selected-item {
+            padding-top: 19px;
+        }
+    }
+
+    .multi-item {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+        border-radius: 3px !important;
+    }
+
+    .selected-item {
+        margin-left: 3px;
+        height: auto;
+        line-height: initial;
+    }
+    &.focused {
+        border-color: var(--hover-color) !important;
+    }
+
+    input {
+        height: 100%;
+        font-size: 1rem !important;
+    }
+
+    .list-item {
+        .item {
+            &.active {
+                background-color: transparent !important;
+                color: var(--normal-font-color) !important;
+            }
+        }
+    }
+
+    .indicators {
+        color: #ccc;
+
+        & > * {
+            border-left: 1px solid #ccc !important;
+            height: 40px !important;
+            cursor: pointer !important;
+        }
+
+        .clear-select {
+            color: var(--hover-color) !important;
+            font-weight: 700 !important;
+        }
+    }
+}

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>