@txstate-mws/svelte-components 1.6.12 → 1.6.13

package/dist/components/FocusLock.svelte

@@ -12,115 +12,109 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
 `FocusLock`s can be nested. The user will be trapped inside the deepest `FocusLock` present in the DOM.
 When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
 -->
-<script context="module" lang="ts">export const FocusLockStack = [];
-const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve) => requestAnimationFrame(resolve) : (resolve) => resolve(0);
+<script context="module" lang="ts">
+  export const FocusLockStack: { focusId: string, pause: () => void, unpause: () => void, update: () => void }[] = []
+  const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve: (value: unknown) => void) => requestAnimationFrame(resolve) : (resolve: (value: unknown) => void) => resolve(0)
 </script>
 
-<script lang="ts">import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-import { tabbable } from 'tabbable';
-import { randomid, sleep } from 'txstate-utils';
-import { buttonify } from '../actions';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-export let escapable = true;
-export let hidefocus = true;
-export let hidefocuslabel = 'focus is above modal dialog, start tabbing';
-export let initialfocus = undefined;
-export let returnfocusto = undefined;
-/** If you expect any popup menus to be added to the body, we need to know that they
-are considered to be part of the focus lock, or else the modal will be dismissed
-when the user clicks inside. Use commas to include multiple selectors. */
-export let includeselector = undefined;
-let className = '';
-export { className as class };
-export let focusId = randomid();
-const dispatch = createEventDispatcher();
-let lockelement;
-let abovelockelement;
-let state = 'init';
-if (initialfocus)
-    hidefocus = false;
-onMount(async () => {
-    const prevFocusLock = FocusLockStack.slice(-1)[0];
-    if (prevFocusLock)
-        prevFocusLock.pause();
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte'
+  import { tabbable } from 'tabbable'
+  import { randomid, sleep } from 'txstate-utils'
+  import { buttonify } from '../actions'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+
+  export let escapable = true
+  export let hidefocus = true
+  export let hidefocuslabel = 'focus is above modal dialog, start tabbing'
+  export let initialfocus: string | undefined = undefined
+  export let returnfocusto: HTMLElement | undefined = undefined
+  /** If you expect any popup menus to be added to the body, we need to know that they
+  are considered to be part of the focus lock, or else the modal will be dismissed
+  when the user clicks inside. Use commas to include multiple selectors. */
+  export let includeselector: string | undefined = undefined
+  let className = ''
+  export { className as class }
+  export let focusId = randomid()
+
+  const dispatch = createEventDispatcher()
+  let lockelement: HTMLElement
+  let abovelockelement: HTMLElement
+  let state: 'init' | 'active' | 'paused' | 'destroyed' = 'init'
+  if (initialfocus) hidefocus = false
+  onMount(async () => {
+    const prevFocusLock = FocusLockStack.slice(-1)[0]
+    if (prevFocusLock) prevFocusLock.pause()
     FocusLockStack.push({
-        focusId,
-        pause: () => { state = 'paused'; },
-        unpause: () => { if (state === 'paused')
-            state = 'active'; },
-        update: () => { dispatch('focuslockupdate'); }
-    });
-    for (const entry of FocusLockStack)
-        entry.update();
+      focusId,
+      pause: () => { state = 'paused' },
+      unpause: () => { if (state === 'paused') state = 'active' },
+      update: () => { dispatch('focuslockupdate') }
+    })
+    for (const entry of FocusLockStack) entry.update()
     if (typeof returnfocusto === 'undefined') {
-        returnfocusto = document.activeElement;
+      returnfocusto = document.activeElement as HTMLElement | undefined
     }
-    await sleep(1); // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
-    if (!lockelement)
-        return; // in case we already unmounted
+    await sleep(1) // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
+    if (!lockelement) return // in case we already unmounted
     if (initialfocus) {
-        const focusEl = lockelement.querySelector(initialfocus);
-        if (focusEl instanceof HTMLElement)
-            focusEl.focus();
-    }
-    else {
-        setInitialFocus();
+      const focusEl = lockelement.querySelector(initialfocus)
+      if (focusEl instanceof HTMLElement) focusEl.focus()
+    } else {
+      setInitialFocus()
     }
-    setTimeout(() => { state = 'active'; }, 0);
-});
-onDestroy(async () => {
-    const wasactive = state !== 'paused';
-    state = 'destroyed';
+    setTimeout(() => { state = 'active' }, 0)
+  })
+  onDestroy(async () => {
+    const wasactive = state !== 'paused'
+    state = 'destroyed'
+
     // we need to allow the screen to redraw so that we can
     // change focus back to where it was, and we need
     // to allow the click event that destroyed us to finish bubbling
     // before we unpause the next focuslock in the stack or else it
     // will think it was an "outside" click and kill itself
-    await new Promise(waitAtick);
+    await new Promise(waitAtick)
+
     if (returnfocusto && wasactive) {
-        returnfocusto.focus();
+      returnfocusto.focus()
     }
-    const idx = FocusLockStack.findIndex(f => f.focusId === focusId);
-    if (idx > -1)
-        FocusLockStack.splice(idx, 1);
-    const prevFocusLock = FocusLockStack.slice(-1)[0];
-    if (prevFocusLock)
-        prevFocusLock.unpause();
-    for (const entry of FocusLockStack)
-        entry.update();
-});
-const setInitialFocus = () => {
-    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined;
+    const idx = FocusLockStack.findIndex(f => f.focusId === focusId)
+    if (idx > -1) FocusLockStack.splice(idx, 1)
+    const prevFocusLock = FocusLockStack.slice(-1)[0]
+    if (prevFocusLock) prevFocusLock.unpause()
+    for (const entry of FocusLockStack) entry.update()
+  })
+  const setInitialFocus = () => {
+    const firstfocus = lockelement ? tabbable(lockelement)[0] : undefined
     if (firstfocus?.focus) {
-        firstfocus.focus();
+      firstfocus.focus()
     }
-};
-const setLastFocus = () => {
-    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined;
+  }
+  const setLastFocus = () => {
+    const lastfocus = lockelement ? tabbable(lockelement).slice(-1)[0] : undefined
     if (lastfocus?.focus) {
-        lastfocus.focus();
+      lastfocus.focus()
     }
-};
-const keydown = (e) => {
+  }
+  const keydown = (e: KeyboardEvent) => {
     if (state === 'active' && e.key === 'Escape' && escapable) {
-        e.preventDefault();
-        dispatch('escape');
+      e.preventDefault()
+      dispatch('escape')
     }
-};
-const focusin = (e) => {
+  }
+  const focusin = (e: FocusEvent) => {
     if (state === 'active' && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
-        if (e.target === abovelockelement)
-            setLastFocus();
-        else
-            setInitialFocus();
+      if (e.target === abovelockelement) setLastFocus()
+      else setInitialFocus()
     }
-};
-const windowclick = (e) => {
+  }
+  const windowclick = (e: MouseEvent) => {
     if (state === 'active' && e.target instanceof HTMLElement && e.target.isConnected && (!includeselector || !e.target.closest(includeselector))) {
-        returnfocusto = undefined;
-        dispatch('escape');
+      returnfocusto = undefined
+      dispatch('escape')
     }
-};
+  }
 </script>
 <svelte:window on:mousedown={windowclick} />
 <!-- svelte-ignore a11y_interactive_supports_focus -->

package/dist/components/Loading.svelte

@@ -3,21 +3,22 @@
   until the slotted content is signals it is done loading via the `loading` boolean bind at which point the slotted content
   will be rendered.
 -->
-<script lang="ts">import { afterUpdate } from 'svelte';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-import { resize, ResizeStore } from '../actions';
-export let loading;
-export let height = undefined;
-const store = new ResizeStore();
-let containerelement;
-let parentScrolls;
-afterUpdate(() => {
-    if (height || !containerelement)
-        return;
-    const parent = containerelement.offsetParent;
-    const overflowY = window.getComputedStyle(parent).overflowY;
-    parentScrolls = overflowY === 'scroll' || overflowY === 'auto';
-});
+<script lang="ts">
+  import { afterUpdate } from 'svelte'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+  import { resize, ResizeStore } from '../actions'
+  export let loading: boolean | undefined
+  export let height: string | undefined = undefined
+  const store = new ResizeStore()
+
+  let containerelement: HTMLElement
+  let parentScrolls: boolean
+  afterUpdate(() => {
+    if (height || !containerelement) return
+    const parent = containerelement.offsetParent!
+    const overflowY = window.getComputedStyle(parent).overflowY
+    parentScrolls = overflowY === 'scroll' || overflowY === 'auto'
+  })
 </script>
 
 {#if loading}

package/dist/components/Lottie.svelte

@@ -2,39 +2,45 @@
   The purpose of `Lottie` is to provide a [Lottie](https://www.npmjs.com/package/lottie-web) player element
   with Screen Reader compatible attributes and lables readily available through the `alt` prop.
 -->
-<script lang="ts">import { onMount } from 'svelte';
-import { isBlank } from 'txstate-utils';
-import ScreenReaderOnly from './ScreenReaderOnly.svelte';
-export let animationData;
-export let loop = true;
-export let name = undefined;
-export let speed = 1;
-export let direction = 1;
-export let paused = false;
-export let width = undefined;
-export let height = undefined;
-/** `<ScreenReaderOnly>` lable to be applied. */
-export let alt = '';
-let container;
-let animation;
-$: animation?.setSpeed(speed);
-$: animation?.setDirection(direction);
-$: paused ? animation?.pause() : animation?.play();
-onMount(async () => {
-    const lottie = (await import('lottie-web/build/player/lottie_light')).default;
+<script lang="ts">
+  import type { AnimationItem } from 'lottie-web/build/player/lottie_light'
+  import { onMount } from 'svelte'
+  import { isBlank } from 'txstate-utils'
+  import ScreenReaderOnly from './ScreenReaderOnly.svelte'
+
+  export let animationData: any
+  export let loop = true
+  export let name: string | undefined = undefined
+  export let speed = 1
+  export let direction: 1 | -1 = 1
+  export let paused = false
+  export let width: string | undefined = undefined
+  export let height: string | undefined = undefined
+  /** `<ScreenReaderOnly>` lable to be applied. */
+  export let alt = ''
+
+  let container: HTMLElement
+  let animation: AnimationItem | undefined
+
+  $: animation?.setSpeed(speed)
+  $: animation?.setDirection(direction)
+  $: paused ? animation?.pause() : animation?.play()
+
+  onMount(async () => {
+    const lottie = (await import('lottie-web/build/player/lottie_light')).default
     animation = lottie.loadAnimation({
-        container,
-        animationData,
-        renderer: 'svg',
-        loop,
-        autoplay: !paused,
-        name
-    });
+      container,
+      animationData,
+      renderer: 'svg',
+      loop,
+      autoplay: !paused,
+      name
+    })
     animation.addEventListener('DOMLoaded', () => {
-        animation.setSpeed(speed);
-        animation.setDirection(direction);
-    });
-});
+      animation!.setSpeed(speed)
+      animation!.setDirection(direction)
+    })
+  })
 </script>
 
 <div bind:this={container} style:width style:height aria-hidden={isBlank(alt)}><ScreenReaderOnly>{alt}</ScreenReaderOnly></div>

package/dist/components/Modal.svelte

@@ -5,40 +5,43 @@ It provides only the backdrop and a scrollable container for your content. If yo
 
 Any time the Modal is in the DOM, it will take over the screen. You make it go away by removing it from the DOM.
 -->
-<script lang="ts">import { createEventDispatcher, onMount } from 'svelte';
-import { randomid } from 'txstate-utils';
-import FocusLock, { FocusLockStack } from './FocusLock.svelte';
-import { portal } from '../actions';
-export let opaque = false;
-export let containerClass = '';
-export let escapable = true;
-export let hidefocus = true;
-export let hidefocuslabel = undefined;
-export let initialfocus = undefined;
-export let returnfocusto = undefined;
-export let usePortal = undefined;
-/** If you expect any popup menus to be added to the body, we need to know that they
-are considered to be part of the focus lock, or else the modal will be dismissed
-when the user clicks inside. Use commas to include multiple selectors. */
-export let includeselector = undefined;
-export let focusId = randomid();
-const dispatch = createEventDispatcher();
-const endmodal = () => {
-    dispatch('escape');
-};
-let stackPosition;
-function onFocusLockUpdate() {
-    stackPosition = FocusLockStack.findIndex(f => f.focusId === focusId);
-}
-onMount(() => {
-    onFocusLockUpdate();
-    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px';
-    document.body.style.overflow = 'hidden';
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { randomid } from 'txstate-utils'
+  import FocusLock, { FocusLockStack } from './FocusLock.svelte'
+  import { portal } from '../actions'
+
+  export let opaque = false
+  export let containerClass = ''
+  export let escapable = true
+  export let hidefocus = true
+  export let hidefocuslabel: string | undefined = undefined
+  export let initialfocus: string | undefined = undefined
+  export let returnfocusto: HTMLElement | undefined = undefined
+  export let usePortal: HTMLElement | undefined = undefined
+  /** If you expect any popup menus to be added to the body, we need to know that they
+  are considered to be part of the focus lock, or else the modal will be dismissed
+  when the user clicks inside. Use commas to include multiple selectors. */
+  export let includeselector: string | undefined = undefined
+  export let focusId = randomid()
+
+  const dispatch = createEventDispatcher()
+  const endmodal = () => {
+    dispatch('escape')
+  }
+  let stackPosition: number
+  function onFocusLockUpdate () {
+    stackPosition = FocusLockStack.findIndex(f => f.focusId === focusId)
+  }
+  onMount(() => {
+    onFocusLockUpdate()
+    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px'
+    document.body.style.overflow = 'hidden'
     return () => {
-        document.body.style.overflow = '';
-        document.body.style.marginRight = '';
-    };
-});
+      document.body.style.overflow = ''
+      document.body.style.marginRight = ''
+    }
+  })
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->