@functionalcms/svelte-components 2.39.0 → 2.40.2

package/dist/components/menu/HamburgerMenu.svelte

@@ -37,55 +37,7 @@ const buttonCss = mergedClasses("hamburger-handle", noBorder, cssClasses.buttonC
 </Drawer>
 
 <style>
-	:global(.hamburger-handle) {
-		background: var(--functional-menu-background) !important;
-	}
 	:global(#hamburger-menu) {
 		z-index: 10001;
 	}
-	:global(#hamburger-menu > .dialog-content) {
-		background: var(--functional-menu-background) !important;
-	}
-	:global(.no-border) {
-		border: none !important;
-	}
-	ul {
-		list-style: none;
-		background-color: white;
-	}
-	:global(#menu-id) {
-		color: var(--functional-menu-item-color);
-	}
-	a {
-		display: block;
-		font-weight: bold;
-		color: var(--functional-menu-item-color);
-		margin: var(--functional-menu-item-margin);
-		padding: var(--functional-menu-item-padding);
-		background: var(--functional-menu-item-background);
-		border-top: var(--functional-menu-item-border-top);
-		border-right: var(--functional-menu-item-border-right);
-		border-bottom: var(--functional-menu-item-border-bottom);
-		border-left: var(--functional-menu-item-border-left);
-	}
-	a:hover {
-		color: var(--functional-menu-item-hover-color);
-		margin: var(--functional-menu-item-hover-margin);
-		padding: var(--functional-menu-item-hover-padding);
-		background: var(--functional-menu-item-hover-background);
-		border-top: var(--functional-menu-item-hover-border-top);
-		border-right: var(--functional-menu-item-hover-border-right);
-		border-bottom: var(--functional-menu-item-hover-border-bottom);
-		border-left: var(--functional-menu-item-hover-border-left);
-	}
-	li[aria-current='true'] a {
-		color: var(--functional-menu-item-selected-color);
-		margin: var(--functional-menu-item-selected-margin);
-		padding: var(--functional-menu-item-selected-padding);
-		background: var(--functional-menu-item-selected-background);
-		border-top: var(--functional-menu-item-selected-border-top);
-		border-right: var(--functional-menu-item-selected-border-right);
-		border-bottom: var(--functional-menu-item-selected-border-bottom);
-		border-left: var(--functional-menu-item-selected-border-left);
-	}
 </style>

package/dist/components/menu/Menu.d.ts

@@ -9,6 +9,7 @@ export declare class HeaderNavigationItem {
     path?: string | undefined;
     action?: ClickAction | undefined;
     visiblity: Visiblity;
+    subItems?: HeaderNavigationItem[];
 }
 export declare function selectVisible(pages: Array<any>, visiblity: Visiblity): any[];
 export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: HeaderNavigationItem): any;

package/dist/components/menu/Menu.js

@@ -9,6 +9,7 @@ export class HeaderNavigationItem {
     path;
     action;
     visiblity = Visiblity.Always;
+    subItems = [];
 }
 export function selectVisible(pages, visiblity) {
     return pages.filter((page) => page?.visiblity === Visiblity.Always ||

package/dist/components/menu/NavigationItems.svelte

@@ -20,56 +20,16 @@ const linkCss = mergedClasses(cssClasses.link);
 			role="presentation"
 		>
 			<span class="screenreader-only">Navigate to {pageItem.name}</span>
-			<!-- <Link href={pageItem.path} role="menuItem"> -->
 			<a href={pageItem.path} role="menuItem">
 				{pageItem.name}
+
+				{#if pageItem.subItems?.length > 0}
+					<slot name="subItems" subpages={pageItem.subItems} />
+				{/if}
 			</a>
-			<!-- </Link> -->
 		</li>
 	{/each}
 </ul>
 
 <style>
-	/* ul {
-		background: var(--functional-menu-background);
-		margin: var(--functional-menu-margin);
-		padding: var(--functional-menu-padding);
-	}
-	li {
-	}
-	a {
-		color: var(--functional-menu-item-color);
-		margin: var(--functional-menu-item-margin);
-		padding: var(--functional-menu-item-padding);
-		background: var(--functional-menu-item-background);
-		border-top: var(--functional-menu-item-border-top);
-		border-right: var(--functional-menu-item-border-right);
-		border-bottom: var(--functional-menu-item-border-bottom);
-		border-left: var(--functional-menu-item-border-left);
-		border-radius: var(--functional-menu-item-radius, var(--functional-radius));
-		text-decoration: none;
-		display: block;
-	}
-	a:hover {
-		color: var(--functional-menu-item-hover-color);
-		margin: var(--functional-menu-item-hover-margin);
-		padding: var(--functional-menu-item-hover-padding);
-		background: var(--functional-menu-item-hover-background);
-		border-top: var(--functional-menu-item-hover-border-top);
-		border-right: var(--functional-menu-item-hover-border-right);
-		border-bottom: var(--functional-menu-item-hover-border-bottom);
-		border-left: var(--functional-menu-item-hover-border-left);
-		border-radius: var(--functional-menu-item-hover-radius, var(--functional-radius));
-	}
-	li[aria-current='true'] a {
-		color: var(--functional-menu-item-selected-color);
-		margin: var(--functional-menu-item-selected-margin);
-		padding: var(--functional-menu-item-selected-padding);
-		background: var(--functional-menu-item-selected-background);
-		border-top: var(--functional-menu-item-selected-border-top);
-		border-right: var(--functional-menu-item-selected-border-right);
-		border-bottom: var(--functional-menu-item-selected-border-bottom);
-		border-left: var(--functional-menu-item-selected-border-left);
-		border-radius: var(--functional-menu-item-selected-radius, var(--functional-radius));
-	} */
 </style>

package/dist/components/menu/NavigationItems.svelte.d.ts

@@ -14,7 +14,11 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        subItems: {
+            subpages: HeaderNavigationItem[] | undefined;
+        };
+    };
     exports?: {} | undefined;
     bindings?: string | undefined;
 };

package/dist/components/presentation/ImageCompare.svelte

@@ -0,0 +1,178 @@
+<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();
+	}
+
+	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;
+		}
+	}
+
+	function start(e) {
+		sliding = true;
+		move(e);
+	}
+
+	function end() {
+		sliding = false;
+	}
+
+	$: 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";
+
+	export { before, after, offset, overlay, contain, lazyLoad, hideOnSlide };
+</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>
+
+<style>
+	.container {
+		overflow: hidden;
+		position: relative;
+		box-sizing: content-box;
+	}
+	.container img {
+		top: 0;
+		left: 0;
+		z-index: 20;
+		display: block;
+		max-width: 100%;
+		user-select: none;
+		object-fit: cover;
+		position: absolute;
+	}
+	.overlay {
+		top: 0;
+		opacity: 0;
+		z-index: 25;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		transition: opacity 0.5s;
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.before-label,
+	.after-label {
+		top: 0;
+		bottom: 0;
+		z-index: 25;
+		user-select: none;
+		position: absolute;
+	}
+	.before-label {
+		left: 0;
+	}
+	.after-label {
+		right: 0;
+	}
+	.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 {
+		content: "";
+		height: 9999px;
+		position: absolute;
+		left: calc(50% - 2px);
+		border: 2px solid white;
+	}
+	.handle:before {
+		top: 40px;
+	}
+	.handle:after {
+		bottom: 40px;
+	}
+	.arrow-right,
+	.arrow-left {
+		width: 0;
+		height: 0;
+		user-select: none;
+		position: relative;
+		border-top: 10px solid transparent;
+		border-bottom: 10px solid transparent;
+	}
+	.arrow-right {
+		left: 23px;
+		bottom: 10px;
+		border-left: 10px solid white;
+	}
+	.arrow-left {
+		left: 7px;
+		top: 10px;
+		border-right: 10px solid white;
+	}
+</style>

package/dist/components/presentation/ImageCompare.svelte.d.ts

@@ -0,0 +1,47 @@
+/** @typedef {typeof __propDef.props}  ImageCompareProps */
+/** @typedef {typeof __propDef.events}  ImageCompareEvents */
+/** @typedef {typeof __propDef.slots}  ImageCompareSlots */
+export default class ImageCompare extends SvelteComponent<{
+    before?: string | undefined;
+    after?: string | undefined;
+    offset?: number | undefined;
+    overlay?: boolean | undefined;
+    contain?: boolean | undefined;
+    lazyLoad?: boolean | undefined;
+    hideOnSlide?: boolean | undefined;
+}, {
+    mousedown: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    before: {};
+    after: {};
+}> {
+}
+export type ImageCompareProps = typeof __propDef.props;
+export type ImageCompareEvents = typeof __propDef.events;
+export type ImageCompareSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        before?: string | undefined;
+        after?: string | undefined;
+        offset?: number | undefined;
+        overlay?: boolean | undefined;
+        contain?: boolean | undefined;
+        lazyLoad?: boolean | undefined;
+        hideOnSlide?: boolean | undefined;
+    };
+    events: {
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        before: {};
+        after: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
 export { default as Carusel } from './components/presentation/Carusel.svelte';
 export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
 export type { BlogPost } from './components/blog/BlogPost.js';

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as Link } from './components/Link.svelte';
 export { default as Gallery } from './components/presentation/Gallery.svelte';
 export { default as Carusel } from './components/presentation/Carusel.svelte';
 export { CaruseleItem } from './components/presentation/Carusele.js';
+export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as BlogDescription } from './components/blog/BlogDescription.svelte';
 export { default as BlogTitle } from './components/blog/BlogTitle.svelte';
 export { importPost, listAllPosts } from './components/blog/blog.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.39.0",
+	"version": "2.40.2",
 	"watch": {
 		"build": {
 			"patterns": [