@functionalcms/svelte-components 2.0.7 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Banner.svelte +17 -0
- package/dist/components/Banner.svelte.d.ts +19 -0
- package/dist/components/Card.svelte +137 -0
- package/dist/components/Card.svelte.d.ts +49 -0
- package/dist/components/Layout.svelte +41 -0
- package/dist/components/Layout.svelte.d.ts +33 -0
- package/dist/components/Logo.svelte +19 -7
- package/dist/components/SimpleFooter.svelte +13 -15
- package/dist/components/Spacer.svelte +18 -0
- package/dist/components/Spacer.svelte.d.ts +18 -0
- package/dist/components/Styling.d.ts +47 -0
- package/dist/components/Styling.js +52 -0
- package/dist/components/Well.svelte +28 -0
- package/dist/components/Well.svelte.d.ts +19 -0
- package/dist/components/menu/FlatMenu.svelte +119 -0
- package/dist/components/menu/FlatMenu.svelte.d.ts +18 -0
- package/dist/components/menu/HamburgerMenu.svelte +84 -0
- package/dist/components/menu/HamburgerMenu.svelte.d.ts +22 -0
- package/dist/css/properties.css +187 -0
- package/dist/index.d.ts +11 -6
- package/dist/index.js +11 -9
- package/package.json +2 -1
- package/dist/authStore.d.ts +0 -18
- package/dist/authStore.js +0 -72
- package/dist/components/Box.svelte +0 -21
- package/dist/components/Box.svelte.d.ts +0 -27
- package/dist/components/Header.svelte +0 -37
- package/dist/components/Header.svelte.d.ts +0 -32
- package/dist/components/Hero.svelte +0 -19
- package/dist/components/Hero.svelte.d.ts +0 -22
- package/dist/components/Position.d.ts +0 -5
- package/dist/components/Position.js +0 -6
- package/dist/constants.d.ts +0 -5
- package/dist/constants.js +0 -6
- /package/dist/components/{HeaderNavigationItem.d.ts → menu/Menu.d.ts} +0 -0
- /package/dist/components/{HeaderNavigationItem.js → menu/Menu.js} +0 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
.sticky {
|
|
3
|
+
display: block;
|
|
4
|
+
position: absolute;
|
|
5
|
+
}
|
|
6
|
+
:global(.no-border) {
|
|
7
|
+
border: none!important;;
|
|
8
|
+
}
|
|
9
|
+
:global(.dialog-content) {
|
|
10
|
+
background: var(--functional-menu-background)!important;
|
|
11
|
+
}
|
|
12
|
+
ul {
|
|
13
|
+
list-style: none;
|
|
14
|
+
}
|
|
15
|
+
:global(#menu-id) {
|
|
16
|
+
color: var(--functional-menu-item-color);
|
|
17
|
+
}
|
|
18
|
+
a {
|
|
19
|
+
display: block;
|
|
20
|
+
margin: var(--functional-menu-item-margin);
|
|
21
|
+
padding: var(--functional-menu-item-padding);
|
|
22
|
+
color: var(--functional-menu-item-color);
|
|
23
|
+
}
|
|
24
|
+
a:hover {
|
|
25
|
+
display: block;
|
|
26
|
+
margin: var(--functional-menu-item-hover-margin);
|
|
27
|
+
padding: var(--functional-menu-item-hover-padding);
|
|
28
|
+
color: var(--functional-menu-item-hover-color);
|
|
29
|
+
text-decoration: var(--functional-menu-item-hover-text-decoration);
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
32
|
+
|
|
33
|
+
<script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
|
|
34
|
+
import { afterNavigate } from "$app/navigation";
|
|
35
|
+
import { Drawer, Button } from "agnostic-svelte";
|
|
36
|
+
import { page } from "$app/stores";
|
|
37
|
+
import { Placement } from "../Styling.js";
|
|
38
|
+
export let pages = [];
|
|
39
|
+
export let authentication = false;
|
|
40
|
+
export let css = "";
|
|
41
|
+
export let noBorder = false;
|
|
42
|
+
export let placement = Placement.Start;
|
|
43
|
+
const selectVisible = (pages2, visiblity) => pages2.filter(
|
|
44
|
+
(page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
|
|
45
|
+
);
|
|
46
|
+
$:
|
|
47
|
+
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
48
|
+
$:
|
|
49
|
+
visibleNavItems = selectVisible(pages, visibility);
|
|
50
|
+
let drawer = null;
|
|
51
|
+
const assignDrawerRef = (ev) => {
|
|
52
|
+
drawer = ev.detail.instance;
|
|
53
|
+
};
|
|
54
|
+
afterNavigate((navigation) => drawer?.hide());
|
|
55
|
+
const klasses = [
|
|
56
|
+
css ? css : "",
|
|
57
|
+
noBorder ? "no-border" : ""
|
|
58
|
+
].filter((c) => c).join(" ");
|
|
59
|
+
</script>
|
|
60
|
+
<Button
|
|
61
|
+
type="button"
|
|
62
|
+
data-a11y-dialog-show="drawer-start-test"
|
|
63
|
+
mode="primary"
|
|
64
|
+
noBorder
|
|
65
|
+
css={klasses}>
|
|
66
|
+
☰
|
|
67
|
+
</Button>
|
|
68
|
+
<Drawer
|
|
69
|
+
id="drawer-start-test"
|
|
70
|
+
drawerRoot="#drawer-root"
|
|
71
|
+
placement={placement}
|
|
72
|
+
on:instance={assignDrawerRef}
|
|
73
|
+
title="Menu">
|
|
74
|
+
<ul>
|
|
75
|
+
{#each visibleNavItems as pageItem}
|
|
76
|
+
<li aria-current={$page.url.pathname === pageItem.path}>
|
|
77
|
+
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
78
|
+
<a on:click={pageItem.action} href={pageItem.path}>
|
|
79
|
+
{pageItem.name}
|
|
80
|
+
</a>
|
|
81
|
+
</li>
|
|
82
|
+
{/each}
|
|
83
|
+
</ul>
|
|
84
|
+
</Drawer>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { HeaderNavigationItem } from './Menu.js';
|
|
3
|
+
import { Placement } from '../Styling.js';
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
pages?: HeaderNavigationItem[] | undefined;
|
|
7
|
+
authentication?: boolean | undefined;
|
|
8
|
+
css?: string | undefined;
|
|
9
|
+
noBorder?: boolean | undefined;
|
|
10
|
+
placement?: Placement | undefined;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export type HamburgerMenuProps = typeof __propDef.props;
|
|
18
|
+
export type HamburgerMenuEvents = typeof __propDef.events;
|
|
19
|
+
export type HamburgerMenuSlots = typeof __propDef.slots;
|
|
20
|
+
export default class HamburgerMenu extends SvelteComponent<HamburgerMenuProps, HamburgerMenuEvents, HamburgerMenuSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* In light mode we willl have white text against a dark green background. */
|
|
3
|
+
--functional-light-modelight: white;
|
|
4
|
+
--functional-primary-modelight: #053337;
|
|
5
|
+
--functional-primary-hover-modelight: #0a474c;
|
|
6
|
+
/* In dark mode we'll invert the text color and use a much lighter shade of green */
|
|
7
|
+
--functional-primary-modedark: #12adba;
|
|
8
|
+
--functional-light-modedark: black;
|
|
9
|
+
--functional-primary-hover-modedark: #1ec3d1;
|
|
10
|
+
}
|
|
11
|
+
:root {
|
|
12
|
+
--functional-content-width: 70%;
|
|
13
|
+
--functional-logo-display: inline-block;
|
|
14
|
+
--well-margin-size: 15%;
|
|
15
|
+
--functional-radius: 2em;
|
|
16
|
+
--functional-timing-fast: 200ms;
|
|
17
|
+
}
|
|
18
|
+
:root {
|
|
19
|
+
[color-scheme="light"] {
|
|
20
|
+
color-scheme: light;
|
|
21
|
+
--functional-primary-color: var(--functional-light-modelight);
|
|
22
|
+
}
|
|
23
|
+
[color-scheme="dark"] {
|
|
24
|
+
color-scheme: dark;
|
|
25
|
+
--functional-primary-color: var(--functional-light-modelight);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* define agnostic varaibles based on Functional ones
|
|
30
|
+
**/
|
|
31
|
+
:root {
|
|
32
|
+
--agnostic-primary-modelight: var(--functional-primary-modelight);
|
|
33
|
+
--agnostic-primary-modedark: var(--functional-primary-modedark);
|
|
34
|
+
|
|
35
|
+
--agnostic-radius: var(--functional-radius);
|
|
36
|
+
--agnostic-timing-fast: var(--functional-timing-fast);
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Banner variables
|
|
40
|
+
**/
|
|
41
|
+
:root {
|
|
42
|
+
--functional-banner-margin: 0px auto;
|
|
43
|
+
--functional-banner-padding: 0px;
|
|
44
|
+
--functional-banner-background: var(--functional-background-color);
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Menu variables
|
|
48
|
+
**/
|
|
49
|
+
:root {
|
|
50
|
+
--functional-menu-background: var(--functional-secondary-color);
|
|
51
|
+
--functional-menu-color: var(--agnostic-font-color);
|
|
52
|
+
--functional-menu-margin: 0px;
|
|
53
|
+
--functional-menu-padding: 0px;
|
|
54
|
+
--functional-menu-align-items: inherit;
|
|
55
|
+
--functional-menu-justify-content: inherit;
|
|
56
|
+
|
|
57
|
+
--functional-menu-item-color: #fff;
|
|
58
|
+
--functional-menu-item-margin: 0px var(--fluid-12);
|
|
59
|
+
--functional-menu-item-padding: var(--fluid-20) var(--fluid-20) var(--fluid-8) var(--fluid-20);
|
|
60
|
+
--functional-menu-item-background: var(--functional-background-color);
|
|
61
|
+
--functional-menu-item-font-size: var(--fluid-24);
|
|
62
|
+
--functional-menu-item-border-top: none;
|
|
63
|
+
--functional-menu-item-border-right: none;
|
|
64
|
+
--functional-menu-item-border-bottom: none;
|
|
65
|
+
--functional-menu-item-border-left: none;
|
|
66
|
+
|
|
67
|
+
--functional-menu-item-hover-margin: 0px var(--fluid-12);
|
|
68
|
+
--functional-menu-item-hover-padding: var(--fluid-20) var(--fluid-20) var(--fluid-8) var(--fluid-20);
|
|
69
|
+
--functional-menu-item-hover-font: bolder;
|
|
70
|
+
--functional-menu-item-hover-color: var(--functional-primary-color);
|
|
71
|
+
--functional-menu-item-hover-text-decoration: none;
|
|
72
|
+
--functional-menu-item-hover-background: #fff;
|
|
73
|
+
--functional-menu-item-hover-border: none;
|
|
74
|
+
--functional-menu-item-hover-border-top: none;
|
|
75
|
+
--functional-menu-item-hover-border-right: none;
|
|
76
|
+
--functional-menu-item-hover-border-bottom: none;
|
|
77
|
+
--functional-menu-item-hover-border-left: none;
|
|
78
|
+
|
|
79
|
+
--functional-menu-item-selected-text-decoration-hover: none;
|
|
80
|
+
--functional-menu-item-selected-background: #fff;
|
|
81
|
+
--functional-menu-item-selected-border-top: none;
|
|
82
|
+
--functional-menu-item-selected-border-right: none;
|
|
83
|
+
--functional-menu-item-selected-border-bottom: 6px solid var(--functional-primary-color);
|
|
84
|
+
--functional-menu-item-selected-border-left: none;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Card variables
|
|
88
|
+
**/
|
|
89
|
+
:root {
|
|
90
|
+
--functional-card-border-color: var(--functional-primary-color);
|
|
91
|
+
--functional-card-boxshadow1-offset-x: 0;
|
|
92
|
+
--functional-card-boxshadow1-offset-y: 0.375rem;
|
|
93
|
+
--functional-card-boxshadow1-blur: 0.5625rem;
|
|
94
|
+
--functional-card-boxshadow1-color: rgb(6 6 6 / 7.5%);
|
|
95
|
+
--functional-card-boxshadow2-offset-x: 0;
|
|
96
|
+
--functional-card-boxshadow2-offset-y: 0;
|
|
97
|
+
--functional-card-boxshadow2-blur: 1px;
|
|
98
|
+
--functional-card-boxshadow2-color: rgb(5 5 5 / 10%);
|
|
99
|
+
--functional-card-border-radius: var(--functional-radius: 0.25rem);
|
|
100
|
+
--functional-card-boxshadow1-offset-x: 0;
|
|
101
|
+
--functional-card-boxshadow1-offset-y: 0.375rem;
|
|
102
|
+
--functional-card-boxshadow1-blur: 0.875rem;
|
|
103
|
+
--functional-card-boxshadow1-color: rgb(4 4 4 / 10%);
|
|
104
|
+
--functional-card-boxshadow2-offset-x: 0;
|
|
105
|
+
--functional-card-boxshadow2-offset-y: 0;
|
|
106
|
+
--functional-card-boxshadow2-blur: 2px;
|
|
107
|
+
--functional-card-boxshadow2-color: rgb(3 3 3 / 10%);
|
|
108
|
+
--functional-card-cubic-1: 0.39;
|
|
109
|
+
--functional-card-cubic-2: 0.575;
|
|
110
|
+
--functional-card-cubic-3: 0.565;
|
|
111
|
+
--functional-card-cubic-4: 1;
|
|
112
|
+
--functional-card-translate-y-hover: -3px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
html, body, body > div { height: 100%; }
|
|
116
|
+
|
|
117
|
+
.fw { width:100%; }
|
|
118
|
+
|
|
119
|
+
.flex-row { flex-direction: row; }
|
|
120
|
+
.flex-column { flex-direction: column; }
|
|
121
|
+
.flex-row-dynamic { flex-direction: column; }
|
|
122
|
+
|
|
123
|
+
.h0 { height: 0 !important; }
|
|
124
|
+
.h2 { height: var(--fluid-2) !important; }
|
|
125
|
+
.h4 { height: var(--fluid-4) !important; }
|
|
126
|
+
.h6 { height: var(--fluid-6) !important; }
|
|
127
|
+
.h8 { height: var(--fluid-8) !important; }
|
|
128
|
+
.h10 { height: var(--fluid-10) !important; }
|
|
129
|
+
.h12 { height: var(--fluid-12) !important; }
|
|
130
|
+
.h14 { height: var(--fluid-14) !important; }
|
|
131
|
+
.h16 { height: var(--fluid-16) !important; }
|
|
132
|
+
.h18 { height: var(--fluid-18) !important; }
|
|
133
|
+
.h20 { height: var(--fluid-20) !important; }
|
|
134
|
+
.h24 { height: var(--fluid-24) !important; }
|
|
135
|
+
.h32 { height: var(--fluid-32) !important; }
|
|
136
|
+
.h36 { height: var(--fluid-36) !important; }
|
|
137
|
+
.h40 { height: var(--fluid-40) !important; }
|
|
138
|
+
.h48 { height: var(--fluid-48) !important; }
|
|
139
|
+
.h56 { height: var(--fluid-56) !important; }
|
|
140
|
+
.h64 { height: var(--fluid-64) !important; }
|
|
141
|
+
|
|
142
|
+
.h33p { height: 33% !important; }
|
|
143
|
+
.h66p { height: 66% !important; }
|
|
144
|
+
.h25p { height: 25% !important; }
|
|
145
|
+
.h75p { height: 75% !important; }
|
|
146
|
+
.h50p { height: 50% !important; }
|
|
147
|
+
|
|
148
|
+
.w0 { width: 0 !important; }
|
|
149
|
+
.w2 { width: var(--fluid-2) !important; }
|
|
150
|
+
.w4 { width: var(--fluid-4) !important; }
|
|
151
|
+
.w6 { width: var(--fluid-6) !important; }
|
|
152
|
+
.w8 { width: var(--fluid-8) !important; }
|
|
153
|
+
.w10 { width: var(--fluid-10) !important; }
|
|
154
|
+
.w12 { width: var(--fluid-12) !important; }
|
|
155
|
+
.w14 { width: var(--fluid-14) !important; }
|
|
156
|
+
.w16 { width: var(--fluid-16) !important; }
|
|
157
|
+
.w18 { width: var(--fluid-18) !important; }
|
|
158
|
+
.w20 { width: var(--fluid-20) !important; }
|
|
159
|
+
.w24 { width: var(--fluid-24) !important; }
|
|
160
|
+
.w32 { width: var(--fluid-32) !important; }
|
|
161
|
+
.w36 { width: var(--fluid-36) !important; }
|
|
162
|
+
.w40 { width: var(--fluid-40) !important; }
|
|
163
|
+
.w48 { width: var(--fluid-48) !important; }
|
|
164
|
+
.w56 { width: var(--fluid-56) !important; }
|
|
165
|
+
.w64 { width: var(--fluid-64) !important; }
|
|
166
|
+
|
|
167
|
+
.w33p { width: 100% !important; }
|
|
168
|
+
.w66p { width: 100% !important; }
|
|
169
|
+
.w25p { width: 100% !important; }
|
|
170
|
+
.w75p { width: 100% !important; }
|
|
171
|
+
.w50p { width: 100% !important; }
|
|
172
|
+
|
|
173
|
+
@media (min-width: 960px) {
|
|
174
|
+
.flex-row-dynamic { flex-direction: row; }
|
|
175
|
+
|
|
176
|
+
.w33p { width: 33% !important; }
|
|
177
|
+
.w66p { width: 66% !important; }
|
|
178
|
+
.w25p { width: 25% !important; }
|
|
179
|
+
.w75p { width: 75% !important; }
|
|
180
|
+
.w50p { width: 50% !important; }
|
|
181
|
+
|
|
182
|
+
.h33p { height: 33% !important; }
|
|
183
|
+
.h66p { height: 66% !important; }
|
|
184
|
+
.h25p { height: 25% !important; }
|
|
185
|
+
.h75p { height: 75% !important; }
|
|
186
|
+
.h50p { height: 50% !important; }
|
|
187
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
2
|
+
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
3
|
+
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
4
|
+
import Banner from './components/Banner.svelte';
|
|
5
|
+
import Card from './components/Card.svelte';
|
|
6
|
+
import Layout from './components/Layout.svelte';
|
|
7
|
+
import Logo from './components/Logo.svelte';
|
|
4
8
|
import SimpleFooter from './components/SimpleFooter.svelte';
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
9
|
+
import Spacer from './components/Spacer.svelte';
|
|
10
|
+
import Well from './components/Well.svelte';
|
|
11
|
+
import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
|
|
12
|
+
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Card, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
// Reexport your entry components here
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
3
|
+
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
4
|
+
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
5
|
+
import Banner from './components/Banner.svelte';
|
|
6
|
+
import Card from './components/Card.svelte';
|
|
7
|
+
import Layout from './components/Layout.svelte';
|
|
8
|
+
import Logo from './components/Logo.svelte';
|
|
5
9
|
import SimpleFooter from './components/SimpleFooter.svelte';
|
|
6
|
-
|
|
7
|
-
import
|
|
8
|
-
import { Position } from './components/
|
|
9
|
-
export {
|
|
10
|
-
// authStore,
|
|
11
|
-
Visiblity, HeaderNavigationItem, Position };
|
|
10
|
+
import Spacer from './components/Spacer.svelte';
|
|
11
|
+
import Well from './components/Well.svelte';
|
|
12
|
+
import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
|
|
13
|
+
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Card, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@functionalcms/svelte-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run package",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"@sveltejs/kit": "^2.0.6",
|
|
31
31
|
"@sveltejs/package": "^2.2.5",
|
|
32
32
|
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
|
33
|
+
"agnostic-svelte": "^1.1.27",
|
|
33
34
|
"publint": "^0.2.7",
|
|
34
35
|
"svelte": "^4.2.8",
|
|
35
36
|
"svelte-check": "^3.6.2",
|
package/dist/authStore.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/// <reference types="svelte" />
|
|
2
|
-
export type AuthConfig = {
|
|
3
|
-
tenant: string;
|
|
4
|
-
tenantId: string;
|
|
5
|
-
policy: string;
|
|
6
|
-
scopes: Array<string>;
|
|
7
|
-
clientId: string;
|
|
8
|
-
redirectUrl: string;
|
|
9
|
-
};
|
|
10
|
-
export declare const authStore: {
|
|
11
|
-
isAuthenticated: import("svelte/store").Readable<boolean>;
|
|
12
|
-
userId: import("svelte/store").Readable<string>;
|
|
13
|
-
accessToken: import("svelte/store").Readable<string>;
|
|
14
|
-
username: import("svelte/store").Readable<string>;
|
|
15
|
-
initialise: (config: AuthConfig) => Promise<void>;
|
|
16
|
-
signIn: () => Promise<void>;
|
|
17
|
-
signOut: () => Promise<void>;
|
|
18
|
-
};
|
package/dist/authStore.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { get, readonly, writable } from "svelte/store";
|
|
2
|
-
import { PublicClientApplication } from "@azure/msal-browser";
|
|
3
|
-
const isAuthenticated = writable(false);
|
|
4
|
-
const accessToken = writable('');
|
|
5
|
-
const userId = writable('');
|
|
6
|
-
const username = writable('');
|
|
7
|
-
let msal;
|
|
8
|
-
let authConfig;
|
|
9
|
-
const getMSALConfig = (config) => {
|
|
10
|
-
return {
|
|
11
|
-
auth: {
|
|
12
|
-
clientId: config.clientId,
|
|
13
|
-
authority: `https://${config.tenant}.b2clogin.com/${config.tenant}.onmicrosoft.com/${config.policy}`,
|
|
14
|
-
knownAuthorities: [`${config.tenant}.b2clogin.com`], // array of URIs that are known to be valid,
|
|
15
|
-
redirectUri: config.redirectUrl
|
|
16
|
-
},
|
|
17
|
-
cache: {
|
|
18
|
-
cacheLocation: "sessionStorage", // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
|
|
19
|
-
storeAuthStateInCookie: false, // If you wish to store cache items in cookies as well as browser cache, set this to "true".
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
const getLoginRequest = (config) => {
|
|
24
|
-
return {
|
|
25
|
-
scopes: ["openid", "offline_access", config.clientId, ...config.scopes]
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
const getTokenRequest = (config, account) => {
|
|
29
|
-
return {
|
|
30
|
-
scopes: ["openid", "offline_access", config.clientId, ...config.scopes],
|
|
31
|
-
forceRefresh: false,
|
|
32
|
-
account: account,
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
const handleToken = (token) => {
|
|
36
|
-
if (token !== null) {
|
|
37
|
-
isAuthenticated.set(true);
|
|
38
|
-
accessToken.set(token.accessToken);
|
|
39
|
-
userId.set(token.account.idTokenClaims.sub);
|
|
40
|
-
username.set(token.account.idTokenClaims.name);
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
isAuthenticated.set(false);
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
const logUsingCookies = async (config) => {
|
|
47
|
-
const accounts = msal.getAllAccounts();
|
|
48
|
-
if (accounts.length > 0) {
|
|
49
|
-
const token = await msal.acquireTokenSilent(getTokenRequest(config, accounts[0]));
|
|
50
|
-
handleToken(token);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
export const authStore = {
|
|
54
|
-
isAuthenticated: readonly(isAuthenticated),
|
|
55
|
-
userId: readonly(userId),
|
|
56
|
-
accessToken: readonly(accessToken),
|
|
57
|
-
username: readonly(username),
|
|
58
|
-
initialise: async (config) => {
|
|
59
|
-
msal = new PublicClientApplication(getMSALConfig(config));
|
|
60
|
-
await msal.initialize();
|
|
61
|
-
await logUsingCookies(config);
|
|
62
|
-
authConfig = config;
|
|
63
|
-
},
|
|
64
|
-
signIn: async () => {
|
|
65
|
-
const loginResponse = await msal.loginPopup(getLoginRequest(authConfig));
|
|
66
|
-
handleToken(loginResponse);
|
|
67
|
-
},
|
|
68
|
-
signOut: async () => {
|
|
69
|
-
await msal.logoutPopup({});
|
|
70
|
-
isAuthenticated.set(false);
|
|
71
|
-
},
|
|
72
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<script>export let url;
|
|
2
|
-
export let logoSrc;
|
|
3
|
-
export let logoAlt;
|
|
4
|
-
</script>
|
|
5
|
-
|
|
6
|
-
<article class="box">
|
|
7
|
-
<a href={url}>
|
|
8
|
-
<img class="img" src={logoSrc} alt={logoAlt} />
|
|
9
|
-
</a>
|
|
10
|
-
<h1 class="pbs32 pbe32 pis32 pie32">
|
|
11
|
-
<a href={url}>
|
|
12
|
-
<slot name="header" />
|
|
13
|
-
</a>
|
|
14
|
-
</h1>
|
|
15
|
-
<p class="card-demo-desc mbe24">
|
|
16
|
-
<slot />
|
|
17
|
-
</p>
|
|
18
|
-
</article>
|
|
19
|
-
|
|
20
|
-
<style>
|
|
21
|
-
</style>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
/**
|
|
5
|
-
* @type {string}
|
|
6
|
-
*/ url: string;
|
|
7
|
-
/**
|
|
8
|
-
* @type {url}
|
|
9
|
-
*/ logoSrc: string;
|
|
10
|
-
/**
|
|
11
|
-
* @type {string}
|
|
12
|
-
*/ logoAlt: string;
|
|
13
|
-
};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {
|
|
18
|
-
header: {};
|
|
19
|
-
default: {};
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export type BoxProps = typeof __propDef.props;
|
|
23
|
-
export type BoxEvents = typeof __propDef.events;
|
|
24
|
-
export type BoxSlots = typeof __propDef.slots;
|
|
25
|
-
export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {
|
|
26
|
-
}
|
|
27
|
-
export {};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<script>import { Header, HeaderNav, HeaderNavItem, MenuItem } from "agnostic-svelte";
|
|
2
|
-
import Logo from "./Logo.svelte";
|
|
3
|
-
import { Visiblity } from "./HeaderNavigationItem.js";
|
|
4
|
-
import { Position } from "./Position";
|
|
5
|
-
export let companyName;
|
|
6
|
-
export let pages = [];
|
|
7
|
-
export let authentication = false;
|
|
8
|
-
export let logoUrl;
|
|
9
|
-
export let logoPosition = Position.Left;
|
|
10
|
-
const selectVisible = (pages2, visiblity) => pages2.filter(
|
|
11
|
-
(page) => page?.visiblity === Visiblity.Always || page?.visiblity === visiblity
|
|
12
|
-
);
|
|
13
|
-
$:
|
|
14
|
-
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
15
|
-
$:
|
|
16
|
-
visibleNavItems = selectVisible(pages, visibility);
|
|
17
|
-
</script>
|
|
18
|
-
|
|
19
|
-
<header>
|
|
20
|
-
<Header>
|
|
21
|
-
{#if logoPosition == Position.Left}
|
|
22
|
-
<Logo slot="logoright" {logoUrl} {companyName} />
|
|
23
|
-
{/if}
|
|
24
|
-
<HeaderNav>
|
|
25
|
-
{#each visibleNavItems as page}
|
|
26
|
-
<HeaderNavItem>
|
|
27
|
-
<a on:click={page.action} href={page.path}>
|
|
28
|
-
{page.name}
|
|
29
|
-
</a>
|
|
30
|
-
</HeaderNavItem>
|
|
31
|
-
{/each}
|
|
32
|
-
</HeaderNav>
|
|
33
|
-
{#if logoPosition == Position.Right}
|
|
34
|
-
<Logo slot="logoright" {logoUrl} {companyName} />
|
|
35
|
-
{/if}
|
|
36
|
-
</Header>
|
|
37
|
-
</header>
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { Position } from "./Position";
|
|
3
|
-
import type { HeaderNavigationItem } from './HeaderNavigationItem.js';
|
|
4
|
-
declare const __propDef: {
|
|
5
|
-
props: {
|
|
6
|
-
/**
|
|
7
|
-
* @type {string}
|
|
8
|
-
*/ companyName: string;
|
|
9
|
-
/**
|
|
10
|
-
* @type {HeaderNavigationItem[]}
|
|
11
|
-
*/ pages?: HeaderNavigationItem[] | undefined;
|
|
12
|
-
/**
|
|
13
|
-
* @type {Readonly<bool>}
|
|
14
|
-
*/ authentication?: boolean | undefined;
|
|
15
|
-
/**
|
|
16
|
-
* @type {string}
|
|
17
|
-
*/ logoUrl: string;
|
|
18
|
-
/**
|
|
19
|
-
* @type {Position}
|
|
20
|
-
*/ logoPosition?: Position | undefined;
|
|
21
|
-
};
|
|
22
|
-
events: {
|
|
23
|
-
[evt: string]: CustomEvent<any>;
|
|
24
|
-
};
|
|
25
|
-
slots: {};
|
|
26
|
-
};
|
|
27
|
-
export type HeaderProps = typeof __propDef.props;
|
|
28
|
-
export type HeaderEvents = typeof __propDef.events;
|
|
29
|
-
export type HeaderSlots = typeof __propDef.slots;
|
|
30
|
-
export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
|
|
31
|
-
}
|
|
32
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<script>export let url;
|
|
2
|
-
</script>
|
|
3
|
-
|
|
4
|
-
<header class="hero">
|
|
5
|
-
<h1>
|
|
6
|
-
<slot name="header" />
|
|
7
|
-
</h1>
|
|
8
|
-
<p>
|
|
9
|
-
<slot />
|
|
10
|
-
</p>
|
|
11
|
-
<div>
|
|
12
|
-
<a class="item keychainify-checked" href={url}>
|
|
13
|
-
<slot name="link" />
|
|
14
|
-
</a>
|
|
15
|
-
</div>
|
|
16
|
-
</header>
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
</style>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
/**
|
|
5
|
-
* @type {string}
|
|
6
|
-
*/ url: string;
|
|
7
|
-
};
|
|
8
|
-
events: {
|
|
9
|
-
[evt: string]: CustomEvent<any>;
|
|
10
|
-
};
|
|
11
|
-
slots: {
|
|
12
|
-
header: {};
|
|
13
|
-
default: {};
|
|
14
|
-
link: {};
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export type HeroProps = typeof __propDef.props;
|
|
18
|
-
export type HeroEvents = typeof __propDef.events;
|
|
19
|
-
export type HeroSlots = typeof __propDef.slots;
|
|
20
|
-
export default class Hero extends SvelteComponent<HeroProps, HeroEvents, HeroSlots> {
|
|
21
|
-
}
|
|
22
|
-
export {};
|
package/dist/constants.d.ts
DELETED
package/dist/constants.js
DELETED
|
File without changes
|
|
File without changes
|