@functionalcms/svelte-components 4.21.4 → 4.23.0

package/dist/components/indicators/Loader.svelte

@@ -0,0 +1,114 @@
+<script>
+	export let ariaLabel = 'Loading…';
+	export let size = '';
+	export let loaderClasses = ['loader', size ? `loader-${size}` : ''].filter((c) => c).join(' ');
+</script>
+
+<div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">
+	<span class="screenreader-only">{ariaLabel}</span>
+</div>
+
+<style>
+	.loader {
+		--loading-color: var(--agnostic-loading-color, var(--agnostic-dark));
+		--loading-size: var(--fluid-16);
+		--loading-size-small: var(--fluid-12);
+		--loading-size-large: var(--fluid-18);
+
+		position: relative;
+		box-sizing: border-box;
+		animation: blink 1s infinite;
+		animation-delay: 250ms;
+
+		/* Make up for negative positioning */
+		margin-left: var(--loading-size);
+
+		/* Initially set zero until aria-busy becomes true */
+		opacity: 0%;
+	}
+
+	.loader,
+	.loader::before,
+	.loader::after {
+		width: calc(var(--loading-size) / 2);
+		height: calc(var(--loading-size) / 2);
+		border-radius: var(--fluid-6);
+		background-color: var(--loading-color);
+	}
+
+	/* SMALL */
+	.loader-small,
+	.loader-small::before,
+	.loader-small::after {
+		width: calc(var(--loading-size-small) / 2);
+		height: calc(var(--loading-size-small) / 2);
+	}
+
+	/* LARGE */
+	.loader-large,
+	.loader-large::before,
+	.loader-large::after {
+		width: calc(var(--loading-size-large) / 2);
+		height: calc(var(--loading-size-large) / 2);
+		border-radius: var(--fluid-8);
+	}
+
+	.loader::before,
+	.loader::after {
+		content: '';
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		animation: blink 1s infinite;
+	}
+
+	.loader::before {
+		left: calc(-1 * var(--loading-size));
+		animation-delay: 0s;
+	}
+
+	.loader::after {
+		left: var(--loading-size);
+		animation-delay: 500ms;
+	}
+
+	/* SMALL */
+	.loader-small::before {
+		left: calc(-1 * var(--loading-size-small));
+	}
+
+	.loader-small::after {
+		left: var(--loading-size-small);
+	}
+
+	/* LARGE */
+	.loader-large::before {
+		left: calc(-1 * var(--loading-size-large));
+		animation-delay: 0s;
+	}
+
+	.loader-large::after {
+		left: var(--loading-size-large);
+	}
+
+	/**
+ * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
+ */
+	.loader[aria-busy='true'] {
+		opacity: 100%;
+	}
+
+	@keyframes blink {
+		50% {
+			background-color: transparent;
+		}
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.loader,
+		.loader::before,
+		.loader::after {
+			transition-duration: 0.001ms !important;
+		}
+	}
+</style>

package/dist/components/indicators/Loader.svelte.d.ts

@@ -0,0 +1,30 @@
+export default Loader;
+type Loader = SvelteComponent<{
+    size?: string | undefined;
+    ariaLabel?: string | undefined;
+    loaderClasses?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Loader: $$__sveltets_2_IsomorphicComponent<{
+    size?: string | undefined;
+    ariaLabel?: string | undefined;
+    loaderClasses?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/indicators/Spinner.svelte

@@ -0,0 +1,109 @@
+
+<style>
+.spinner {
+  --spinner-color: var(--agnostic-spinner-color, var(--agnostic-dark));
+
+  /**
+   * Inspiration to utilize grid for this from
+   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
+   */
+  display: grid;
+  grid-template: "content" 100% / auto;
+  place-items: center;
+  box-sizing: border-box;
+}
+
+.spinner::before,
+.spinner::after {
+  grid-area: content;
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+  content: "";
+  display: block;
+  border-radius: 50%;
+  border-width: 3px;
+  border-style: solid;
+}
+
+.spinner-small::before,
+.spinner-small::after {
+  width: var(--fluid-24);
+  height: var(--fluid-24);
+  border-width: var(--fluid-2);
+}
+
+.spinner-large::before,
+.spinner-large::after {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+  border-width: var(--fluid-4);
+}
+
+.spinner-xlarge::before,
+.spinner-xlarge::after {
+  width: var(--fluid-56);
+  height: var(--fluid-56);
+  border-width: var(--fluid-6);
+}
+
+/**
+ * Before is the muted background
+ */
+.spinner::before {
+  opacity: 0%;
+  border-color: var(--spinner-color);
+}
+
+/**
+ * After is the inner "snake"
+ */
+.spinner::after {
+  opacity: 0%;
+  border-color: transparent var(--spinner-color) transparent transparent;
+  transition: opacity 0.1s;
+  pointer-events: none;
+  animation: loading-circle 1s ease-in-out infinite;
+
+  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
+  is beneficial or detrimental: See
+  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
+  transform: translateZ(0);
+  will-change: transform; */
+}
+
+/**
+ * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
+ */
+.spinner[aria-busy="true"]::before {
+  opacity: 12%;
+}
+
+.spinner[aria-busy="true"]::after {
+  opacity: 100%;
+}
+
+@keyframes loading-circle {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .spinner::after {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+
+<script>
+  export let ariaLabel = "Loading…";
+  export let size = "";
+  $: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""]
+    .filter((c) => c)
+    .join(" ");
+</script>
+
+<div class={spinnerClasses} role="status" aria-live="polite" aria-busy="true">
+  <span class="screenreader-only">{ariaLabel}</span>
+</div>

package/dist/components/indicators/Spinner.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Spinner;
+type Spinner = SvelteComponent<{
+    size?: string | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Spinner: $$__sveltets_2_IsomorphicComponent<{
+    size?: string | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/index.d.ts

@@ -37,3 +37,8 @@ export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';
+/**
+ * Indicators
+ **/
+export { default as Loader } from './components/indicators/Loader.svelte';
+export { default as Spinner } from './components/indicators/Spinner.svelte';

package/dist/index.js

@@ -59,3 +59,8 @@ export { listAllPosts, importPost } from './components/blog/blog.js';
  * Integrations
  */
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';
+/**
+ * Indicators
+ **/
+export { default as Loader } from './components/indicators/Loader.svelte';
+export { default as Spinner } from './components/indicators/Spinner.svelte';

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

@@ -1,9 +1,9 @@
 import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService } from "@functionalcms/services";
 import type { Locals } from "./types.js";
-export declare const getDataService: (locals: Locals) => DataService;
-export declare const getCommunicationService: (locals: Locals) => CommunicationService;
-export declare const getWebsiteService: (locals: Locals) => WebsitesService;
-export declare const getTemplateService: (locals: Locals) => TemplateService;
-export declare const getBlobService: (locals: Locals) => BlobService;
-export declare const getAIService: (locals: Locals) => AiService;
-export declare const getAuthService: (locals: Locals) => AuthService;
+export declare const getDataService: (locals: Locals, endpoint?: string | undefined) => DataService;
+export declare const getCommunicationService: (locals: Locals, endpoint?: string | undefined) => CommunicationService;
+export declare const getWebsiteService: (locals: Locals, endpoint?: string | undefined) => WebsitesService;
+export declare const getTemplateService: (locals: Locals, endpoint?: string | undefined) => TemplateService;
+export declare const getBlobService: (locals: Locals, endpoint?: string | undefined) => BlobService;
+export declare const getAIService: (locals: Locals, endpoint?: string | undefined) => AiService;
+export declare const getAuthService: (locals: Locals, endpoint?: string | undefined) => AuthService;

package/dist/server-side/getServices.js

@@ -3,38 +3,45 @@ import { CommunicationService, DataService, TemplateService, WebsitesService, Bl
 const getAccessToken = (locals) => {
     return locals.token.access_token;
 };
-export const getDataService = (locals) => {
+export const getDataService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new DataService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new DataService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getCommunicationService = (locals) => {
+export const getCommunicationService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new CommunicationService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new CommunicationService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getWebsiteService = (locals) => {
+export const getWebsiteService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new WebsitesService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new WebsitesService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getTemplateService = (locals) => {
+export const getTemplateService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new TemplateService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new TemplateService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getBlobService = (locals) => {
+export const getBlobService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new BlobService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new BlobService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getAIService = (locals) => {
+export const getAIService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new AiService(accessToken, DOMAIN, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new AiService(accessToken, DOMAIN, serviceEndopint);
     return service;
 };
-export const getAuthService = (locals) => {
+export const getAuthService = (locals, endpoint = undefined) => {
     const accessToken = getAccessToken(locals);
-    const service = new AuthService(accessToken, ENDPOINT);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new AuthService(accessToken, serviceEndopint);
     return service;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.21.4",
+	"version": "4.23.0",
 	"license": "MIT",
 	"watch": {
 		"build": {