@functionalcms/svelte-components 5.4.4 → 5.5.0

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-server.d.ts

@@ -5,7 +5,7 @@ export { machineAuthenticationHandle } from './server-side/auth/machine_authenti
 export { userAuthenticationProvider } from './server-side/auth/userAuthenticationProvider.js';
 export { hookSequence } from './server-side/functionalSequence.js';
 export { sessionStorageHandler } from './server-side/handlers/sessionStorageHandler.js';
-export { getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAuthService, getFileService, } from './server-side/getServices.js';
+export { getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAuthService, getFileService, getUsersService } from './server-side/getServices.js';
 export type { RedirectResponse } from './server-side/auth/RedirectResponse.js';
 export { isHuman } from './components/form/AntiBot.js';
 export { paraglideHandler } from './server-side/handlers/paraglideHandler.js';

package/dist/index-server.js

@@ -5,7 +5,7 @@ export { machineAuthenticationHandle } from './server-side/auth/machine_authenti
 export { userAuthenticationProvider } from './server-side/auth/userAuthenticationProvider.js';
 export { hookSequence } from './server-side/functionalSequence.js';
 export { sessionStorageHandler } from './server-side/handlers/sessionStorageHandler.js';
-export { getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAuthService, getFileService, } from './server-side/getServices.js';
+export { getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAuthService, getFileService, getUsersService } from './server-side/getServices.js';
 export { isHuman } from './components/form/AntiBot.js';
 export { paraglideHandler } from './server-side/handlers/paraglideHandler.js';
 export { redirectPipelineHandler } from './server-side/handlers/redirectPipelineHandler.js';

package/dist/server-side/getServices.d.ts

@@ -1,4 +1,4 @@
-import { CommunicationService, DataService, TemplateService, WebsitesService, AuthService, FilesService } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, AuthService, FilesService, UsersService } from "@functionalcms/services";
 import type { Locals } from "./types.js";
 export declare const getDataService: (locals: Locals, endpoint: string) => DataService;
 export declare const getCommunicationService: (locals: Locals, endpoint: string) => CommunicationService;
@@ -6,3 +6,4 @@ export declare const getWebsiteService: (locals: Locals, endpoint: string) => We
 export declare const getTemplateService: (locals: Locals, endpoint: string) => TemplateService;
 export declare const getAuthService: (locals: Locals, endpoint: string) => AuthService;
 export declare const getFileService: (locals: Locals, endpoint: string) => FilesService;
+export declare const getUsersService: (locals: Locals, endpoint: string) => UsersService;

package/dist/server-side/getServices.js

@@ -1,4 +1,4 @@
-import { CommunicationService, DataService, TemplateService, WebsitesService, AuthService, FilesService, } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, AuthService, FilesService, UsersService, } from "@functionalcms/services";
 const getAccessToken = (locals) => locals.token;
 export const getDataService = (locals, endpoint) => {
     const accessToken = getAccessToken(locals);
@@ -30,3 +30,8 @@ export const getFileService = (locals, endpoint) => {
     const service = new FilesService(accessToken, endpoint);
     return service;
 };
+export const getUsersService = (locals, endpoint) => {
+    const accessToken = getAccessToken(locals);
+    const service = new UsersService(accessToken, endpoint);
+    return service;
+};