feat: update default ui

flottform/demo/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import '../app.postcss';
+	import '@flottform/forms/style.css';
 </script>
 
 <slot />

flottform/demo/src/routes/+page.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import { onMount } from 'svelte';
-	import { defaultThemeForFileInput, FlottformFileInputHost } from '@flottform/forms';
+	import { createDefaultFlottformComponent, FlottformFileInputHost } from '@flottform/forms';
 	import { writable } from 'svelte/store';
 	import FileInput from '$lib/components/FileInput.svelte';
 	import { createClientUrl, sdpExchangeServerBase } from '../api';
+	import { browser } from '$app/environment';
+
+	const createTextClientUrl = async ({ endpointId }: { endpointId: string }) => {
+		if (browser) {
+			return `${window.location.origin}${base}/flottform-text-client/${endpointId}`;
+		}
+		return `https://192.168.178.23:5175/flottform-text-client/${endpointId}`;
+	};
 
 	let highlighted = false;
 
@@ -101,18 +109,32 @@
 		isFillingOut = false;
 	};
 
+	let flottformAnchor: HTMLElement;
+
+	//container should have saved all elements
+
 	onMount(async () => {
 		const fileInputs = document.querySelectorAll(
 			'input[type=file]'
 		) as NodeListOf<HTMLInputElement>;
+		const flottformComponent = createDefaultFlottformComponent({
+			flottformAnchorElement: flottformAnchor
+		});
 		for (const file of fileInputs) {
-			const flottformFileInputHost = new FlottformFileInputHost({
+			flottformComponent.createFileItem({
 				flottformApi: sdpExchangeServerBase,
 				createClientUrl,
 				inputField: file,
-				theme: defaultThemeForFileInput()
+				options: { label: file.id }
 			});
 		}
+		flottformComponent.createTextItem({
+			flottformApi: sdpExchangeServerBase,
+			createClientUrl: createTextClientUrl,
+			options: { label: 'Text' }
+		});
+
+		console.log(flottformComponent.getAllFlottformItems());
 	});
 </script>
 
@@ -144,6 +166,7 @@
 			up every few hours.
 		</p>
 		<form action="{base}/upload" method="POST" enctype="multipart/form-data" class="grid gap-8">
+			<div id="flottform-anchor" bind:this={flottformAnchor} class="flottform-anchor"></div>
 			<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
 				<div class="flex flex-col">
 					<label for="name">Name</label>
@@ -292,6 +315,10 @@
 </div>
 
 <style lang="postcss">
+	.flottform-anchor {
+		--flottform-border-width: 2px;
+		--flottform-border-color: #343af0;
+	}
 	.drag {
 		@apply border-2 border-dotted border-primary-blue;
 	}

flottform/demo/src/routes/flottform-text-client/[endpointId]/+page.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { FlottformTextInputClient } from '@flottform/forms';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { sdpExchangeServerBase } from '../../../api';
+
+	let currentState = $state<
+		'init' | 'connected' | 'sending' | 'done' | 'error-user-denied' | 'error'
+	>('init');
+	let textInput: HTMLInputElement;
+	let sendTextToForm = $state<() => void>();
+	let textToSend = $state('');
+
+	onMount(async () => {
+		const flottformTextInputClient = new FlottformTextInputClient({
+			endpointId: $page.params.endpointId,
+			flottformApi: sdpExchangeServerBase
+		});
+		// Start the WebRTC connection process as soon as the page loads.
+		flottformTextInputClient.start();
+
+		// Listen to the events to update the UI appropriately
+		flottformTextInputClient.on('connected', () => {
+			currentState = 'connected';
+		});
+		flottformTextInputClient.on('sending', () => {
+			currentState = 'sending';
+		});
+		flottformTextInputClient.on('done', () => {
+			currentState = 'done';
+		});
+		flottformTextInputClient.on('error', () => {
+			currentState = 'error';
+		});
+
+		sendTextToForm = () => {
+			currentState = 'sending';
+			try {
+				flottformTextInputClient.sendText(textToSend);
+				console.log(textToSend);
+			} catch (err) {
+				currentState = 'error';
+				console.error('Error getting navigators current position', err);
+			}
+		};
+	});
+</script>
+
+<div class="max-w-screen-xl mx-auto p-8 box-border grid grid-cols-1 gap-8">
+	<h1>Flottform "Return and complaints" client</h1>
+	<p>Use this form to send a text from this device to the open form on the main device.</p>
+
+	<form action="" on:submit={sendTextToForm}>
+		<div class="flex flex-col gap-4">
+			<label for="flottform">Send your text</label>
+			<input
+				type="text"
+				name="flottform"
+				id="flottform"
+				bind:this={textInput}
+				bind:value={textToSend}
+				class=" rounded p-2 border-primary-blue border-2"
+			/>
+			{#if currentState === 'sending'}
+				<div class="h-24 items-center">
+					<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="w-12 spinner-svg">
+						<circle cx="50" cy="50" r="45" class="spinner" />
+					</svg>
+				</div>
+			{:else if currentState === 'done'}
+				<div class="flex gap-6">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" version="1.1" class="w-12">
+						<path
+							d="M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z "
+							class="checkmark"
+							stroke-linecap="round"
+							pathLength="1"
+							stroke-width="2"
+							stroke="#3ab53a"
+							fill="none"
+						/>
+					</svg>
+					<p>Your text is successfully sent</p>
+				</div>
+			{:else if currentState === 'connected'}
+				<button
+					type="submit"
+					class="group relative w-fit cursor-pointer overflow-hidden rounded-md border-2 bg-primary-blue text-white border-primary-blue px-12 py-3 font-semibold disabled:border-gray-300 disabled:bg-gray-200 disabled:text-gray-500 disabled:pointer-events-none"
+				>
+					<span
+						class="ease absolute top-1/2 h-0 w-64 origin-center -translate-x-20 rotate-45 bg-white transition-all duration-300 group-hover:h-64 group-hover:-translate-y-32"
+					/>
+					<span class="ease relative transition duration-300 group-hover:text-primary-blue"
+						>Send</span
+					>
+				</button>
+			{:else if currentState === 'error'}
+				<h2 class="animate-bounce">Ouch!</h2>
+				<p>There was an error connecting to flottform! 😬</p>
+				<p>Please try again with a new QR code by clicking the button again on the main form.</p>
+			{/if}
+		</div>
+	</form>
+
+	<div>Connection state: {currentState}</div>
+</div>
+
+<style lang="postcss">
+	.spinner-svg {
+		animation: 2s linear infinite svg-animation;
+	}
+
+	.spinner {
+		@apply block fill-transparent stroke-primary-blue;
+		stroke-linecap: round;
+		stroke-dasharray: 283;
+		stroke-dashoffset: 280;
+		stroke-width: 8px;
+		transform-origin: 50% 50%;
+		animation: spinner 1.4s ease-in-out infinite both;
+	}
+
+	.checkmark {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		animation: dash 1s linear 1 forwards;
+	}
+
+	@keyframes spinner {
+		0%,
+		25% {
+			stroke-dashoffset: 280;
+			transform: rotate(0);
+		}
+
+		50%,
+		75% {
+			stroke-dashoffset: 65;
+			transform: rotate(45deg);
+		}
+
+		100% {
+			stroke-dashoffset: 280;
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotateZ(0deg);
+		}
+		100% {
+			transform: rotateZ(360deg);
+		}
+	}
+
+	@keyframes dash {
+		from {
+			stroke-dashoffset: 1;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

flottform/demo/src/routes/multiple-input-form/+page.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
-	import { FlottformFileInputHost, defaultThemeForFileInput } from '@flottform/forms';
+	import { FlottformFileInputHost, createDefaultFlottformComponent } from '@flottform/forms';
 	import { onMount } from 'svelte';
 	import { createClientUrl, sdpExchangeServerBase } from '../../api';
 
+	let flottformAnchor: HTMLElement;
+
 	onMount(async () => {
 		const fileInputs = document.querySelectorAll(
 			'input[type=file]'
 		) as NodeListOf<HTMLInputElement>;
+		const flottformComponent = createDefaultFlottformComponent({
+			flottformAnchorElement: flottformAnchor
+		});
 		for (const file of fileInputs) {
-			const flottformFileInputHost = new FlottformFileInputHost({
+			flottformComponent.createFileItem({
 				flottformApi: sdpExchangeServerBase,
 				createClientUrl,
 				inputField: file,
-				theme: defaultThemeForFileInput()
+				options: { label: file.id || file.name || 'File' }
 			});
 		}
+
 		// flottformFileInputHost.on('new', () => {
 		// 	// Optional: Custom UI
 		// });
@@ -58,12 +64,17 @@
 	<title>Flottform DEMO</title>
 </svelte:head>
 
+<div
+	id="flottform-anchor"
+	bind:this={flottformAnchor}
+	class="absolute top-0 right-0 w-64 flottform-anchor"
+></div>
 <div class="max-w-screen-xl mx-auto p-8 box-border grid grid-cols-1 gap-8">
 	<h1>Multiple Input Form</h1>
 	<form class="grid grid-cols-1 gap-8">
 		<label class="grid">
 			<span>Please upload the first file:</span>
-			<input type="file" name="fileA" multiple />
+			<input type="file" name="fileA" id="document-A" multiple />
 		</label>
 		<label class="grid">
 			<span>Please upload the second file:</span>
@@ -90,6 +101,9 @@
 </div>
 
 <style lang="postcss">
+	.flottform-anchor {
+		--flottform-root-border-radius: 0px 0px 10px 10px;
+	}
 	.flottform {
 		@apply absolute top-0 right-0;
 	}

flottform/forms/package.json

@@ -15,6 +15,10 @@
 		".": {
 			"import": "./dist/index.js",
 			"require": "./dist/index.umd.cjs"
+		},
+		"./style.css": {
+			"import": "./dist/style.css",
+			"require": "./dist/style.css"
 		}
 	},
 	"types": "./dist/src/index.d.ts",

flottform/forms/src/flottform-file-input-host.ts

@@ -1,12 +1,13 @@
 import { FlottformChannelHost } from './flottform-channel-host';
-import { Styles } from './flottform-styles';
-import { DEFAULT_WEBRTC_CONFIG, EventEmitter, Logger, POLL_TIME_IN_MS } from './internal';
-
-type Listeners = {
-	new: [];
-	disconnected: [];
-	error: [error: any];
-	connected: [];
+import {
+	BaseInputHost,
+	BaseListeners,
+	DEFAULT_WEBRTC_CONFIG,
+	Logger,
+	POLL_TIME_IN_MS
+} from './internal';
+
+type Listeners = BaseListeners & {
 	receive: []; // Emitted to signal the start of receiving the file(s)
 	progress: {
 		fileIndex: number;
@@ -16,17 +17,11 @@ type Listeners = {
 		overallProgress: number;
 	}[]; // Emitted to signal the progress of receiving the file(s)
 	done: [];
-	'endpoint-created': [{ link: string; qrCode: string }];
-	'webrtc:waiting-for-client': [
-		event: { link: string; qrCode: string; channel: FlottformChannelHost }
-	];
-	'webrtc:waiting-for-ice': [];
-	'webrtc:waiting-for-file': [];
 };
 
 const noop = () => {};
 
-export class FlottformFileInputHost extends EventEmitter<Listeners> {
+export class FlottformFileInputHost extends BaseInputHost<Listeners> {
 	private channel: FlottformChannelHost | null = null;
 	private inputField: HTMLInputElement;
 	private logger: Logger;
@@ -57,7 +52,6 @@ export class FlottformFileInputHost extends EventEmitter<Listeners> {
 		pollTimeForIceInMs?: number;
 		theme?: (myself: FlottformFileInputHost) => void;
 		logger?: Logger;
-		styles?: Styles;
 	}) {
 		super();
 		this.channel = new FlottformChannelHost({