Get grid working

src/OAP/Oap.Theme.Svelte/src/ApplicationForm.svelte

@@ -2,7 +2,10 @@
 	import { Client, setContextClient, queryStore } from "@urql/svelte";
 	import { graphql } from "./gql";
 	import ApplicationFormStep from "./components/ApplicationFormStep.svelte";
-	import step from "./lib/stores/step";
+	import { step, applicationId, application } from "./lib/stores";
+	import { createHttpClient } from "./lib/oap/oapApiV1Client";
+	import { onMount } from "svelte";
+	import type { IServiceError, IServiceResult } from "facility-core";
 
 	export let antiForgeryToken: string | null;
 	export let contentItemId: string;
@@ -33,9 +36,61 @@
 		},
 	});
 
-	function handleSubmit(event: SubmitEvent) {
+	const oapApi = createHttpClient({
+		fetch,
+		baseUri: "https://localhost:5001/oap/api/v1",
+	});
+
+	let serviceError: IServiceError | null = null;
+	let serviceMsg: string | null;
+
+	function setResultOrError<T>(
+		response: IServiceResult<T>,
+	) {
+		if (response.error) {
+			serviceError = response.error;
+		} else {
+			serviceMsg = "Did a thing!";
 			step.update((x) => x + 1);
 		}
+	}
+
+	async function handleSubmit(event: SubmitEvent) {
+		if (!$applicationId) {
+			const response = await oapApi.createApplication({
+				applicationCreateSet: {
+					terms: {
+						hasReadInstructions: true,
+					},
+				},
+			});
+
+			setResultOrError(response);
+			applicationId.set(response.value?.application?.id ?? null);
+		} else {
+			const response = await oapApi.updateApplication({
+				id: $applicationId,
+				applicationChangeSet: {
+					terms: {
+						hasReadInstructions: true,
+					},
+				},
+			});
+
+			setResultOrError(response);
+		}
+	}
+
+	onMount(async () => {
+		if ($applicationId) {
+			const response = await oapApi.getApplication({
+				id: $applicationId,
+			});
+
+			setResultOrError(response);
+			application.set(response.value?.application ?? null);
+		}
+	});
 </script>
 
 {#if $content.fetching}
@@ -54,6 +109,16 @@
 					{oapApplicationForm.displayText}
 				</h1>
 			{/if}
+			{#if serviceError}
+				<div>
+					ERRORS: {serviceError.message}
+				</div>
+			{/if}
+			{#if serviceMsg}
+				<div>
+					success: {serviceMsg}
+				</div>
+			{/if}
 			{#each oapApplicationForm?.list?.contentItems ?? [] as contentItem, index}
 				{#if contentItem?.__typename === "OapApplicationFormStep" && $step === index}
 					<ApplicationFormStep

src/OAP/Oap.Theme.Svelte/src/components/ButtonPart.svelte

@@ -3,6 +3,10 @@
 
 	export const ButtonPartFragment = graphql(/* GraphQL */ `
 		fragment ButtonPart on Button {
+			metadata {
+				alignment
+				size
+			}
 			button {
 				type
 				text
@@ -16,25 +20,34 @@
 		}
 	`);
 
-    export function isButtonType(buttonType: string | undefined | null): buttonType is HTMLButtonElement['type'] {
+	export function isButtonType(
-        return !!(buttonType as HTMLButtonElement['type']);
+		buttonType: string | undefined | null,
+	): buttonType is HTMLButtonElement["type"] {
+		return !!(buttonType as HTMLButtonElement["type"]);
 	}
 </script>
 
 <script lang="ts">
 	import { type FragmentType, useFragment } from "../gql";
+	import Widget from "./Widget.svelte";
 
 	export let fragment: FragmentType<typeof ButtonPartFragment>;
 
 	const content = useFragment(ButtonPartFragment, fragment);
-    const buttonType: HTMLButtonElement['type'] = isButtonType(content.button?.type) ? content.button?.type : "button";
+	const buttonType: HTMLButtonElement["type"] = isButtonType(
+		content.button?.type,
+	)
+		? content.button?.type
+		: "button";
 </script>
 
-<button
+<Widget metadata={content.metadata}>
+	<button
 		class="block cursor-pointer rounded-md bg-amber-300 px-4 py-2 text-gray-800 hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-600"
 		type={buttonType}
 		name={content.formInputElement?.name}
 		id={content.formElement?.id}
->
+	>
 		{content.button?.text}
-</button>
+	</button>
+</Widget>

src/OAP/Oap.Theme.Svelte/src/components/Form.svelte

@@ -1,5 +1,4 @@
 <script context="module" lang="ts">
-	import type { EventHandler } from "svelte/elements";
 	import { graphql } from "../gql";
 
 	export const FormFragment = graphql(/* GraphQL */ `
@@ -26,14 +25,19 @@
 </script>
 
 <script lang="ts">
+	import type { EventHandler } from "svelte/elements";
 	import { useFragment, type FragmentType } from "../gql";
 	import ButtonPart from "./ButtonPart.svelte";
 	import InputPart from "./InputPart.svelte";
 	import LabelPart from "./LabelPart.svelte";
 	import SelectPart from "./SelectPart.svelte";
 	import TextAreaPart from "./TextAreaPart.svelte";
+	import Widget from "./Widget.svelte";
 
-	export let onSubmit: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
+	export let onSubmit:
+		| EventHandler<SubmitEvent, HTMLFormElement>
+		| undefined
+		| null;
 	export let antiForgeryToken: string | null;
 	export let fragment: FragmentType<typeof FormFragment>;
 
@@ -46,30 +50,24 @@
 	method={content.form?.method}
 	on:submit|preventDefault={onSubmit}
 >
-	<input type="hidden" name="__RequestVerificationToken" value={antiForgeryToken}/>
+	<input
-	<div class="flex flex-col gap-2">
+		type="hidden"
+		name="__RequestVerificationToken"
+		value={antiForgeryToken}
+	/>
+	<div class="grid grid-cols-12 gap-2">
 		{#if content.flow}
 			{#each content.flow.widgets ?? [] as widget}
 				{#if widget?.__typename === "Button"}
-					<div class="flex justify-end">
 					<ButtonPart fragment={widget} />
-					</div>
 				{:else if widget?.__typename === "Input"}
-					<div>
 					<InputPart fragment={widget} />
-					</div>
 				{:else if widget?.__typename === "Label"}
-					<div>
 					<LabelPart fragment={widget} />
-					</div>
 				{:else if widget?.__typename === "Select"}
-					<div>
 					<SelectPart fragment={widget} />
-					</div>
 				{:else if widget?.__typename === "TextArea"}
-					<div>
 					<TextAreaPart fragment={widget} />
-					</div>
 				{/if}
 			{/each}
 		{/if}

src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte

@@ -3,6 +3,10 @@
 
 	export const InputPartFragment = graphql(/* GraphQL */ `
 		fragment InputPart on Input {
+			metadata {
+				alignment
+				size
+			}
 			input {
 				defaultValue
 				placeholder
@@ -27,6 +31,7 @@
 <script lang="ts">
 	import { useFragment, type FragmentType } from "../gql";
 	import CommonFieldParts from "./CommonFieldParts.svelte";
+	import Widget from "./Widget.svelte";
 	export let fragment: FragmentType<typeof InputPartFragment>;
 	const content = useFragment(InputPartFragment, fragment);
 
@@ -41,15 +46,19 @@
 	let value = content.input?.defaultValue ?? "";
 </script>
 
-<CommonFieldParts formElementLabel={content.formElementLabel}
+<Widget metadata={content.metadata}>
+	<CommonFieldParts
+		formElementLabel={content.formElementLabel}
 		formElement={content.formElement}
-	explanation={content.explanation} />
+		explanation={content.explanation}
+	/>
 
-<input
+	<input
 		id={content.formElement?.id}
 		name={content.formInputElement?.name}
 		type={content.input?.type}
 		class={cssClasses}
 		{value}
 		placeholder={content.input?.placeholder}
-/>
+	/>
+</Widget>

src/OAP/Oap.Theme.Svelte/src/components/LabelPart.svelte

@@ -3,6 +3,10 @@
 
 	export const LabelPartFragment = graphql(/* GraphQL */ `
 		fragment LabelPart on Label {
+			metadata {
+				alignment
+				size
+			}
 			displayText
 			formElement {
 				id
@@ -18,10 +22,13 @@
 
 <script lang="ts">
 	import { useFragment, type FragmentType } from "../gql";
+	import Widget from "./Widget.svelte";
 	export let fragment: FragmentType<typeof LabelPartFragment>;
 	const content = useFragment(LabelPartFragment, fragment);
 </script>
 
-<label id={content.formElement?.id} for={content.label?.for}>
+<Widget metadata={content.metadata}>
+	<label id={content.formElement?.id} for={content.label?.for}>
 		{content.label?.value}
-</label>
+	</label>
+</Widget>

src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte

@@ -3,6 +3,10 @@
 
 	export const SelectPartFragment = graphql(/* GraphQL */ `
 		fragment SelectPart on Select {
+			metadata {
+				alignment
+				size
+			}
 			formElementLabel {
 				label
 			}
@@ -30,17 +34,21 @@
 <script lang="ts">
 	import { useFragment, type FragmentType } from "../gql";
 	import CommonFieldParts from "./CommonFieldParts.svelte";
+	import Widget from "./Widget.svelte";
 	export let fragment: FragmentType<typeof SelectPartFragment>;
 	const content = useFragment(SelectPartFragment, fragment);
 
 	const showDropdown = content.select?.editor === "select";
 </script>
 
-<CommonFieldParts formElementLabel={content.formElementLabel}
+<Widget metadata={content.metadata}>
+	<CommonFieldParts
+		formElementLabel={content.formElementLabel}
 		formElement={content.formElement}
-	explanation={content.explanation} />
+		explanation={content.explanation}
+	/>
 
-{#if !showDropdown}
+	{#if !showDropdown}
 		<div class="mt-2 space-y-2">
 			{#each content.select?.options ?? [] as option, index}
 				<div class="flex items-center gap-x-3">
@@ -59,7 +67,7 @@
 				</div>
 			{/each}
 		</div>
-{:else}
+	{:else}
 		<div class="mt-2">
 			<select
 				id={content.formElement?.id}
@@ -67,10 +75,12 @@
 				class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
 			>
 				{#each content.select?.options ?? [] as option}
-				<option value={option?.value ?? option?.text} selected={false}
+					<option
-					>{option?.text}</option
+						value={option?.value ?? option?.text}
+						selected={false}>{option?.text}</option
 					>
 				{/each}
 			</select>
 		</div>
-{/if}
+	{/if}
+</Widget>

src/OAP/Oap.Theme.Svelte/src/components/TextAreaPart.svelte

@@ -3,6 +3,10 @@
 
 	export const TextAreaPartFragment = graphql(/* GraphQL */ `
 		fragment TextAreaPart on TextArea {
+			metadata {
+				alignment
+				size
+			}
 			explanation {
 				...RichText
 			}
@@ -26,16 +30,23 @@
 <script lang="ts">
 	import { useFragment, type FragmentType } from "../gql";
 	import CommonFieldParts from "./CommonFieldParts.svelte";
+	import Widget from "./Widget.svelte";
 	export let fragment: FragmentType<typeof TextAreaPartFragment>;
 	const content = useFragment(TextAreaPartFragment, fragment);
 </script>
 
-<CommonFieldParts formElementLabel={content.formElementLabel}
+<Widget metadata={content.metadata}>
+	<CommonFieldParts
+		formElementLabel={content.formElementLabel}
 		formElement={content.formElement}
-	explanation={content.explanation} />
+		explanation={content.explanation}
+	/>
 
-<textarea id={content.formElement?.id}
+	<textarea
+		id={content.formElement?.id}
 		name={content.formInputElement?.name}
 		class="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
-	placeholder={content.textArea?.placeholder}>
+		placeholder={content.textArea?.placeholder}
-</textarea>
+	>
+	</textarea>
+</Widget>

src/OAP/Oap.Theme.Svelte/src/components/Widget.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { FlowMetadata } from "../gql/graphql";
+
+    export let metadata: FlowMetadata | null | undefined;
+
+    const colspan = metadata?.size == 100 ? "col-span-12"
+        : metadata?.size == 50 ? "col-span-6"
+        : metadata?.size == 25 ? "col-span-3"
+        : metadata?.size == 33 ? "col-span-4"
+        : metadata?.size == 66 ? "col-span-8"
+        : "";
+    const justify = metadata?.alignment === "Right" ? "justify-self-end"
+        : metadata?.alignment === "Left" ? "justify-self-start"
+        : metadata?.alignment === "Center" ? "justify-self-center"
+        : metadata?.alignment === "Justify" ? "justify-self-stretch"
+        : "";
+
+    const cssClasses = colspan + " " + justify;
+</script>
+
+<div class={cssClasses}>
+    <slot>
+        A widget should be here.
+    </slot>
+</div>

src/OAP/Oap.Theme.Svelte/src/gql/gql.ts

@@ -14,14 +14,14 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  */
 const documents = {
     "\n\t\tquery OapApplicationForm($contentItemId: ID!) {\n\t\t\toapApplicationForm(where: { contentItemId: $contentItemId }) {\n\t\t\t\tdisplayText\n\t\t\t\tcontentItemId\n\t\t\t\tlist {\n\t\t\t\t\tcontentItems {\n\t\t\t\t\t\t__typename\n\t\t\t\t\t\t...OapApplicationFormStep\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormDocument,
-    "\n        fragment ButtonPart on Button {\n            button {\n                type\n                text\n            }\n            formInputElement {\n                name\n            }\n            formElement {\n                id\n            }\n        }\n    ": types.ButtonPartFragmentDoc,
-    "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t\t...SelectPart\n\t\t\t\t\t...TextAreaPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
-    "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
-    "\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
     "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
+    "\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t": types.ButtonPartFragmentDoc,
+    "\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t\t...SelectPart\n\t\t\t\t\t...TextAreaPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
+    "\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
+    "\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
     "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t": types.RichTextFragmentDoc,
-    "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
+    "\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
-    "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaPartFragmentDoc,
+    "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaPartFragmentDoc,
 };
 
 /**
@@ -45,7 +45,11 @@ export function graphql(source: "\n\t\tquery OapApplicationForm($contentItemId:
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n        fragment ButtonPart on Button {\n            button {\n                type\n                text\n            }\n            formInputElement {\n                name\n            }\n            formElement {\n                id\n            }\n        }\n    "): (typeof documents)["\n        fragment ButtonPart on Button {\n            button {\n                type\n                text\n            }\n            formInputElement {\n                name\n            }\n            formElement {\n                id\n            }\n        }\n    "];
+export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -53,15 +57,11 @@ export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayTex
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -69,11 +69,11 @@ export function graphql(source: "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"];
+export function graphql(source: "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

src/OAP/Oap.Theme.Svelte/src/lib/oap/oapApiV1Client.ts

@@ -1,48 +1,81 @@
 // DO NOT EDIT: generated by fsdgenjs
 
-import { HttpClientUtility, IServiceResult, IHttpClientOptions } from 'facility-core';
+import {
-import { IOapApiV1Client, IGetApplicationsRequest, IGetApplicationsResponse, ICreateApplicationRequest, ICreateApplicationResponse, IGetApplicationRequest, IGetApplicationResponse, IUpdateApplicationRequest, IUpdateApplicationResponse, IApplication, IApplicationCreateSet, IApplicationChangeSet, IApplicationTermsCreateSet, IApplicationTerms, ApplicationStatus } from './oapApiV1ClientTypes';
+	HttpClientUtility,
-export * from './oapApiV1ClientTypes';
+	type IServiceResult,
+	type IHttpClientOptions,
+} from "facility-core";
+import type {
+	IOapApiV1Client,
+	IGetApplicationsRequest,
+	IGetApplicationsResponse,
+	ICreateApplicationRequest,
+	ICreateApplicationResponse,
+	IGetApplicationRequest,
+	IGetApplicationResponse,
+	IUpdateApplicationRequest,
+	IUpdateApplicationResponse,
+	IApplication,
+	IApplicationCreateSet,
+	IApplicationChangeSet,
+	IApplicationTermsCreateSet,
+	IApplicationTerms,
+	ApplicationStatus,
+} from "./oapApiV1ClientTypes";
+export * from "./oapApiV1ClientTypes";
 
 /** Provides access to OapApiV1Client over HTTP via fetch. */
-export function createHttpClient({ fetch, baseUri }: IHttpClientOptions): IOapApiV1Client {
+export function createHttpClient({
+	fetch,
+	baseUri,
+}: IHttpClientOptions): IOapApiV1Client {
 	return new OapApiV1ClientHttpClient(fetch, baseUri);
 }
 
-const { fetchResponse, createResponseError, createRequiredRequestFieldError } = HttpClientUtility;
+const { fetchResponse, createResponseError, createRequiredRequestFieldError } =
+	HttpClientUtility;
 type IFetch = HttpClientUtility.IFetch;
 type IFetchRequest = HttpClientUtility.IFetchRequest;
 
 class OapApiV1ClientHttpClient implements IOapApiV1Client {
 	constructor(fetch: IFetch, baseUri?: string) {
-		if (typeof fetch !== 'function') {
+		if (typeof fetch !== "function") {
-			throw new TypeError('fetch must be a function.');
+			throw new TypeError("fetch must be a function.");
 		}
-		if (typeof baseUri === 'undefined') {
+		if (typeof baseUri === "undefined") {
-			baseUri = 'https://oaprotection.org/api/v1';
+			baseUri = "https://oaprotection.org/api/v1";
 		}
 		if (/[^\/]$/.test(baseUri)) {
-			baseUri += '/';
+			baseUri += "/";
 		}
 		this._fetch = fetch;
 		this._baseUri = baseUri;
 	}
 
 	/** Gets applications for the current user. */
-	public getApplications(request: IGetApplicationsRequest, context?: unknown): Promise<IServiceResult<IGetApplicationsResponse>> {
+	public getApplications(
-		let uri = 'applications';
+		request: IGetApplicationsRequest,
+		context?: unknown
+	): Promise<IServiceResult<IGetApplicationsResponse>> {
+		let uri = "applications";
 		const query: string[] = [];
-		request.status == null || query.push('status=' + request.status);
+		request.status == null || query.push("status=" + request.status);
-		request.limit == null || query.push('limit=' + request.limit.toString());
+		request.limit == null ||
-		request.nextToken == null || query.push('nextToken=' + encodeURIComponent(request.nextToken));
+			query.push("limit=" + request.limit.toString());
+		request.nextToken == null ||
+			query.push("nextToken=" + encodeURIComponent(request.nextToken));
 		if (query.length) {
-			uri = uri + '?' + query.join('&');
+			uri = uri + "?" + query.join("&");
 		}
 		const fetchRequest: IFetchRequest = {
-			method: 'GET',
+			method: "GET",
 		};
-		return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
+		return fetchResponse(
-			.then(result => {
+			this._fetch,
+			this._baseUri + uri,
+			fetchRequest,
+			context
+		).then((result) => {
 			const status = result.response.status;
 			let value: IGetApplicationsResponse | null = null;
 			if (status === 200) {
@@ -51,69 +84,96 @@ class OapApiV1ClientHttpClient implements IOapApiV1Client {
 				}
 			}
 			if (!value) {
-					return createResponseError(status, result.json) as IServiceResult<IGetApplicationsResponse>;
+				return createResponseError(
+					status,
+					result.json
+				) as IServiceResult<IGetApplicationsResponse>;
 			}
 			return { value: value };
 		});
 	}
 
 	/** Creates a new application for the current user. */
-	public createApplication(request: ICreateApplicationRequest, context?: unknown): Promise<IServiceResult<ICreateApplicationResponse>> {
+	public createApplication(
-		const uri = 'applications/';
+		request: ICreateApplicationRequest,
+		context?: unknown
+	): Promise<IServiceResult<ICreateApplicationResponse>> {
+		const uri = "applications/";
 		if (!request.applicationCreateSet) {
-			return Promise.resolve(createRequiredRequestFieldError('applicationCreateSet'));
+			return Promise.resolve(
+				createRequiredRequestFieldError("applicationCreateSet")
+			);
 		}
 		const fetchRequest: IFetchRequest = {
-			method: 'POST',
+			method: "POST",
-			headers: { 'Content-Type': 'application/json' },
+			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify(request.applicationCreateSet)
+			body: JSON.stringify(request.applicationCreateSet),
 		};
-		return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
+		return fetchResponse(
-			.then(result => {
+			this._fetch,
+			this._baseUri + uri,
+			fetchRequest,
+			context
+		).then((result) => {
 			const status = result.response.status;
 			let value: ICreateApplicationResponse | null = null;
 			if (status === 200) {
 				if (result.json) {
-						value = { application: result.json } as ICreateApplicationResponse;
+					value = {
+						application: result.json,
+					} as ICreateApplicationResponse;
 				}
-				}
+			} else if (status === 201) {
-				else if (status === 201) {
 				value = {};
 			}
 			if (!value) {
-					return createResponseError(status, result.json) as IServiceResult<ICreateApplicationResponse>;
+				return createResponseError(
+					status,
+					result.json
+				) as IServiceResult<ICreateApplicationResponse>;
 			}
 			return { value: value };
 		});
 	}
 
 	/** Gets the specified application for the current user. */
-	public getApplication(request: IGetApplicationRequest, context?: unknown): Promise<IServiceResult<IGetApplicationResponse>> {
+	public getApplication(
+		request: IGetApplicationRequest,
+		context?: unknown
+	): Promise<IServiceResult<IGetApplicationResponse>> {
 		const uriPartId = request.id != null && encodeURIComponent(request.id);
 		if (!uriPartId) {
-			return Promise.resolve(createRequiredRequestFieldError('id'));
+			return Promise.resolve(createRequiredRequestFieldError("id"));
 		}
 		const uri = `applications/${uriPartId}`;
 		const fetchRequest: IFetchRequest = {
-			method: 'GET',
+			method: "GET",
 		};
-		return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
+		return fetchResponse(
-			.then(result => {
+			this._fetch,
+			this._baseUri + uri,
+			fetchRequest,
+			context
+		).then((result) => {
 			const status = result.response.status;
 			let value: IGetApplicationResponse | null = null;
 			if (status === 200) {
 				if (result.json) {
-						value = { application: result.json } as IGetApplicationResponse;
+					value = {
+						application: result.json,
+					} as IGetApplicationResponse;
 				}
-				}
+			} else if (status === 304) {
-				else if (status === 304) {
 				value = { notModified: true };
 			}
 			if (!value) {
-					return createResponseError(status, result.json) as IServiceResult<IGetApplicationResponse>;
+				return createResponseError(
+					status,
+					result.json
+				) as IServiceResult<IGetApplicationResponse>;
 			}
 			let headerValue: string | null | undefined;
-				headerValue = result.response.headers.get('eTag');
+			headerValue = result.response.headers.get("eTag");
 			if (headerValue != null) {
 				value.eTag = headerValue;
 			}
@@ -122,31 +182,45 @@ class OapApiV1ClientHttpClient implements IOapApiV1Client {
 	}
 
 	/** Updates the application. */
-	public updateApplication(request: IUpdateApplicationRequest, context?: unknown): Promise<IServiceResult<IUpdateApplicationResponse>> {
+	public updateApplication(
+		request: IUpdateApplicationRequest,
+		context?: unknown
+	): Promise<IServiceResult<IUpdateApplicationResponse>> {
 		const uriPartId = request.id != null && encodeURIComponent(request.id);
 		if (!uriPartId) {
-			return Promise.resolve(createRequiredRequestFieldError('id'));
+			return Promise.resolve(createRequiredRequestFieldError("id"));
 		}
 		const uri = `applications/${uriPartId}`;
 		if (!request.applicationChangeSet) {
-			return Promise.resolve(createRequiredRequestFieldError('applicationChangeSet'));
+			return Promise.resolve(
+				createRequiredRequestFieldError("applicationChangeSet")
+			);
 		}
 		const fetchRequest: IFetchRequest = {
-			method: 'PATCH',
+			method: "PATCH",
-			headers: { 'Content-Type': 'application/json' },
+			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify(request.applicationChangeSet)
+			body: JSON.stringify(request.applicationChangeSet),
 		};
-		return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
+		return fetchResponse(
-			.then(result => {
+			this._fetch,
+			this._baseUri + uri,
+			fetchRequest,
+			context
+		).then((result) => {
 			const status = result.response.status;
 			let value: IUpdateApplicationResponse | null = null;
 			if (status === 200) {
 				if (result.json) {
-						value = { application: result.json } as IUpdateApplicationResponse;
+					value = {
+						application: result.json,
+					} as IUpdateApplicationResponse;
 				}
 			}
 			if (!value) {
-					return createResponseError(status, result.json) as IServiceResult<IUpdateApplicationResponse>;
+				return createResponseError(
+					status,
+					result.json
+				) as IServiceResult<IUpdateApplicationResponse>;
 			}
 			return { value: value };
 		});

src/OAP/Oap.Theme.Svelte/src/lib/stores.ts

@@ -0,0 +1,5 @@
+import applicationId from "./stores/applicationId";
+import step from "./stores/step";
+import application from './stores/application';
+
+export { step, applicationId, application };

src/OAP/Oap.Theme.Svelte/src/lib/stores/application.ts

@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+import { type IApplication } from "../oap/oapApiV1ClientTypes";
+
+const application = writable<IApplication | null>(null);
+
+export default application;

src/OAP/Oap.Theme.Svelte/src/lib/stores/applicationId.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+const applicationId = writable<string | null>(null);
+
+export default applicationId;