@functionalcms/svelte-components 4.36.10 → 5.0.0-beta2

package/dist/components/layouts/Tabs.svelte

@@ -1,362 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import { NavigationDirection, TabSizes, type Tab } from './tabs.js';
-
-	interface Props {
-		tabs: Array<Tab>; //` = [];
-		size?: TabSizes; //` = '';
-		isBorderless?: boolean; //` = false;
-		isVerticalOrientation?: boolean; //` = false;
-		isSkinned?: boolean; //` = true;
-	}
-
-	let {
-		tabs,
-		size = TabSizes.empty,
-		isBorderless,
-		isVerticalOrientation,
-		isSkinned,
-	}: Props = $props();
-
-	let dynamicComponentRefs = $state([]); //https://svelte.dev/tutorial/component-this
-	let tabButtonRefs: Array<HTMLButtonElement> = $state([]);
-	let activePanel = $state(null);
-
-	const baseStyles = () => `tabs ${isVerticalOrientation ? 'tabs-vertical' : ''}`;
-
-	const selectTab = (index: number) => {
-		tabs = tabs.map((tab, i) => {
-			tab.isActive = index === i ? true : false;
-			return tab;
-		});
-	};
-	let activeTabs = tabs.filter((tab) => tab.isActive);
-	if (activeTabs.length === 0) {
-		selectTab(0);
-	}
-
-	let tablistClasses = $derived(
-		cn(isSkinned ? 'tab-list' : 'tab-list-base', isBorderless ? `tab-borderless` : '')
-	);
-
-	let tabButtonClasses = $derived((tab: any) => {
-		const klasses = [
-			`tab-item`,
-			`tab-button`,
-			tab.isActive ? 'active' : '',
-			size === TabSizes.large ? 'tab-button-large' : '',
-			size === TabSizes.xlarge ? 'tab-button-xlarge' : ''
-		];
-		return klasses.filter((klass) => klass.length).join(' ');
-	});
-
-	const focusTab = (index: number, direction: NavigationDirection = NavigationDirection.asc) => {
-		// console.log("tabButtonRefs: ", tabButtonRefs);
-		// console.log("dynamicComponentRefs: ", dynamicComponentRefs);
-		/**
-		 * direction is optional because we only need that when we're arrow navigating.
-		 * If they've hit ENTER|SPACE we're focusing the current item. If HOME focus(0).
-		 * If END focus(tabButtons.length - 1)...and so on.
-		 */
-		let i = index;
-		if (direction === NavigationDirection.asc) {
-			i += 1;
-		} else if (direction === NavigationDirection.desc) {
-			i -= 1;
-		}
-
-		// Circular navigation
-		//
-		// If we've went beyond "start" circle around to last
-		if (i < 0) {
-			i = tabs.length - 1;
-		} else if (i >= tabs.length) {
-			// We've went beyond "last" so circle around to first
-			i = 0;
-		}
-
-		/**
-		 * Figure out at run-time whether this was build with dynamicComponentRefs (consumer
-		 * used their own tabButtonComponent), or tabButtonRefs (we generated the buttons here)
-		 */
-
-		let nextTab: any;
-		if (tabButtonRefs.length) {
-			nextTab = tabButtonRefs[i];
-		} else if (dynamicComponentRefs.length) {
-			// Same logic as above, but we're using the binding to component instance
-			nextTab = dynamicComponentRefs[i];
-		}
-		// Edge case: We hit a tab button that's been disabled. If so, we recurse, but
-		// only if we've been supplied a `direction`. Otherwise, nothing left to do.
-		if ((nextTab.isDisabled && nextTab.isDisabled()) || (nextTab.disabled && direction)) {
-			// Retry with new `i` index going in same direction
-			focusTab(i, direction);
-		} else {
-			// Nominal case is to just focs next tab :)
-			nextTab.focus();
-		}
-	};
-
-	const handleKeyDown = (ev: any, index: number) => {
-		switch (ev.key) {
-			case 'Up': // These first cases are IEEdge :(
-			case 'ArrowUp':
-				if (isVerticalOrientation) {
-					focusTab(index, NavigationDirection.desc);
-				}
-				break;
-			case 'Down':
-			case 'ArrowDown':
-				if (isVerticalOrientation) {
-					focusTab(index, NavigationDirection.asc);
-				}
-				break;
-			case 'Left':
-			case 'ArrowLeft':
-				if (!isVerticalOrientation) {
-					focusTab(index, NavigationDirection.desc);
-				}
-				break;
-			case 'Right':
-			case 'ArrowRight':
-				if (!isVerticalOrientation) {
-					focusTab(index, NavigationDirection.asc);
-				}
-				break;
-			case 'Home':
-			case 'ArrowHome':
-				focusTab(0);
-				break;
-			case 'End':
-			case 'ArrowEnd':
-				focusTab(tabs.length - 1);
-				break;
-			case 'Enter':
-			case 'Space':
-				focusTab(index);
-				selectTab(index);
-				break;
-			default:
-				return;
-		}
-		ev.preventDefault();
-	};
-</script>
-
-<div class={baseStyles()}>
-	<div
-		class={tablistClasses}
-		role="tablist"
-		aria-orientation={isVerticalOrientation ? 'vertical' : 'horizontal'}
-	>
-		{#each tabs as tab, i}
-			<!-- {#if tab.tabButtonComponent}
-				<svelte:component
-					this={tab.tabButtonComponent}
-					bind:this={dynamicComponentRefs[i]}
-					on:click={() => selectTab(i)}
-					on:keydown={(e) => handleKeyDown(e, i)}
-					disabled={isDisabled || disabledOptions.includes(tab.title) || undefined}
-					classes={tabButtonClasses(tab)}
-					role="tab"
-					ariaControls={tab.ariaControls}
-					isActive={tab.isActive}
-				>
-					{tab.title}
-				</svelte:component>
-			{:else} -->
-			<button
-				bind:this={tabButtonRefs[i]}
-				on:click={() => selectTab(i)}
-				on:keydown={(e) => handleKeyDown(e, i)}
-				disabled={tab.isDisabled}
-				class={tabButtonClasses(tab)}
-				role="tab"
-				aria-controls={tab.ariaControls}
-				tabindex={tab.isActive ? 0 : -1}
-				aria-selected={tab.isActive}
-			>
-				{tab.title}
-			</button>
-			<!-- {/if} -->
-		{/each}
-	</div>
-	{#if activePanel}
-		{@render activePanel?.tabPanelComponent()}
-	{/if}
-	<!-- {#each tabs as panel}
-		{#if panel.isActive}
-			{@render panel?.tabPanelComponent()}
-		
-	{/each} -->
-</div>
-
-<style>
-	/* TODO -- should we use these for .nav? */
-	.tabs {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.tabs-vertical {
-		flex-direction: row;
-	}
-
-	.tab-list,
-	.tab-list-base {
-		display: flex;
-		flex-flow: row wrap;
-		flex: 0 0 auto;
-	}
-
-	.tab-list,
-	.tab-skinned {
-		padding-inline-start: 0;
-		margin-block-end: 0;
-		border-bottom: var(--agnostic-tabs-border-size, 1px) solid
-			var(--agnostic-tabs-bgcolor, var(--agnostic-gray-light));
-		transition-property: all;
-		transition-duration: var(--agnostic-timing-medium);
-	}
-
-	/* In vertical orientation we want our tab buttons to stack */
-	.tabs-vertical .tab-list,
-	.tabs-vertical .tab-base {
-		flex-direction: column;
-		border: none;
-	}
-
-	/* We can ask for .tab-button which is base and skin combined, or, we can utilize .tab-button-base
-    if we'd like to only blank out buttons but otherwise skin ourselves. */
-	.tab-button,
-	.tab-button-base {
-		/* Blank out the button */
-		background-color: transparent;
-		border: 0;
-		border-radius: 0;
-		box-shadow: none;
-
-		/* This fixes issue where upon focus, the a11y focus ring's box shadow would get tucked beneat
-      adjacent tab buttons; relative creates new stacking context https://stackoverflow.com/a/31276836 */
-		position: relative;
-
-		/* Reset margins/padding; this will get added back if it's a "skinned" tab button. However, we have
-      a use case where a tab-button is wrapping a faux button. For that, we don't want margins/padding because
-      the faux button provides that. */
-		margin-inline-start: 0;
-		margin-inline-end: 0;
-		padding-block-start: 0;
-		padding-block-end: 0;
-		padding-inline-start: 0;
-		padding-inline-end: 0;
-	}
-
-	.tab-button,
-	.tab-button-skin {
-		display: block;
-
-		/* Since this is a "skinned tab button" we add our padding here to previously "reset" .tab-button-base */
-		padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
-		padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
-		padding-inline-start: var(--agnostic-side-padding, 0.75rem);
-		padding-inline-end: var(--agnostic-side-padding, 0.75rem);
-		font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
-		font-weight: var(--agnostic-btn-font-weight, 400);
-		font-size: var(--agnostic-btn-font-size, 1rem);
-
-		/* this can be overriden, but it might mess with the balance of the button heights across variants */
-		line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
-		color: var(--agnostic-tabs-primary, var(--agnostic-primary));
-		text-decoration: none;
-		transition:
-			color var(--agnostic-timing-fast) ease-in-out,
-			background-color var(--agnostic-timing-fast) ease-in-out,
-			border-color var(--agnostic-timing-fast) ease-in-out;
-	}
-
-	/* We pull back the 2nd subsequent tabs to remove the double border */
-	.tab-button:not(:first-of-type),
-	.tab-button-base:not(:first-of-type) {
-		margin-inline-start: -1px;
-	}
-
-	.tab-borderless {
-		border: none !important;
-	}
-
-	.tab-button-large {
-		padding-block-start: calc(var(--agnostic-input-side-padding) * 1.25);
-		padding-block-end: calc(var(--agnostic-input-side-padding) * 1.25);
-		padding-inline-start: calc(var(--agnostic-input-side-padding) * 1.75);
-		padding-inline-end: calc(var(--agnostic-input-side-padding) * 1.75);
-	}
-
-	.tab-button-xlarge {
-		padding-block-start: calc(var(--agnostic-input-side-padding) * 2);
-		padding-block-end: calc(var(--agnostic-input-side-padding) * 2);
-		padding-inline-start: calc(var(--agnostic-input-side-padding) * 3);
-		padding-inline-end: calc(var(--agnostic-input-side-padding) * 3);
-	}
-
-	.tab-item.tab-button {
-		margin-block-end: -1px;
-		background: 0 0;
-		border: 1px solid transparent;
-		border-top-left-radius: var(--agnostic-tabs-radius, 0.25rem);
-		border-top-right-radius: var(--agnostic-tabs-radius, 0.25rem);
-	}
-
-	.tab-item.tab-button.active {
-		color: var(--agnostic-dark);
-		background-color: var(--agnostic-light);
-		border-color: var(--agnostic-gray-light) var(--agnostic-gray-light) var(--agnostic-light);
-	}
-
-	.tab-item:hover,
-	.tab-button:focus {
-		border-color: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-width)
-			var(--agnostic-gray-light);
-		isolation: isolate;
-		z-index: 1;
-		cursor: pointer;
-	}
-
-	.tabs-vertical .tab-button {
-		border: none;
-	}
-
-	.tab-button:disabled {
-		color: var(--agnostic-tabs-disabled-bg, var(--agnostic-gray-mid-dark));
-		background-color: transparent;
-		border-color: transparent;
-		opacity: 80%;
-	}
-
-	/**
-     * Elects to additively use the AgnosticUI custom focus ring alongside the border
-     * we already add above. It just makes things look more consistent across components.
-     * For example, when we tab into the panels and links within.
-     */
-	.tab-button-base:focus,
-	.tab-panel:focus,
-	.tab-button:focus {
-		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
-
-		/* Needed for High Contrast mode */
-		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
-			var(--agnostic-focus-ring-outline-color);
-		transition: box-shadow var(--agnostic-timing-fast) ease-out;
-	}
-
-	@media (prefers-reduced-motion), (update: slow) {
-		.tab-button,
-		.tab-button-base:focus,
-		.tab-button:focus,
-		.tab-panel:focus,
-		.tab-list,
-		.tab-skinned {
-			transition-duration: 0.001ms !important;
-		}
-	}
-</style>

package/dist/components/layouts/Tabs.svelte.d.ts

@@ -1,11 +0,0 @@
-import { TabSizes, type Tab } from './tabs.js';
-interface Props {
-    tabs: Array<Tab>;
-    size?: TabSizes;
-    isBorderless?: boolean;
-    isVerticalOrientation?: boolean;
-    isSkinned?: boolean;
-}
-declare const Tabs: import("svelte").Component<Props, {}, "">;
-type Tabs = ReturnType<typeof Tabs>;
-export default Tabs;

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Css {}
-
-	interface TwoColumnLayoutProps {
-		leftRender: Snippet;
-		rightRender: Snippet;
-		containerCss: string;
-		leftCss: string;
-		rightCss: string;
-		isFullWidth: boolean;
-		isFullHeight: boolean;
-	}
-
-	let {
-		leftRender,
-		rightRender,
-		isFullWidth = true,
-		isFullHeight = true,
-		containerCss = '',
-		leftCss = 'w50p',
-		rightCss = 'w50p'
-	}: TwoColumnLayoutProps = $props();
-
-	let containerCssEx = cn(
-		'flex flex-row-dynamic',
-		isFullWidth ? 'fw' : '',
-		isFullHeight ? 'fh' : '',
-		containerCss,
-	);
-</script>
-
-<section class={containerCssEx}>
-	<div class="left {leftCss}">
-		{@render leftRender()}
-	</div>
-	<div class="right {rightCss}">
-		{@render rightRender()}
-	</div>
-</section>
-
-<style></style>

package/dist/components/layouts/TwoColumnsLayout.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-interface TwoColumnLayoutProps {
-    leftRender: Snippet;
-    rightRender: Snippet;
-    containerCss: string;
-    leftCss: string;
-    rightCss: string;
-    isFullWidth: boolean;
-    isFullHeight: boolean;
-}
-declare const TwoColumnsLayout: import("svelte").Component<TwoColumnLayoutProps, {}, "">;
-type TwoColumnsLayout = ReturnType<typeof TwoColumnsLayout>;
-export default TwoColumnsLayout;

package/dist/components/layouts/menuLayout.d.ts

@@ -1,12 +0,0 @@
-export type MenuIcon = string;
-export type MenuItem = {
-    icon: MenuIcon;
-    title: string;
-    href: string;
-};
-export type MenuSection = {
-    title: string;
-    icon: MenuIcon;
-    showTitle: boolean;
-    items: MenuItem[];
-};

package/dist/components/layouts/menuLayout.js

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

package/dist/components/layouts/tabs.d.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-export interface Tab {
-    title: string;
-    tabId?: string;
-    tabHref?: string;
-    tabPanelComponent?: Snippet;
-    tabButtonComponent?: Snippet;
-    isActive?: boolean;
-    ariaControls?: string;
-    isDisabled?: boolean;
-}
-export declare enum TabSizes {
-    'small' = 0,
-    'large' = 1,
-    'xlarge' = 2,
-    empty = ""
-}
-export declare enum NavigationDirection {
-    'asc' = 0,
-    'desc' = 1
-}

package/dist/components/layouts/tabs.js

@@ -1,13 +0,0 @@
-;
-export var TabSizes;
-(function (TabSizes) {
-    TabSizes[TabSizes["small"] = 0] = "small";
-    TabSizes[TabSizes["large"] = 1] = "large";
-    TabSizes[TabSizes["xlarge"] = 2] = "xlarge";
-    TabSizes["empty"] = "";
-})(TabSizes || (TabSizes = {}));
-export var NavigationDirection;
-(function (NavigationDirection) {
-    NavigationDirection[NavigationDirection["asc"] = 0] = "asc";
-    NavigationDirection[NavigationDirection["desc"] = 1] = "desc";
-})(NavigationDirection || (NavigationDirection = {}));

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,66 +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';
-	import type { Snippet } from 'svelte';
-
-	interface Css {
-		buttonCss: string;
-		container: string;
-		link: string;
-	}
-	interface Props {
-		itemsDrawer: Snippet<[Array<HeaderNavigationItem>]>;
-		buttonText: Snippet;
-		isOpen: boolean;
-		css: Partial<Css>;
-		noBorder: boolean;
-		placement: Placement;
-		localPages: Array<HeaderNavigationItem>;
-	}
-
-	let {
-		itemsDrawer,
-		buttonText,
-		isOpen = false,
-		localPages = [],
-		css = { buttonCss: '', container: '' }
-	}: Partial<Props> = $props();
-
-	let buttonCss = $derived(cn('hamburger-handle', css.buttonCss ?? ''));
-
-	function toggleDrawer() {
-		isOpen = !isOpen;
-	}
-</script>
-
-<div class={css?.container}>
-	<Button type="button" isPrimary css={buttonCss} click={(event:any) => toggleDrawer()}>
-		{@render buttonText?.()}
-	</Button>
-
-	{#if isOpen && itemsDrawer}
-		{@render itemsDrawer(localPages)}
-	{/if}
-</div>
-
-<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/CollapsibleMenu.svelte.d.ts

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

package/dist/components/menu/DynamicMenu.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import { HeaderNavigationItem, isAuthenticated, selectVisible } from './types.js';
-	import { page } from '$app/state';
-
-	interface Props {
-		mobile: Snippet<[Array<HeaderNavigationItem>]>;
-		desktop: Snippet<[Array<HeaderNavigationItem>]>;
-		localPages: Array<HeaderNavigationItem>;
-		css?: { container: string };
-	}
-
-	let {
-		mobile: mobile,
-		desktop: desktop,
-		css = { container: "" },
-		localPages = []
-	}: Props = $props();
-
-	let pagesVisiblity = $derived(isAuthenticated(page));
-	let visibleNavItems = $derived(selectVisible(localPages, pagesVisiblity));
-
-	let klasses = $derived(cn('flex', 'flex-dynamic-row', css.container));
-</script>
-
-<nav class={klasses}>
-	<div class="mobile">
-		{#if mobile}
-			{@render mobile(visibleNavItems)}
-		{/if}
-	</div>
-	<div class="desktop">
-		{#if desktop}
-			{@render desktop(visibleNavItems)}
-		{/if}
-	</div>
-</nav>
-
-<style>.desktop {
-  display: none !important;
-}
-
-.mobile {
-  display: block !important;
-}
-
-@media (min-width: 960px) {
-  .desktop {
-    display: block !important;
-  }
-  .mobile {
-    display: none !important;
-  }
-}</style>

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

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-import { HeaderNavigationItem } from './types.js';
-interface Props {
-    mobile: Snippet<[Array<HeaderNavigationItem>]>;
-    desktop: Snippet<[Array<HeaderNavigationItem>]>;
-    localPages: Array<HeaderNavigationItem>;
-    css?: {
-        container: string;
-    };
-}
-declare const DynamicMenu: import("svelte").Component<Props, {}, "">;
-type DynamicMenu = ReturnType<typeof DynamicMenu>;
-export default DynamicMenu;