@functionalcms/svelte-components 3.5.20 → 4.0.0-pre-2.0

package/dist/components/agnostic/Loader/Loader.svelte

@@ -1,116 +0,0 @@
-<style>
-.loader {
-  --loading-color: var(--functional-loading-color, var(--functional-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>
-<script lang="ts">
-  export let ariaLabel = "Loading…";
-  export let size: "small" | "large" | "" = "";
-  export let loaderClasses: string = ["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>

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

@@ -1,22 +0,0 @@
-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;
-}
-declare const Loader: $$__sveltets_2_IsomorphicComponent<{
-    ariaLabel?: string;
-    size?: "small" | "large" | "";
-    loaderClasses?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Loader = InstanceType<typeof Loader>;
-export default Loader;

package/dist/components/agnostic/animation.css

@@ -1,37 +0,0 @@
-.fade-in {
-	animation: fade-in var(--functional-timing-fast) both;
-}
-
-.slide-up {
-	animation: slide-up var(--functional-timing-slow) var(--functional-timing-fast)
-		both;
-}
-
-/**
- * Cannot use two separate CSS classes with animation: foo, bar
- * as the later class will overwrite the first (so this combines)
- */
-.slide-up-fade-in {
-	animation: fade-in var(--functional-timing-fast) both,
-		slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
-}
-
-@keyframes fade-in {
-	from {
-		opacity: 0%;
-	}
-}
-
-@keyframes slide-up {
-	from {
-		transform: translateY(10%);
-	}
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-	.slide-up-fade-in,
-	.fade-in,
-	.slide-up {
-		transition-duration: 0.001ms !important;
-	}
-}

package/dist/components/blog/BlogDescription.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	export let description: string;
-	export let css: string = "";
-</script>
-
-<div class={css}>
-	<p>{description}</p>
-	<slot name="readMore"></slot>
-</div>

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

@@ -1,23 +0,0 @@
-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;
-}
-declare const BlogDescription: $$__sveltets_2_IsomorphicComponent<{
-    description: string;
-    css?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    readMore: {};
-}, {}, string>;
-type BlogDescription = InstanceType<typeof BlogDescription>;
-export default BlogDescription;

package/dist/components/blog/BlogPost.d.ts

@@ -1,13 +0,0 @@
-export interface BlogPost {
-    slug: string;
-    title: string;
-    author: string;
-    description: string;
-    date: string;
-    published: boolean;
-}
-export interface MdsvexFile {
-    default: import('svelte/internal').SvelteComponent;
-    metadata: Record<string, string>;
-}
-export type MdsvexResolver = () => Promise<MdsvexFile>;

package/dist/components/blog/BlogPost.js

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

package/dist/components/blog/BlogTitle.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	export let slug = '';
-	export let path: string = '';
-	export let title: string;
-	export let css: string = ""; 
-
-	const href = `${path}/${slug}`;
-	const isLink = slug != '';
-</script>
-
-<h1 class={css}>
-	{#if isLink}
-		<a {href}>
-			{title}
-		</a>
-	{:else}
-		{title}
-	{/if}
-</h1>

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

@@ -1,23 +0,0 @@
-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;
-}
-declare const BlogTitle: $$__sveltets_2_IsomorphicComponent<{
-    slug?: string;
-    path?: string;
-    title: string;
-    css?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BlogTitle = InstanceType<typeof BlogTitle>;
-export default BlogTitle;

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

@@ -1,8 +0,0 @@
-import type { BlogPost } from "./BlogPost.js";
-export declare function listAllPosts(page?: number, postCount?: number): Promise<{
-    posts: BlogPost[];
-}>;
-export declare function importPost(loadEvent: any): Promise<{
-    component: any;
-    frontmatter: Record<string, string>;
-}>;

package/dist/components/blog/blog.js

@@ -1,29 +0,0 @@
-const MAX_POSTS = 25;
-const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
-export async function listAllPosts(page = 0, postCount = MAX_POSTS) {
-    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
-    const postPromises = Object.entries(modules).map(([path, resolver]) => resolver().then((post) => ({
-        slug: slugFromPath(path),
-        ...post.metadata
-    })));
-    const posts = await Promise.all(postPromises);
-    const publishedPosts = posts.filter((post) => post.published).slice(page, postCount);
-    publishedPosts.sort((a, b) => (new Date(a.date) > new Date(b.date) ? -1 : 1));
-    return { posts: publishedPosts };
-}
-export async function importPost(loadEvent) {
-    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
-    let match = {};
-    for (const [path, resolver] of Object.entries(modules)) {
-        if (slugFromPath(path) === loadEvent.params.slug) {
-            match = { path, resolver: resolver };
-            break;
-        }
-    }
-    const post = await match?.resolver?.();
-    return {
-        component: post.default,
-        frontmatter: post.metadata
-    };
-}
-;

package/dist/components/converters/ShowItemToNavigationItems.d.ts

@@ -1,3 +0,0 @@
-import { HeaderNavigationItem } from "../menu/Menu.js";
-import type { ShowItem } from "../presentation/ShowItem.js";
-export declare function convertShowItemsToNavigationItems(showItems: Array<ShowItem>): Array<HeaderNavigationItem>;

package/dist/components/converters/ShowItemToNavigationItems.js

@@ -1,10 +0,0 @@
-import { HeaderNavigationItem, Visiblity } from "../menu/Menu.js";
-export function convertShowItemsToNavigationItems(showItems) {
-    const navItems = showItems
-        .map((item) => ({
-        name: item?.title,
-        path: item?.path,
-        visiblity: Visiblity.Always,
-    }));
-    return navItems;
-}

package/dist/components/form/DateTimePicker.svelte

@@ -1,59 +0,0 @@
-<!-- <script lang='ts'>
-	import { DatePicker } from 'date-picker-svelte';
-
-	export let label = '';
-	export let id = '';
-	export let labelCss = '';
-	export let isLabelHidden = false;
-	export let helpText = '';
-	export let invalidText = '';
-	export let hasLeftAddon = false;
-	export let hasRightAddon = false;
-	export let isInvalid = false;
-	export let isInline = false;
-	export let isRounded = false;
-	export let isDisabled = undefined;
-	export let css = '';
-	export let isSkinned = true;
-	export let isUnderlinedWithBackground = false;
-	export let isUnderlined = false;
-	export let size: 'small' | 'large' | '' = '';
-
-    
-    export let value?: Date | null = new Date();
-    export let  timePrecision?: "minute" | "second" | "millisecond" | null;
-    export let  min?: Date;
-    export let  max?: Date;
-    export let  locale?: Locale;
-    export let  browseWithoutSelecting?: boolean;
-
-
-    $: labelClasses = [
-      "label",
-      isInvalid ? "label-error" : "",
-      isInline ? "label-inline" : "",
-      size ? `label-${size}` : "",
-      isLabelHidden ? "screenreader-only" : "",
-    labelCss ? labelCss : "",
-  ].filter(c => c).join(" ");
-
-  $: inputClasses = [
-    isSkinned ? "input" : "input-base",
-    isRounded ? "input-rounded" : "",
-    isUnderlined ? "input-underlined" : "",
-    hasLeftAddon ? "input-has-left-addon" : "",
-    hasRightAddon ? "input-has-right-addon" : "",
-    isDisabled ? "disabled" : "",
-    isInvalid ? "input-error" : "",
-    isInline ? "input-inline" : "",
-    isUnderlinedWithBackground ? "input-underlined-bg" : "",
-    css ? css : "",
-    size ? `input-${size}` : "",
-  ].filter(c => c).join(" ");
-
-</script>
-
-<div class="w-100">
-	<label class={labelClasses} for={id}>{label}</label>
-	<DatePicker />
-</div> -->

package/dist/components/form/DateTimePicker.svelte.d.ts

@@ -1,18 +0,0 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DateTimePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DateTimePicker = InstanceType<typeof DateTimePicker>;
-export default DateTimePicker;

package/dist/components/form/InputAddonItem.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	export let css = '';
-	export let addonLeft = false;
-	export let addonRight = false;
-	$: klasses = [
-		addonLeft ? 'input-addon-left' : '',
-		addonRight ? 'input-addon-right' : '',
-		css ? `${css}` : ''
-	]
-		.filter((c) => c)
-		.join(' ');
-</script>
-
-<div class={klasses}>
-	<slot />
-</div>
-
-<style>
-	/*
-* Input addons e.g. icons inside the input
-*/
-	.input-addon-right,
-	.input-addon-left {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		top: 0;
-
-		/* This allows an icon to sit in the vertical center regardless
-  of if we've applied input-large or input-small */
-		min-height: 100%;
-	}
-
-	.input-addon-left {
-		left: var(--functional-input-side-padding);
-	}
-
-	.input-addon-right {
-		right: var(--functional-input-side-padding);
-	}
-</style>

package/dist/components/form/InputAddonItem.svelte.d.ts

@@ -1,31 +0,0 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const InputAddonItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    css?: string;
-    addonLeft?: boolean;
-    addonRight?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type InputAddonItem = InstanceType<typeof InputAddonItem>;
-export default InputAddonItem;

package/dist/components/form/InputTypes.d.ts

@@ -1,9 +0,0 @@
-export declare enum Types {
-    Text = "",
-    TeaxtArea = "textarea",
-    Email = "type=\"email\"",
-    Password = "type=\"password\"",
-    Search = "type=\"search\"",
-    EmaTelephoneil = "type=\"tel\"",
-    Number = "type=\"number\""
-}

package/dist/components/form/InputTypes.js

@@ -1,10 +0,0 @@
-export var Types;
-(function (Types) {
-    Types["Text"] = "";
-    Types["TeaxtArea"] = "textarea";
-    Types["Email"] = "type=\"email\"";
-    Types["Password"] = "type=\"password\"";
-    Types["Search"] = "type=\"search\"";
-    Types["EmaTelephoneil"] = "type=\"tel\"";
-    Types["Number"] = "type=\"number\"";
-})(Types || (Types = {}));

package/dist/components/form/Select.svelte

@@ -1,157 +0,0 @@
-<style>
-.select,
-.select-base {
-  display: block;
-  width: 100%;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: none;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.select,
-.select-skin {
-  padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
-  -moz-padding-start: calc(var(--fluid-12) - 3px);
-  font-size: var(--fluid-16);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--functional-dark);
-  border: 1px solid var(--functional-select-border-color, var(--functional-gray-light));
-  border-radius: var(--functional-radius);
-  transition:
-    border-color var(--functional-timing-fast) ease-in-out,
-    box-shadow var(--functional-timing-fast) ease-in-out;
-}
-
-/* Only shows the down arrow SVG if in single mode */
-.select:not([multiple]) {
-  background-color: inherit;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right var(--fluid-12) center;
-  background-size: var(--fluid-16) var(--fluid-12);
-}
-
-.select:focus {
-  border-color: var(--functional-focus-ring-color);
-  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;
-}
-
-.select-base,
-.select:disabled {
-  background-color: var(--functional-disabled-bg);
-}
-
-.select-base,
-.select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 var(--functional-dark);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .select,
-  .select-base,
-  .select:focus {
-    transition: none;
-  }
-}
-
-.select-small {
-  padding-top: var(--fluid-4);
-  padding-bottom: var(--fluid-4);
-  padding-left: var(--fluid-8);
-  font-size: var(--fluid-14);
-}
-
-.select-large {
-  padding-top: var(--fluid-8);
-  padding-bottom: var(--fluid-8);
-  padding-left: var(--fluid-16);
-  font-size: var(--fluid-18);
-}
-
-</style>
-
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-
-  export let uniqueId = "";
-  export let name = "";
-  export let labelCopy = "";
-  export let options = [];
-  export let size: "small" | "large" | "" = "";
-  export let multipleSize = 1;
-  export let isMultiple = false;
-  export let defaultOptionLabel = "Please select an option";
-  export let isDisabled = false;
-  export let isSkinned = true;
-  export let css = "";
-
-  // singleSelected can be used for two-way bindings
-  export let singleSelected = "";
-
-  // If we don't make it seems Svelte gets confused:
-  // https://github.com/sveltejs/svelte/issues/5644
-  // And so we cannot share singleSelected above :(
-  export let multiSelected = [];
-
-  const dispatch = createEventDispatcher();
-  // This will emit an event object that has a event.detail prop
-  // This will contain the value of the selected option value. See
-  // https://svelte.dev/docs#createEventDispatcher
-  const changeHandler = () => {
-    dispatch("selected", isMultiple ? multiSelected : singleSelected);
-  };
-
-  $: disable = isDisabled;
-  $: classes = [
-    isSkinned ? "select" : "select-base",
-    size ? `select-${size}` : "",
-    css ? `${css}` : "",
-  ]
-    .filter((cl) => cl)
-    .join(" ");
-
-</script>
-
-<label class="screenreader-only" for={uniqueId}> {labelCopy} </label>
-{#if isMultiple}
-  <select
-    id={uniqueId}
-    class={classes}
-    name={name}
-    disabled={disable}
-    multiple
-    size={multipleSize}
-    bind:value={multiSelected}
-    on:change={changeHandler}
-  >
-    {#each options as { value, label }}
-      <option value={value}>{label}</option>
-    {/each}
-  </select>
-{:else}
-  <select
-    id={uniqueId}
-    class={classes}
-    name={name}
-    disabled={disable}
-    bind:value={singleSelected}
-    on:change={changeHandler}
-  >
-    <option value="" disabled selected>
-      {defaultOptionLabel}
-    </option>
-    {#each options as { value, label }}
-      <option value={value}>{label}</option>
-    {/each}
-  </select>
-{/if}