@functionalcms/svelte-components 5.4.0 → 5.4.3

package/dist/components/presentation/ImageCompare.svelte

@@ -1,180 +1,180 @@
-<script lang="ts">
-	import { type Snippet } from "svelte";
-
-	interface Props {
-		imageLeftSrc: string;
-		imageLeftAlt: string;
-		imageRightSrc: string;
-		imageRightAlt: string;
-		slidertLabel: Snippet;
-	}
-
-	let {
-		imageLeftSrc = "",
-		imageLeftAlt = "",
-		imageRightSrc = "",
-		imageRightAlt = "",
-		slidertLabel,
-	}: Partial<Props> = $props();
-
-	let sliderPosition: number = $state(50);
-	let animationFrame: number | null = $state(null);
-
-	function handleInput(e: Event) {
-		if (animationFrame) cancelAnimationFrame(animationFrame);
-
-		animationFrame = requestAnimationFrame(() => {
-			sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
-		});
-	}
-
-	function handleClick(e: Event) {
-		(e.target as HTMLInputElement).focus();
-	}
-</script>
-
-<div
-	class="svelte-compare-image-container"
-	style="--slider-position: {sliderPosition}%;"
->
-	<img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
-	<img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
-
-	<label>
-		<input
-			type="range"
-			min="0"
-			max="100"
-			value={sliderPosition}
-			oninput={handleInput}
-			onchange={handleInput}
-			onclick={handleClick}
-		/>
-	</label>
-</div>
-
-<style>
-	.svelte-compare-image-container {
-		box-sizing: border-box;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.svelte-compare-image-container:focus-within {
-		outline: auto 4px rgba(59, 153, 252, 0.7);
-		outline: auto 4px Highlight;
-		outline: auto 4px -moz-mac-focusring;
-		outline: auto 4px -webkit-focus-ring-color;
-	}
-
-	img {
-		display: block;
-		height: auto;
-		width: 100%;
-		margin: 0;
-	}
-
-	.left-img {
-		clip-path: polygon(
-			0 0,
-			var(--slider-position) 0,
-			var(--slider-position) 100%,
-			0 100%
-		);
-	}
-
-	.right-img {
-		position: absolute;
-		top: 0;
-		clip-path: polygon(
-			var(--slider-position) 0,
-			100% 0,
-			100% 100%,
-			var(--slider-position) 100%
-		);
-	}
-
-	label {
-		position: absolute;
-		display: flex;
-		align-items: stretch;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		background: transparent;
-	}
-
-	label::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
-		width: var(--slider-width, 0.125rem);
-		background: var(--slider-color, #ffffff);
-		pointer-events: none;
-	}
-
-	input[type="range"] {
-		position: relative;
-		cursor: col-resize;
-		margin: 0 calc(var(--handle-size, 2.5rem) / -2);
-		width: calc(100% + var(--handle-size, 2.5rem));
-		padding: 0;
-		border-radius: 0;
-		appearance: none;
-		-webkit-appearance: none;
-		background: none;
-		border: none;
-	}
-
-	input[type="range"]::-moz-range-thumb {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
-		background-image: var(
-			--handle-background-image,
-			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
-		);
-		background-size: 80%;
-		background-position: center center;
-		background-repeat: no-repeat;
-		border: var(--handle-border-width, 0.125rem) solid
-			var(--slider-color, #ffffff);
-		border-radius: 100%;
-		box-shadow:
-			0 3px 1px -2px rgba(0, 0, 0, 0.2),
-			0 2px 2px 0 rgba(0, 0, 0, 0.14),
-			0 1px 5px 0 rgba(0, 0, 0, 0.12);
-		color: var(--slider-color, #ffffff);
-		width: var(--handle-size, 2.5rem);
-		height: var(--handle-size, 2.5rem);
-	}
-
-	input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
-		background-image: var(
-			--handle-background-image,
-			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
-		);
-		background-size: 80%;
-		background-position: center center;
-		background-repeat: no-repeat;
-		border: var(--handle-border-width, 0.125rem) solid
-			var(--slider-color, #ffffff);
-		border-radius: 100%;
-		box-shadow:
-			0 3px 1px -2px rgba(0, 0, 0, 0.2),
-			0 2px 2px 0 rgba(0, 0, 0, 0.14),
-			0 1px 5px 0 rgba(0, 0, 0, 0.12);
-		color: var(--slider-color, #ffffff);
-		width: var(--handle-size, 2.5rem);
-		height: var(--handle-size, 2.5rem);
-	}
-</style>
+<script lang="ts">
+	import { type Snippet } from "svelte";
+
+	interface Props {
+		imageLeftSrc: string;
+		imageLeftAlt: string;
+		imageRightSrc: string;
+		imageRightAlt: string;
+		slidertLabel: Snippet;
+	}
+
+	let {
+		imageLeftSrc = "",
+		imageLeftAlt = "",
+		imageRightSrc = "",
+		imageRightAlt = "",
+		slidertLabel,
+	}: Partial<Props> = $props();
+
+	let sliderPosition: number = $state(50);
+	let animationFrame: number | null = $state(null);
+
+	function handleInput(e: Event) {
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+
+		animationFrame = requestAnimationFrame(() => {
+			sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
+		});
+	}
+
+	function handleClick(e: Event) {
+		(e.target as HTMLInputElement).focus();
+	}
+</script>
+
+<div
+	class="svelte-compare-image-container"
+	style="--slider-position: {sliderPosition}%;"
+>
+	<img src={imageLeftSrc} alt={imageLeftAlt} class="left-img" />
+	<img src={imageRightSrc} alt={imageRightAlt} class="right-img" />
+
+	<label>
+		<input
+			type="range"
+			min="0"
+			max="100"
+			value={sliderPosition}
+			oninput={handleInput}
+			onchange={handleInput}
+			onclick={handleClick}
+		/>
+	</label>
+</div>
+
+<style>
+	.svelte-compare-image-container {
+		box-sizing: border-box;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.svelte-compare-image-container:focus-within {
+		outline: auto 4px rgba(59, 153, 252, 0.7);
+		outline: auto 4px Highlight;
+		outline: auto 4px -moz-mac-focusring;
+		outline: auto 4px -webkit-focus-ring-color;
+	}
+
+	img {
+		display: block;
+		height: auto;
+		width: 100%;
+		margin: 0;
+	}
+
+	.left-img {
+		clip-path: polygon(
+			0 0,
+			var(--slider-position) 0,
+			var(--slider-position) 100%,
+			0 100%
+		);
+	}
+
+	.right-img {
+		position: absolute;
+		top: 0;
+		clip-path: polygon(
+			var(--slider-position) 0,
+			100% 0,
+			100% 100%,
+			var(--slider-position) 100%
+		);
+	}
+
+	label {
+		position: absolute;
+		display: flex;
+		align-items: stretch;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: transparent;
+	}
+
+	label::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: calc(var(--slider-position) - var(--slider-width, 0.125rem) / 2);
+		width: var(--slider-width, 0.125rem);
+		background: var(--slider-color, #ffffff);
+		pointer-events: none;
+	}
+
+	input[type="range"] {
+		position: relative;
+		cursor: col-resize;
+		margin: 0 calc(var(--handle-size, 2.5rem) / -2);
+		width: calc(100% + var(--handle-size, 2.5rem));
+		padding: 0;
+		border-radius: 0;
+		appearance: none;
+		-webkit-appearance: none;
+		background: none;
+		border: none;
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
+		background-image: var(
+			--handle-background-image,
+			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+		);
+		background-size: 80%;
+		background-position: center center;
+		background-repeat: no-repeat;
+		border: var(--handle-border-width, 0.125rem) solid
+			var(--slider-color, #ffffff);
+		border-radius: 100%;
+		box-shadow:
+			0 3px 1px -2px rgba(0, 0, 0, 0.2),
+			0 2px 2px 0 rgba(0, 0, 0, 0.14),
+			0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		color: var(--slider-color, #ffffff);
+		width: var(--handle-size, 2.5rem);
+		height: var(--handle-size, 2.5rem);
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--handle-background-color, rgba(0, 0, 0, 0.6));
+		background-image: var(
+			--handle-background-image,
+			url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+		);
+		background-size: 80%;
+		background-position: center center;
+		background-repeat: no-repeat;
+		border: var(--handle-border-width, 0.125rem) solid
+			var(--slider-color, #ffffff);
+		border-radius: 100%;
+		box-shadow:
+			0 3px 1px -2px rgba(0, 0, 0, 0.2),
+			0 2px 2px 0 rgba(0, 0, 0, 0.14),
+			0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		color: var(--slider-color, #ffffff);
+		width: var(--handle-size, 2.5rem);
+		height: var(--handle-size, 2.5rem);
+	}
+</style>

package/dist/components/presentation/Logo.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-	interface Props {
-		companyName: string;
-		logoUrl: string;
-		css: string;
-	}
-
-	let {
-		companyName,
-		logoUrl,
-		css = 'logo'
-	}: Partial<Props> = $props();
-
-</script>
-
-<a href="/" class={css}>
-	<img src={logoUrl} alt={companyName} loading="lazy"  />
-</a>
-
-<style>
-	a { 
-		display: var(--logo-display, 'inline-block');
-		margin: var(--mobile-logo-margin);
-		padding: var(--mobile-logo-padding);
-	}
-	a img {
-		width: 100%;
-		width: var(--logo-width, 200px);
-	}
-
-	@media (min-width: 960px) {
-		a img {
-			margin: var(--logo-margin);
-			padding: var(--logo-padding);
-		}
-	}
-</style>
+<script lang="ts">
+	interface Props {
+		companyName: string;
+		logoUrl: string;
+		css: string;
+	}
+
+	let {
+		companyName,
+		logoUrl,
+		css = 'logo'
+	}: Partial<Props> = $props();
+
+</script>
+
+<a href="/" class={css}>
+	<img src={logoUrl} alt={companyName} loading="lazy"  />
+</a>
+
+<style>
+	a { 
+		display: var(--logo-display, 'inline-block');
+		margin: var(--mobile-logo-margin);
+		padding: var(--mobile-logo-padding);
+	}
+	a img {
+		width: 100%;
+		width: var(--logo-width, 200px);
+	}
+
+	@media (min-width: 960px) {
+		a img {
+			margin: var(--logo-margin);
+			padding: var(--logo-padding);
+		}
+	}
+</style>

package/dist/components/presentation/StyleBox.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		class: string;
-	}
-
-	let {
-		children,  
-		class: css = '',
-	}: Partial<Props> = $props();
-</script>
-
-<div class={css}>
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class: string;
+	}
+
+	let {
+		children,  
+		class: css = '',
+	}: Partial<Props> = $props();
+</script>
+
+<div class={css}>
+	{@render children?.()}
+</div>

package/dist/components/presentation/Well.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		class: string;
-	}
-
-	let {
-		children,
-		class: css = '',
-	}: Partial<Props> = $props();
-</script>
-
-<div class="well m-auto p-1 {css}">
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class: string;
+	}
+
+	let {
+		children,
+		class: css = '',
+	}: Partial<Props> = $props();
+</script>
+
+<div class="well m-auto p-1 {css}">
+	{@render children?.()}
+</div>

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { default as Well } from './components/presentation/Well.svelte';
 export { default as FlexBox } from './components/presentation/FlexBox.svelte';
 export { default as StyleBox } from './components/presentation/StyleBox.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
-export { InputType, type Field, type InputField, type TextareaField, type CollectionField, type SelectField, type FilePickerField, type TimePickerField, type PhoneInputField, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, } from './components/form/form.js';
+export { InputType, type Field, type InputField, type TextareaField, type CollectionField, type SelectField, type FilePickerField, type TimePickerField, type PhoneInputField, type DatePickerField, type DropzoneField, type HiddenField, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as Well } from './components/presentation/Well.svelte';
 export { default as FlexBox } from './components/presentation/FlexBox.svelte';
 export { default as StyleBox } from './components/presentation/StyleBox.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
-export { InputType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, } from './components/form/form.js';
+export { InputType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';