@functionalcms/svelte-components 2.17.12 → 2.18.1

package/dist/auth/authenticationHandle.d.ts

@@ -0,0 +1,2 @@
+import { type Handle } from '@sveltejs/kit';
+export declare const authenticationHandle: (issuer: string, clientId: string, scope?: string, redirectPath?: string) => Handle;

package/dist/auth/authenticationHandle.js

@@ -0,0 +1,69 @@
+import {} from '@sveltejs/kit';
+import { createSession, getSession } from './sessionstorage.js';
+import { keycloak } from './authenticationProvider.js';
+const cookieName = `auth_state`;
+const logout = (cookies) => {
+    const headers = new Headers();
+    const sid = cookies.get(cookieName);
+    if (sid) {
+        const deleteSessionCookieHeader = `${cookieName}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
+        const deleteAuthCookieHeader = `auth_session=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
+        headers.append('Set-Cookie', deleteSessionCookieHeader);
+        headers.append('Set-Cookie', deleteAuthCookieHeader);
+    }
+    return headers;
+};
+const loadUserFromSession = (cookies, locals) => {
+    const sid = cookies.get('auth_session');
+    const session = getSession(sid);
+    if (session) {
+        locals.session = session.session;
+        locals.token = session.token;
+    }
+    else {
+        locals.username = "";
+    }
+};
+const getHeadersWithCookie = (sessionId, expiresIn) => {
+    const cookieHeader = `auth_session=${sessionId}; HttpOnly; Secure; SameSite=strict; Max-Age=${expiresIn}; Path=/`;
+    const headers = new Headers();
+    headers.append('Set-Cookie', cookieHeader);
+    return headers;
+};
+export const authenticationHandle = (issuer, clientId, scope = '', redirectPath = '/') => {
+    const provider = keycloak(issuer, clientId, scope, redirectPath);
+    return async ({ event, resolve }) => {
+        //login user check    
+        if (event.url.pathname.startsWith('/')) {
+            loadUserFromSession(event.cookies, event.locals);
+        }
+        //logout 
+        if (event.url.pathname === '/auth/logout' && event.cookies.get(cookieName) === undefined) {
+            const headers = logout(event.cookie);
+            return new Response('Logging Out...', { status: 303, headers });
+        }
+        // login 
+        else if (event.url.pathname === '/auth/login') {
+            const authProvider = await provider.getAuthIdentity(event.url.origin);
+            return new Response('Redirect', { status: 302, headers: authProvider });
+        }
+        //validate
+        else if (event.url.pathname === "/auth/validate") {
+            const token = await provider.getValidation(event);
+            const session = await provider.getUser(token);
+            if (session !== undefined) {
+                session.userId = session.sub;
+                event.locals.session = session;
+                event.locals.accessToken = token.access_token;
+                const sessionId = createSession({ session, token }, token.expires_in);
+                const headers = getHeadersWithCookie(sessionId, token.expires_in);
+                headers.append('Location', provider.redirectPath);
+                return new Response('Redirect', { status: 303, headers });
+            }
+            else {
+                return new Response(`Error in authorizing user`);
+            }
+        }
+        return await resolve(event);
+    };
+};

package/dist/auth/authenticationProvider.d.ts

@@ -0,0 +1,7 @@
+import type { Token } from './types.js';
+export declare const keycloak: (issuer: string, clientId: string, scope?: string, redirectPath?: string) => {
+    getAuthIdentity: (domain: string) => Promise<any>;
+    getValidation: (event: any) => Promise<Token>;
+    getUser: (token: Token) => Promise<any>;
+    redirectPath: string;
+};

package/dist/auth/authenticationProvider.js

@@ -0,0 +1,98 @@
+import * as o from "oauth4webapi";
+const cookieName = 'auth_state';
+const stateIdGenerator = () => crypto.randomUUID();
+const getKeycloakIdentity = async (issuer, client_id, scope, redirectUrl) => {
+    const state = stateIdGenerator();
+    const cookieHeader = `${cookieName}=${state}; HttpOnly; Secure; SameSite=strict; Max-Age=3600; Path=/`;
+    const code_challenge = await o.calculatePKCECodeChallenge(state);
+    const authorizationUrlSearchParams = new URLSearchParams({
+        client_id: client_id,
+        redirect_uri: redirectUrl,
+        response_type: 'code',
+        state,
+        scope,
+        code_challenge
+    });
+    const authorizationUrl = `${issuer}/protocol/openid-connect/auth?${authorizationUrlSearchParams}`;
+    const headers = new Headers();
+    headers.append('Set-Cookie', cookieHeader);
+    headers.append('Location', authorizationUrl);
+    return headers;
+};
+const getKeycloakValidation = async (issuer, client_id, scope, event, redirectUrl) => {
+    const storedState = event.cookies.get(cookieName);
+    const state = event.url.searchParams.get("state");
+    if (!storedState || !state || storedState !== state) {
+        throw new Error('State not valid');
+    }
+    const code = event.url.searchParams.get("code");
+    if (!code) {
+        throw new Error('Challenge code not valid');
+    }
+    const code_challenge = await o.calculatePKCECodeChallenge(state);
+    const response = await fetch(`${issuer}/protocol/openid-connect/token`, {
+        method: "POST",
+        body: new URLSearchParams({
+            grant_type: "authorization_code",
+            client_id: client_id,
+            redirect_uri: redirectUrl,
+            code_verifier: code_challenge,
+            code,
+            scope,
+        }),
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            Accept: "application/json"
+        }
+    });
+    if (!response.ok) {
+        console.log('Response was NOT okay');
+        throw new Error('Token not validated.');
+    }
+    const token = await response.json();
+    event.cookies.delete(cookieName, { path: '/' });
+    return token;
+};
+const getUser = async (issuer, token) => {
+    try {
+        const accessToken = token.access_token;
+        const response = await fetch(`${issuer}/protocol/openid-connect/userinfo`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+                Accept: "application/json",
+                Authorization: `Bearer ${accessToken}`
+            }
+        });
+        if (!response.ok) {
+            throw new Error('Failed to fetch user information.');
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (error) {
+        return new Response(null, {
+            status: 400
+        });
+    }
+};
+export const keycloak = (issuer, clientId, scope = '', redirectPath = '/') => {
+    const extendedScope = `openid profile offline_access ${scope}`;
+    const redirectUrl = "/auth/validate";
+    return {
+        getAuthIdentity: async (domain) => {
+            const provider = await getKeycloakIdentity(issuer, clientId, extendedScope, `${domain}${redirectUrl}`);
+            return provider;
+        },
+        getValidation: async (event) => {
+            const fullRedirectUrl = `${event.url.origin}${redirectUrl}`;
+            const token = await getKeycloakValidation(issuer, clientId, extendedScope, event, fullRedirectUrl);
+            return token;
+        },
+        getUser: async (token) => {
+            const user = await getUser(issuer, token);
+            return user;
+        },
+        redirectPath
+    };
+};

package/dist/auth/authorizationHandle.d.ts

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

package/dist/auth/authorizationHandle.js

@@ -0,0 +1,18 @@
+import { redirect } from '@sveltejs/kit';
+const authorizationHandle = (protectedPaths) => {
+    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) {
+                        return new Response('Login user', { status: 303, headers: { location: '/auth/login' } });
+                    }
+                }
+            }
+        }
+        return resolve(event);
+    };
+};
+export default authorizationHandle;

package/dist/auth/errorHandle.d.ts

@@ -0,0 +1,3 @@
+import { type Handle } from '@sveltejs/kit';
+declare const errorHandler: Handle;
+export default errorHandler;

package/dist/auth/errorHandle.js

@@ -0,0 +1,12 @@
+import {} from '@sveltejs/kit';
+const errorHandler = async ({ event, resolve }) => {
+    try {
+        return await resolve(event);
+    }
+    catch (exp) {
+        return new Response(exp, {
+            status: 400,
+        });
+    }
+};
+export default errorHandler;

package/dist/auth/sessionStorage.js

@@ -0,0 +1,73 @@
+//in memory session Store
+const sessionStore = new Map();
+let nextClean = Date.now() + 1000 * 60 * 60; // 1 hour
+function getSid() {
+    return crypto.randomUUID();
+}
+//loops over all sessions and deletes the ones that are expired.
+//We call this function every hour when a session is created
+function clean() {
+    const now = Date.now();
+    for (const [sid, session] of sessionStore) {
+        if (session.invalidAt < now) {
+            sessionStore.delete(sid);
+        }
+    }
+    // // TODO: delete session from browser storage
+    nextClean = Date.now() + 1000 * 60 * 60; // 1 hour
+}
+//calls clean() function if it has been over 1 hour to delete expired sessions
+if (Date.now() > nextClean) {
+    //call in setTimeout to not block the server
+    setTimeout(() => {
+        clean();
+    }, 5000);
+}
+//invoked from makeCookieAndSession on login/nativeAuth.ts
+export function createSession(session, maxAge) {
+    let sid = '';
+    do {
+        sid = getSid();
+    } while (sessionStore.has(sid));
+    sessionStore.set(sid, {
+        data: session,
+        invalidAt: Date.now() + maxAge
+    });
+    return sid;
+}
+//gets session from sessionStore, if not in store, adds to it
+export function getSession(sid) {
+    //if session present in sessionStore
+    if (sessionStore.has(sid)) {
+        const cache = sessionStore.get(sid);
+        return cache?.data;
+    }
+    else {
+        /*
+          // TODO/ITERATION: get session from browser on frontend and store in session store
+          // const session = sessionStorage.getItem(username)
+          // if (session) {
+          //   sessionStore.set(sid, session);
+          //   return session;
+          // }
+        */
+    }
+    //if no session, return undefined
+    return undefined;
+}
+//deletes session from sessionStore
+export function deleteSession(sid) {
+    sessionStore.delete(sid);
+    /*
+      // // TODO/ITERATION: remove session from browser storage
+      // // sessionStorage.removeItem(username);
+      // // localStorage.removeItem(username);
+    */
+}
+/*
+  // TODO/ITERATION: send back to frontend to store in browser
+  // export function setBrowserSession(sid: string, username: string) {
+  //   sessionStorage.setItem(username, sid);
+  //   localStorage.setItem(username, sid);
+  // }
+*/ 

package/dist/auth/sessionstorage.d.ts

@@ -0,0 +1,5 @@
+type Sid = string;
+export declare function createSession(session: any, maxAge: number): string;
+export declare function getSession(sid: Sid): any;
+export declare function deleteSession(sid: string): void;
+export {};

package/dist/auth/types.d.ts

@@ -0,0 +1,24 @@
+export type SessionInfo = {
+    username: string;
+    session: any;
+};
+export type SessionInfoCache = {
+    data: any;
+    invalidAt: number;
+};
+export declare class Token {
+    access_token: string;
+    expires_in: number;
+    id_token?: string;
+    refresh_expires_in?: number;
+    refresh_token?: string;
+    scope?: string;
+    session_state?: string;
+    token_type?: string;
+}
+export interface IProvider {
+    redirectPath: string;
+    getAuthIdentity(domain: string): Promise<any>;
+    getValidation(event: any): Promise<Token>;
+    getUser(token: Token): any;
+}

package/dist/auth/types.js

@@ -0,0 +1,10 @@
+export class Token {
+    access_token = "";
+    expires_in = 0;
+    id_token;
+    refresh_expires_in;
+    refresh_token;
+    scope;
+    session_state;
+    token_type;
+}

package/dist/components/Banner.svelte

@@ -23,20 +23,18 @@ export let bannerCss = "";
 export let justify = Justify.Start;
 export let alignItems = AlignItmes.Start;
 export let orientation = Orientation.Column;
-$:
-  klasses = [
-    "flex",
-    "well",
-    css ? css : "",
-    `${orientation}`,
-    `${justify}`,
-    `${alignItems}`
-  ].filter((c) => c).join(" ");
-$:
-  bannerKlasses = [
-    "banner",
-    bannerCss
-  ].filter((c) => c).join(" ");
+$: klasses = [
+  "flex",
+  "well",
+  css ? css : "",
+  `${orientation}`,
+  `${justify}`,
+  `${alignItems}`
+].filter((c) => c).join(" ");
+$: bannerKlasses = [
+  "banner",
+  bannerCss
+].filter((c) => c).join(" ");
 </script>
 <div class={bannerKlasses} style="--functional-banner-background: {background};" >
     <div class={klasses}>

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

@@ -2,12 +2,12 @@ import { SvelteComponent } from "svelte";
 import { Justify, AlignItmes, Orientation } from "./Styling.js";
 declare const __propDef: {
     props: {
-        background?: string | undefined;
-        css?: string | undefined;
-        bannerCss?: string | undefined;
-        justify?: Justify | undefined;
-        alignItems?: AlignItmes | undefined;
-        orientation?: Orientation | undefined;
+        background?: string;
+        css?: string;
+        bannerCss?: string;
+        justify?: Justify;
+        alignItems?: AlignItmes;
+        orientation?: Orientation;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,6 +15,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BannerProps = typeof __propDef.props;
 export type BannerEvents = typeof __propDef.events;

package/dist/components/Link.svelte

@@ -307,32 +307,29 @@ export let size = ComponentSize.Normal;
 export let justify = Justify.Center;
 export let alignItems = AlignItmes.Center;
 export let orientation = Orientation.Row;
-$:
-  isSmall = size === ComponentSize.Small;
-$:
-  isLarge = size === ComponentSize.Large;
-$:
-  klasses = [
-    "btn",
-    isPrimary ? "btn-primary" : "",
-    isDisabled ? "disabled" : "",
-    isBordered ? "btn-bordered" : "",
-    isSecondary ? "btn-secondary" : "",
-    idRounded ? "btn-rounded" : "",
-    idPill ? "btn-pill" : "",
-    idBlock ? "btn-block" : "",
-    idCapsule ? "btn-capsule" : "",
-    idCircle ? "btn-circle" : "",
-    idGrouped ? "btn-grouped" : "",
-    isLarge ? "btn-large" : "",
-    isSmall ? "btn-small" : "",
-    isLarge && isCircle ? "btn-large btn-circle-large" : "",
-    isSmall && idCircle ? "btn-small btn-circle-small" : "",
-    `${orientation}`,
-    `${justify}`,
-    `${alignItems}`,
-    css ? css : ""
-  ].filter((c) => c).join(" ");
+$: isSmall = size === ComponentSize.Small;
+$: isLarge = size === ComponentSize.Large;
+$: klasses = [
+  "btn",
+  isPrimary ? "btn-primary" : "",
+  isDisabled ? "disabled" : "",
+  isBordered ? "btn-bordered" : "",
+  isSecondary ? "btn-secondary" : "",
+  idRounded ? "btn-rounded" : "",
+  idPill ? "btn-pill" : "",
+  idBlock ? "btn-block" : "",
+  idCapsule ? "btn-capsule" : "",
+  idCircle ? "btn-circle" : "",
+  idGrouped ? "btn-grouped" : "",
+  isLarge ? "btn-large" : "",
+  isSmall ? "btn-small" : "",
+  isLarge && isCircle ? "btn-large btn-circle-large" : "",
+  isSmall && idCircle ? "btn-small btn-circle-small" : "",
+  `${orientation}`,
+  `${justify}`,
+  `${alignItems}`,
+  css ? css : ""
+].filter((c) => c).join(" ");
 </script>
 <a class={klasses} href={href}>
     <slot />

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

@@ -2,23 +2,23 @@ import { SvelteComponent } from "svelte";
 import { AlignItmes, ComponentSize, Justify, Orientation } from './Styling.js';
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        href?: string | undefined;
-        isPrimary?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isBordered?: boolean | undefined;
-        isSecondary?: boolean | undefined;
-        idRounded?: boolean | undefined;
-        idPill?: boolean | undefined;
-        idBlock?: boolean | undefined;
-        idCapsule?: boolean | undefined;
-        idCircle?: boolean | undefined;
-        idGrouped?: boolean | undefined;
-        isCircle?: boolean | undefined;
-        size?: ComponentSize | undefined;
-        justify?: Justify | undefined;
-        alignItems?: AlignItmes | undefined;
-        orientation?: Orientation | undefined;
+        css?: string;
+        href?: string;
+        isPrimary?: boolean;
+        isDisabled?: boolean;
+        isBordered?: boolean;
+        isSecondary?: boolean;
+        idRounded?: boolean;
+        idPill?: boolean;
+        idBlock?: boolean;
+        idCapsule?: boolean;
+        idCircle?: boolean;
+        idGrouped?: boolean;
+        isCircle?: boolean;
+        size?: ComponentSize;
+        justify?: Justify;
+        alignItems?: AlignItmes;
+        orientation?: Orientation;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,6 +26,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;

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

@@ -9,12 +9,14 @@ declare const __propDef: {
              */ logoUrl: string;
         /**
              * @type {string}
-             */ css?: string | undefined;
+             */ css?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LogoProps = typeof __propDef.props;
 export type LogoEvents = typeof __propDef.events;

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

@@ -3,10 +3,10 @@ declare const __propDef: {
     props: {
         /**
              * @type {string}
-             */ companyName?: string | undefined;
+             */ companyName?: string;
         /**
              * @type {string}
-             */ motto?: string | undefined;
+             */ motto?: string;
         /**
              * @type {string}
              */ logoUrl: string;
@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SimpleFooterProps = typeof __propDef.props;
 export type SimpleFooterEvents = typeof __propDef.events;

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

@@ -2,13 +2,15 @@ import { SvelteComponent } from "svelte";
 import { Sizes } from "./Styling";
 declare const __propDef: {
     props: {
-        width?: Sizes | undefined;
-        height?: Sizes | undefined;
+        width?: Sizes;
+        height?: Sizes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SpacerProps = typeof __propDef.props;
 export type SpacerEvents = typeof __propDef.events;

package/dist/components/Well.svelte

@@ -17,14 +17,13 @@ export let css = "";
 export let orientation = Orientation.Column;
 export let justify = Justify.Start;
 export let alignItems = AlignItmes.Start;
-$:
-  klasses = [
-    "flex",
-    css ? css : "",
-    `${orientation}`,
-    `${justify}`,
-    `${alignItems}`
-  ].filter((c) => c).join(" ");
+$: klasses = [
+  "flex",
+  css ? css : "",
+  `${orientation}`,
+  `${justify}`,
+  `${alignItems}`
+].filter((c) => c).join(" ");
 </script>
 
 <div class={klasses}>

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

@@ -2,10 +2,10 @@ import { SvelteComponent } from "svelte";
 import { AlignItmes, Justify, Orientation } from "./Styling.js";
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        orientation?: Orientation | undefined;
-        justify?: Justify | undefined;
-        alignItems?: AlignItmes | undefined;
+        css?: string;
+        orientation?: Orientation;
+        justify?: Justify;
+        alignItems?: AlignItmes;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,6 +13,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type WellProps = typeof __propDef.props;
 export type WellEvents = typeof __propDef.events;

package/dist/components/blog/BlogDescription.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
     slots: {
         readMore: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BlogDescriptionProps = typeof __propDef.props;
 export type BlogDescriptionEvents = typeof __propDef.events;

package/dist/components/blog/BlogTitle.svelte.d.ts

@@ -1,14 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        slug?: string | undefined;
-        path?: string | undefined;
+        slug?: string;
+        path?: string;
         title: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BlogTitleProps = typeof __propDef.props;
 export type BlogTitleEvents = typeof __propDef.events;

package/dist/components/layouts/DefaultLayout.svelte

@@ -17,8 +17,7 @@ export let robots = "index, follow";
 export let headerIsSticky = false;
 export let tracker = "";
 export let canonicalUrl = "";
-$:
-  headerCss = headerIsSticky ? "sticky" : "";
+$: headerCss = headerIsSticky ? "sticky" : "";
 </script>
 
 <svelte:head>

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        robots?: string | undefined;
-        headerIsSticky?: boolean | undefined;
-        tracker?: string | undefined;
-        canonicalUrl?: string | undefined;
+        robots?: string;
+        headerIsSticky?: boolean;
+        tracker?: string;
+        canonicalUrl?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,6 +15,8 @@ declare const __propDef: {
         footer: {};
         sticky_footer: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type DefaultLayoutProps = typeof __propDef.props;
 export type DefaultLayoutEvents = typeof __propDef.events;

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        leftCss?: string | undefined;
-        rightCss?: string | undefined;
+        leftCss?: string;
+        rightCss?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,6 +11,8 @@ declare const __propDef: {
         left: {};
         right: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TwoColumnsLayoutProps = typeof __propDef.props;
 export type TwoColumnsLayoutEvents = typeof __propDef.events;

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

@@ -2,14 +2,16 @@ import { SvelteComponent } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        localPages?: HeaderNavigationItem[] | undefined;
-        includeSubpagesForSelect?: boolean | undefined;
+        css?: string;
+        localPages?: Array<HeaderNavigationItem>;
+        includeSubpagesForSelect?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ColumnMenuProps = typeof __propDef.props;
 export type ColumnMenuEvents = typeof __propDef.events;

package/dist/components/menu/DynamicMenu.svelte

@@ -6,12 +6,9 @@ import { page } from "$app/stores";
 export let css = "";
 export let navCss = "";
 export let localPages = [];
-$:
-  activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
-$:
-  pagesVisiblity = isAuthenticated(page);
-$:
-  visibleNavItems = selectVisible(activePages, pagesVisiblity);
+$: activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
+$: pagesVisiblity = isAuthenticated($page);
+$: visibleNavItems = selectVisible(activePages, pagesVisiblity);
 const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).join(" ");
 </script>
 

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

@@ -2,9 +2,9 @@ import { SvelteComponent } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        navCss?: string | undefined;
-        localPages?: HeaderNavigationItem[] | undefined;
+        css?: string;
+        navCss?: string;
+        localPages?: Array<HeaderNavigationItem>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +17,8 @@ declare const __propDef: {
             pages: any[];
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type DynamicMenuProps = typeof __propDef.props;
 export type DynamicMenuEvents = typeof __propDef.events;

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

@@ -2,14 +2,16 @@ import { SvelteComponent } from "svelte";
 import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        localPages?: HeaderNavigationItem[] | undefined;
-        includeSubpagesForSelect?: boolean | undefined;
+        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;

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

@@ -3,16 +3,18 @@ import { HeaderNavigationItem } from './Menu.js';
 import { Placement } from '../Styling.js';
 declare const __propDef: {
     props: {
-        css?: string | undefined;
-        noBorder?: boolean | undefined;
-        placement?: Placement | undefined;
-        localPages?: HeaderNavigationItem[] | undefined;
-        includeSubpagesForSelect?: boolean | undefined;
+        css?: string;
+        noBorder?: boolean;
+        placement?: Placement;
+        localPages?: Array<HeaderNavigationItem>;
+        includeSubpagesForSelect?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HamburgerMenuProps = typeof __propDef.props;
 export type HamburgerMenuEvents = typeof __propDef.events;

package/dist/components/menu/authentication.js

@@ -1,8 +1,7 @@
 import { Visiblity } from '@functionalcms/svelte-components';
 import { get } from 'svelte/store';
 export function isAuthenticated(page) {
-    const pageStore = get(page);
-    const isAuthenticated = pageStore?.data?.session != null;
+    const isAuthenticated = page?.data?.session != null;
     const visibility = isAuthenticated ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
     return visibility;
 }

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

@@ -2,13 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { CaruseleItem } from "./Carusele";
 declare const __propDef: {
     props: {
-        items?: CaruseleItem[] | undefined;
-        perPage?: number | undefined;
+        items?: Array<CaruseleItem>;
+        perPage?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CaruselProps = typeof __propDef.props;
 export type CaruselEvents = typeof __propDef.events;

package/dist/components/presentation/Gallery.svelte

@@ -5,14 +5,13 @@ export let css = "";
 export let justify = Justify.Between;
 export let alignItems = AlignItmes.Center;
 export let orientation = Orientation.DynamicRow;
-$:
-  galleryKlasses = [
-    "flex",
-    css,
-    `${orientation}`,
-    `${justify}`,
-    `${alignItems}`
-  ].filter((c) => c).join(" ");
+$: galleryKlasses = [
+  "flex",
+  css,
+  `${orientation}`,
+  `${justify}`,
+  `${alignItems}`
+].filter((c) => c).join(" ");
 </script>
 <Card css={galleryKlasses}>
     {#each items as item}

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

@@ -3,11 +3,11 @@ import type { ShowItem } from './ShowItem.js';
 import { AlignItmes, Justify, Orientation } from '../Styling.js';
 declare const __propDef: {
     props: {
-        items?: ShowItem[] | undefined;
-        css?: string | undefined;
-        justify?: Justify | undefined;
-        alignItems?: AlignItmes | undefined;
-        orientation?: Orientation | undefined;
+        items?: Array<ShowItem>;
+        css?: string;
+        justify?: Justify;
+        alignItems?: AlignItmes;
+        orientation?: Orientation;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +17,8 @@ declare const __propDef: {
             item: ShowItem;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type GalleryProps = typeof __propDef.props;
 export type GalleryEvents = typeof __propDef.events;

package/dist/index-server.d.ts

@@ -1,2 +1,4 @@
-import { configureAuthentication } from './auth/auth.js';
-export { configureAuthentication };
+import { authenticationHandle } from './auth/authenticationHandle.js';
+import authorizationHandle from './auth/authorizationHandle.js';
+import errorHandler from './auth/errorHandle.js';
+export { authenticationHandle, authorizationHandle, errorHandler };

package/dist/index-server.js

@@ -1,2 +1,4 @@
-import { configureAuthentication } from './auth/auth.js';
-export { configureAuthentication };
+import { authenticationHandle } from './auth/authenticationHandle.js';
+import authorizationHandle from './auth/authorizationHandle.js';
+import errorHandler from './auth/errorHandle.js';
+export { authenticationHandle, authorizationHandle, errorHandler };

package/dist/stores/meta.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { type Writable } from 'svelte/store';
 export declare const metaDescription: Writable<string>;
 export declare const metaKeywords: Writable<string>;

package/dist/stores/pages.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="svelte" />
 import { HeaderNavigationItem } from "../components/menu/Menu.js";
 export declare const pages: import("svelte/store").Writable<HeaderNavigationItem[]>;

package/dist/stores/title.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="svelte" />
 export declare const title: import("svelte/store").Writable<string>;
 export declare const suffix: import("svelte/store").Writable<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.17.12",
+	"version": "2.18.1",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -70,7 +70,8 @@
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-slug": "^6.0.0",
 		"remark-abbr": "^1.4.2",
-		"remark-github": "^12.0.0"
+		"remark-github": "^12.0.0",
+		"oauth4webapi": "^2.17.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

package/dist/auth/auth.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-type ProcessSession = (session: any) => any;
-export declare const configureAuthentication: (secret: string, issuer: string, clientId: string, clientSecret: string, customClaims?: string[], sessionTransformation?: ProcessSession) => () => {
-    handle: import("@sveltejs/kit").Handle;
-    signIn: import("@sveltejs/kit").Action;
-    signOut: import("@sveltejs/kit").Action;
-};
-export {};

package/dist/auth/auth.js

@@ -1,92 +0,0 @@
-import { SvelteKitAuth } from "@auth/sveltekit";
-import Keycloak from "@auth/sveltekit/providers/keycloak";
-const defaultScopes = ["openid", "profile", "offline_access", "functional"];
-const defaultTokenCallback = (session) => { };
-function isTokenRefreshRequired(issued_at) {
-    const dateNow = Math.floor(new Date().getTime() / 1000);
-    const diffrence = Math.abs(new Date(issued_at).getTime() - dateNow);
-    const minutes = Math.floor(diffrence / 60);
-    return minutes > 25;
-}
-async function refreshToken(issuer, clientId, clientSecret, session) {
-    const user = session?.user;
-    if (user) {
-        try {
-            const request = await fetch(`${issuer}/protocol/openid-connect/token`, {
-                method: 'POST',
-                headers: {
-                    'content-type': 'application/x-www-form-urlencoded'
-                },
-                body: new URLSearchParams({
-                    grant_type: 'client_credentials',
-                    client_id: clientId,
-                    client_secret: clientSecret // ${ISSUER}/api/v2/
-                })
-            });
-            return await request.json();
-        }
-        catch (error) {
-            console.error(`Error while updating token data: ${error?.message}. Reusing existing tokens!`);
-            return {
-                accessToken: user.access_token,
-                expires_at: user.expires_at
-            };
-        }
-    }
-    else {
-        return {
-            message: 'User is not authorized to rotate access-token'
-        };
-    }
-}
-export const configureAuthentication = (secret, issuer, clientId, clientSecret, customClaims = [], sessionTransformation = defaultTokenCallback) => {
-    const scope = defaultScopes.concat(customClaims).join(' ');
-    return () => SvelteKitAuth({
-        providers: [Keycloak({
-                issuer: issuer,
-                clientId: clientId,
-                clientSecret: clientSecret,
-                authorization: {
-                    params: {
-                        scope: scope
-                    }
-                }
-            })],
-        secret: secret,
-        trustHost: true,
-        callbacks: {
-            async jwt({ token, user, account, profile, session }) {
-                if (account != null) {
-                    token.account = account;
-                }
-                if (user != null) {
-                    token.user = user;
-                }
-                if (profile != null) {
-                    token.profile = profile;
-                }
-                if (token && isTokenRefreshRequired(token.expires_at)) {
-                    const updatedToken = await refreshToken(issuer, clientId, clientSecret, session);
-                    if (updatedToken.access_token) {
-                        token = {
-                            ...token,
-                            ...updatedToken
-                        };
-                    }
-                }
-                return token;
-            },
-            async session({ session, token, user }) {
-                session.accessToken = token.account.access_token;
-                if (session.user != null) {
-                    session = { ...session, ...user };
-                }
-                if (token.profile != null) {
-                    session.profile = token.profile;
-                }
-                sessionTransformation(session);
-                return session;
-            }
-        }
-    });
-};