@functionalcms/svelte-components 2.0.7 → 2.1.0

package/dist/components/Banner.svelte

@@ -0,0 +1,17 @@
+<script>export let background = "";
+export let css = "";
+$:
+  klasses = [
+    "flex",
+    css ? css : ""
+  ].filter((c) => c).join(" ");
+</script>
+<style>
+    div {
+        background: var(--functional-banner-background);
+    }
+</style>
+
+<div style="--functional-banner-background: {background};" class={klasses}>
+    <slot />
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        background?: string | undefined;
+        css?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BannerProps = typeof __propDef.props;
+export type BannerEvents = typeof __propDef.events;
+export type BannerSlots = typeof __propDef.slots;
+export default class Banner extends SvelteComponent<BannerProps, BannerEvents, BannerSlots> {
+}
+export {};

package/dist/components/Layout.svelte

@@ -0,0 +1,41 @@
+<style>
+    :global(html), :global(body), :global(body > div) {
+        height: 100%;
+    }
+    :global(body > div) {
+        display: flex;
+        flex-direction: column;
+    }
+    :global(body > footer) {
+        flex-shrink: 0;
+    } 
+    div {
+        flex: 1 0 auto;
+    }
+    footer {
+        flex-shrink: 0;
+    }
+</style>
+
+<div>
+    {#if $$slots.header}
+        <header>
+            <slot name="header" />
+        </header>
+    {/if}
+    <main>
+        <slot />
+    </main>
+    {#if $$slots.footer}
+        <footer>
+            <slot name="footer" />
+        </footer>
+    {/if}
+    <div id="drawer-root"></div>
+</div>
+    
+{#if $$slots.sticky_footer}
+<footer>
+    <slot name="sticky_footer" />
+</footer>
+{/if}

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

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  LayoutProps */
+/** @typedef {typeof __propDef.events}  LayoutEvents */
+/** @typedef {typeof __propDef.slots}  LayoutSlots */
+export default class Layout extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+    sticky_footer: {};
+}> {
+}
+export type LayoutProps = typeof __propDef.props;
+export type LayoutEvents = typeof __propDef.events;
+export type LayoutSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+        sticky_footer: {};
+    };
+};
+export {};

package/dist/components/Logo.svelte

@@ -1,10 +1,22 @@
-<script>import { Position } from "./Position";
-export let companyName;
+<style>
+	a {
+		display: var(--functional-logo-display, 'inline-block');
+	}	
+	a img {
+		width: 80vw;
+	}
+	
+	@media (min-width: 960px) {
+		a img {
+			width: 100%;
+		}
+	}	
+</style>
+
+<script>export let companyName;
 export let logoUrl;
 </script>
 
-<div>
-    <a href="/">
-        <img src={logoUrl} alt={companyName} />
-    </a>
-</div>
+<a href="/">
+	<img src={logoUrl} alt={companyName} />
+</a>

package/dist/components/SimpleFooter.svelte

@@ -1,20 +1,18 @@
+<style>
+    aside {
+        text-align: center;
+        font-size: smaller;
+    }
+</style>
+
 <script>export let companyName = "";
 export let motto = "";
 export let logoUrl;
 </script>
 
-<footer class="footer">
-    <aside class="items-center grid-flow-col">
-        <img src={logoUrl} alt={companyName} />
-        <p>{motto}</p>
-        <p>Copyright © 2023 - All right reserved by {companyName}</p>
-        <p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
-    </aside>
-</footer>
-
-<style>
-    footer {
-        text-align: center;
-        font-size: smaller;
-    }
-</style>
+<aside class="items-center grid-flow-col">
+    <img src={logoUrl} alt={companyName} />
+    <p>{motto}</p>
+    <p>Copyright © 2024 - All right reserved by {companyName}</p>
+    <p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
+</aside>

package/dist/components/Spacer.svelte

@@ -0,0 +1,18 @@
+<style>
+    div {
+        display: block;
+        height: 100%;
+    }
+</style>
+
+<script>import { Sizes } from "./Styling";
+export let width = Sizes.V0;
+export let height = Sizes.V0;
+const klasses = [
+  width ? `w${width}` : "",
+  height ? `h${height}` : ""
+].filter((c) => c).join(" ");
+</script>
+<div class={klasses}>
+
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { Sizes } from "./Styling";
+declare const __propDef: {
+    props: {
+        width?: Sizes | undefined;
+        height?: Sizes | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+export default class Spacer extends SvelteComponent<SpacerProps, SpacerEvents, SpacerSlots> {
+}
+export {};

package/dist/components/Styling.d.ts

@@ -0,0 +1,47 @@
+export declare enum Justify {
+    Start = "start",
+    End = "end",
+    Center = "center",
+    Between = "between",
+    Around = "around"
+}
+export declare enum Placement {
+    Start = "start",
+    End = "end",
+    Top = "top",
+    Up = "up",
+    Bottom = "bottom",
+    Content = "content"
+}
+export declare enum Orientation {
+    Row = "row",
+    Column = "column",
+    DynamicRow = "row-dynamic"
+}
+export declare enum Position {
+    Left = 0,
+    Middle = 1,
+    Right = 2
+}
+export declare enum Sizes {
+    V0 = 0,
+    V2 = 2,
+    V4 = 4,
+    V6 = 6,
+    V8 = 8,
+    V10 = 10,
+    V12 = 12,
+    V14 = 14,
+    V16 = 16,
+    V18 = 18,
+    V20 = 20,
+    V24 = 24,
+    V32 = 32,
+    V36 = 36,
+    V40 = 40,
+    V48 = 48,
+    V56 = 56,
+    V64 = 64,
+    V72 = 72,
+    V80 = 80
+}

package/dist/components/Styling.js

@@ -0,0 +1,52 @@
+export var Justify;
+(function (Justify) {
+    Justify["Start"] = "start";
+    Justify["End"] = "end";
+    Justify["Center"] = "center";
+    Justify["Between"] = "between";
+    Justify["Around"] = "around";
+})(Justify || (Justify = {}));
+export var Placement;
+(function (Placement) {
+    Placement["Start"] = "start";
+    Placement["End"] = "end";
+    Placement["Top"] = "top";
+    Placement["Up"] = "up";
+    Placement["Bottom"] = "bottom";
+    Placement["Content"] = "content";
+})(Placement || (Placement = {}));
+export var Orientation;
+(function (Orientation) {
+    Orientation["Row"] = "row";
+    Orientation["Column"] = "column";
+    Orientation["DynamicRow"] = "row-dynamic";
+})(Orientation || (Orientation = {}));
+export var Position;
+(function (Position) {
+    Position[Position["Left"] = 0] = "Left";
+    Position[Position["Middle"] = 1] = "Middle";
+    Position[Position["Right"] = 2] = "Right";
+})(Position || (Position = {}));
+export var Sizes;
+(function (Sizes) {
+    Sizes[Sizes["V0"] = 0] = "V0";
+    Sizes[Sizes["V2"] = 2] = "V2";
+    Sizes[Sizes["V4"] = 4] = "V4";
+    Sizes[Sizes["V6"] = 6] = "V6";
+    Sizes[Sizes["V8"] = 8] = "V8";
+    Sizes[Sizes["V10"] = 10] = "V10";
+    Sizes[Sizes["V12"] = 12] = "V12";
+    Sizes[Sizes["V14"] = 14] = "V14";
+    Sizes[Sizes["V16"] = 16] = "V16";
+    Sizes[Sizes["V18"] = 18] = "V18";
+    Sizes[Sizes["V20"] = 20] = "V20";
+    Sizes[Sizes["V24"] = 24] = "V24";
+    Sizes[Sizes["V32"] = 32] = "V32";
+    Sizes[Sizes["V36"] = 36] = "V36";
+    Sizes[Sizes["V40"] = 40] = "V40";
+    Sizes[Sizes["V48"] = 48] = "V48";
+    Sizes[Sizes["V56"] = 56] = "V56";
+    Sizes[Sizes["V64"] = 64] = "V64";
+    Sizes[Sizes["V72"] = 72] = "V72";
+    Sizes[Sizes["V80"] = 80] = "V80";
+})(Sizes || (Sizes = {}));

package/dist/components/Well.svelte

@@ -0,0 +1,28 @@
+
+<style>
+    div {
+        width: 100%;
+        margin: 0px;
+    }
+    @media (min-width: 960px) {
+        div {
+            width: var(--functional-content-width);
+            margin: auto;
+        }    
+    }
+</style>
+
+<script>import { Orientation } from "../Styling";
+export let css = "";
+export let orientation = Orientation.Column;
+$:
+  klasses = [
+    "flex",
+    css ? css : "",
+    `flex-${orientation}`
+  ].filter((c) => c).join(" ");
+</script>
+
+<div class={klasses}>
+    <slot />
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string | undefined;
+        orientation?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WellProps = typeof __propDef.props;
+export type WellEvents = typeof __propDef.events;
+export type WellSlots = typeof __propDef.slots;
+export default class Well extends SvelteComponent<WellProps, WellEvents, WellSlots> {
+}
+export {};

package/dist/components/menu/FlatMenu.svelte

@@ -0,0 +1,119 @@
+<script>import { Visiblity } from "../../Visiblity";
+import { HeaderNavigationItem } from "../../HeaderNavigationItem";
+import { afterNavigate } from "$app/navigation";
+import { page } from "$app/stores";
+export let pages = [];
+export let authentication = false;
+export let css = "";
+const selectVisible = (pages2, visiblity) => pages2.filter(
+  (page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
+);
+$:
+  visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
+$:
+  visibleNavItems = selectVisible(pages, visibility);
+$:
+  selected = false;
+afterNavigate((navigation) => selected = false);
+</script>
+<style>
+    nav > ul {
+        margin: var(--functional-menu-margin, 'auto');
+        padding: var(--functional-menu-padding);
+        background: var(--functional-menu-background);
+
+        display: none;
+        
+        transition: all 1.25s;
+    }
+    nav > ul > li > a {
+        margin: var(--functional-menu-item-margin);
+        padding: var(--functional-menu-item-padding);
+        display: block;
+        text-align: center;
+
+        color: var(--functional-menu-item-color, var(--primary-color));
+        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);
+    }
+    nav > ul > li > a:hover {
+        color: var(--functional-menu-item-color-hover, var(--primary-color));
+        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);
+    }
+    nav > ul > li[aria-current='true'] > a{
+        color: var(--functional-menu-item-color-selected, var(--primary-color));
+        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);
+    }
+    .show-menu {
+      cursor: pointer;
+    }
+    .nav-icon {
+        display: inline-block;
+        font-size: 1.5em;
+        padding: 0.5em;
+        vertical-align: middle;
+    }
+
+    input.checkbox-menu[type="checkbox"] {
+        display: none;
+    }
+
+    input.checkbox-menu[type="checkbox"]:checked ~ ul {
+        display: block;
+    }
+
+    @media (max-width: 960px) {
+        nav > ul {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+    @media (min-width: 960px) {
+        nav > ul {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        nav > ul > li > a {
+            display: block;
+            text-align: center;
+            height: 100%;
+        }
+        .show-menu {
+            display: none;
+        }
+    }
+</style>
+
+<nav class={css}>
+    <label for="id-show-menu" class="show-menu">
+        <div class="nav-icon">
+            &#9776;
+        </div>
+    </label>
+    <input type="checkbox" id="id-show-menu" class="checkbox-menu" role="button" bind:checked={selected}>
+    <ul>
+        {#each visibleNavItems as pageItem}
+            <li aria-current={$page.url.pathname === pageItem.path}>
+                <span class="screenreader-only">Navigate to {pageItem.name}</span>
+                <a on:click={pageItem.action} href={pageItem.path}>
+                    {pageItem.name}
+                </a>
+            </li>
+        {/each}
+    </ul>
+</nav>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        pages?: HeaderNavigationItem[] | undefined;
+        authentication?: boolean | undefined;
+        css?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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/HamburgerMenu.svelte

@@ -0,0 +1,84 @@
+<style>
+	.sticky {
+		display: block;
+		position: absolute;
+	}
+	:global(.no-border) {
+		border: none!important;;
+	}
+	:global(.dialog-content) {
+		background: var(--functional-menu-background)!important;
+	}
+	ul {
+		list-style: none;
+	}
+	:global(#menu-id) {
+		color: var(--functional-menu-item-color);
+	}
+	a {
+		display: block;
+		margin: var(--functional-menu-item-margin);
+		padding: var(--functional-menu-item-padding);
+		color: var(--functional-menu-item-color);
+	}
+	a:hover {
+		display: block;
+		margin: var(--functional-menu-item-hover-margin);
+		padding: var(--functional-menu-item-hover-padding);
+		color: var(--functional-menu-item-hover-color);
+		text-decoration: var(--functional-menu-item-hover-text-decoration);
+	}
+</style>
+
+<script>import { Visiblity, 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";
+export let pages = [];
+export let authentication = false;
+export let css = "";
+export let noBorder = false;
+export let placement = Placement.Start;
+const selectVisible = (pages2, visiblity) => pages2.filter(
+  (page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
+);
+$:
+  visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
+$:
+  visibleNavItems = selectVisible(pages, visibility);
+let drawer = null;
+const assignDrawerRef = (ev) => {
+  drawer = ev.detail.instance;
+};
+afterNavigate((navigation) => drawer?.hide());
+const klasses = [
+  css ? css : "",
+  noBorder ? "no-border" : ""
+].filter((c) => c).join(" ");
+</script>
+<Button 
+		type="button"
+		data-a11y-dialog-show="drawer-start-test" 
+		mode="primary" 
+		noBorder
+		css={klasses}>
+    &#9776;
+</Button>
+<Drawer 
+		id="drawer-start-test" 
+		drawerRoot="#drawer-root" 
+		placement={placement}
+		on:instance={assignDrawerRef}
+		title="Menu">
+	<ul>
+	{#each visibleNavItems as pageItem}
+		<li aria-current={$page.url.pathname === pageItem.path}>
+			<span class="screenreader-only">Navigate to {pageItem.name}</span>
+			<a on:click={pageItem.action} href={pageItem.path}>
+				{pageItem.name}
+			</a>
+		</li>
+	{/each}
+	</ul>
+</Drawer>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { HeaderNavigationItem } from './Menu.js';
+import { Placement } from '../Styling.js';
+declare const __propDef: {
+    props: {
+        pages?: HeaderNavigationItem[] | undefined;
+        authentication?: boolean | undefined;
+        css?: string | undefined;
+        noBorder?: boolean | undefined;
+        placement?: Placement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HamburgerMenuProps = typeof __propDef.props;
+export type HamburgerMenuEvents = typeof __propDef.events;
+export type HamburgerMenuSlots = typeof __propDef.slots;
+export default class HamburgerMenu extends SvelteComponent<HamburgerMenuProps, HamburgerMenuEvents, HamburgerMenuSlots> {
+}
+export {};

package/dist/css/properties.css

@@ -0,0 +1,144 @@
+:root {
+    --functional-content-width: 70%;
+    
+    --functional-logo-display: inline-block;
+    
+    --functional-primary-color:  black;
+    --functional-secondary-color:  #888;
+    --functional-background-color: #fff;
+
+    --agnostic-primary-modelight: var(--primary-colour);
+    --agnostic-primary-modedark: var(--primary-colour);
+
+    --agnostic-radius: 2em;
+
+    --well-margin-size: 15%;
+}
+/**
+ * define agnostic varaibles based on Functional ones
+ **/
+:root {
+    --agnostic-font-color: var(--functional-primary-color);
+}
+/**
+ * Banner variables
+ **/
+ :root {
+    --functional-banner-margin: 0px auto;
+    --functional-banner-padding: 0px;
+    --functional-banner-background: var(--functional-background-color);
+ }
+/**
+ * Menu variables
+ **/
+:root {
+    --functional-menu-background: var(--functional-secondary-color);
+    --functional-menu-color: var(--agnostic-font-color);
+    --functional-menu-margin: 0px;
+    --functional-menu-padding: 0px;
+    --functional-menu-align-items: inherit;
+    --functional-menu-justify-content: inherit;
+
+    --functional-menu-item-color: #fff;
+    --functional-menu-item-margin: 0px var(--fluid-12);
+    --functional-menu-item-padding: var(--fluid-20) var(--fluid-20) var(--fluid-8)  var(--fluid-20);
+    --functional-menu-item-background: var(--functional-background-color);
+    --functional-menu-item-font-size: var(--fluid-24);
+    --functional-menu-item-border-top: none;
+    --functional-menu-item-border-right: none;
+    --functional-menu-item-border-bottom: none;
+    --functional-menu-item-border-left: none;
+    
+    --functional-menu-item-hover-margin: 0px var(--fluid-12);
+    --functional-menu-item-hover-padding: var(--fluid-20) var(--fluid-20) var(--fluid-8)  var(--fluid-20);
+    --functional-menu-item-hover-font: bolder;
+    --functional-menu-item-hover-color: var(--functional-primary-color);
+    --functional-menu-item-hover-text-decoration: none;
+    --functional-menu-item-hover-background: #fff;
+    --functional-menu-item-hover-border: none;
+    --functional-menu-item-hover-border-top: none;
+    --functional-menu-item-hover-border-right: none;
+    --functional-menu-item-hover-border-bottom: none;
+    --functional-menu-item-hover-border-left: none;
+
+    --functional-menu-item-selected-text-decoration-hover: none;
+    --functional-menu-item-selected-background: #fff;
+    --functional-menu-item-selected-border-top: none;
+    --functional-menu-item-selected-border-right: none;
+    --functional-menu-item-selected-border-bottom: 6px solid var(--functional-primary-color);
+    --functional-menu-item-selected-border-left: none;
+}
+
+html, body, body > div { height: 100%; }
+
+.fw { width:100%; }
+
+.flex-row { flex-direction: row; }
+.flex-column { flex-direction: column; }
+.flex-row-dynamic { flex-direction: column; }
+
+.h0 { height: 0 !important; }
+.h2 { height: var(--fluid-2) !important; }
+.h4 { height: var(--fluid-4) !important; }
+.h6 { height: var(--fluid-6) !important; }
+.h8 { height: var(--fluid-8) !important; }
+.h10 { height: var(--fluid-10) !important; }
+.h12 { height: var(--fluid-12) !important; }
+.h14 { height: var(--fluid-14) !important; }
+.h16 { height: var(--fluid-16) !important; }
+.h18 { height: var(--fluid-18) !important; }
+.h20 { height: var(--fluid-20) !important; }
+.h24 { height: var(--fluid-24) !important; }
+.h32 { height: var(--fluid-32) !important; }
+.h36 { height: var(--fluid-36) !important; }
+.h40 { height: var(--fluid-40) !important; }
+.h48 { height: var(--fluid-48) !important; }
+.h56 { height: var(--fluid-56) !important; }
+.h64 { height: var(--fluid-64) !important; }
+
+.h33p { height: 33% !important; }
+.h66p { height: 66% !important; }
+.h25p { height: 25% !important; }
+.h75p { height: 75% !important; }
+.h50p { height: 50% !important; }
+
+.w0 { width: 0 !important; }
+.w2 { width: var(--fluid-2) !important; }
+.w4 { width: var(--fluid-4) !important; }
+.w6 { width: var(--fluid-6) !important; }
+.w8 { width: var(--fluid-8) !important; }
+.w10 { width: var(--fluid-10) !important; }
+.w12 { width: var(--fluid-12) !important; }
+.w14 { width: var(--fluid-14) !important; }
+.w16 { width: var(--fluid-16) !important; }
+.w18 { width: var(--fluid-18) !important; }
+.w20 { width: var(--fluid-20) !important; }
+.w24 { width: var(--fluid-24) !important; }
+.w32 { width: var(--fluid-32) !important; }
+.w36 { width: var(--fluid-36) !important; }
+.w40 { width: var(--fluid-40) !important; }
+.w48 { width: var(--fluid-48) !important; }
+.w56 { width: var(--fluid-56) !important; }
+.w64 { width: var(--fluid-64) !important; }
+
+.w33p { width: 100% !important; }
+.w66p { width: 100% !important; }
+.w25p { width: 100% !important; }
+.w75p { width: 100% !important; }
+.w50p { width: 100% !important; }
+
+@media (min-width: 960px) {
+    .flex-row-dynamic { flex-direction: row; }
+    
+    .w33p { width: 33% !important; }
+    .w66p { width: 66% !important; }
+    .w25p { width: 25% !important; }
+    .w75p { width: 75% !important; }
+    .w50p { width: 50% !important; }
+    
+    .h33p { height: 33% !important; }
+    .h66p { height: 66% !important; }
+    .h25p { height: 25% !important; }
+    .h75p { height: 75% !important; }
+    .h50p { height: 50% !important; }
+}

package/dist/index.d.ts

@@ -1,7 +1,11 @@
-import Box from './components/Box.svelte';
-import Hero from './components/Hero.svelte';
-import Header from './components/Header.svelte';
+import FlatMenu from './components/menu/FlatMenu.svelte';
+import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
+import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
+import Banner from './components/Banner.svelte';
+import Layout from './components/Layout.svelte';
+import Logo from './components/Logo.svelte';
 import SimpleFooter from './components/SimpleFooter.svelte';
-import { Visiblity, HeaderNavigationItem } from './components/HeaderNavigationItem.js';
-import { Position } from './components/Position.js';
-export { Box, Hero, Header, SimpleFooter, Visiblity, HeaderNavigationItem, Position };
+import Spacer from './components/Spacer.svelte';
+import Well from './components/Well.svelte';
+import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };

package/dist/index.js

@@ -1,11 +1,12 @@
 // Reexport your entry components here
-import Box from './components/Box.svelte';
-import Hero from './components/Hero.svelte';
-import Header from './components/Header.svelte';
+import FlatMenu from './components/menu/FlatMenu.svelte';
+import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
+import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
+import Banner from './components/Banner.svelte';
+import Layout from './components/Layout.svelte';
+import Logo from './components/Logo.svelte';
 import SimpleFooter from './components/SimpleFooter.svelte';
-// import { authStore } from './authStore.js'
-import { Visiblity, HeaderNavigationItem } from './components/HeaderNavigationItem.js';
-import { Position } from './components/Position.js';
-export { Box, Hero, Header, SimpleFooter, 
-// authStore,
-Visiblity, HeaderNavigationItem, Position };
+import Spacer from './components/Spacer.svelte';
+import Well from './components/Well.svelte';
+import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -30,6 +30,7 @@
 		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/package": "^2.2.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"agnostic-svelte": "^1.1.27",
 		"publint": "^0.2.7",
 		"svelte": "^4.2.8",
 		"svelte-check": "^3.6.2",

package/dist/authStore.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="svelte" />
-export type AuthConfig = {
-    tenant: string;
-    tenantId: string;
-    policy: string;
-    scopes: Array<string>;
-    clientId: string;
-    redirectUrl: string;
-};
-export declare const authStore: {
-    isAuthenticated: import("svelte/store").Readable<boolean>;
-    userId: import("svelte/store").Readable<string>;
-    accessToken: import("svelte/store").Readable<string>;
-    username: import("svelte/store").Readable<string>;
-    initialise: (config: AuthConfig) => Promise<void>;
-    signIn: () => Promise<void>;
-    signOut: () => Promise<void>;
-};

package/dist/authStore.js

@@ -1,72 +0,0 @@
-import { get, readonly, writable } from "svelte/store";
-import { PublicClientApplication } from "@azure/msal-browser";
-const isAuthenticated = writable(false);
-const accessToken = writable('');
-const userId = writable('');
-const username = writable('');
-let msal;
-let authConfig;
-const getMSALConfig = (config) => {
-    return {
-        auth: {
-            clientId: config.clientId,
-            authority: `https://${config.tenant}.b2clogin.com/${config.tenant}.onmicrosoft.com/${config.policy}`,
-            knownAuthorities: [`${config.tenant}.b2clogin.com`], // array of URIs that are known to be valid,
-            redirectUri: config.redirectUrl
-        },
-        cache: {
-            cacheLocation: "sessionStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
-            storeAuthStateInCookie: false, // If you wish to store cache items in cookies as well as browser cache, set this to "true".
-        },
-    };
-};
-const getLoginRequest = (config) => {
-    return {
-        scopes: ["openid", "offline_access", config.clientId, ...config.scopes]
-    };
-};
-const getTokenRequest = (config, account) => {
-    return {
-        scopes: ["openid", "offline_access", config.clientId, ...config.scopes],
-        forceRefresh: false,
-        account: account,
-    };
-};
-const handleToken = (token) => {
-    if (token !== null) {
-        isAuthenticated.set(true);
-        accessToken.set(token.accessToken);
-        userId.set(token.account.idTokenClaims.sub);
-        username.set(token.account.idTokenClaims.name);
-    }
-    else {
-        isAuthenticated.set(false);
-    }
-};
-const logUsingCookies = async (config) => {
-    const accounts = msal.getAllAccounts();
-    if (accounts.length > 0) {
-        const token = await msal.acquireTokenSilent(getTokenRequest(config, accounts[0]));
-        handleToken(token);
-    }
-};
-export const authStore = {
-    isAuthenticated: readonly(isAuthenticated),
-    userId: readonly(userId),
-    accessToken: readonly(accessToken),
-    username: readonly(username),
-    initialise: async (config) => {
-        msal = new PublicClientApplication(getMSALConfig(config));
-        await msal.initialize();
-        await logUsingCookies(config);
-        authConfig = config;
-    },
-    signIn: async () => {
-        const loginResponse = await msal.loginPopup(getLoginRequest(authConfig));
-        handleToken(loginResponse);
-    },
-    signOut: async () => {
-        await msal.logoutPopup({});
-        isAuthenticated.set(false);
-    },
-};

package/dist/components/Header.svelte

@@ -1,37 +0,0 @@
-<script>import { Header, HeaderNav, HeaderNavItem, MenuItem } from "agnostic-svelte";
-import Logo from "./Logo.svelte";
-import { Visiblity } from "./HeaderNavigationItem.js";
-import { Position } from "./Position";
-export let companyName;
-export let pages = [];
-export let authentication = false;
-export let logoUrl;
-export let logoPosition = Position.Left;
-const selectVisible = (pages2, visiblity) => pages2.filter(
-  (page) => page?.visiblity === Visiblity.Always || page?.visiblity === visiblity
-);
-$:
-  visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
-$:
-  visibleNavItems = selectVisible(pages, visibility);
-</script>
-
-<header>
-	<Header>
-		{#if logoPosition == Position.Left}
-			<Logo slot="logoright" {logoUrl} {companyName} />
-		{/if}
-		<HeaderNav>
-			{#each visibleNavItems as page}
-				<HeaderNavItem>
-					<a on:click={page.action} href={page.path}>
-						{page.name}
-					</a>
-				</HeaderNavItem>
-			{/each}
-		</HeaderNav>
-		{#if logoPosition == Position.Right}
-			<Logo slot="logoright" {logoUrl} {companyName} />
-		{/if}
-	</Header>
-</header>

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

@@ -1,32 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { Position } from "./Position";
-import type { HeaderNavigationItem } from './HeaderNavigationItem.js';
-declare const __propDef: {
-    props: {
-        /**
-             * @type {string}
-             */ companyName: string;
-        /**
-             * @type {HeaderNavigationItem[]}
-             */ pages?: HeaderNavigationItem[] | undefined;
-        /**
-             * @type {Readonly<bool>}
-             */ authentication?: boolean | undefined;
-        /**
-             * @type {string}
-             */ logoUrl: string;
-        /**
-             * @type {Position}
-             */ logoPosition?: Position | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HeaderProps = typeof __propDef.props;
-export type HeaderEvents = typeof __propDef.events;
-export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
-}
-export {};

package/dist/components/Hero.svelte

@@ -1,19 +0,0 @@
-<script>export let url;
-</script>
-
-<header class="hero">
-	<h1>
-		<slot name="header" />
-	</h1>
-	<p>
-		<slot />
-	</p>
-	<div>
-		<a class="item keychainify-checked" href={url}>
-			<slot name="link" />
-		</a>
-	</div>
-</header>
-
-<style>
-</style>

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

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * @type {string}
-             */ url: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-        link: {};
-    };
-};
-export type HeroProps = typeof __propDef.props;
-export type HeroEvents = typeof __propDef.events;
-export type HeroSlots = typeof __propDef.slots;
-export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
-}
-export {};

package/dist/components/Position.d.ts

@@ -1,5 +0,0 @@
-export declare enum Position {
-    Left = 0,
-    Middle = 1,
-    Right = 2
-}

package/dist/components/Position.js

@@ -1,6 +0,0 @@
-export var Position;
-(function (Position) {
-    Position[Position["Left"] = 0] = "Left";
-    Position[Position["Middle"] = 1] = "Middle";
-    Position[Position["Right"] = 2] = "Right";
-})(Position || (Position = {}));

package/dist/constants.d.ts

@@ -1,5 +0,0 @@
-export namespace constants {
-    let Company: string;
-    let Motto: string;
-    let Navigation: {};
-}

package/dist/constants.js

@@ -1,6 +0,0 @@
-export const constants =   
-{
-    Company: "Your company name",
-    Motto: "Hey, work with us",
-    Navigation: {}
-};