@functionalcms/svelte-components 2.36.1 → 2.38.0

package/dist/components/CssHelper.d.ts

@@ -0,0 +1 @@
+export declare function mergedClasses(...params: any[]): string;

package/dist/components/CssHelper.js

@@ -0,0 +1,3 @@
+export function mergedClasses(...params) {
+    return Array.from(params).flat(2).filter((c) => c).join(' ');
+}

package/dist/components/Link.svelte

@@ -307,6 +307,7 @@ export let size = ComponentSize.Normal;
 export let justify = Justify.Center;
 export let alignItems = AlignItmes.Center;
 export let orientation = Orientation.Row;
+export let role = "";
 $: isSmall = size === ComponentSize.Small;
 $: isLarge = size === ComponentSize.Large;
 $: klasses = [
@@ -330,7 +331,6 @@ $: klasses = [
   css ? css : "btn"
 ].filter((c) => c).join(" ");
 </script>
-<svelte:options customElement="active-link" />
-<a class={klasses} href={href}>
+<a class={klasses} href={href} role={role}>
     <slot />
 </a>

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         justify?: Justify;
         alignItems?: AlignItmes;
         orientation?: Orientation;
+        role?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,27 +1,30 @@
 <script>import { Button } from "agnostic-svelte";
 import { Orientation, Placement } from "../Styling.js";
-import ColumnMenu from "./ColumnMenu.svelte";
-import { HeaderNavigationItem } from "./Menu.js";
-export let buttonCss = "";
-export let contentCss = "";
-export let linkCss = "";
+import ColumnMenu from "./NavigationItems.svelte";
+import { HeaderNavigationItem, defaultCss } from "./Menu.js";
+import { mergedClasses } from "../CssHelper.js";
+export let css;
 export let contentPosition = Placement.End;
 export let orientation = Orientation.Column;
 export let localPages = [];
-$: showContent = false;
+const cssClasses = { ...defaultCss, ...css };
+$: expanded = false;
 $: showContentBeforeButton = contentPosition == Placement.Start;
+$: buttonCss = mergedClasses(cssClasses.buttonCss);
 </script>
 
-{#if showContent && showContentBeforeButton}
-	<ColumnMenu {localPages} {orientation} css={contentCss} />
+{#if expanded && showContentBeforeButton}
+	<div aria-expanded={expanded}>
+		<ColumnMenu {localPages} {orientation} css={cssClasses} />
+	</div>
 {/if}
-<div>
-	<Button css={buttonCss} on:click={() => (showContent = !showContent)}>
-		<slot name="handle">&#9776;</slot>
-	</Button>
-</div>
-{#if showContent && !showContentBeforeButton}
-	<ColumnMenu {localPages} {orientation} css={contentCss} linkCss={linkCss}/>
+<Button css={buttonCss} on:click={() => (expanded = !expanded)}>
+	<slot name="handle">&#9776;</slot>
+</Button>
+{#if expanded && !showContentBeforeButton}
+	<div aria-expanded={expanded}>
+		<ColumnMenu {localPages} {orientation} css={cssClasses} />
+	</div>
 {/if}
 
 <style>

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

@@ -3,9 +3,11 @@ import { Orientation, Placement } from '../Styling.js';
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        buttonCss?: string;
-        contentCss?: string;
-        linkCss?: string;
+        css: {
+            buttonCss: string[];
+            container: string[];
+            link: string[];
+        };
         contentPosition?: Placement;
         orientation?: Orientation;
         localPages?: Array<HeaderNavigationItem>;

package/dist/components/menu/DynamicMenu.svelte

@@ -1,16 +1,16 @@
-<script>import { HeaderNavigationItem } from "./Menu.js";
-import { selectVisible } from "./MenuFunctions.js";
+<script>import { HeaderNavigationItem, selectVisible, defaultCss } from "./Menu.js";
 import { isAuthenticated } from "./authentication.js";
 import { page } from "$app/stores";
-export let css = "";
-export let navCss = "";
+import { mergedClasses } from "../CssHelper.js";
+export let css;
+const cssClasses = { ...defaultCss, ...css };
 export let localPages = [];
 $: pagesVisiblity = isAuthenticated($page);
 $: visibleNavItems = selectVisible(localPages, pagesVisiblity);
-const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).join(" ");
+const klasses = mergedClasses("flex", "flex-dynamic-row", cssClasses.container);
 </script>
 
-<nav class={navCss}>
+<nav class={klasses}>
 	<div class="mobile">
 		<slot name="mobile" pages={visibleNavItems} />
 	</div>

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

@@ -2,8 +2,9 @@ import { SvelteComponent } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css?: string;
-        navCss?: string;
+        css: {
+            container: string[];
+        };
         localPages?: Array<HeaderNavigationItem>;
     };
     events: {

package/dist/components/menu/HamburgerMenu.svelte

@@ -1,24 +1,20 @@
-<script>import { HeaderNavigationItem } from "./Menu.js";
+<script>import { HeaderNavigationItem, defaultCss } from "./Menu.js";
 import { afterNavigate } from "$app/navigation";
 import { Drawer, Button } from "agnostic-svelte";
-import { page } from "$app/stores";
-import { Placement } from "../Styling.js";
-import { isSelected } from "./MenuFunctions.js";
-export let css = "";
+import { Orientation, Placement } from "../Styling.js";
+import ColumnMenu from "./NavigationItems.svelte";
+import { mergedClasses } from "../CssHelper.js";
+export let css;
 export let noBorder = false;
 export let placement = Placement.Start;
 export let localPages = [];
-export let includeSubpagesForSelect = false;
+const cssClasses = { ...defaultCss, ...css };
 let drawer = null;
 const assignDrawerRef = (ev) => {
   drawer = ev.detail.instance;
 };
 afterNavigate((navigation) => drawer?.hide());
-const klasses = [
-  "hamburger-handle",
-  css ? css : "",
-  noBorder ? "no-border" : ""
-].filter((c) => c).join(" ");
+const buttonCss = mergedClasses("hamburger-handle", noBorder, cssClasses.buttonCss);
 </script>
 
 <Button
@@ -26,7 +22,7 @@ const klasses = [
 	data-a11y-dialog-show="hamburger-menu"
 	mode="primary"
 	noBorder
-	css={klasses}
+	css={buttonCss}
 >
 	&#9776;
 </Button>
@@ -37,26 +33,17 @@ const klasses = [
 	on:instance={assignDrawerRef}
 	title="Menu"
 >
-	<ul>
-		{#each localPages as pageItem}
-			<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
-				<span class="screenreader-only">Navigate to {pageItem.name}</span>
-				<a on:click={pageItem.action} href={pageItem.path}>
-					{pageItem.name}
-				</a>
-			</li>
-		{/each}
-	</ul>
+	<ColumnMenu {localPages} orientation={Orientation.Column} css={cssClasses} />
 </Drawer>
 
 <style>
-    :global(.hamburger-handle) {
+	:global(.hamburger-handle) {
 		background: var(--functional-menu-background) !important;
-    }
+	}
 	:global(#hamburger-menu) {
 		z-index: 10001;
 	}
-    :global(#hamburger-menu>.dialog-content) {
+	:global(#hamburger-menu > .dialog-content) {
 		background: var(--functional-menu-background) !important;
 	}
 	:global(.no-border) {

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

@@ -3,11 +3,14 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Placement } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css?: string;
+        css: {
+            buttonCss: string[];
+            container: string[];
+            link: string[];
+        };
         noBorder?: boolean;
         placement?: Placement;
         localPages?: Array<HeaderNavigationItem>;
-        includeSubpagesForSelect?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/menu/LinkMenuItem.svelte

@@ -0,0 +1,25 @@
+<script>export let disabled = false;
+export let isSelected = false;
+export let classes;
+let btn;
+export function focus() {
+  return btn.focus();
+}
+export function isDisabled() {
+  return btn.disabled;
+}
+</script>
+<button
+  on:click
+  on:keydown
+  bind:this={btn}
+  role="menuitem"
+  tabindex={isSelected ? 0 : -1}
+  disabled={disabled}
+  class={classes}
+>
+  <slot />
+</button>
+
+<style>
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        isSelected?: boolean;
+        classes: any;
+        focus?: () => any;
+        isDisabled?: () => any;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LinkMenuItemProps = typeof __propDef.props;
+export type LinkMenuItemEvents = typeof __propDef.events;
+export type LinkMenuItemSlots = typeof __propDef.slots;
+export default class LinkMenuItem extends SvelteComponent<LinkMenuItemProps, LinkMenuItemEvents, LinkMenuItemSlots> {
+    get focus(): () => any;
+    get isDisabled(): () => any;
+}
+export {};

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

@@ -10,4 +10,11 @@ export declare class HeaderNavigationItem {
     action?: ClickAction | undefined;
     visiblity: Visiblity;
 }
+export declare function selectVisible(pages: Array<any>, visiblity: Visiblity): any[];
+export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: HeaderNavigationItem): any;
+export declare const defaultCss: {
+    buttonCss: never[];
+    container: never[];
+    link: never[];
+};
 export {};

package/dist/components/menu/Menu.js

@@ -10,3 +10,20 @@ export class HeaderNavigationItem {
     action;
     visiblity = Visiblity.Always;
 }
+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: []
+};

package/dist/components/menu/{ColumnMenu.svelte → NavigationItems.svelte}

@@ -1,21 +1,22 @@
-<script>import { HeaderNavigationItem } from "./Menu.js";
-import { isSelected } from "./MenuFunctions.js";
+<script>import { HeaderNavigationItem, isSelected, defaultCss } from "./Menu.js";
 import { Orientation } from "../Styling.js";
 import Link from "../Link.svelte";
 import { page } from "$app/stores";
-export let css = "";
-export let linkCss = "";
+import { mergedClasses } from "../CssHelper.js";
+export let css;
 export let localPages = [];
 export let orientation = Orientation.Column;
-export let includeSubpagesForSelect = false;
-const klasses = ["flex", orientation, css ? css : ""].filter((c) => c).join(" ");
+export let includeSubpagesForSelect = true;
+const cssClasses = { ...defaultCss, ...css };
+const containerCss = mergedClasses("flex", cssClasses.container, orientation);
+const linkCss = mergedClasses(cssClasses.link);
 </script>
 
-<ul class={klasses}>
+<ul class={containerCss} role="menu" aria-roledescription="">
 	{#each localPages as pageItem}
-		<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
+		<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)} role="presentation">
 			<span class="screenreader-only">Navigate to {pageItem.name}</span>
-			<Link href={pageItem.path} css={linkCss}>
+			<Link href={pageItem.path} css={linkCss} role="menuItem">
 				{pageItem.name}
 			</Link>
 		</li>

package/dist/components/menu/{ColumnMenu.svelte.d.ts → NavigationItems.svelte.d.ts}

@@ -3,8 +3,10 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Orientation } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css?: string;
-        linkCss?: string;
+        css: {
+            container: string[];
+            link: string[];
+        };
         localPages?: Array<HeaderNavigationItem>;
         orientation?: Orientation;
         includeSubpagesForSelect?: boolean;
@@ -16,9 +18,9 @@ declare const __propDef: {
     exports?: {} | undefined;
     bindings?: string | undefined;
 };
-export type ColumnMenuProps = typeof __propDef.props;
-export type ColumnMenuEvents = typeof __propDef.events;
-export type ColumnMenuSlots = typeof __propDef.slots;
-export default class ColumnMenu extends SvelteComponent<ColumnMenuProps, ColumnMenuEvents, ColumnMenuSlots> {
+export type NavigationItemsProps = typeof __propDef.props;
+export type NavigationItemsEvents = typeof __propDef.events;
+export type NavigationItemsSlots = typeof __propDef.slots;
+export default class NavigationItems extends SvelteComponent<NavigationItemsProps, NavigationItemsEvents, NavigationItemsSlots> {
 }
 export {};

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-export { default as FlatMenu } from './components/menu/FlatMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
-export { default as ColumnMenu } from './components/menu/ColumnMenu.svelte';
+export { default as ColumnMenu } from './components/menu/NavigationItems.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
 export { default as DropDownMenu } from './components/menu/Menu.svelte';

package/dist/index.js

@@ -1,6 +1,5 @@
-export { default as FlatMenu } from './components/menu/FlatMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
-export { default as ColumnMenu } from './components/menu/ColumnMenu.svelte';
+export { default as ColumnMenu } from './components/menu/NavigationItems.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
 export { default as DropDownMenu } from './components/menu/Menu.svelte';

package/package.json

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

package/dist/components/menu/FlatMenu.svelte

@@ -1,56 +0,0 @@
-<script>import { HeaderNavigationItem } from "./Menu.js";
-import ColumnMenu from "./ColumnMenu.svelte";
-import { Orientation } from "../Styling.js";
-export let css = "";
-export let localPages = [];
-export let includeSubpagesForSelect = false;
-</script>
-
-<ColumnMenu localPages={localPages} orientation={Orientation.DynamicRow} css={css}/>
-
-<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));
-	}
-	@media (min-width: 960px) {
-	}
-</style>

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

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { HeaderNavigationItem } from './Menu.js';
-declare const __propDef: {
-    props: {
-        css?: string;
-        localPages?: Array<HeaderNavigationItem>;
-        includeSubpagesForSelect?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FlatMenuProps = typeof __propDef.props;
-export type FlatMenuEvents = typeof __propDef.events;
-export type FlatMenuSlots = typeof __propDef.slots;
-export default class FlatMenu extends SvelteComponent<FlatMenuProps, FlatMenuEvents, FlatMenuSlots> {
-}
-export {};

package/dist/components/menu/HamburgerButton.svelte

@@ -1,15 +0,0 @@
-<script>import { Button } from "@functionalcms/svelte-components";
-export let css = "";
-export let noBorder = false;
-const klasses = [css ? css : "", noBorder ? "no-border" : ""].filter((c) => c).join(" ");
-</script>
-
-<Button
-	type="button"
-	data-a11y-dialog-show="hamburger-menu"
-	mode="primary"
-	noBorder
-	css={klasses}
->
-	&#9776;
-</Button>

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

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        css?: string;
-        noBorder?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type HamburgerButtonProps = typeof __propDef.props;
-export type HamburgerButtonEvents = typeof __propDef.events;
-export type HamburgerButtonSlots = typeof __propDef.slots;
-export default class HamburgerButton extends SvelteComponent<HamburgerButtonProps, HamburgerButtonEvents, HamburgerButtonSlots> {
-}
-export {};

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

@@ -1,3 +0,0 @@
-import { Visiblity, type HeaderNavigationItem } from "./Menu.js";
-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/MenuFunctions.js

@@ -1,13 +0,0 @@
-import { Visiblity } from "./Menu.js";
-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;
-}