@functionalcms/svelte-components 2.37.0 → 2.38.0

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,24 +1,21 @@
 <script>import { Button } from "agnostic-svelte";
 import { Orientation, Placement } from "../Styling.js";
 import ColumnMenu from "./NavigationItems.svelte";
-import { HeaderNavigationItem } from "./Menu.js";
+import { HeaderNavigationItem, defaultCss } from "./Menu.js";
 import { mergedClasses } from "../CssHelper.js";
-export let css = {
-  buttonCss: [],
-  container: ["flex"],
-  link: []
-};
+export let css;
 export let contentPosition = Placement.End;
 export let orientation = Orientation.Column;
 export let localPages = [];
+const cssClasses = { ...defaultCss, ...css };
 $: expanded = false;
 $: showContentBeforeButton = contentPosition == Placement.Start;
-$: buttonCss = mergedClasses(css.buttonCss);
+$: buttonCss = mergedClasses(cssClasses.buttonCss);
 </script>
 
 {#if expanded && showContentBeforeButton}
 	<div aria-expanded={expanded}>
-		<ColumnMenu {localPages} {orientation} {css} />
+		<ColumnMenu {localPages} {orientation} css={cssClasses} />
 	</div>
 {/if}
 <Button css={buttonCss} on:click={() => (expanded = !expanded)}>
@@ -26,7 +23,7 @@ $: buttonCss = mergedClasses(css.buttonCss);
 </Button>
 {#if expanded && !showContentBeforeButton}
 	<div aria-expanded={expanded}>
-		<ColumnMenu {localPages} {orientation} {css} />
+		<ColumnMenu {localPages} {orientation} css={cssClasses} />
 	</div>
 {/if}
 

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

@@ -3,7 +3,7 @@ import { Orientation, Placement } from '../Styling.js';
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css?: {
+        css: {
             buttonCss: string[];
             container: string[];
             link: string[];

package/dist/components/menu/DynamicMenu.svelte

@@ -1,15 +1,13 @@
-<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";
 import { mergedClasses } from "../CssHelper.js";
-export let css = {
-  container: []
-};
+export let css;
+const cssClasses = { ...defaultCss, ...css };
 export let localPages = [];
 $: pagesVisiblity = isAuthenticated($page);
 $: visibleNavItems = selectVisible(localPages, pagesVisiblity);
-const klasses = mergedClasses("flex", "flex-dynamic-row", css.container);
+const klasses = mergedClasses("flex", "flex-dynamic-row", cssClasses.container);
 </script>
 
 <nav class={klasses}>

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

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

package/dist/components/menu/HamburgerMenu.svelte

@@ -1,27 +1,29 @@
-<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 { Orientation, Placement } from "../Styling.js";
 import ColumnMenu from "./NavigationItems.svelte";
 import { mergedClasses } from "../CssHelper.js";
-export let css = {
-  buttonCss: [],
-  container: [],
-  link: []
-};
+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 buttonCss = mergedClasses("hamburger-handle", noBorder, css.buttonCss);
+const buttonCss = mergedClasses("hamburger-handle", noBorder, cssClasses.buttonCss);
 </script>
 
-<Button type="button" data-a11y-dialog-show="hamburger-menu" mode="primary" noBorder css={buttonCss}>
+<Button
+	type="button"
+	data-a11y-dialog-show="hamburger-menu"
+	mode="primary"
+	noBorder
+	css={buttonCss}
+>
 	&#9776;
 </Button>
 <Drawer
@@ -31,7 +33,7 @@ const buttonCss = mergedClasses("hamburger-handle", noBorder, css.buttonCss);
 	on:instance={assignDrawerRef}
 	title="Menu"
 >
-	<ColumnMenu {localPages} orientation={Orientation.Column} {css} />
+	<ColumnMenu {localPages} orientation={Orientation.Column} css={cssClasses} />
 </Drawer>
 
 <style>

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

@@ -3,7 +3,7 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Placement } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css?: {
+        css: {
             buttonCss: string[];
             container: string[];
             link: string[];
@@ -11,7 +11,6 @@ declare const __propDef: {
         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/NavigationItems.svelte

@@ -1,18 +1,15 @@
-<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";
 import { mergedClasses } from "../CssHelper.js";
-export let css = {
-  container: [],
-  link: []
-};
+export let css;
 export let localPages = [];
 export let orientation = Orientation.Column;
 export let includeSubpagesForSelect = true;
-const containerCss = mergedClasses("flex", css.container, orientation);
-const linkCss = mergedClasses(css.link);
+const cssClasses = { ...defaultCss, ...css };
+const containerCss = mergedClasses("flex", cssClasses.container, orientation);
+const linkCss = mergedClasses(cssClasses.link);
 </script>
 
 <ul class={containerCss} role="menu" aria-roledescription="">

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

@@ -3,7 +3,7 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Orientation } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css?: {
+        css: {
             container: string[];
             link: string[];
         };

package/package.json

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

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;
-}