@txstate-mws/svelte-components 1.2.8 → 1.2.11

package/actions/elementqueries.js

@@ -1,140 +1,128 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _ElementQueries_instances, _ElementQueries_watchlist, _ElementQueries_busy, _ElementQueries_hasInit, _ElementQueries_mutationobserver, _ElementQueries_boundRefresh, _ElementQueries_subscribers, _ElementQueries_stores, _ElementQueries_processwidths, _ElementQueries_finddepth, _ElementQueries_collecttargets, _ElementQueries_gotoanchor, _ElementQueries_activate, _ElementQueries_activateRaw, _ElementQueries_deactivate;
 class ElementQueries {
-    constructor() {
-        _ElementQueries_instances.add(this);
-        _ElementQueries_watchlist.set(this, []);
-        _ElementQueries_busy.set(this, false);
-        _ElementQueries_hasInit.set(this, false);
-        _ElementQueries_mutationobserver.set(this, void 0);
-        _ElementQueries_boundRefresh.set(this, this.refresh.bind(this));
-        _ElementQueries_subscribers.set(this, 0);
-        _ElementQueries_stores.set(this, new Map());
+    #watchlist = [];
+    #busy = false;
+    #hasInit = false;
+    #mutationobserver;
+    #boundRefresh = this.refresh.bind(this);
+    #subscribers = 0;
+    #stores = new Map();
+    #processwidths() {
+        for (let i = 0; i < this.#watchlist.length; i++) {
+            const widths = [];
+            const attrs = [];
+            for (let j = 0; j < this.#watchlist[i].length; j++) {
+                widths.push(this.#watchlist[i][j].offsetWidth);
+                attrs.push(this.#watchlist[i][j].getAttribute('data-eq'));
+            }
+            for (let j = 0; j < this.#watchlist[i].length; j++) {
+                const el = this.#watchlist[i][j];
+                const w = widths[j];
+                let attrstr = '';
+                let finalw = 1600;
+                for (let k = 1600; k >= w && k > 700; k -= 100) {
+                    attrstr += `${k}px `;
+                    finalw = k;
+                }
+                for (let k = 700; k >= w; k -= 50) {
+                    attrstr += `${k}px `;
+                    finalw = k;
+                }
+                if (attrstr !== attrs[j])
+                    el.setAttribute('data-eq', attrstr);
+                if (this.#stores.has(el)) {
+                    this.#stores.get(el).update(v => v.width === finalw ? v : { ...v, width: finalw });
+                }
+            }
+        }
+        this.#busy = false;
+    }
+    #finddepth(target, currentdepth = 0) {
+        const closest = target.parentElement?.closest('.eq-parent');
+        if (!closest)
+            return currentdepth;
+        return this.#finddepth(closest, currentdepth + 1);
+    }
+    #collecttargets() {
+        this.#watchlist = [];
+        const targets = Array.from(document.querySelectorAll('.eq-parent'));
+        for (const target of targets) {
+            const depth = this.#finddepth(target);
+            if (!this.#watchlist[depth])
+                this.#watchlist[depth] = [target];
+            else
+                this.#watchlist[depth].push(target);
+        }
     }
     refresh() {
-        if (!__classPrivateFieldGet(this, _ElementQueries_busy, "f") && __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length > 0) {
-            __classPrivateFieldSet(this, _ElementQueries_busy, true, "f");
-            requestAnimationFrame(__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_processwidths).bind(this));
+        if (!this.#busy && this.#watchlist.length > 0) {
+            this.#busy = true;
+            requestAnimationFrame(this.#processwidths.bind(this));
+        }
+    }
+    #gotoanchor() {
+        // since we are dramatically resizing, we need to scroll to the proper place for an
+        // anchor tag
+        const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
+        if (m) {
+            const id = m[1];
+            requestAnimationFrame(() => document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true));
         }
     }
     fullresync() {
-        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_collecttargets).call(this);
+        this.#collecttargets();
         this.refresh();
     }
+    #activate() {
+        this.fullresync();
+        window.addEventListener('resize', this.#boundRefresh);
+        this.#mutationobserver = new MutationObserver(() => this.fullresync());
+        this.#mutationobserver.observe(document.body, {
+            subtree: true,
+            childList: true,
+            attributeFilter: ['class', 'style']
+        });
+    }
+    #activateRaw() {
+        if (typeof window === 'undefined' || this.#hasInit)
+            return;
+        this.#hasInit = true;
+        if (['interactive', 'complete'].includes(document.readyState)) {
+            this.#activate();
+        }
+        else {
+            window.addEventListener('DOMContentLoaded', () => {
+                this.#activate();
+                this.#gotoanchor();
+            });
+        }
+    }
     // if someone uses the library without svelte, they may just activate it once
     // instead of faithfully subscribing and unsubscribing, so we'll add a subscriber that can't be
     // decremented and it will stay activated forever
     activate() {
-        var _a;
-        __classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
-        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
+        this.#subscribers++;
+        this.#activateRaw();
+    }
+    #deactivate() {
+        if (this.#subscribers > 0 || typeof window === 'undefined')
+            return;
+        window.removeEventListener('resize', this.#boundRefresh);
+        this.#mutationobserver?.disconnect();
+        this.#hasInit = false;
     }
     subscribe(el, store) {
-        var _a;
-        __classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
+        this.#subscribers++;
         if (store)
-            __classPrivateFieldGet(this, _ElementQueries_stores, "f").set(el, store);
+            this.#stores.set(el, store);
         else
-            __classPrivateFieldGet(this, _ElementQueries_stores, "f").delete(el);
-        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
+            this.#stores.delete(el);
+        this.#activateRaw();
         return () => {
-            var _a;
-            if (__classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), --_a), "f") === 0)
-                __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_deactivate).call(this);
+            if (--this.#subscribers === 0)
+                this.#deactivate();
         };
     }
 }
-_ElementQueries_watchlist = new WeakMap(), _ElementQueries_busy = new WeakMap(), _ElementQueries_hasInit = new WeakMap(), _ElementQueries_mutationobserver = new WeakMap(), _ElementQueries_boundRefresh = new WeakMap(), _ElementQueries_subscribers = new WeakMap(), _ElementQueries_stores = new WeakMap(), _ElementQueries_instances = new WeakSet(), _ElementQueries_processwidths = function _ElementQueries_processwidths() {
-    for (let i = 0; i < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length; i++) {
-        const widths = [];
-        const attrs = [];
-        for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
-            widths.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].offsetWidth);
-            attrs.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].getAttribute('data-eq'));
-        }
-        for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
-            const el = __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j];
-            const w = widths[j];
-            let attrstr = '';
-            let finalw = 1600;
-            for (let k = 1600; k >= w && k > 700; k -= 100) {
-                attrstr += `${k}px `;
-                finalw = k;
-            }
-            for (let k = 700; k >= w; k -= 50) {
-                attrstr += `${k}px `;
-                finalw = k;
-            }
-            if (attrstr !== attrs[j])
-                el.setAttribute('data-eq', attrstr);
-            if (__classPrivateFieldGet(this, _ElementQueries_stores, "f").has(el)) {
-                __classPrivateFieldGet(this, _ElementQueries_stores, "f").get(el).update(v => v.width === finalw ? v : { ...v, width: finalw });
-            }
-        }
-    }
-    __classPrivateFieldSet(this, _ElementQueries_busy, false, "f");
-}, _ElementQueries_finddepth = function _ElementQueries_finddepth(target, currentdepth = 0) {
-    const closest = target.parentElement?.closest('.eq-parent');
-    if (!closest)
-        return currentdepth;
-    return __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, closest, currentdepth + 1);
-}, _ElementQueries_collecttargets = function _ElementQueries_collecttargets() {
-    __classPrivateFieldSet(this, _ElementQueries_watchlist, [], "f");
-    const targets = Array.from(document.querySelectorAll('.eq-parent'));
-    for (const target of targets) {
-        const depth = __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, target);
-        if (!__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth])
-            __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth] = [target];
-        else
-            __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth].push(target);
-    }
-}, _ElementQueries_gotoanchor = function _ElementQueries_gotoanchor() {
-    // since we are dramatically resizing, we need to scroll to the proper place for an
-    // anchor tag
-    const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
-    if (m) {
-        const id = m[1];
-        requestAnimationFrame(() => document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true));
-    }
-}, _ElementQueries_activate = function _ElementQueries_activate() {
-    this.fullresync();
-    window.addEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
-    __classPrivateFieldSet(this, _ElementQueries_mutationobserver, new MutationObserver(() => this.fullresync()), "f");
-    __classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f").observe(document.body, {
-        subtree: true,
-        childList: true,
-        attributeFilter: ['class', 'style']
-    });
-}, _ElementQueries_activateRaw = function _ElementQueries_activateRaw() {
-    if (typeof window === 'undefined' || __classPrivateFieldGet(this, _ElementQueries_hasInit, "f"))
-        return;
-    __classPrivateFieldSet(this, _ElementQueries_hasInit, true, "f");
-    if (['interactive', 'complete'].includes(document.readyState)) {
-        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
-    }
-    else {
-        window.addEventListener('DOMContentLoaded', () => {
-            __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
-            __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_gotoanchor).call(this);
-        });
-    }
-}, _ElementQueries_deactivate = function _ElementQueries_deactivate() {
-    if (__classPrivateFieldGet(this, _ElementQueries_subscribers, "f") > 0 || typeof window === 'undefined')
-        return;
-    window.removeEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
-    __classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f")?.disconnect();
-    __classPrivateFieldSet(this, _ElementQueries_hasInit, false, "f");
-};
 export const elementqueries = new ElementQueries();
 export function eq(el, opts) {
     el.classList.add('eq-parent');

package/actions/glue.d.ts

@@ -11,6 +11,6 @@ export interface GlueAlignStore {
     halign: 'left' | 'right';
 }
 export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
-    update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
+    update({ target, align, cover, store }: GlueArgs): void;
     destroy: () => void;
 };

package/components/Card.svelte

@@ -1,4 +1,4 @@
-<script >export let className = '';
+<script>export let className = '';
 import { getContext } from 'svelte';
 import { resize } from '../actions';
 import { CARDLAYOUT } from '../types';

package/components/CardLayout.svelte

@@ -1,4 +1,4 @@
-<script >import { onDestroy, tick, setContext, onMount } from 'svelte';
+<script>import { onDestroy, tick, setContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { resize } from '../actions';
 import { CARDLAYOUT } from '../types';

package/components/CollapsingTable.svelte

@@ -1,4 +1,4 @@
-<script >import { Store } from '@txstate-mws/svelte-store';
+<script>import { Store } from '@txstate-mws/svelte-store';
 import { derived } from 'svelte/store';
 import { classes } from '../util';
 import DefaultPopupMenu from './PopupMenu.svelte';

package/components/ConditionalWrapper.svelte

@@ -1,4 +1,4 @@
-<script >export let condition;
+<script>export let condition;
 export let component = undefined;
 export let a = false;
 export let span = false;

package/components/FocusLock.svelte

@@ -1,7 +1,7 @@
-<script context="module" >const FocusLockStack = [];
+<script context="module">const FocusLockStack = [];
 </script>
 
-<script >export let returnfocusto = undefined;
+<script>export let returnfocusto = undefined;
 export let initialfocus = undefined;
 export let hidefocus = true;
 export let hidefocuslabel = 'focus is above modal dialog, start tabbing';

package/components/Loading.svelte

@@ -1,13 +1,23 @@
-<script >import ScreenReaderOnly from './ScreenReaderOnly.svelte';
+<script>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>
 
 {#if loading}
-  <div class="container" style:height={height} style:position={height ? 'relative' : undefined}>
-    <div use:resize={{ store }} class="loader" style:border-width="{$store.offsetWidth * 0.1}px"><ScreenReaderOnly>Loading</ScreenReaderOnly></div>
+  <div bind:this={containerelement} class="container" class:parentScrolls style:height={height} style:position={height ? 'relative' : undefined}>
+    <div use:resize={{ store }} class="loader" style:border-width="{$store.offsetWidth ? $store.offsetWidth * 0.1 : 0}px"><ScreenReaderOnly>Loading</ScreenReaderOnly></div>
   </div>
 {:else}
   <slot />
@@ -15,16 +25,21 @@ const store = new ResizeStore();
 
 <style>
   .container {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    z-index: 2;
     background-color: var(--loading-bg, var(--modal-bg, rgba(0, 0, 0, 0.7)));
     display: flex;
     align-items: center;
     justify-content: center;
   }
+  .container.parentScrolls {
+    position: sticky;
+    margin-bottom: -100%;
+  }
   .loader {
     box-sizing: content-box;
     width: var(--loading-size, 10%);

package/components/Modal.svelte

@@ -1,4 +1,4 @@
-<script >export let escapable = true;
+<script>export let escapable = true;
 export let hidefocus = true;
 export let hidefocuslabel = undefined;
 export let returnfocusto = undefined;
@@ -37,7 +37,7 @@ onMount(() => {
     width: 100vw;
     height: 100vh;
     background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    z-index: 2147483000;
+    z-index: var(--modal-z, 3000);
     display: flex;
     justify-content: center;
     align-items: center

package/components/MultiSelect.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { randomid, sleep } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';

package/components/PopupMenu.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher, onDestroy, tick } from 'svelte';
+<script>import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';
@@ -22,9 +22,9 @@ export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
 export let hilited = undefined;
+export let menuid = randomid();
 let menuelement;
 const itemelements = [];
-const menuid = randomid();
 let firstactive = 0;
 let lastactive = items.length - 1;
 function hiddenItem(item) {
@@ -207,6 +207,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
             on:click={onclick(item)}
             role="option"
             tabindex=-1
+            aria-selected={value === item.value}
             aria-disabled={item.disabled}
           ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
         {/if}
@@ -229,7 +230,7 @@ $: hasSelected = showSelected && items.some(itm => itm.value === value);
 <style>
   div {
     position: absolute !important;
-    z-index: 2147483647;
+    z-index: var(--popup-z, calc(var(--modal-z, 3000) + 1));
   }
   ul {
     list-style: none;

package/components/PopupMenu.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         emptyText?: string | undefined;
         value?: string | undefined;
         hilited?: number | undefined;
+        menuid?: string;
     };
     events: {
         change: CustomEvent<any>;

package/components/ScreenReaderOnly.svelte

@@ -1,4 +1,4 @@
-<script >export let id = undefined;
+<script>export let id = undefined;
 export let arialive = undefined;
 export let ariaatomic = undefined;
 </script>

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.2.8",
+  "version": "1.2.11",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
-    "tabbable": "^5.2.1",
+    "tabbable": "^6.0.0",
     "txstate-utils": "^1.6.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
+    "@sveltejs/package": "1.0.0-next.3",
     "@types/tabbable": "^3.1.2",
-    "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "eslint-config-standard-with-typescript": "^22.0.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",

package/util/repositioned.js

@@ -8,7 +8,7 @@ export function watchForMutations(cb) {
             cb();
     }
     if (observers.size === 0) {
-        mutationobserver ?? (mutationobserver = new MutationObserver(watch));
+        mutationobserver ??= new MutationObserver(watch);
         window.addEventListener('resize', watch, { passive: true });
         mutationobserver.observe(document.body, {
             subtree: true,