@functionalcms/svelte-components 4.36.9 → 5.0.0-beta1

package/dist/components/menu/HamburgerMenu.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import { HeaderNavigationItem, defaultCss } from './types.js';
-	import { afterNavigate } from '$app/navigation';
-	import { cn } from '../../utils.js';
-	import { Placement } from '../Styling.js';
-	import Button from '../form/Button.svelte';
-	import Drawer from '../presentation/Drawer.svelte';
-	import ListMenu from './ListMenu.svelte';
-
-	interface Css {
-		buttonCss: string;
-		container: string;
-		link: string;
-	}
-	interface Props {
-		css: Partial<Css>;
-		noBorder: boolean;
-		placement: Placement;
-		localPages: Array<HeaderNavigationItem>;
-	}
-
-	let {
-		localPages = [],
-		css = { buttonCss: '', container: '', link: '' },
-		placement = Placement.Start
-	}: Partial<Props> = $props();
-
-	let isOpen = $state(false);
-	let buttonCss = $derived(cn('hamburger-handle', css.buttonCss ?? ''));
-
-	function toggleDrawer() {
-		isOpen = !isOpen;
-	}
-
-	const close = () => (isOpen = false);
-</script>
-
-<Button type="button" isPrimary css={buttonCss} click={() => toggleDrawer()}>&#9776;</Button>
-
-<Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
-	<div class="flex flex-row justify-between">
-		<ListMenu {localPages} {css} click={() => close()}></ListMenu>
-		<Button css="close" click={() => close()}>X</Button>
-	</div>
-</Drawer>
-
-<style>
-	:global(#hamburger-menu) {
-		z-index: 10001;
-	}
-	:global(.hamburger-handle) {
-		background: none !important;
-		border: none !important;
-	}
-	:global(.btn.close) {
-		position: fixed;
-		top: var(--hamburger-menu-margin, 25px);
-		right: var(--hamburger-menu-margin, 25px);
-		background: none !important;
-		border: none !important;
-	}
-</style>

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

@@ -1,14 +0,0 @@
-import { HeaderNavigationItem } from './types.js';
-import { Placement } from '../Styling.js';
-declare const HamburgerMenu: import("svelte").Component<Partial<{
-    css: Partial<{
-        buttonCss: string;
-        container: string;
-        link: string;
-    }>;
-    noBorder: boolean;
-    placement: Placement;
-    localPages: Array<HeaderNavigationItem>;
-}>, {}, "">;
-type HamburgerMenu = ReturnType<typeof HamburgerMenu>;
-export default HamburgerMenu;

package/dist/components/menu/ListMenu.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { type HeaderNavigationItem, isSelected } from './types.js';
-	import { Orientation } from '../Styling.js';
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import { page } from '$app/state';
-
-	interface CssProps {
-		container?: string;
-		link?: string;
-	}
-
-	interface Props {
-		localPages: Array<HeaderNavigationItem>;
-		itemRender: Snippet<[HeaderNavigationItem]>;
-		subItemRender: Snippet<[Array<HeaderNavigationItem>]>;
-		css: CssProps;
-		orientation: Orientation;
-		includeSubpagesForSelect: boolean;
-		click: () => void;
-	}
-
-	let {
-		subItemRender = undefined,
-		itemRender = undefined, 
-		css = { container: '', link: '' },
-		localPages = [],
-		orientation = Orientation.Column,
-		includeSubpagesForSelect = true,
-		click = () => {}
-	}: Partial<Props> = $props();
-
-	let containerCss = cn('flex', orientation, css.container ?? '');
-	let linkCss = cn(css.link ?? '');
-</script>
-
-<ul class={containerCss} role="menu" aria-label="menu">
-	{#each localPages as pageItem}
-		<li
-			data-selected={isSelected(includeSubpagesForSelect, page, pageItem)}
-			class={linkCss}
-			role="none"
-		>
-			{#if itemRender}
-				{@render itemRender(pageItem)}
-			{:else}
-			<span class="screenreader-only">Navigate to {pageItem.name}</span>
-			<a href={pageItem.path} role="menuitem" onclick={click}>
-				{pageItem.name}
-			</a>
-			{/if}
-
-			{#if subItemRender}
-				{@render subItemRender(pageItem.subItems ?? [])}
-			{/if}
-		</li>
-	{/each}
-</ul>
-
-<style>
-</style>

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

@@ -1,17 +0,0 @@
-import { type HeaderNavigationItem } from './types.js';
-import { Orientation } from '../Styling.js';
-import type { Snippet } from 'svelte';
-declare const ListMenu: import("svelte").Component<Partial<{
-    localPages: Array<HeaderNavigationItem>;
-    itemRender: Snippet<[HeaderNavigationItem]>;
-    subItemRender: Snippet<[Array<HeaderNavigationItem>]>;
-    css: {
-        container?: string;
-        link?: string;
-    };
-    orientation: Orientation;
-    includeSubpagesForSelect: boolean;
-    click: () => void;
-}>, {}, "">;
-type ListMenu = ReturnType<typeof ListMenu>;
-export default ListMenu;

package/dist/components/menu/NavigationDrawer.svelte

@@ -1,53 +0,0 @@
-<!-- <script lang="ts">
-	import { HeaderNavigationItem, defaultCss } from './types.js';
-	import { afterNavigate } from '$app/navigation';
-	import { cn } from '../../utils.js';
-	import { Placement } from '../Styling.js';
-	import Button from '../form/Button.svelte';
-	import Drawer from '../presentation/Drawer.svelte';
-	import ListMenu from './ListMenu.svelte';
-
-	interface Css {
-		buttonCss: string;
-		container: string;
-		link: string;
-	}
-	interface Props {
-		css: Partial<Css>;
-		noBorder: boolean;
-		placement: Placement;
-		localPages: Array<HeaderNavigationItem>;
-	}
-
-	let {
-		localPages = [],
-		css = { buttonCss: '', container: '', link: '' },
-		placement = Placement.Start
-	}: Partial<Props> = $props();
-
-
-	const close = () => (isOpen = false);
-</script>
-<Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
-	<div class="flex flex-row justify-between">
-		<ListMenu {localPages} {css} click={() => close()}></ListMenu>
-		<Button css="close" click={() => close()}>X</Button>
-	</div>
-</Drawer>
-
-<style>
-	:global(#hamburger-menu) {
-		z-index: 10001;
-	}
-	:global(.hamburger-handle) {
-		background: none !important;
-		border: none !important;
-	}
-	:global(.btn.close) {
-		position: fixed;
-		top: var(--hamburger-menu-margin, 25px);
-		right: var(--hamburger-menu-margin, 25px);
-		background: none !important;
-		border: none !important;
-	}
-</style> -->

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

@@ -1,18 +0,0 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavigationDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavigationDrawer = InstanceType<typeof NavigationDrawer>;
-export default NavigationDrawer;

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

@@ -1,23 +0,0 @@
-import type { Page } from "@sveltejs/kit";
-type ClickAction = (event: MouseEvent) => void;
-export declare enum Visiblity {
-    Always = 0,
-    Authenticated = 1,
-    NotAuthenticated = 2
-}
-export declare class HeaderNavigationItem {
-    name: string;
-    path?: string | undefined;
-    action?: ClickAction | undefined;
-    visiblity: Visiblity;
-    subItems?: HeaderNavigationItem[];
-}
-export declare function selectVisible(pages: Array<HeaderNavigationItem>, visiblity: Visiblity): HeaderNavigationItem[];
-export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: HeaderNavigationItem): any;
-export declare const defaultCss: {
-    buttonCss: never[];
-    container: never[];
-    link: never[];
-};
-export declare function isAuthenticated(page: Page): Visiblity.Authenticated | Visiblity.NotAuthenticated;
-export {};

package/dist/components/menu/types.js

@@ -1,35 +0,0 @@
-export var Visiblity;
-(function (Visiblity) {
-    Visiblity[Visiblity["Always"] = 0] = "Always";
-    Visiblity[Visiblity["Authenticated"] = 1] = "Authenticated";
-    Visiblity[Visiblity["NotAuthenticated"] = 2] = "NotAuthenticated";
-})(Visiblity || (Visiblity = {}));
-export class HeaderNavigationItem {
-    name;
-    path;
-    action;
-    visiblity = Visiblity.Always;
-    subItems = [];
-}
-export function selectVisible(pages, visiblity) {
-    return pages.filter((page) => page?.visiblity === Visiblity.Always ||
-        page?.visiblity === visiblity);
-}
-export function isSelected(includeSubpagesForSelect, page, item) {
-    if (page?.url?.pathname === '/') {
-        return page?.url?.pathname === item.path;
-    }
-    return includeSubpagesForSelect
-        ? (page?.url.pathname.startsWith(item.path ?? '-') && item.path !== '/')
-        : page?.url.pathname === item.path;
-}
-export const defaultCss = {
-    buttonCss: [],
-    container: [],
-    link: []
-};
-export function isAuthenticated(page) {
-    const isAuthenticated = page?.data?.session != null;
-    const visibility = isAuthenticated ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
-    return visibility;
-}

package/dist/components/presentation/Accordion.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte';
-	import Icon from "@iconify/svelte";
-
-    interface AccordionProps {
-        children: Snippet;
-        isOpenByDefault: boolean;
-        animationDurationMs: number;
-        title: string;
-        cheveronPosition: "left" | "right";
-        css: string
-    }
-
-    let {
-        children,
-        title = "",
-        isOpenByDefault = true,
-        animationDurationMs = 300,
-        cheveronPosition = "right",
-        css = "",
-    }: Partial<AccordionProps> = $props();
-
-    let isOpen = $state(isOpenByDefault);
-    let contentElement: HTMLDivElement;
-
-    const toggleAccordion = () => {
-        isOpen = !isOpen;
-    };
-</script>
-
-{#snippet cheveron()}
-    {#if isOpen}
-        <Icon icon="mdi:chevron-up" width="1rem" />
-    {:else}
-        <Icon icon="mdi:chevron-down" width="1rem" />
-    {/if}
-{/snippet}
-
-<article class={css}>
-    <header onclick={toggleAccordion} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && toggleAccordion()}>
-        {#if cheveronPosition === 'left'}
-            {@render cheveron?.()}
-        {/if}
-        {title}
-        {#if cheveronPosition === 'right'}
-            {@render cheveron?.()}
-        {/if}
-    </header>   
-    <div 
-        bind:this={contentElement}
-        class="content"
-        class:folded={!isOpen}
-        style={`max-height: ${isOpen ? contentElement?.scrollHeight + 'px' : '0'}; transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out;`}>
-    {@render children?.()}
-    </div>
-</article>
-
-<style>
-    header {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .toggle-icon {
-        font-weight: bold;
-        font-size: 1.2em;
-        transition: transform 500ms ease-in-out;
-    }
-
-    .content {
-        overflow: hidden;
-        opacity: 1;
-    }
-
-    .folded {
-        opacity: 0;
-        max-height: 0 !important;
-    }
-</style>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Accordion: import("svelte").Component<Partial<{
-    children: Snippet;
-    isOpenByDefault: boolean;
-    animationDurationMs: number;
-    title: string;
-    cheveronPosition: "left" | "right";
-    css: string;
-}>, {}, "">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;

package/dist/components/presentation/Card.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		isAnimated: boolean;
-		isSkinned: boolean;
-		isStacked: boolean;
-		isShadow: boolean;
-		isBorder: boolean;
-		isRounded?: boolean;
-		isWrapped: boolean;
-		type: string;
-		css: string;
-	}
-
-	let {
-		children,
-		isAnimated = false,
-		isSkinned = true,
-		isStacked = false,
-		isShadow = false,
-		isBorder = false,
-		isRounded = false,
-		isWrapped = true,
-		type = '',
-		css = '',
-        ...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = cn(
-		isSkinned ? 'card' : 'base',
-		isAnimated ? 'animated' : '',
-		isStacked ? 'stacked' : '',
-		isShadow ? 'shadow' : '',
-		isRounded ? 'rounded' : '',
-		isBorder ? 'border' : '',
-		isWrapped ? 'wrapped': '',
-		type ? `${type}` : '',
-		css ? `${css}` : '');
-</script>
-
-<div class={klasses} {...restProps}>
-	{@render children?.()}
-</div>
-
-<style>
-	.card,
-	.base {
-		display: flex;
-		align-items: center;
-		position: relative;
-		box-sizing: border-box;
-		width: 100%;
-	}
-
-	.wrapped {
-		flex-wrap: wrap;
-	}
-
-	.border {
-		border: 1px solid var(--border-color);
-	}
-
-	.rounded {
-		border-radius: var(--radius, 0.25rem);
-	}
-
-	.shadow {
-		box-shadow:
-			var(--boxshadow1-offset-x, 0) var(--boxshadow1-offset-y, 0.375rem)
-				var(--boxshadow1-blur, 0.5625rem)
-				var(--boxshadow1-color, rgb(6 6 6 / 7.5%)),
-			var(--boxshadow2-offset-x, 0) var(--boxshadow2-offset-y, 0)
-				var(--boxshadow2-blur, 1px)
-				var(--boxshadow2-color, rgb(5 5 5 / 10%));
-		border-radius: var(radius, 0.25rem);
-		overflow: hidden;
-	}
-
-	.shadow:hover {
-		box-shadow:
-			var(--boxshadow1-offset-x, 0) var(--boxshadow1-offset-y, 0.375rem)
-				var(--boxshadow1-blur, 0.875rem)
-				var(--boxshadow1-color, rgb(4 4 4 / 10%)),
-			var(--boxshadow2-offset-x, 0) var(--boxshadow2-offset-y, 0)
-				var(--boxshadow2-blur, 2px)
-				var(--boxshadow2-color, rgb(3 3 3 / 10%));
-	}
-
-	.animated {
-		transition:
-			box-shadow ease-out 5s,
-			transform var(--timing-fast)
-				cubic-bezier(
-					var(--cubic-1,),
-					var(--cubic-2,),
-					var(--cubic-3,),
-					var(--cubic-4,)
-				);
-	}
-
-	.animated:hover {
-		transform: translateY(var(--translate-y-hover, -3px));
-		transition:
-			box-shadow ease-out var(--timing-fast),
-			transform var(--timing-slow)
-				cubic-bezier(
-					var(--cubic-1,),
-					var(--cubic-2,),
-					var(--cubic-3,),
-					var(--cubic-4,)
-				);
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.animated,
-		.animated:hover {
-			transition-duration: 0.001ms !important;
-		}
-	}
-
-	.stacked {
-		flex-direction: column;
-	}
-
-	.success {
-		background: var(--action-light);
-		color: var(--action-dark);
-	}
-
-	.info {
-		background: var(--primary-light);
-		color: var(--primary-dark);
-	}
-
-	.error {
-		background: var(--error-light);
-		color: var(--error-dark);
-	}
-
-	.warning {
-		background: var(--warning-light);
-		color: var(--warning-dark);
-	}
-</style>

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

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Card: import("svelte").Component<Partial<{
-    children: Snippet;
-    isAnimated: boolean;
-    isSkinned: boolean;
-    isStacked: boolean;
-    isShadow: boolean;
-    isBorder: boolean;
-    isRounded?: boolean;
-    isWrapped: boolean;
-    type: string;
-    css: string;
-}>, {}, "">;
-type Card = ReturnType<typeof Card>;
-export default Card;

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

@@ -1,5 +0,0 @@
-export interface CarouselItem {
-    text: string;
-    image: string;
-    link: string;
-}

package/dist/components/presentation/Carousel.js

@@ -1 +0,0 @@
-export {};

package/dist/components/presentation/Carousel.svelte

@@ -1,119 +0,0 @@
-<script lang="ts">
-	import { onMount, type Snippet } from 'svelte';
-	import emblaCarouselSvelte from 'embla-carousel-svelte';
-	import EmblaCarousel, { type EmblaOptionsType } from 'embla-carousel';
-	import { cn } from '../../utils.js';
-	import Button from '../form/Button.svelte';
-
-	interface Props {
-		child: Snippet<[any]>;
-		items: Array<any>;
-		next?: Snippet;
-		prev?: Snippet;
-		css?: { slide: string; container: string };
-		perPage?: number;
-		slideGaps: string;
-		disableDrag: boolean;
-	}
-
-	let {
-		child,
-		next,
-		prev,
-		items,
-		perPage = 1,
-		slideGaps = '20px;',
-		disableDrag = false,
-		css = {slide: "", container: ""},
-		loop = false
-	}: Props = $props();
-
-	let options: EmblaOptionsType = {
-		loop: loop,
-	};
-	
-	if(disableDrag) {
-		options.watchDrag = false;
-	}
-	let slideStyle = cn('flex: 0 0 ' + 100 / perPage + '%;', css.slide);
-	let containerCss = cn('flex', 'fw', css.container);
-
-	let embla = {
-		scrollPrev: () => console.log('prev'),
-		scrollNext: () => console.log('next')
-	};
-	let viewportNode: HTMLElement | undefined = undefined;
-
-	onMount(() => {
-		if (viewportNode != undefined) {
-			embla = EmblaCarousel(viewportNode, options);
-		}
-	});
-</script>
-
-<div class="carousel flex flex-row" use:emblaCarouselSvelte>
-	<div class="carousel__viewport" bind:this={viewportNode}>
-		<div class={containerCss}>
-			{#each items as item}
-				<div class="carousel__slide" style={slideStyle}>
-					{@render child(item)}
-				</div>
-			{/each}
-		</div>
-	</div>
-	<Button
-		type="button"
-		css="carousel__prev"
-		ariaLabel="Previous item on Carousele"
-		style="order: -1 !important;width: 50px;height: 100%;background: none;border: none !important;align-self: center;"
-		click={() => embla.scrollPrev()}
-	>
-		{#if prev}
-			{@render prev()}
-		{:else}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-arrow-left"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
-			>
-		{/if}
-	</Button>
-	<Button
-		type="button"
-		css="carousel__next"
-		ariaLabel="Next item on Carousele"
-		style="order: 1000 !important;width: 50px;height: 100%;background: none; border: none !important;align-self: center;"
-		click={() => embla.scrollNext()}
-	>
-		{#if next}
-			{@render next()}
-		{:else}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="lucide lucide-arrow-right"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
-			>
-		{/if}
-	</Button>
-</div>
-
-<style>.carousel .carousel__viewport {
-  overflow: hidden;
-}
-.carousel .carousel__slide {
-  min-width: 0;
-}</style>

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

@@ -1,17 +0,0 @@
-import { type Snippet } from 'svelte';
-interface Props {
-    child: Snippet<[any]>;
-    items: Array<any>;
-    next?: Snippet;
-    prev?: Snippet;
-    css?: {
-        slide: string;
-        container: string;
-    };
-    perPage?: number;
-    slideGaps: string;
-    disableDrag: boolean;
-}
-declare const Carousel: import("svelte").Component<Props, {}, "">;
-type Carousel = ReturnType<typeof Carousel>;
-export default Carousel;