@functionalcms/svelte-components 3.4.0 → 3.5.1

package/dist/auth/getMachineAccessToken.d.ts

@@ -0,0 +1 @@
+export declare const getMachineAccessToken: (scope?: string) => Promise<string>;

package/dist/auth/getMachineAccessToken.js

@@ -0,0 +1,22 @@
+import { AUTH_KEYCLOAK_ID, AUTH_KEYCLOAK_SECRET, AUTH_KEYCLOAK_ISSUER } from '$env/static/private';
+export const getMachineAccessToken = async (scope = '') => {
+    const response = await fetch(`${AUTH_KEYCLOAK_ISSUER}/protocol/openid-connect/token`, {
+        method: "POST",
+        body: new URLSearchParams({
+            grant_type: "client_credentials",
+            client_id: AUTH_KEYCLOAK_ID,
+            client_secret: AUTH_KEYCLOAK_SECRET,
+            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();
+    return token.access_token;
+};

package/dist/auth/types.d.ts

@@ -8,8 +8,19 @@ export declare class Token {
     session_state?: string;
     token_type?: string;
 }
+export interface Session {
+    client_id: string;
+    email_verified: string;
+    preferred_username: string;
+    sub: string;
+    userId: string;
+}
+export interface Locals {
+    session: Session;
+    auth_token: string;
+}
 export type ISession = {
-    session: any;
+    session: Session;
     token: Token;
 };
 export type SessionInfoCache = {

package/dist/components/agnostic/Disclose/Disclose.svelte

@@ -1,108 +1,111 @@
-<style>
-.disclose {
-  margin-block-end: var(--fluid-4);
-
-  /* When this element is a direct child of a flex container with
-  flex-direction: column it collapses similar to an inline element even though
-  it's block. This helps prevent that. */
-  width: 100%;
-}
-
-.disclose-title {
-  display: block;
-  cursor: pointer;
-  font-weight: 600;
-  padding: var(--fluid-8) var(--fluid-12);
-
-  /* Required to position the icon absolutely */
-  position: relative;
-  color: inherit;
-  transition: color var(--functional-timing-slow);
-}
-
-.disclose-panel {
-  font-weight: 400;
-  padding: var(--fluid-16);
-}
-
-.disclose-title,
-.disclose-panel {
-  margin: 0;
-}
-
-/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
-.disclose-title::webkit-details-marker {
-  display: none;
-}
-
-.disclose-bordered .disclose-title {
-  border: 1px solid var(--functional-gray-light);
-}
-
-.disclose-bg .disclose-title {
-  background-color: var(--functional-gray-light);
-}
-
-.disclose-title:focus {
-  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
-
-  /* Needed for High Contrast mode */
-  outline:
-    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
-    var(--functional-focus-ring-outline-color);
-  transition: box-shadow var(--functional-timing-fast) ease-out;
-}
-
-.disclose-title::after {
-  color: var(--functional-gray-dark);
-  content: "\203A";
-  position: absolute;
-  right: var(--fluid-12);
-  top: 0;
-  bottom: 0;
-
-  /* Chevron thinning :) */
-  font-size: var(--fluid-32);
-  line-height: 1;
-  font-weight: 100;
-  transition: transform var(--functional-timing-slow);
-  transform: rotate(0);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .disclose-title,
-  .disclose-title:focus,
-  .disclose-title::after {
-    transition: none;
-  }
-}
-
-.disclose[open] > .disclose-title::after {
-  transform: rotate(90deg);
-}
-
-</style>
-
 <script lang="ts">
-  export let title = "";
-  // The <details> open attribute indicates whether the details content will be
-  // displayed on page load or not.
-  export let isOpen = false;
-  export let isBackground = false;
-  export let isBordered = false;
-
-  const discloseClasses = [
-    "disclose",
-    isBackground ? "disclose-bg" : "",
-    isBordered ? "disclose-bordered" : ""
-  ]
-    .filter((c) => c)
-    .join(" ");
+	import type { Snippet } from "svelte";
+
+	interface Props {
+    children: Snippet, 
+		title?: string;
+		isOpen?: boolean;
+		isBackground?: boolean;
+		isBordered?: boolean;
+	}
+
+	let { children, title = '', isOpen = false, isBackground = false, isBordered = false }: Props = $props();
+
+	const discloseClasses = [
+		'disclose',
+		isBackground ? 'disclose-bg' : '',
+		isBordered ? 'disclose-bordered' : ''
+	]
+		.filter((c) => c)
+		.join(' ');
 </script>
 
 <details class={discloseClasses} bind:open={isOpen}>
-  <summary class="disclose-title">{title}</summary>
-  <div class="disclose-panel">
-    <slot />
-  </div>
+	<summary class="disclose-title">{title}</summary>
+	<div class="disclose-panel">
+		{@render children()}
+	</div>
 </details>
+
+<style>
+	.disclose {
+		margin-block-end: var(--fluid-4);
+
+		/* When this element is a direct child of a flex container with
+  flex-direction: column it collapses similar to an inline element even though
+  it's block. This helps prevent that. */
+		width: 100%;
+	}
+
+	.disclose-title {
+		display: block;
+		cursor: pointer;
+		font-weight: 600;
+		padding: var(--fluid-8) var(--fluid-12);
+
+		/* Required to position the icon absolutely */
+		position: relative;
+		color: inherit;
+		transition: color var(--functional-timing-slow);
+	}
+
+	.disclose-panel {
+		font-weight: 400;
+		padding: var(--fluid-16);
+	}
+
+	.disclose-title,
+	.disclose-panel {
+		margin: 0;
+	}
+
+	/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+	.disclose-title::webkit-details-marker {
+		display: none;
+	}
+
+	.disclose-bordered .disclose-title {
+		border: 1px solid var(--functional-gray-light);
+	}
+
+	.disclose-bg .disclose-title {
+		background-color: var(--functional-gray-light);
+	}
+
+	.disclose-title:focus {
+		box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+
+		/* Needed for High Contrast mode */
+		outline: var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
+			var(--functional-focus-ring-outline-color);
+		transition: box-shadow var(--functional-timing-fast) ease-out;
+	}
+
+	.disclose-title::after {
+		color: var(--functional-gray-dark);
+		content: '\203A';
+		position: absolute;
+		right: var(--fluid-12);
+		top: 0;
+		bottom: 0;
+
+		/* Chevron thinning :) */
+		font-size: var(--fluid-32);
+		line-height: 1;
+		font-weight: 100;
+		transition: transform var(--functional-timing-slow);
+		transform: rotate(0);
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.disclose-title,
+		.disclose-title:focus,
+		.disclose-title::after {
+			transition: none;
+		}
+	}
+
+	.disclose[open] > .disclose-title::after {
+		transform: rotate(90deg);
+	}
+</style>

package/dist/components/agnostic/Disclose/Disclose.svelte.d.ts

@@ -1,17 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        title?: string;
-        isOpen?: boolean;
-        isBackground?: boolean;
-        isBordered?: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type DiscloseProps = typeof __propDef.props;
 export type DiscloseEvents = typeof __propDef.events;

package/dist/server-side/getServices.d.ts

@@ -1,7 +1,7 @@
 import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService } from "@functionalcms/services";
-export declare const getDataService: (locals: any) => DataService;
-export declare const getCommunicationService: (locals: any) => CommunicationService;
-export declare const getWebsiteService: (locals: any) => WebsitesService;
-export declare const getTemplateService: (locals: any) => TemplateService;
-export declare const getBlobService: (locals: any) => BlobService;
-export declare const getAIService: (locals: any) => AiService;
+export declare const getDataService: (locals: any, getToken?: (locals: any) => string) => DataService;
+export declare const getCommunicationService: (locals: any, getToken?: (locals: any) => string) => CommunicationService;
+export declare const getWebsiteService: (locals: any, getToken?: (locals: any) => string) => WebsitesService;
+export declare const getTemplateService: (locals: any, getToken?: (locals: any) => string) => TemplateService;
+export declare const getBlobService: (locals: any, getToken?: (locals: any) => string) => BlobService;
+export declare const getAIService: (locals: any, getToken?: (locals: any) => string) => AiService;

package/dist/server-side/getServices.js

@@ -3,33 +3,33 @@ import { CommunicationService, DataService, TemplateService, WebsitesService, Bl
 const getAccessToken = (locals) => {
     return locals.token.access_token;
 };
-export const getDataService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getDataService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new DataService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
-export const getCommunicationService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getCommunicationService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new CommunicationService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
-export const getWebsiteService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getWebsiteService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new WebsitesService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
-export const getTemplateService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getTemplateService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new TemplateService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
-export const getBlobService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getBlobService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new BlobService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };
-export const getAIService = (locals) => {
-    const accessToken = getAccessToken(locals);
+export const getAIService = (locals, getToken = getAccessToken) => {
+    const accessToken = getToken(locals);
     const service = new AiService(accessToken, DOMAIN, ENDPOINT);
     return service;
 };

package/dist/server-side/types.d.ts

@@ -0,0 +1,5 @@
+import type { Session, Token } from "../auth/types";
+export interface Locals {
+    session: Session;
+    token: Token;
+}

package/dist/server-side/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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