WIP

Author: AlexthePear

src/lib/components/list_input/list_input.svelte

@@ -76,4 +76,11 @@
 		border-radius: 5px;
 		background-color: #ffffff;
 	}
+	li {
+		list-style-type: none;
+	}
+	ul {
+		margin: 0px;
+		padding: 0px;
+	}
 </style>

src/lib/components/questions/availability/availability_question_input.svelte

@@ -2,12 +2,17 @@
 	import type { AvailablityQuestion } from '$lib/form';
 
 	export let data = $$props as AvailablityQuestion;
+	// Computed Logic to precompute data ranges array.
 </script>
 
 <fieldset>
 	<legend>{data.content}</legend>
 	<div class="datetime-range">
 		{#each Array.from({ length: data.maxDatetimeRanges ?? 1 }, (_, i) => i) as i}
+			<!-- {@const { startValue, endValue } = {
+				startValue: data.value?.[i][0],
+				endValue: data.value?.[i][1]
+			}} -->
 			<div class="datetime-range-input">
 				<input
 					type="datetime-local"

src/lib/components/questions/base/base_editor.svelte

@@ -37,4 +37,21 @@
 		/* border: blue 10px solid; */
 		border-radius: 20px;
 	}
+	input {
+		padding: 5px 10px;
+		background-color: #ddd8d8;
+		border-radius: 10px;
+		border-width: 0;
+		font-size: 11px;
+	}
+	input::placeholder {
+		font-style: italic;
+		color: #1f2024;
+		opacity: 0.9;
+		font-size: 11px;
+	}
+	input:focus {
+		outline-width: 1px;
+		outline-color: chocolate;
+	}
 </style>

src/lib/components/questions/datetime/datetime_question_input_editor.svelte

@@ -29,7 +29,7 @@
 	<details>
 		<summary>Sample</summary>
 		<div class="question">
-			<DatetimeQuestionInput bind:data />
+			<DatetimeQuestionInput {data} />
 		</div>
 	</details>
 </BaseEditor>

src/lib/components/questions/select/select_question_input_editor.svelte

@@ -27,6 +27,7 @@
 			 data.options.content and data.options.value 
 					
 	-->
+	<h4>Edit Choices</h4>
 	<ListInput
 		bind:value={data.options}
 		components={{

src/routes/forms/demoformeditor/demo_form_editor.ts

@@ -90,6 +90,13 @@ export const demoForm: Form = {
 				value: '11:11:11',
 				min: '11:11:11',
 				max: '11:11:11'
+			},
+			{
+				type: QuestionType.AVAILABILITY,
+				name: 'availability',
+				content: 'Availability Question?',
+				required: false,
+				value: [['2024-04-10T11:11:11', '2024-04-10T11:11:12']]
 			}
 		]
 	}