@txstate-mws/svelte-components 0.0.64 → 0.0.65

package/dist/actions/glue.js

@@ -10,12 +10,12 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
     }
     let halign;
     let valign;
-    let sharedOffset = lib_1.sharedOffsetParent(el, target);
+    let sharedOffset = (0, lib_1.sharedOffsetParent)(el, target);
     function reposition(offset) {
         if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement))
             return;
         let autoalign = align;
-        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : lib_1.targetOffset(el.offsetParent, sharedOffset);
+        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : (0, lib_1.targetOffset)(el.offsetParent, sharedOffset);
         if (align === 'auto') {
             const rect = target.getBoundingClientRect();
             const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right';
@@ -65,7 +65,7 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
         }
         store === null || store === void 0 ? void 0 : store.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
     }
-    const { destroy, update } = lib_1.watchForPositionChangeInContainer(target, sharedOffset, reposition);
+    const { destroy, update } = (0, lib_1.watchForPositionChangeInContainer)(target, sharedOffset, reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
@@ -75,7 +75,7 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
                 store = ustore;
             }
             if (target !== utarget) {
-                sharedOffset = lib_1.sharedOffsetParent(el, utarget);
+                sharedOffset = (0, lib_1.sharedOffsetParent)(el, utarget);
                 target = utarget;
                 update(target, sharedOffset, reposition);
             }

package/dist/actions/offset.js

@@ -12,8 +12,8 @@ function offset(el, config) {
             config.store.update(v => (Object.assign(Object.assign({}, v), current)));
         el.dispatchEvent(new CustomEvent('offset', { detail: current }));
     }
-    let resolvedchange = (config === null || config === void 0 ? void 0 : config.debounce) ? lib_1.debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
-    const { destroy, update } = lib_1.watchForPositionChange(el, resolvedchange);
+    let resolvedchange = (config === null || config === void 0 ? void 0 : config.debounce) ? (0, lib_1.debounced)(lookforoffsetchange, config.debounce) : lookforoffsetchange;
+    const { destroy, update } = (0, lib_1.watchForPositionChange)(el, resolvedchange);
     return {
         update(newConfig) {
             var _a;
@@ -23,7 +23,7 @@ function offset(el, config) {
                 (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), lastOffset)));
             }
             if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) !== (config === null || config === void 0 ? void 0 : config.debounce)) {
-                resolvedchange = (newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? lib_1.debounced(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
+                resolvedchange = (newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? (0, lib_1.debounced)(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
                 update(el, resolvedchange);
             }
             config = newConfig;

package/dist/actions/resize.js

@@ -12,7 +12,7 @@ function resize(el, config) {
     let lastSize = {};
     function watch() {
         const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight };
-        if (!fast_deep_equal_1.default(lastSize, current)) {
+        if (!(0, fast_deep_equal_1.default)(lastSize, current)) {
             lastSize = current;
             if (config === null || config === void 0 ? void 0 : config.store)
                 config.store.set(current);
@@ -21,7 +21,7 @@ function resize(el, config) {
     }
     if (!ResizeObserver)
         return watch(); // support SSR
-    let observer = new ResizeObserver((config === null || config === void 0 ? void 0 : config.debounce) ? lib_1.debounced(watch, config.debounce) : watch);
+    let observer = new ResizeObserver((config === null || config === void 0 ? void 0 : config.debounce) ? (0, lib_1.debounced)(watch, config.debounce) : watch);
     observer.observe(el);
     watch();
     return {
@@ -34,7 +34,7 @@ function resize(el, config) {
             }
             if (!!(newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) !== !!(config === null || config === void 0 ? void 0 : config.debounce)) {
                 observer.disconnect();
-                observer = new ResizeObserver((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? lib_1.debounced(watch, newConfig.debounce) : watch);
+                observer = new ResizeObserver((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? (0, lib_1.debounced)(watch, newConfig.debounce) : watch);
                 observer.observe(el);
             }
             config = newConfig;

package/dist/actions/sticky.js

@@ -60,7 +60,7 @@ function sticky(el, config) {
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = lib_1.bodyOffset(offsetParent);
+            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -69,7 +69,7 @@ function sticky(el, config) {
         scrollend = Math.max(scrollstart, containeroffset.top + ((_a = config === null || config === void 0 ? void 0 : config.target) !== null && _a !== void 0 ? _a : offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = lib_1.watchForPositionChange([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     window.addEventListener('wheel', onwheel, { passive: false });
     function stickyUpdate(newConfig) {

package/dist/actions/stickyfixed.js

@@ -127,7 +127,7 @@ function stickyfixed(el, config) {
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = lib_1.bodyOffset(offsetParent);
+            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -142,7 +142,7 @@ function stickyfixed(el, config) {
         scrollend = Math.max(scrollstart, containeroffset.top + ((_b = config === null || config === void 0 ? void 0 : config.target) !== null && _b !== void 0 ? _b : offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = lib_1.watchForPositionChange([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     function stickyUpdate(newConfig) {
         var _a;

package/dist/components/CollapsingTable.svelte

@@ -1,6 +1,5 @@
 <script>var _a;
 import { DeepStore, classes } from '../lib';
-;
 import { derived } from 'svelte/store';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';

package/dist/components/FocusLock.svelte

@@ -1,19 +1,10 @@
-<script context="module">"use strict";
-const FocusLockStack = [];
+<script context="module">const FocusLockStack = [];
 </script>
 
-<script>var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-export let returnfocusto = undefined;
+<script>export let returnfocusto = undefined;
+export let initialfocus = undefined;
 export let hidefocus = true;
-export let hidefocuslabel = "focus is above dialog";
+export let hidefocuslabel = "focus is above modal dialog, start tabbing";
 export let escapable = true;
 let className = '';
 export { className as class };
@@ -25,6 +16,8 @@ const dispatch = createEventDispatcher();
 let lockelement;
 let abovelockelement;
 let active = true;
+if (initialfocus)
+    hidefocus = false;
 onMount(() => {
     const prevFocusLock = FocusLockStack.slice(-1)[0];
     if (prevFocusLock)
@@ -36,13 +29,20 @@ onMount(() => {
     if (typeof returnfocusto === 'undefined') {
         returnfocusto = document.querySelector(':focus');
     }
-    setInitialFocus();
+    if (initialfocus) {
+        const focusEl = lockelement.querySelector(initialfocus);
+        if (focusEl instanceof HTMLElement)
+            focusEl.focus();
+    }
+    else {
+        setInitialFocus();
+    }
 });
-onDestroy(() => __awaiter(void 0, void 0, void 0, function* () {
+onDestroy(async () => {
     const wasactive = active;
     const focuswasinside = lockelement.matches(':focus-within');
     active = false;
-    yield tick();
+    await tick();
     if (returnfocusto && wasactive && focuswasinside) {
         returnfocusto.focus();
     }
@@ -50,7 +50,7 @@ onDestroy(() => __awaiter(void 0, void 0, void 0, function* () {
     const prevFocusLock = FocusLockStack.slice(-1)[0];
     if (prevFocusLock)
         prevFocusLock.unpause();
-}));
+});
 const setInitialFocus = () => {
     const firstfocus = tabbable(lockelement)[0];
     if (firstfocus && firstfocus.focus) {

package/dist/components/Modal.svelte

@@ -2,6 +2,7 @@
 export let hidefocus = true;
 export let hidefocuslabel = undefined;
 export let returnfocusto = undefined;
+export let initialfocus = undefined;
 import FocusLock from './FocusLock.svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { portal } from '../actions';
@@ -18,7 +19,7 @@ onMount(() => {
 </script>
 
 <div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} on:escape={() => lockbackdrop || endmodal()}>
+  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
     <slot></slot>
   </FocusLock>
 </div>

package/dist/components/PopupMenu.svelte

@@ -1,18 +1,7 @@
-<script>var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-;
-import { glue, portal } from '../actions';
+<script>import { glue, portal } from '../actions';
 import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { randomid } from 'txstate-utils';
-;
-import { DeepStore, SettableSubject } from '../lib';
+import { DeepStore } from '../lib';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 export let menushown = false;
@@ -40,34 +29,30 @@ let lastactive = items.length - 1;
 function hiddenItem(item) {
     return !!item && !showSelected && item.value === (selected === null || selected === void 0 ? void 0 : selected.value);
 }
-function reactToItems(..._) {
+async function reactToItems(..._) {
     var _a;
-    return __awaiter(this, void 0, void 0, function* () {
-        firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
-        lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
-        if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
-            hilited = firstactive;
-    });
+    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
+    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
+    if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
+        hilited = firstactive;
 }
 $: reactToItems(items, selected);
-function reactToMenuShown(_) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!buttonelement) {
-            hilited = undefined;
-            return;
-        }
-        yield tick();
-        if (!menushown) {
-            hilited = undefined;
-            buttonelement.removeAttribute('aria-controls');
-            buttonelement.setAttribute('aria-expanded', 'false');
-        }
-        else {
-            buttonelement.setAttribute('aria-controls', menuid);
-            buttonelement.setAttribute('aria-expanded', 'true');
-        }
-        buttonelement.focus();
-    });
+async function reactToMenuShown(_) {
+    if (!buttonelement) {
+        hilited = undefined;
+        return;
+    }
+    await tick();
+    if (!menushown) {
+        hilited = undefined;
+        buttonelement.removeAttribute('aria-controls');
+        buttonelement.setAttribute('aria-expanded', 'false');
+    }
+    else {
+        buttonelement.setAttribute('aria-controls', menuid);
+        buttonelement.setAttribute('aria-expanded', 'true');
+    }
+    buttonelement.focus();
 }
 $: reactToMenuShown(menushown);
 function move(idx) {
@@ -157,12 +142,10 @@ function onbuttonclick(e) {
     e.preventDefault();
     menushown = !menushown;
 }
-function onblur(e) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // tabindex=-1 on our menu elements means e.relatedTarget will be set
-        if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
-            menushown = false;
-    });
+async function onblur(e) {
+    // tabindex=-1 on our menu elements means e.relatedTarget will be set
+    if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
+        menushown = false;
 }
 function cleanup(element) {
     if (element) {

package/dist/lib/deepstore.js

@@ -45,7 +45,7 @@ class DeepStore {
     set(value) {
         if (this.pause)
             return;
-        if (!fast_deep_equal_1.default(value, this.value)) {
+        if (!(0, fast_deep_equal_1.default)(value, this.value)) {
             this.value = this.clone(value);
             for (const [id, run] of this.subscribers) {
                 run(value);

package/dist/lib/derivedstore.js

@@ -18,7 +18,7 @@ class DerivedStore extends deepstore_1.DeepStore {
     constructor(store, getter) {
         if (typeof getter === 'string') {
             const accessor = getter;
-            getter = (parentValue) => txstate_utils_1.get(parentValue, accessor);
+            getter = (parentValue) => (0, txstate_utils_1.get)(parentValue, accessor);
         }
         super({});
         if (Array.isArray(store)) {

package/dist/lib/repositioned.js

@@ -24,7 +24,7 @@ function watchForMutations(cb) {
             characterData: true
         });
     }
-    const id = txstate_utils_1.randomid();
+    const id = (0, txstate_utils_1.randomid)();
     observers.set(id, cb);
     cb();
     return {
@@ -40,10 +40,10 @@ function watchForMutations(cb) {
 exports.watchForMutations = watchForMutations;
 function watchForPositionChange(el, cb) {
     let lastoffsets = [];
-    let els = txstate_utils_1.toArray(el).filter(txstate_utils_1.isNotNull);
+    let els = (0, txstate_utils_1.toArray)(el).filter(txstate_utils_1.isNotNull);
     function watch() {
         const offsets = els.map(bodyoffset_1.bodyOffset);
-        if (offsets.some((offset, i) => !fast_deep_equal_1.default(offset, lastoffsets[i]))) {
+        if (offsets.some((offset, i) => !(0, fast_deep_equal_1.default)(offset, lastoffsets[i]))) {
             lastoffsets = offsets;
             Array.isArray(el) ? cb(offsets) : cb(offsets[0]);
         }
@@ -54,7 +54,7 @@ function watchForPositionChange(el, cb) {
             const changed = newEl !== el || newCb !== cb;
             if (changed) {
                 el = newEl;
-                els = txstate_utils_1.toArray(el).filter(txstate_utils_1.isNotNull);
+                els = (0, txstate_utils_1.toArray)(el).filter(txstate_utils_1.isNotNull);
                 cb = newCb;
                 watch();
             }
@@ -68,8 +68,8 @@ function watchForPositionChangeInContainer(el, container, cb) {
     function watch() {
         if (!el || !container)
             return;
-        const offset = bodyoffset_1.targetOffset(el, container);
-        if (!fast_deep_equal_1.default(offset, lastoffset)) {
+        const offset = (0, bodyoffset_1.targetOffset)(el, container);
+        if (!(0, fast_deep_equal_1.default)(offset, lastoffset)) {
             lastoffset = offset;
             cb(offset);
         }

package/dist/lib/safestore.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SafeStore = void 0;
 const deepstore_1 = require("./deepstore");
 const rfdc_1 = __importDefault(require("rfdc"));
-const cloneDeep = rfdc_1.default();
+const cloneDeep = (0, rfdc_1.default)();
 class SafeStore extends deepstore_1.DeepStore {
     clone(value) {
         return cloneDeep(value);

package/dist/lib/substore.js

@@ -21,8 +21,8 @@ class SubStore extends deepstore_1.DeepStore {
     constructor(store, getter, setter) {
         if (typeof getter === 'string') {
             const accessor = getter;
-            getter = parentValue => txstate_utils_1.get(parentValue, accessor);
-            setter = (newValue, parentValue) => txstate_utils_1.set(parentValue, accessor, newValue);
+            getter = parentValue => (0, txstate_utils_1.get)(parentValue, accessor);
+            setter = (newValue, parentValue) => (0, txstate_utils_1.set)(parentValue, accessor, newValue);
         }
         super({});
         this.parentStore = store;

package/dist/ts/components/FocusLock.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   export let returnfocusto: HTMLElement|null|undefined = undefined
+  export let initialfocus: string|undefined = undefined
   export let hidefocus = true
-  export let hidefocuslabel = "focus is above dialog"
+  export let hidefocuslabel = "focus is above modal dialog, start tabbing"
   export let escapable = true
   let className = ''
   export { className as class }
@@ -18,6 +19,7 @@
   let lockelement: HTMLElement
   let abovelockelement: HTMLElement
   let active = true
+  if (initialfocus) hidefocus = false
   onMount(() => {
     const prevFocusLock = FocusLockStack.slice(-1)[0]
     if (prevFocusLock) prevFocusLock.pause()
@@ -28,7 +30,12 @@
     if (typeof returnfocusto === 'undefined') {
       returnfocusto = document.querySelector(':focus') as HTMLElement
     }
-    setInitialFocus()
+    if (initialfocus) {
+      const focusEl = lockelement.querySelector(initialfocus)
+      if (focusEl instanceof HTMLElement) focusEl.focus()
+    } else {
+      setInitialFocus()
+    }
   })
   onDestroy(async () => {
     const wasactive = active

package/dist/ts/components/Modal.svelte

@@ -3,6 +3,7 @@
   export let hidefocus = true
   export let hidefocuslabel: string|undefined = undefined
   export let returnfocusto: HTMLElement|undefined = undefined
+  export let initialfocus: string|undefined = undefined
   import FocusLock from './FocusLock.svelte'
   import { createEventDispatcher, onMount } from 'svelte'
   import { portal } from '../actions';
@@ -20,7 +21,7 @@
 </script>
 
 <div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} on:escape={() => lockbackdrop || endmodal()}>
+  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
     <slot></slot>
   </FocusLock>
 </div>

package/dist/ts/tests/Modal/ModalTest.svelte

@@ -4,7 +4,7 @@
 </script>
 
 {#if shown}
-<Modal on:dismiss={() => shown = false}>
+<Modal initialfocus='input[type="submit"]' on:dismiss={() => shown = false}>
   <form>
     <div class="formfield">
       <label for="firstname">First Name:</label><input id="firstname" type="text" name="firstname">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "description": "Svelte components that are generically useful.",
   "main": "dist/index.js",
   "module": "esm/index.js",