@functionalcms/svelte-components 3.0.6 → 3.0.7

package/dist/components/agnostic/ChoiceInput/ChoiceInput.svelte

@@ -247,65 +247,93 @@ itself. */
 
 </style>
 
-<script>export let id;
-export let isSkinned = true;
-export let isFieldset = true;
-export let isInline = false;
-export let isDisabled = void 0;
-export let isInvalid = false;
-export let options = [];
-export let disabledOptions = [];
-export let checkedOptions = [];
-export let type = "checkbox";
-export let legendLabel = type || "choice input";
-export let size = "";
-export let checked = [];
-$: labelClasses = [
-  type ? `${type}-label-wrap` : "",
-  isInline ? `${type}-label-wrap-inline` : "",
-  isDisabled ? "disabled" : ""
-].filter((c) => c.length).join(" ");
-$: labelSpanClasses = [
-  type ? `${type}-label` : "",
-  isInvalid ? "choice-input-error" : "",
-  size ? `${type}-label-${size}` : ""
-].filter((c) => c.length).join(" ");
-$: skin = isSkinned ? `${type}-legend` : "";
-$: labelCopyClasses = [
-  // Will also need to work in the small
-  // and large sizes here for the text copy
-  type ? `${type}-label-copy` : "",
-  size ? `${type}-label-copy-${size}` : "",
-  isInvalid ? "choice-input-error" : ""
-].filter((c) => c.length).join(" ");
-$: legendClasses = [
-  skin,
-  // .screenreader-only is expected to be globally available via common.min.css
-  isFieldset === false ? "screenreader-only" : ""
-].filter((c) => c).join(" ");
-$: fieldsetClasses = () => {
-  const skin2 = isSkinned ? `${type}-group` : "";
-  const sizeSkin = isSkinned && size === "large" ? `${type}-group-${size}` : "";
-  let klasses = [
-    skin2,
-    sizeSkin,
-    isFieldset === false ? `${type}-group-hidden` : ""
-  ];
-  klasses = klasses.filter((klass) => klass.length);
-  return klasses.join(" ");
-};
-$: inputClasses = () => {
-  let inputKlasses = [
-    type ? `${type}` : "",
-    size ? `${type}-${size}` : ""
-    // isDisabled ? "disabled" : "",
-  ];
-  inputKlasses = inputKlasses.filter((klass) => klass.length);
-  return inputKlasses.join(" ");
-};
-$: onChange = (e) => {
-  checked = Array.from(document.getElementsByName(e.target.name)).filter((el) => el.checked).map((el) => el.value);
-};
+<script lang="ts">
+  import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType } from './api';
+  export let id;
+  export let isSkinned = true;
+  export let isFieldset = true;
+  export let isInline = false;
+  export let isDisabled = undefined;
+  export let isInvalid = false;
+  export let options: ChoiceInputOption[] = [];
+  export let disabledOptions = [];
+  export let checkedOptions = [];
+  // If isFieldset falsy this will be screenreader only. If legendLabel is not passed
+  // in, it will fallback to the type prop or string choice input. Some content must be
+  // within the <legenc>CONTENT</legend> element to meet accessibility requirements
+  export let type: ChoiceInputType = "checkbox";
+  export let legendLabel = type || "choice input";
+  export let size: ChoiceInputSize = "";
+
+  // Provides bind:checked capabilities that consumer can use
+  export let checked = [];
+
+  $: labelClasses = [
+    type ? `${type}-label-wrap` : "",
+    isInline ? `${type}-label-wrap-inline` : "",
+    isDisabled ? "disabled" : "",
+  ].filter((c) => c.length).join(" ");
+  
+  $: labelSpanClasses = [
+    type ? `${type}-label` : "",
+    isInvalid ? 'choice-input-error' : "",
+    size ? `${type}-label-${size}` : "",
+  ].filter((c) => c.length).join(" ");
+
+  // If consumer sets is skinned to false we don't style the legend
+  $: skin = isSkinned ? `${type}-legend` : "";
+
+  $: labelCopyClasses = [
+    // Will also need to work in the small
+    // and large sizes here for the text copy
+    type ? `${type}-label-copy` : "",
+    size ? `${type}-label-copy-${size}` : "",
+    isInvalid ? 'choice-input-error' : "",
+  ].filter((c) => c.length).join(" ");
+
+  $: legendClasses = [
+    skin,
+    // .screenreader-only is expected to be globally available via common.min.css
+    isFieldset === false ? "screenreader-only" : ""
+  ].filter(c => c).join(" ");
+
+  $: fieldsetClasses = (): string => {
+    // If consumer sets is skinned to false we don't style the fieldset
+    const skin = isSkinned ? `${type}-group` : "";
+
+    // we only add the fieldset class for large (not small) e.g. radio|checkbox-group-large
+    const sizeSkin =
+      isSkinned && size === "large" ? `${type}-group-${size}` : "";
+
+    let klasses = [
+      skin,
+      sizeSkin,
+      isFieldset === false ? `${type}-group-hidden` : "",
+    ];
+    klasses = klasses.filter((klass) => klass.length);
+    return klasses.join(" ");
+  };
+
+  $: inputClasses = (): string => {
+    let inputKlasses = [
+      type ? `${type}` : "",
+      size ? `${type}-${size}` : "",
+      // isDisabled ? "disabled" : "",
+    ];
+    inputKlasses = inputKlasses.filter((klass) => klass.length);
+    return inputKlasses.join(" ");
+  };
+
+  $: onChange = (e) => {
+    // This allows the consumer to use bind:checked={checkedValues} idiom.
+    // We cannot use the bind:group idiom as we're using dynamic type above,
+    // So, essentially, we're manually implementing two-way binding here ;-)
+    checked =
+      Array.from(document.getElementsByName(e.target.name))
+        .filter(el => (el as HTMLInputElement).checked)
+        .map(el => (el as HTMLInputElement).value);
+
+  }
 </script>
 
 <fieldset class={fieldsetClasses()}>

package/dist/components/agnostic/Close/Close.svelte

@@ -85,13 +85,17 @@
 
 </style>
   
-<script>export let size = "";
-export let isFaux = false;
-export let color = "inherit";
-const closeButtonClasses = [
-  "close-button",
-  size ? `close-button-${size}` : ""
-].filter((c) => c).join(" ");
+<script lang="ts">
+  import type { CloseSizes } from './api';
+  export let size: CloseSizes = "";
+  export let isFaux = false;
+  export let color = "inherit";
+  const closeButtonClasses = [
+    "close-button",
+    size ? `close-button-${size}` : "",
+  ]
+    .filter((c) => c)
+    .join(" ");
 </script>
 
 {#if isFaux}

package/dist/components/agnostic/Dialog/Dialog.svelte

@@ -1,45 +1,67 @@
-<script>import Close from "../Close/Close.svelte";
-import SvelteA11yDialog from "./SvelteA11yDialog.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let id;
-export let title;
-export let dialogRoot;
-export let role = "dialog";
-export let titleId = "";
-export let closeButtonLabel = "Close button";
-export let closeButtonPosition = "first";
-export let drawerPlacement = "";
-export let isAnimationFadeIn = false;
-export let isAnimationSlideUp = false;
-let dialogInstance;
-const assignDialogInstance = (ev) => {
-  dialogInstance = ev.detail.instance;
-  dispatch("instance", {
-    instance: dialogInstance
-  });
-};
-export let classNames = {};
-const documentClasses = [
-  "dialog-content",
-  isAnimationFadeIn && isAnimationSlideUp ? "dialog-slide-up-fade-in" : "",
-  !isAnimationFadeIn && isAnimationSlideUp ? "dialog-slide-up" : "",
-  isAnimationFadeIn && !isAnimationSlideUp ? "dialog-fade-in" : "",
-  drawerPlacement.length ? "drawer-content" : ""
-].filter((c) => c).join(" ");
-const containerClasses = ["dialog", drawerPlacement ? `drawer-${drawerPlacement}` : ""].filter((c) => c).join(" ");
-const defaultClassNames = {
-  container: containerClasses,
-  document: documentClasses,
-  overlay: "dialog-overlay",
-  title: "h4 mbe16",
-  // Borrows .close-button (from close.css) as it gives us the transparent
-  // style plus the a11y focus ring we want applied to dialog's close button
-  closeButton: "dialog-close dialog-close-button"
-};
-$: getClassNames = () => {
-  return { ...defaultClassNames, ...classNames };
-};
+<script lang="ts">
+	import Close from '../Close/Close.svelte';
+	import SvelteA11yDialog from './SvelteA11yDialog.svelte';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	export let id;
+	export let title;
+	export let dialogRoot;
+	export let role: 'dialog' | 'alertdialog' = 'dialog';
+	export let titleId = '';
+	export let closeButtonLabel = 'Close button';
+	export let closeButtonPosition: 'first' | 'last' | 'none' = 'first';
+	export let drawerPlacement = '';
+
+	/**
+	 * Animates the dialog content by fading in. Set to false to disable.
+	 */
+	export let isAnimationFadeIn = false;
+
+	/**
+	 * Animates the dialog content by sliding up. Set to false to disable.
+	 */
+	export let isAnimationSlideUp = false;
+
+	/**
+	 * Handles a11y-dialog instantiation and assigning of dialog instance
+	 */
+	let dialogInstance;
+	const assignDialogInstance = (ev) => {
+		dialogInstance = ev.detail.instance;
+		dispatch('instance', {
+			instance: dialogInstance
+		});
+	};
+
+	export let classNames = {};
+	const documentClasses = [
+		'dialog-content',
+		isAnimationFadeIn && isAnimationSlideUp ? 'dialog-slide-up-fade-in' : '',
+		!isAnimationFadeIn && isAnimationSlideUp ? 'dialog-slide-up' : '',
+		isAnimationFadeIn && !isAnimationSlideUp ? 'dialog-fade-in' : '',
+		drawerPlacement.length ? 'drawer-content' : ''
+	]
+		.filter((c) => c)
+		.join(' ');
+
+	const containerClasses = ['dialog', drawerPlacement ? `drawer-${drawerPlacement}` : '']
+		.filter((c) => c)
+		.join(' ');
+
+	const defaultClassNames = {
+		container: containerClasses,
+		document: documentClasses,
+		overlay: 'dialog-overlay',
+		title: 'h4 mbe16',
+		// Borrows .close-button (from close.css) as it gives us the transparent
+		// style plus the a11y focus ring we want applied to dialog's close button
+		closeButton: 'dialog-close dialog-close-button'
+	};
+
+	$: getClassNames = () => {
+		return { ...defaultClassNames, ...classNames };
+	};
 </script>
 
 <SvelteA11yDialog

package/dist/components/agnostic/Dialog/SvelteA11yDialog.svelte

@@ -1,54 +1,79 @@
-<script>import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
-import A11yDialog from "./a11y-dialog.js";
-const dispatch = createEventDispatcher();
-export let id;
-export let titleId = "";
-export let role = "dialog";
-export let dialogRoot;
-export let title;
-export let closeButtonLabel = "Close this dialog window";
-export let closeButtonPosition = "first";
-export let classNames = {};
-const defaultClassNames = {
-  container: "dialog-container",
-  document: "dialog-content",
-  overlay: "dialog-overlay",
-  element: "dialog-element",
-  title: "dialog-title h4",
-  closeButton: "dialog-close"
-};
-const classes = { ...defaultClassNames, ...classNames };
-let dialog;
-let rootElement;
-const portalTarget = dialogRoot || "document.body";
-const fullTitleId = titleId || `${id}-title`;
-const roleAttribute = ["dialog", "alertdialog"].includes(role) ? role : "dialog";
-let mounted = false;
-onMount(() => mounted = true);
-onDestroy(() => {
-  if (dialog) {
-    dialog.destroy();
-  }
-});
-const instantiateDialog = async () => {
-  await tick();
-  dialog = new A11yDialog(rootElement, portalTarget);
-  dispatch("instance", {
-    "instance": dialog
-  });
-};
-const teleportNode = async (node) => {
-  const destination = document.querySelector(portalTarget);
-  destination.appendChild(node);
-  instantiateDialog();
-};
-const teleport = (node) => {
-  teleportNode(node);
-};
-const close = () => {
-  dialog.hide();
-};
-</script>
+<script lang="ts">
+    import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+    import A11yDialog from './a11y-dialog.js';
+  
+    const dispatch = createEventDispatcher();
+  
+    export let id: string;
+    export let titleId = '';
+    export let role: 'dialog' | 'alertdialog' = 'dialog';
+    export let dialogRoot: string;
+    export let title: string;
+    export let closeButtonLabel = 'Close this dialog window';
+    export let closeButtonPosition: 'first' | 'last' | 'none' = 'first';
+    export let classNames = {}
+    const defaultClassNames = {
+      container: 'dialog-container',
+      document: 'dialog-content',
+      overlay: 'dialog-overlay',
+      element: 'dialog-element',
+      title: 'dialog-title h4',
+      closeButton: 'dialog-close',
+    };
+    const classes = {...defaultClassNames, ...classNames};
+  
+    // The dialog instance
+    let dialog;
+  
+    // Dialog element's binding
+    let rootElement;
+  
+    const portalTarget: string = dialogRoot || "document.body";
+  
+    const fullTitleId = titleId || `${id}-title`;
+  
+    const roleAttribute = ['dialog', 'alertdialog'].includes(role)
+      ? role
+      : 'dialog';
+  
+    // In case of SSR we don't render element until hydration is complete
+    let mounted = false;
+    onMount(() => mounted = true);
+  
+    onDestroy(() => {
+      if (dialog) {
+        dialog.destroy();
+      }
+    });
+  
+    const instantiateDialog = async () => {
+      await tick();
+      dialog = new A11yDialog(rootElement, portalTarget);
+      dispatch("instance", {
+        "instance": dialog
+      });
+    };
+  
+    const teleportNode = async (node) => {
+      const destination = document.querySelector(portalTarget);
+      destination.appendChild(node);
+      // We don't render the template until mounted. So we need
+      // wait one more "tick" before instantiating the dialog
+      instantiateDialog();
+    }
+  
+    /**
+     * Svelte actions don't want to be async so this is a hack
+     * to get around that by delegating to teleportNode
+     */
+    const teleport = (node) => {
+      teleportNode(node);
+    }
+  
+    const close = () => {
+      dialog.hide();
+    }
+  </script>
   
   {#if mounted}
     <div

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

@@ -83,15 +83,21 @@
 
 </style>
 
-<script>export let title = "";
-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(" ");
+<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(" ");
 </script>
 
 <details class={discloseClasses} bind:open={isOpen}>

package/dist/components/agnostic/Divider/Divider.svelte

@@ -1,14 +1,24 @@
-<script>export let isVertical = false;
-export let justify = "";
-export let type = "";
-export let size = "";
-const dividerClasses = [
-  "divider",
-  isVertical ? "divider-vertical" : "",
-  justify ? `divider-justify-${justify}` : "",
-  size ? `divider-${size}` : "",
-  type ? `divider-${type}` : ""
-].filter((cl) => cl.length).join(" ");
+<script lang="ts">
+	import type { DividerJustify, DividerTypes, DividerSizes } from './api';
+
+	export let isVertical = false;
+
+	// start, end (centered by default)
+	export let justify: DividerJustify = '';
+	// info, success, error, warning
+	export let type: DividerTypes = '';
+	// small (default is medium) large xlarge
+	export let size: DividerSizes = '';
+
+	const dividerClasses: string = [
+		'divider',
+		isVertical ? 'divider-vertical' : '',
+		justify ? `divider-justify-${justify}` : '',
+		size ? `divider-${size}` : '',
+		type ? `divider-${type}` : ''
+	]
+		.filter((cl) => cl.length)
+		.join(' ');
 </script>
 
 <div class={dividerClasses}></div>

package/dist/components/agnostic/Drawer/Drawer.svelte

@@ -1,19 +1,23 @@
-<script>import Dialog from "../Dialog/Dialog.svelte";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-let drawerInstance;
-const assignDrawerRef = (ev) => {
-  drawerInstance = ev.detail.instance;
-  dispatch("instance", {
-    instance: drawerInstance
-  });
-};
-export let id;
-export let drawerRoot;
-export let placement;
-export let title;
-export let role = "dialog";
-export let isAnimationFadeIn = true;
+<script lang="ts">
+  import type { DrawerRoles } from './api';
+  import Dialog from "../Dialog/Dialog.svelte";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  let drawerInstance;
+  const assignDrawerRef = (ev) => {
+    drawerInstance = ev.detail.instance;
+    dispatch("instance", {
+      instance: drawerInstance,
+    });
+  };
+
+  export let id;
+  export let drawerRoot;
+  export let placement;
+  export let title;
+  export let role: DrawerRoles = "dialog";
+  export let isAnimationFadeIn = true;
 </script>
 <Dialog
   id={id}

package/dist/components/agnostic/EmptyState/EmptyState.svelte

@@ -28,13 +28,16 @@
 
 </style>
 
-<script>export let isRounded = false;
-export let isBordered = false;
-const emptyClasses = [
-  "empty",
-  isRounded ? "empty-rounded" : "",
-  isBordered ? "empty-bordered" : ""
-].filter((cl) => cl.length).join(" ");
+<script lang="ts">
+  export let isRounded = false;
+  export let isBordered = false;
+  const emptyClasses: string = [
+    "empty",
+    isRounded ? "empty-rounded" : "",
+    isBordered ? "empty-bordered" : "",
+  ]
+    .filter((cl) => cl.length)
+    .join(" ");
 </script>
 
 <div class={emptyClasses}>

package/dist/components/agnostic/Header/Header.svelte

@@ -78,21 +78,28 @@
 
 </style>
 
-<script>export let isSticky = false;
-export let isSkinned = true;
-export let isHeaderContentStart = false;
-export let isHeaderContentEnd = false;
-export let css = "";
-const klasses = [
-  isSkinned ? "header" : "header-base",
-  isSticky ? "header-sticky" : "",
-  css ? `${css}` : ""
-].filter((cl) => cl.length).join(" ");
-const headerContentClasses = [
-  "header-content",
-  isHeaderContentStart ? "header-content-start" : "",
-  isHeaderContentEnd ? "header-content-end" : ""
-].filter((cl) => cl.length).join(" ");
+<script lang="ts">
+  export let isSticky = false;
+  export let isSkinned = true;
+  export let isHeaderContentStart = false;
+  export let isHeaderContentEnd = false;
+  export let css = "";
+
+  const klasses: string = [
+    isSkinned ? "header" : "header-base",
+    isSticky ? "header-sticky" : "",
+    css ? `${css}` : "",
+  ]
+    .filter((cl) => cl.length)
+    .join(" ");
+
+  const headerContentClasses: string = [
+    "header-content",
+    isHeaderContentStart ? "header-content-start" : "",
+    isHeaderContentEnd ? "header-content-end" : "",
+  ]
+    .filter((cl) => cl.length)
+    .join(" ");
 </script>
 
 <nav class={klasses}>

package/dist/components/agnostic/Header/HeaderNav.svelte

@@ -16,9 +16,10 @@
 
 </style>
   
-  <script>export let css = "";
-const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
-</script>
+  <script lang="ts">
+    export let css = "";
+    const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
+  </script>
   
   <nav class={containerClasses}>
     <ul class="header-nav">

package/dist/components/agnostic/Header/HeaderNavItem.svelte

@@ -21,8 +21,9 @@
 
 </style>
 
-<script>export let css = "";
-let klasses = ["header-nav-item", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+<script lang="ts">
+  export let css = "";
+  let klasses: string = ["header-nav-item", css ? `${css}` : ""].filter(cl => cl && cl.length).join(' ');
 </script>
 
 <li class={klasses}>