@functionalcms/svelte-components 3.5.20 → 4.0.0-pre-2.0

package/dist/components/presentation/ImageCompare.svelte

@@ -1,20 +1,36 @@
 <script lang="ts">
-	let hideOnSlide = true,
-		imgOffset = null,
+	import type { TouchEventHandler } from "svelte/elements";
+
+	interface Props {
+		before: string;
+		after: string;
+		offset?: number;
+		overlay?: boolean;
+		sliding?: boolean;
+		contain?: boolean;
+		lazyLoad?: 'eager' | 'lazy' | undefined;
+		hideOnSlide?: boolean;
+	}
+
+	let {
+		before,
+		after,
+		offset = 0.5,
+		overlay = true,
 		sliding = false,
 		contain = false,
-		overlay = true,
-		offset = 0.5,
-		before = '',
-		after = '',
-		lazyLoad = false,
-		img;
+		lazyLoad = 'lazy',
+		hideOnSlide = true
+	}: Props = $props();
+
+	let imgOffset: any = null;
+	let img: any = null;
 
-	function resize(e) {
+	function resize(e: Event) {
 		imgOffset = (e.type === 'load' ? e.target : img).getBoundingClientRect();
 	}
 
-	function move(e) {
+	function move(e: any) {
 		if (sliding && imgOffset) {
 			let x = (e.touches ? e.touches[0].pageX : e.pageX) - imgOffset.left;
 			x = x < 0 ? 0 : x > w ? w : x;
@@ -22,7 +38,7 @@
 		}
 	}
 
-	function start(e) {
+	function start(e: Event) {
 		sliding = true;
 		move(e);
 	}
@@ -31,14 +47,13 @@
 		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 };
+	let w = $derived(imgOffset && imgOffset.width);
+	let h = $derived(imgOffset && imgOffset.height);
+	let x = $derived(w * offset);
+	let opacity = $derived(hideOnSlide && sliding ? 0 : 1);
+	let style = $derived(
+		contain ? `width:100%;height:100%;` : 'width:' + w + 'px;height:' + h + 'px;'
+	);
 </script>
 
 <svelte:window
@@ -52,36 +67,28 @@
 <div
 	class="container"
 	{style}
-	on:touchstart={start}
-	on:mousedown={start}
+	ontouchstart={start}
+	onmousedown={start}
 	role="img"
 	aria-roledescription="image slider"
 >
 	<img
 		bind:this={img}
-		loading={imageLoading}
+		loading={lazyLoad}
 		src={after}
 		alt="after"
-		on:mousedown|preventDefault
-		on:load={resize}
+		onload={resize}
 		{style}
 	/>
 	<img
-		loading={imageLoading}
+		loading={lazyLoad}
 		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>
@@ -114,20 +121,6 @@
 		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;
 	}

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

@@ -1,31 +1,13 @@
-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;
-}
-declare const ImageCompare: $$__sveltets_2_IsomorphicComponent<{
-    before?: string;
-    after?: string;
+interface Props {
+    before: string;
+    after: string;
     offset?: number;
     overlay?: boolean;
+    sliding?: boolean;
     contain?: boolean;
-    lazyLoad?: boolean;
+    lazyLoad?: 'eager' | 'lazy' | undefined;
     hideOnSlide?: boolean;
-}, {
-    mousedown: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    before: {};
-    after: {};
-}, {}, string>;
-type ImageCompare = InstanceType<typeof ImageCompare>;
+}
+declare const ImageCompare: import("svelte").Component<Props, {}, "">;
+type ImageCompare = ReturnType<typeof ImageCompare>;
 export default ImageCompare;

package/dist/components/presentation/Link.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+	import { AlignItmes, ComponentSize, Justify, Orientation } from '../Styling.js';
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		href: string;
+		css?: string;
+		isPrimary?: boolean;
+		isDisabled?: boolean;
+		isBordered?: boolean;
+		isSecondary?: boolean;
+		idRounded?: boolean;
+		idPill?: boolean;
+		idBlock?: boolean;
+		idCapsule?: boolean;
+		idCircle?: boolean;
+		idGrouped?: boolean;
+		isCircle?: boolean;
+		isFlex?: boolean;
+		size?: ComponentSize;
+		justify?: Justify;
+		alignItems?: AlignItmes;
+		orientation?: Orientation;
+		role?: string;
+	}
+
+	let {
+		children,
+		href,
+		css = '',
+		isPrimary = false,
+		isDisabled = false,
+		isBordered = false,
+		isSecondary = false,
+		idRounded = false,
+		idPill = false,
+		idBlock = false,
+		idCapsule = false,
+		idCircle = false,
+		idGrouped = false,
+		isCircle = false,
+		isFlex = true,
+		size = ComponentSize.Normal,
+		justify = Justify.Center,
+		alignItems = AlignItmes.Center,
+		orientation = Orientation.Row,
+		role = 'link',
+		...restProps
+	}: Props = $props();
+
+	let isSmall = $derived(size === ComponentSize.Small);
+	let isLarge = $derived(size === ComponentSize.Large);
+
+	let classes = $derived(
+		cn(
+			isPrimary ? 'btn-primary' : '',
+			isDisabled ? 'disabled' : '',
+
+			isBordered ? 'btn-bordered' : '',
+			isSecondary ? 'btn-secondary' : '',
+
+			idRounded ? 'btn-rounded' : '',
+			idPill ? 'btn-pill' : '',
+			idBlock ? 'btn-block' : '',
+			idCapsule ? 'btn-capsule' : '',
+			idCircle ? 'btn-circle' : '',
+			idGrouped ? 'btn-grouped' : '',
+
+			isLarge ? 'btn-large' : '',
+			isSmall ? 'btn-small' : '',
+
+			isLarge && isCircle ? 'btn-large btn-circle-large' : '',
+			isSmall && idCircle ? 'btn-small btn-circle-small' : '',
+
+			isFlex ? `flex` : '',
+			isFlex ? `${orientation}` : '',
+			isFlex ? `${justify}` : '',
+			isFlex ? `${alignItems}` : '',
+
+			css ? css : 'btn'
+		)
+	);
+</script>
+
+<a class={classes} {href} {...restProps}>
+	{@render children()}
+</a>
+
+<style>.btn-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
+  appearance: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--timing-medium);
+}
+
+.btn {
+  /* TODO test this fallback override syntax is correct */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
+  appearance: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--timing-medium);
+}
+
+.btn-skin,
+.btn {
+  color: var(--btn-font-color, var(--dark));
+  background-color: var(--btn-bgcolor, var(--gray-light));
+  border-color: var(--btn-bgcolor, var(--gray-light));
+  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+  border-style: solid;
+  border-width: var(--btn-border-size, 1px);
+  font-family: var(--btn-font-family, var(--font-family-body));
+  font-weight: var(--btn-font-weight, 400);
+  font-size: var(--btn-font-size, 1rem);
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  line-height: var(--line-height, var(--fluid-20, 1.25rem));
+  padding-block-start: var(--vertical-pad, 0.5rem);
+  padding-block-end: var(--vertical-pad, 0.5rem);
+  padding-inline-start: var(--side-padding, 0.75rem);
+  padding-inline-end: var(--side-padding, 0.75rem);
+  text-decoration: none;
+  text-align: center;
+  outline: none;
+}
+
+.btn:visited {
+  color: var(--btn-font-color, var(--dark));
+}
+
+.btn:hover {
+  opacity: 85%;
+  text-decoration: none;
+}
+
+.btn:active {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-decoration: none;
+  transition-duration: 0s;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.btn:focus {
+  box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
+  /* Needed for High Contrast mode */
+  outline: var(--focus-ring-outline-width) var(--focus-ring-outline-style) var(--focus-ring-outline-color);
+  transition: box-shadow var(--timing-fast) ease-out;
+  /* In order for the focused element's box-shadow to appear above its siblings we need to
+  establish a new stacking context: https://stackoverflow.com/a/28042700 */
+  isolation: isolate;
+}
+
+/*
+* Disabled State
+*
+* The disabled state uses the class .disabled, is-disabled,
+* and the form attribute disabled="disabled".
+* The use of !important is only added because this is a state
+* that must be applied to all buttons when in a disabled state.
+*/
+.btn.disabled,
+.btn:disabled {
+  top: 0 !important;
+  background: var(--btn-disabled-bg, var(--gray-mid-dark)) !important;
+  text-shadow: 0 1px 1px rgb(255, 255, 255) !important;
+  /* primary, secondary, natural, all look same when disabled; and we don't want to
+  have an inadvertant looking blue primary border when disabled so it's transparent */
+  border-color: transparent;
+  color: var(--btn-disabled-color, var(--gray-dark)) !important;
+  cursor: default !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  opacity: 80% !important;
+}
+
+.btn-primary {
+  background-color: var(--btn-primary, var(--primary));
+  border-color: var(--btn-primary, var(--primary));
+  color: var(--btn-primary-color, var(--light));
+}
+
+/* Border and font is primary. When hovered, we invert with primary background and white font */
+.btn-primary.btn-bordered {
+  color: var(--btn-primary, var(--primary));
+}
+
+.btn-primary.btn-bordered:hover,
+.btn-primary.btn-bordered:focus {
+  background-color: var(--btn-primary, var(--primary));
+  color: var(--btn-primary-color, var(--light));
+}
+
+.btn-primary:visited {
+  color: var(--btn-primary-color, var(--light));
+}
+
+.btn-secondary {
+  background-color: var(--btn-secondary, var(--secondary));
+  border-color: var(--btn-secondary, var(--secondary));
+  color: var(--btn-secondary-color, var(--light));
+}
+
+/* Border and font is secondary. When hovered, we invert with secondary background and white font */
+.btn-secondary.btn-bordered {
+  color: var(--btn-secondary, var(--secondary));
+}
+
+.btn-secondary.btn-bordered:hover,
+.btn-secondary.btn-bordered:focus {
+  background-color: var(--btn-secondary, var(--secondary));
+  color: var(--btn-secondary-color, var(--light));
+}
+
+.btn-secondary:visited {
+  color: var(--btn-secondary-color, var(--light));
+}
+
+/*
+/**
+  * Border Buttons
+  */
+.btn-bordered {
+  border-width: 1px;
+  background: transparent;
+}
+
+/**
+  * Sizes
+  */
+.btn-large {
+  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
+  height: 3rem;
+  line-height: 3rem;
+  padding: 0 3rem;
+}
+
+.btn-small {
+  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
+  height: 2rem;
+  line-height: 2rem;
+  padding: 0 2rem;
+}
+
+/**
+  * Rounded
+  */
+.btn-rounded {
+  border-radius: var(--btn-radius, var(--radius, 0.25rem));
+}
+
+.btn-pill {
+  border-radius: 200px;
+}
+
+/*
+  * Size Adjustment for equal height & width buttons
+  *
+  * Remove padding
+  */
+.btn-circle {
+  border-radius: 100%;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 !important;
+}
+
+.btn-circle-large {
+  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
+  width: 3rem;
+  height: 3rem;
+}
+
+.btn-circle-small {
+  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
+  width: 2rem;
+  height: 2rem;
+}
+
+/**
+ * Button Block (stacked)
+ */
+.btn-block {
+  width: 100%;
+}
+
+/* This is a utility class used if you literally want to stack block buttons one after another.
+Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
+.btn-block-following {
+  margin-block-start: -1px;
+}
+
+.btn-grouped {
+  border-radius: var(--btn-radius, var(--radius, 0.25rem));
+}
+
+.btn-grouped:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-inline-end: -1px;
+}
+
+.btn-grouped:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-capsule {
+  --padding-side: calc(var(--side-padding, 0.75rem) * 1.5);
+  border-radius: var(--radius-capsule);
+  padding-inline-start: var(--padding-side);
+  padding-inline-end: var(--padding-side);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .btn,
+  .btn:focus {
+    transition-duration: 0.001ms !important;
+  }
+}
+/**
+ * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
+ * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
+ */
+:is(.btn-link, .btn-blank) {
+  font-family: var(--btn-font-family, var(--font-family-body));
+  font-size: var(--btn-font-size, 1rem);
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  transition: none;
+}
+
+/* Since blank buttons can be used for things like input addons we don't want to go crazy
+on the side padding. As such, these have a good bit less then regular buttons. */
+.btn-blank {
+  --btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
+  padding-inline-start: var(--btn-blank-side-padding);
+  padding-inline-end: var(--btn-blank-side-padding);
+}
+
+/* A button blank with link color text */
+.btn-link {
+  color: var(--btn-primary, var(--primary));
+}
+
+.btn-link:hover {
+  cursor: pointer;
+}</style>

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

@@ -0,0 +1,27 @@
+import { AlignItmes, ComponentSize, Justify, Orientation } from '../Styling.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    href: string;
+    css?: string;
+    isPrimary?: boolean;
+    isDisabled?: boolean;
+    isBordered?: boolean;
+    isSecondary?: boolean;
+    idRounded?: boolean;
+    idPill?: boolean;
+    idBlock?: boolean;
+    idCapsule?: boolean;
+    idCircle?: boolean;
+    idGrouped?: boolean;
+    isCircle?: boolean;
+    isFlex?: boolean;
+    size?: ComponentSize;
+    justify?: Justify;
+    alignItems?: AlignItmes;
+    orientation?: Orientation;
+    role?: string;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/presentation/Logo.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		companyName: string;
+		logoUrl: string;
+		css: string;
+	}
+
+	let {
+		companyName,
+		logoUrl,
+		css = 'logo'
+	}: 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%;
+	}
+
+	@media (min-width: 960px) {
+		a img {
+			margin: var(--logo-margin);
+			padding: var(--logo-padding);
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    companyName: string;
+    logoUrl: string;
+    css: string;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/components/presentation/ShowItem.d.ts

@@ -1,8 +1,8 @@
-export declare class ShowItem {
-    name: string;
-    image: string;
-    title: string;
-    short: string;
-    content: string;
-    path: string;
+export interface ShowItem {
+    name?: string;
+    image?: string;
+    title?: string;
+    short?: string;
+    content?: string;
+    path?: string;
 }

package/dist/components/presentation/ShowItem.js

@@ -1,8 +1 @@
-export class ShowItem {
-    name;
-    image;
-    title;
-    short;
-    content;
-    path;
-}
+export {};

package/dist/index-server.d.ts

@@ -5,6 +5,5 @@ 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 { AiMessage } from '@functionalcms/services';
 export type { RedirectResponse } from './auth/RedirectResponse.js';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';

package/dist/index-server.js

@@ -1,11 +1,8 @@
 export { authenticationHandle } from './auth/authenticationHandle.js';
 export { default as authorizationHandle } from './auth/authorizationHandle.js';
 export { default as errorHandler } from './auth/errorHandle.js';
-// export { tokenRefreshHandle } from './auth/tokenRefreshHandle.js';
-// export { getStandardHandle } from './auth/standardPipeline.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 { AiMessage } from '@functionalcms/services';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';