@functionalcms/svelte-components 4.6.2 → 4.7.1

package/dist/components/presentation/Carousel.svelte

@@ -23,17 +23,18 @@
 		items,
 		perPage = 1,
 		slideGaps = '20px;',
-		disableDrag = false
+		disableDrag = false,
+		css = {slide: "", container: ""}
 	}: Props = $props();
 
 	let options: EmblaOptionsType = {
-		loop: false
+		loop: false,
 	};
 	if(disableDrag) {
 		options.watchDrag = false;
 	}
-	let slideStyle = $derived('flex: 0 0 ' + 100 / perPage + '%;');
-	let containerCss = cn('flex', 'fw');
+	let slideStyle = cn('flex: 0 0 ' + 100 / perPage + '%;', css.slide);
+	let containerCss = cn('flex', 'fw', css.container);
 
 	let embla = {
 		scrollPrev: () => console.log('prev'),

package/dist/components/presentation/ImageCompare.svelte

@@ -1,178 +1,180 @@
-<script>
-	let hideOnSlide = true,
-		imgOffset = null,
-		sliding = false,
-		contain = false,
-		overlay = true,
-		offset = 0.5,
-		before = "",
-		after = "",
-		lazyLoad = false,
-		img;
-
-	function resize(e) {
-		imgOffset = (
-			e.type === "load" ? e.target : img
-		).getBoundingClientRect();
-	}
+<script lang="ts">
+	import { type Snippet } from "svelte";
 
-	function move(e) {
-		if (sliding && imgOffset) {
-			let x = (e.touches ? e.touches[0].pageX : e.pageX) - imgOffset.left;
-			x = x < 0 ? 0 : x > w ? w : x;
-			offset = x / w;
-		}
+	interface Props {
+		imageLeftSrc: string;
+		imageLeftAlt: string;
+		imageRightSrc: string;
+		imageRightAlt: string;
+		slidertLabel: Snippet;
 	}
 
-	function start(e) {
-		sliding = true;
-		move(e);
-	}
+	let {
+		imageLeftSrc = "",
+		imageLeftAlt = "",
+		imageRightSrc = "",
+		imageRightAlt = "",
+		slidertLabel,
+	}: Partial<Props> = $props();
 
-	function end() {
-		sliding = false;
-	}
+	let sliderPosition: number = $state(50);
+	let animationFrame: number | null = $state(null);
 
-	$: w = imgOffset && imgOffset.width;
-	$: h = imgOffset && imgOffset.height;
-	$: x = w * offset;
-	$: opacity = hideOnSlide && sliding ? 0 : 1;
-	$: style = contain
-		? `width:100%;height:100%;`
-		: `width:${w}px;height:${h}px;`;
-	$: imageLoading = lazyLoad ? "lazy" : "eager";
+	function handleInput(e: Event) {
+		if (animationFrame) cancelAnimationFrame(animationFrame);
 
-	export { before, after, offset, overlay, contain, lazyLoad, hideOnSlide };
+		animationFrame = requestAnimationFrame(() => {
+			sliderPosition = (e.target as HTMLInputElement).valueAsNumber;
+		});
+	}
+
+	function handleClick(e: Event) {
+		(e.target as HTMLInputElement).focus();
+	}
 </script>
 
-<svelte:window
-	on:touchmove={move}
-	on:touchend={end}
-	on:mousemove={move}
-	on:mouseup={end}
-	on:resize={resize}
-/>
-
-<div class="container" {style} on:touchstart={start} on:mousedown={start} role="img" aria-roledescription="image slider">
-	<img
-		bind:this={img}
-		loading={imageLoading}
-		src={after}
-		alt="after"
-		on:mousedown|preventDefault
-		on:load={resize}
-		{style}
-	/>
-	<img
-		loading={imageLoading}
-		src={before}
-		alt="before"
-		on:mousedown|preventDefault
-		style="{style}clip:rect(0, {x}px, {h}px, 0);"
-	/>
-	{#if overlay}
-		<div class="overlay" style="opacity:{opacity}"></div>
-	{/if}
-	<div class="before-label" style="opacity:{opacity}">
-		<slot name="before"></slot>
-	</div>
-	<div class="after-label" style="opacity:{opacity}">
-		<slot name="after"></slot>
-	</div>
-	<div class="handle" style="left: calc({offset * 100}% - 20px)">
-		<div class="arrow-left"></div>
-		<div class="arrow-right"></div>
-	</div>
+<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>
-	.container {
-		overflow: hidden;
+	.svelte-compare-image-container {
+		box-sizing: border-box;
 		position: relative;
-		box-sizing: content-box;
+		overflow: hidden;
 	}
-	.container img {
-		top: 0;
-		left: 0;
-		z-index: 20;
-		display: block;
-		max-width: 100%;
-		user-select: none;
-		object-fit: cover;
-		position: absolute;
+
+	.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;
 	}
-	.overlay {
-		top: 0;
-		opacity: 0;
-		z-index: 25;
+
+	img {
+		display: block;
+		height: auto;
 		width: 100%;
-		height: 100%;
-		position: absolute;
-		transition: opacity 0.5s;
-		background: rgba(0, 0, 0, 0.5);
+		margin: 0;
 	}
-	.before-label,
-	.after-label {
-		top: 0;
-		bottom: 0;
-		z-index: 25;
-		user-select: none;
+
+	.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%
+		);
 	}
-	.before-label {
+
+	label {
+		position: absolute;
+		display: flex;
+		align-items: stretch;
+		top: 0;
 		left: 0;
-	}
-	.after-label {
+		bottom: 0;
 		right: 0;
+		background: transparent;
 	}
-	.container:hover > .overlay {
-		opacity: 1;
-	}
-	.handle {
-		z-index: 30;
-		width: 40px;
-		height: 40px;
-		cursor: move;
-		background: none;
-		margin-top: -4px;
-		margin-left: -4px;
-		user-select: none;
-		position: absolute;
-		border-radius: 50px;
-		top: calc(50% - 20px);
-		border: 4px solid white;
-	}
-	.handle:before,
-	.handle:after {
+
+	label::before {
 		content: "";
-		height: 9999px;
 		position: absolute;
-		left: calc(50% - 2px);
-		border: 2px solid white;
-	}
-	.handle:before {
-		top: 40px;
-	}
-	.handle:after {
-		bottom: 40px;
+		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;
 	}
-	.arrow-right,
-	.arrow-left {
-		width: 0;
-		height: 0;
-		user-select: none;
+
+	input[type="range"] {
 		position: relative;
-		border-top: 10px solid transparent;
-		border-bottom: 10px solid transparent;
+		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;
 	}
-	.arrow-right {
-		left: 23px;
-		bottom: 10px;
-		border-left: 10px solid white;
+
+	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);
 	}
-	.arrow-left {
-		left: 7px;
-		top: 10px;
-		border-right: 10px solid white;
+
+	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/ImageCompare.svelte.d.ts

@@ -1,48 +1,10 @@
+import { type Snippet } from "svelte";
+declare const ImageCompare: import("svelte").Component<Partial<{
+    imageLeftSrc: string;
+    imageLeftAlt: string;
+    imageRightSrc: string;
+    imageRightAlt: string;
+    slidertLabel: Snippet;
+}>, {}, "">;
+type ImageCompare = ReturnType<typeof ImageCompare>;
 export default ImageCompare;
-type ImageCompare = SvelteComponent<{
-    overlay?: boolean | undefined;
-    before?: string | undefined;
-    after?: string | undefined;
-    offset?: number | undefined;
-    contain?: boolean | undefined;
-    lazyLoad?: boolean | undefined;
-    hideOnSlide?: boolean | undefined;
-}, {
-    mousedown: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    before: {};
-    after: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const ImageCompare: $$__sveltets_2_IsomorphicComponent<{
-    overlay?: boolean | undefined;
-    before?: string | undefined;
-    after?: string | undefined;
-    offset?: number | undefined;
-    contain?: boolean | undefined;
-    lazyLoad?: boolean | undefined;
-    hideOnSlide?: boolean | undefined;
-}, {
-    mousedown: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    before: {};
-    after: {};
-}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/index-server.d.ts

@@ -4,7 +4,7 @@ export { default as errorHandler } from './auth/errorHandle.js';
 export { redisSessionProvider } from './auth/redisSessionProvider.js';
 export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.js';
 export { userAuthenticationProvider } from './auth/userAuthenticationProvider.js';
-export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService } from './server-side/getServices.js';
+export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, } from './server-side/getServices.js';
 export type { RedirectResponse } from './auth/RedirectResponse.js';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';
-export { isHuman } from './components/form/AntiBot.js';
+export { isHuman } from './components/form/AntiBot.ts';

package/dist/index-server.js

@@ -4,6 +4,6 @@ export { default as errorHandler } from './auth/errorHandle.js';
 export { redisSessionProvider } from './auth/redisSessionProvider.js';
 export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.js';
 export { userAuthenticationProvider } from './auth/userAuthenticationProvider.js';
-export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService } from './server-side/getServices.js';
+export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, } from './server-side/getServices.js';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';
-export { isHuman } from './components/form/AntiBot.js';
+export { isHuman } from './components/form/AntiBot.ts';

package/dist/index.d.ts

@@ -6,13 +6,13 @@ export { default as Well } from './components/layouts/Well.svelte';
 export { default as Banner } from './components/layouts/Banner.svelte';
 export { default as SimpleFooter } from './components/layouts/SimpleFooter.svelte';
 export { default as Tabs } from './components/layouts/Tabs.svelte';
-export type { Tab, TabSizes, NavigationDirection } from './components/layouts/tabs.js';
-export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.js';
+export type { Tab, TabSizes, NavigationDirection } from './components/layouts/tabs.ts';
+export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.ts';
 export { default as Link } from './components/presentation/Link.svelte';
 export { default as Logo } from './components/presentation/Logo.svelte';
 export { default as Card } from './components/presentation/Card.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
-export type { CarouselItem } from './components/presentation/Carousel.js';
+export type { CarouselItem } from './components/presentation/Carousel.ts';
 export { default as Carousel } from './components/presentation/Carousel.svelte';
 export { default as Drawer } from './components/presentation/Drawer.svelte';
 export { default as Disclose } from './components/presentation/Disclose.svelte';
@@ -22,8 +22,8 @@ export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
-export { isAuthenticated, selectVisible } from './components/menu/types.js';
-export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
+export { isAuthenticated, selectVisible } from './components/menu/types.ts';
+export { HeaderNavigationItem, Visiblity } from './components/menu/types.ts';
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
@@ -31,5 +31,5 @@ export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export type { ChoiceInputOption } from './components/form/utils.ts';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
-export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
+export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.ts';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -12,7 +12,7 @@ export { default as Tabs } from './components/layouts/Tabs.svelte';
 /*
  * Styling
  */
-export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.js';
+export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.ts';
 /*
  * Presentation
  */
@@ -32,8 +32,8 @@ export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
-export { isAuthenticated, selectVisible } from './components/menu/types.js';
-export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
+export { isAuthenticated, selectVisible } from './components/menu/types.ts';
+export { HeaderNavigationItem, Visiblity } from './components/menu/types.ts';
 /*
  * Form
  */
@@ -49,7 +49,7 @@ export { default as Markdown } from './components/content/Markdown.svelte';
 /*
  * Blog
  */
-export { listAllPosts, importPost } from './components/blog/blog.js';
+export { listAllPosts, importPost } from './components/blog/blog.ts';
 /*
  * Integrations
  */

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

@@ -1,4 +1,4 @@
-import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService } from "@functionalcms/services";
 import type { Locals } from "./types.js";
 export declare const getDataService: (locals: Locals) => DataService;
 export declare const getCommunicationService: (locals: Locals) => CommunicationService;
@@ -6,3 +6,4 @@ export declare const getWebsiteService: (locals: Locals) => WebsitesService;
 export declare const getTemplateService: (locals: Locals) => TemplateService;
 export declare const getBlobService: (locals: Locals) => BlobService;
 export declare const getAIService: (locals: Locals) => AiService;
+export declare const getAuthService: (locals: Locals) => AuthService;

package/dist/server-side/getServices.js

@@ -1,5 +1,5 @@
 import { DOMAIN, ENDPOINT } from "$env/static/private";
-import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService, } from "@functionalcms/services";
 const getAccessToken = (locals) => {
     return locals.token.access_token;
 };
@@ -33,3 +33,8 @@ export const getAIService = (locals) => {
     const service = new AiService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
+export const getAuthService = (locals) => {
+    const accessToken = getAccessToken(locals);
+    const service = new AuthService(accessToken, ENDPOINT);
+    return service;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.6.2",
+	"version": "4.7.1",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -45,7 +45,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
 		"@eslint/js": "^9.17.0",
-		"@functionalcms/services": "^0.9.3",
+		"@functionalcms/services": "^0.12.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -55,7 +55,7 @@
 		"eslint-plugin-svelte": "^2.36.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
-		"publint": "^0.2.0",
+		"publint": "^0.3.8",
 		"sass": "^1.83.4",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",