generated from cms/tibi-docs
50 lines
1.3 KiB
Svelte
50 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { Writable } from "svelte/store"
|
|
export let groupTitle: string
|
|
export let checkboxes: { textTitle: string; emailTitle: string }[]
|
|
|
|
export let formValues: Writable<FormValues>
|
|
export let rowNr: number
|
|
</script>
|
|
|
|
<div class="checkbox-group">
|
|
<h3>{groupTitle}</h3>
|
|
<div class="containerr">
|
|
{#each checkboxes as checkbox, i}
|
|
<label class="checkbox-label">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-input checkit"
|
|
bind:this="{$formValues[`checkbox_${groupTitle}_${rowNr}_${checkbox.emailTitle}`]}"
|
|
/>
|
|
<span class="checkit-span"></span>
|
|
{checkbox.textTitle}
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
.checkbox-group {
|
|
.checkbox-input {
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
width: fit-content !important;
|
|
}
|
|
|
|
.checkbox-label {
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
& > .containerr {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|