@functionalcms/svelte-components 2.36.0 → 2.37.0

package/dist/auth/authenticationHandle.js

@@ -28,7 +28,6 @@ const createUserSession = async (provider, event, sessionProvider) => {
         headers.append('Location', retrunToAddress != '' ? retrunToAddress : provider.redirectPath);
         headers.append('Set-Cookie', `${authSessionCookieName}=${sessionId}; HttpOnly; Secure; SameSite=Lax; Max-Age=${token.expires_in + 120}; Path=/`);
         headers.append('Set-Cookie', `retrunToAddress=; HttpOnly; Secure; SameSite=Lax; Max-Age=${token.expires_in + 120}; Path=/`);
-        // `${authSessionCookieName}=${sessionId}; HttpOnly; Secure; SameSite=Lax; Max-Age=${token.expires_in}; Path=/`);
     }
     else {
         headers.append('Location', '/');

package/dist/auth/authorizationHandle.d.ts

@@ -1,3 +1,3 @@
 import { type Handle } from '@sveltejs/kit';
-declare const authorizationHandle: (protectedPaths: Array<string>) => Handle;
+declare const authorizationHandle: () => Handle;
 export default authorizationHandle;

package/dist/auth/authorizationHandle.js

@@ -1,22 +1,21 @@
 import { redirect } from '@sveltejs/kit';
-const authorizationHandle = (protectedPaths) => {
+const authorizationHandle = () => {
     return async ({ event, resolve }) => {
         const path = event.url.pathname;
         if (path.startsWith('/auth/') === false) {
-            for (let protectedPath of protectedPaths) {
-                if (path.match(protectedPath)) {
-                    const session = event?.locals?.session;
-                    if (!session) {
-                        const cookieHeader = `retrunToAddress=${event.url.toString()}; HttpOnly; Secure; SameSite=Lax; Max-Age=3600; Path=/`;
-                        return new Response('Login user', {
-                            status: 303,
-                            headers: {
-                                location: '/auth/validate',
-                                'set-cookie': cookieHeader,
-                                referrer: event.url.toString()
-                            }
-                        });
-                    }
+            const route = event.route;
+            if (route.id.includes('/(protect)/')) {
+                const session = event?.locals?.session;
+                if (!session) {
+                    const cookieHeader = `retrunToAddress=${event.url.toString()}; HttpOnly; Secure; SameSite=Lax; Max-Age=3600; Path=/`;
+                    return new Response('Login user', {
+                        status: 303,
+                        headers: {
+                            location: '/auth/login',
+                            'set-cookie': cookieHeader,
+                            referrer: event.url.toString()
+                        }
+                    });
                 }
             }
         }

package/dist/auth/machineAuthenticationProvider.js

@@ -1,8 +1,5 @@
 import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
-const authStateCookieName = 'auth_state';
-const stateIdGenerator = () => crypto.randomUUID();
 const getKeycloakIdentity = async (issuer, client_id, scope, redirectUrl) => {
-    const state = stateIdGenerator();
     const headers = new Headers();
     headers.append('Location', '/auth/validate');
     return headers;

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,33 @@
 <script>import { Button } from "agnostic-svelte";
 import { Orientation, Placement } from "../Styling.js";
-import ColumnMenu from "./ColumnMenu.svelte";
+import ColumnMenu from "./NavigationItems.svelte";
 import { HeaderNavigationItem } from "./Menu.js";
-export let buttonCss = "";
-export let contentCss = "";
-export let linkCss = "";
+import { mergedClasses } from "../CssHelper.js";
+export let css = {
+  buttonCss: [],
+  container: ["flex"],
+  link: []
+};
 export let contentPosition = Placement.End;
 export let orientation = Orientation.Column;
 export let localPages = [];
-$: showContent = false;
+$: expanded = false;
 $: showContentBeforeButton = contentPosition == Placement.Start;
+$: buttonCss = mergedClasses(css.buttonCss);
 </script>
 
-{#if showContent && showContentBeforeButton}
-	<ColumnMenu {localPages} {orientation} css={contentCss} />
+{#if expanded && showContentBeforeButton}
+	<div aria-expanded={expanded}>
+		<ColumnMenu {localPages} {orientation} {css} />
+	</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} />
+	</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

@@ -2,15 +2,17 @@
 import { selectVisible } from "./MenuFunctions.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 = {
+  container: []
+};
 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", css.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,10 +1,14 @@
 <script>import { HeaderNavigationItem } 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 = {
+  buttonCss: [],
+  container: [],
+  link: []
+};
 export let noBorder = false;
 export let placement = Placement.Start;
 export let localPages = [];
@@ -14,20 +18,10 @@ 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, css.buttonCss);
 </script>
 
-<Button
-	type="button"
-	data-a11y-dialog-show="hamburger-menu"
-	mode="primary"
-	noBorder
-	css={klasses}
->
+<Button type="button" data-a11y-dialog-show="hamburger-menu" mode="primary" noBorder css={buttonCss}>
 	&#9776;
 </Button>
 <Drawer
@@ -37,26 +31,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} />
 </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,7 +3,11 @@ 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>;

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

@@ -3,19 +3,23 @@ import { isSelected } from "./MenuFunctions.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 = {
+  container: [],
+  link: []
+};
 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 containerCss = mergedClasses("flex", css.container, orientation);
+const linkCss = mergedClasses(css.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.0",
+	"version": "2.37.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 {};