@limetech/lime-elements 40.4.1 → 40.5.0

package/dist/collection/components/pagination/pagination.js

@@ -15,6 +15,10 @@ const FALLBACK_LANGUAGE = 'en';
  * looking at, and how far into it they have got; and hovering a page shows
  * exactly which items it holds.
  *
+ * Where there are more pages than fit, the ones left out are stood for by a
+ * `···`. That is a button: it opens a field for going straight to any page in
+ * the set, so no page is more than one move away however long the set is.
+ *
  * @exampleComponent limel-example-pagination-basic
  * @exampleComponent limel-example-pagination-single-page
  * @exampleComponent limel-example-pagination-page-size
@@ -63,12 +67,15 @@ export class Pagination {
         this.idPrefix = createRandomString();
         /** The value each prop was last complained about with. */
         this.warnedAbout = new Map();
+        /** The language `numberFormat` settled on, which may not be the prop. */
+        this.settledLanguage = FALLBACK_LANGUAGE;
         /** Settled once per render, and the only thing `render` reads. */
         this.view = {
             page: FIRST_PAGE,
             pageCount: null,
             pageSize: DEFAULT_PAGE_SIZE,
             totalItems: null,
+            slots: [],
         };
         /**
          * A gap marker, or a page button.
@@ -79,11 +86,38 @@ export class Pagination {
          */
         this.renderSlot = (slot, index) => {
             if (slot.kind === 'gap') {
-                return (h("span", { key: `gap-${index}`, class: "gap", "aria-hidden": "true" }, "\u00B7\u00B7\u00B7"));
+                return this.renderGap(index);
             }
             const isCurrent = slot.page === this.currentPage;
             return (h("button", { key: `page-${index}`, id: this.slotId(index), class: "page", "aria-current": isCurrent ? 'page' : null, "aria-disabled": this.loading ? 'true' : null, "aria-label": this.pageLabel(slot.page, isCurrent), "data-page": slot.page, onClick: this.selectPage }, this.formatNumber(slot.page), this.renderSpinner(isCurrent), this.renderTooltip(slot.page, index)));
         };
+        this.openJump = (event) => {
+            if (this.loading) {
+                return;
+            }
+            const { index } = event.currentTarget.dataset;
+            this.openGap = Number(index);
+        };
+        this.closeJump = () => {
+            this.openGap = undefined;
+        };
+        /**
+         * The control is told what to show, so a jump only asks. Focus goes back
+         * to the marker the field came out of, which is still on screen and will
+         * still be somewhere sensible if the consumer declines.
+         *
+         * @param event - the page the field asks for
+         */
+        this.handleJump = (event) => {
+            event.stopPropagation();
+            const page = event.detail;
+            this.focusGap(this.openGap);
+            this.openGap = undefined;
+            if (this.goTo(page)) {
+                this.awaitedJump = page;
+                this.jumpedFrom = this.view.page;
+            }
+        };
         // Bound once: a handler built per render is a new identity each time, so
         // every button would have its listener swapped on every page change.
         this.step = (event) => {
@@ -95,9 +129,6 @@ export class Pagination {
             this.goTo(this.currentPage + (direction === 'next' ? 1 : -1));
         };
         this.selectPage = (event) => {
-            if (this.loading) {
-                return;
-            }
             const { page } = event.currentTarget.dataset;
             this.goTo(Number(page));
         };
@@ -127,7 +158,9 @@ export class Pagination {
             pageCount: pageCount,
             pageSize: pageSize,
             totalItems: totalItems,
+            slots: this.slotsFor(page, pageCount),
         };
+        this.closeJumpWithoutAGap();
         this.readOut(page);
         this.reconcile(page, usable);
         this.shownPage = page;
@@ -144,6 +177,10 @@ export class Pagination {
         return Math.max(FIRST_PAGE, Math.ceil(total / pageSize));
     }
     componentDidRender() {
+        this.reportCorrection();
+        this.followJumpedPage();
+    }
+    reportCorrection() {
         const page = this.pendingCorrection;
         if (page === undefined) {
             return;
@@ -250,10 +287,23 @@ export class Pagination {
     handleLanguageChange() {
         this.numberFormat = undefined;
     }
+    /**
+     * A gap is remembered by the position it sits in, and the positions are
+     * worked out afresh every render. A page set from outside can put a page
+     * number where the open gap was, taking the popover down without it ever
+     * closing — and leaving it to spring open by itself the next time a gap
+     * lands there.
+     */
+    closeJumpWithoutAGap() {
+        var _a;
+        const open = this.openGap;
+        if (open !== undefined && ((_a = this.view.slots[open]) === null || _a === void 0 ? void 0 : _a.kind) !== 'gap') {
+            this.openGap = undefined;
+        }
+    }
     render() {
-        const { page, pageCount } = this.view;
-        const slots = this.slotsFor(page, pageCount);
-        return (h(Host, { key: '40d6123ac887f519fc31690fce7fcb46e73f2199' }, h("nav", { key: '183d264e761d168c74b8e2bfa8d04f3ee391c937', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'e59f62c2644a9a4a513ab3a3455854084434aabc', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        const { slots } = this.view;
+        return (h(Host, { key: 'fac46260ef2a4e1e8d4aad962c90477831b6497f' }, h("nav", { key: '239f0ba745b9a385064c4a2c91a572e70a9e6525', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '82fa3c9fb3fa8063be64d8373158d3d0e93138c1', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -270,6 +320,92 @@ export class Pagination {
         }
         return getPageSlots(page, pageCount);
     }
+    /**
+     * A gap is a button, not a marker: the pages it stands for are still
+     * reachable, and typing one is the only way to reach any of them in a
+     * single move.
+     *
+     * Both gaps open the same field, and it accepts any page in the set.
+     * Scoping each one to the pages it happens to hide would make two
+     * identical markers behave differently, with nothing on screen to say
+     * which is which.
+     *
+     * @param index - where the gap sits in the window
+     * @returns the rendered gap
+     */
+    renderGap(index) {
+        const { pageCount } = this.view;
+        // A gap stands for pages that were left out, which cannot have
+        // happened before the count arrived: until then `slotsFor` renders
+        // the page the user is on and nothing else.
+        if (pageCount === null) {
+            return;
+        }
+        return (h("limel-popover", { key: `gap-${index}`, open: this.openGap === index, openDirection: "bottom", onClose: this.closeJump }, h("button", { slot: "trigger", class: "gap", id: this.slotId(index), "aria-label": this.translate('pagination.jump-to-a-page'), "aria-disabled": this.loading ? 'true' : null, "data-index": index, onClick: this.openJump }, "\u00B7\u00B7\u00B7"), h("limel-pagination-jump", { open: this.openGap === index, page: this.view.page, pageCount: pageCount, loading: this.loading, language: this.languageForNumbers, onJump: this.handleJump })));
+    }
+    focusGap(index) {
+        var _a;
+        const gap = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[id="${this.slotId(index)}"]`);
+        gap === null || gap === void 0 ? void 0 : gap.focus();
+        this.jumpFocus = gap;
+    }
+    /**
+     * Put the keyboard on the page a jump asked for, once the consumer has
+     * shown it.
+     *
+     * Committing tears down the popover the field was in, so between asking
+     * and arriving focus is on nothing. If the user has since put it somewhere
+     * of their own, arriving is no longer ours to report.
+     */
+    followJumpedPage() {
+        if (this.awaitedJump === undefined) {
+            return;
+        }
+        if (!this.ownsFocus()) {
+            this.forgetJump();
+            return;
+        }
+        if (this.view.page !== this.awaitedJump) {
+            // Still showing the page the jump was asked from is what waiting
+            // looks like. Anywhere else is an answer too — the consumer chose
+            // to show something else — and a later arrival at the page we
+            // asked for is then no longer ours to follow.
+            if (this.view.page !== this.jumpedFrom) {
+                this.forgetJump();
+            }
+            return;
+        }
+        this.forgetJump();
+        this.focusCurrentPage();
+    }
+    forgetJump() {
+        this.awaitedJump = undefined;
+        this.jumpedFrom = undefined;
+    }
+    /**
+     * Whether the keyboard is still where the jump put it. Somewhere else
+     * inside this component means the user moved it and it is theirs.
+     *
+     * The marker itself can also go: jumping from the left gap to page 3
+     * turns that slot into a page number, and the button holding focus is
+     * taken away with it. A browser answers that by focusing the body rather
+     * than nothing, so the marker having left the page is what we look for.
+     */
+    ownsFocus() {
+        var _a, _b;
+        const inside = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+        if (inside === this.jumpFocus) {
+            return true;
+        }
+        return (!((_b = this.jumpFocus) === null || _b === void 0 ? void 0 : _b.isConnected) &&
+            document.activeElement === document.body);
+    }
+    focusCurrentPage() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="page"]');
+        button === null || button === void 0 ? void 0 : button.focus();
+        this.jumpFocus = undefined;
+    }
     /**
      * A spinner around the page the user is heading for, while it loads.
      *
@@ -332,13 +468,19 @@ export class Pagination {
         return pageCount === null || page >= pageCount;
     }
     /**
+     * The one path every move the user asks for goes through, and so the one
+     * place that refuses while a page is still being fetched.
+     *
      * @param page - the page to ask for, 1-based
+     * @returns whether it was asked for
      */
     goTo(page) {
-        if (page === this.currentPage) {
-            return;
+        this.awaitedJump = undefined;
+        if (this.loading || page === this.currentPage) {
+            return false;
         }
         this.emitGoToPage(page, 'user');
+        return true;
     }
     /** The page on screen: the one asked for, within the range that exists. */
     get currentPage() {
@@ -474,6 +616,17 @@ export class Pagination {
         (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
         return this.numberFormat.format(value);
     }
+    /**
+     * What the jump form is given, so that the one warning about a language
+     * this browser cannot write numbers in describes both of us. A tag it
+     * accepts but does not support, `zz`, resolves to the viewer's own locale
+     * rather than throwing, so asking the formatter is the only way to know.
+     */
+    get languageForNumbers() {
+        var _a;
+        (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
+        return this.settledLanguage;
+    }
     /**
      * `Intl.NumberFormat` throws on a language it cannot parse, and this is
      * called from `render`, so an unusable one would leave the control drawing
@@ -494,6 +647,7 @@ export class Pagination {
             const resolved = format.resolvedOptions().locale;
             if (getPrimarySubtag(resolved) === getPrimarySubtag(language)) {
                 this.warnedAbout.delete('language');
+                this.settledLanguage = language;
                 return format;
             }
         }
@@ -504,6 +658,7 @@ export class Pagination {
         // Where the translations land for the same unusable value, rather than
         // the viewer's own locale — English labels beside system digit
         // grouping would read differently on every machine.
+        this.settledLanguage = FALLBACK_LANGUAGE;
         return new Intl.NumberFormat(FALLBACK_LANGUAGE);
     }
     static get is() { return "limel-pagination"; }
@@ -631,7 +786,8 @@ export class Pagination {
     }
     static get states() {
         return {
-            "liveMessage": {}
+            "liveMessage": {},
+            "openGap": {}
         };
     }
     static get events() {
@@ -659,6 +815,7 @@ export class Pagination {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "language",

package/dist/collection/components/pagination/pagination.util.js

@@ -8,6 +8,30 @@ export const VISIBLE_SLOTS = 7;
 /** How many pages to keep either side of the current one. */
 const SIBLINGS = 1;
 const FIRST_PAGE = 1;
+/**
+ * The page a typed value asks for, or `null` when it asks for nothing.
+ *
+ * Out of range is not an error. The set has a first and a last page, both
+ * written under the field, and the nearer of them is what someone typing past
+ * the end meant.
+ *
+ * @param value - what was typed into the field
+ * @param pageCount - how many pages there are, or `null` when not yet known
+ * @returns a page within the set, or `null` when there is no number to use
+ */
+export function pageFromInput(value, pageCount) {
+    const typed = Number.parseInt(value, 10);
+    if (!Number.isSafeInteger(typed)) {
+        return null;
+    }
+    const atLeastFirst = Math.max(typed, FIRST_PAGE);
+    // Each bound on its own. Folding them into one `Math.min` against
+    // `pageCount ?? typed` handed the typed value back as its own upper
+    // bound, so without a count `0` stayed `0` rather than becoming page 1.
+    return pageCount === null
+        ? atLeastFirst
+        : Math.min(atLeastFirst, pageCount);
+}
 /**
  * Build the list of positions to render for a given page count.
  *
@@ -101,13 +125,6 @@ function withGaps(pages) {
         if (skipped === 1) {
             return [{ kind: 'page', page: page - 1 }, slot];
         }
-        return [
-            {
-                kind: 'gap',
-                from: pages[index - 1] + 1,
-                to: page - 1,
-            },
-            slot,
-        ];
+        return [{ kind: 'gap' }, slot];
     });
 }

package/dist/collection/components/popover/popover.js

@@ -77,20 +77,12 @@ export class Popover {
             focusTriggerElement(trigger);
         };
         this.setTriggerAttributes = (element) => {
-            const attributes = {
-                'aria-haspopup': true,
-                'aria-expanded': this.open,
-                'aria-controls': this.portalId,
-                role: 'button',
-            };
-            for (const [key, value] of Object.entries(attributes)) {
-                if (value) {
-                    element.setAttribute(key, String(value));
-                }
-                else {
-                    element.removeAttribute(key);
-                }
-            }
+            element.setAttribute('aria-haspopup', 'true');
+            // `aria-expanded` is needed even when the popover is closed. Without
+            // it, the trigger reads as an ordinary button to a screen reader.
+            element.setAttribute('aria-expanded', String(this.open));
+            element.setAttribute('aria-controls', this.portalId);
+            element.setAttribute('role', 'button');
         };
         this.portalId = createRandomString();
         this.globalClickListener = this.globalClickListener.bind(this);
@@ -102,9 +94,12 @@ export class Popover {
             setTimeout(this.focusTrigger, 0);
         }
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.setupGlobalHandlers();
     }
+    disconnectedCallback() {
+        this.teardownGlobalHandlers();
+    }
     componentDidRender() {
         if (!this.triggerSlot) {
             return;
@@ -113,21 +108,34 @@ export class Popover {
         this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
     }
     setupGlobalHandlers() {
-        if (this.open) {
-            document.addEventListener('click', this.globalClickListener, {
-                capture: true,
-            });
-            document.addEventListener('keydown', this.handleGlobalKeyPress);
-        }
-        else {
-            document.removeEventListener('click', this.globalClickListener);
-            document.removeEventListener('keydown', this.handleGlobalKeyPress);
+        // Stencil keeps firing `@Watch` on a detached instance, so `open` can
+        // still flip after `disconnectedCallback` has run. Listening then
+        // would swallow every click on the page, with no disconnect left to
+        // undo it.
+        if (!this.open || !this.host.isConnected) {
+            this.teardownGlobalHandlers();
+            return;
         }
+        document.addEventListener('click', this.globalClickListener, {
+            capture: true,
+        });
+        document.addEventListener('keydown', this.handleGlobalKeyPress);
+    }
+    /**
+     * The capture flag has to be given again: `removeEventListener` only
+     * matches a listener registered with the same one, so leaving it out here
+     * left the click listener on `document` for good.
+     */
+    teardownGlobalHandlers() {
+        document.removeEventListener('click', this.globalClickListener, {
+            capture: true,
+        });
+        document.removeEventListener('keydown', this.handleGlobalKeyPress);
     }
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: '096e54a6fdc88f6571884bf0a642c67f144d3bbf', class: "trigger-anchor" }, h("slot", { key: 'ddc46b8755f6463dc2320198aefc50ef759f9de4', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '89cce45b2218a2a5087f30f4d524d2c1b2041de2', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'a1d1edfb24fdbef9109adef03f8d77e6cced87c7', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: 'd34ccb8ce24c315432db83e6e1d998c4d230255f', class: "trigger-anchor" }, h("slot", { key: 'f2ab0bc064a439cecfee0fc75cb160cde227e018', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '047d3643c80c445c8b97f1c30a6b7a8c236beaa9', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '91c6f19807aeda2d37652bce452f6bd3cd6bcc9f', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;

package/dist/collection/translations/da.js

@@ -127,4 +127,8 @@ Du kan fortsætte med at blokere billeder (e-mailen kan se ufuldstændig ud) ell
     'pagination.go-to-page': 'Gå til side { page }',
     'pagination.current-page': 'Side { page }, nuværende side',
     'pagination.items-range': '{ from }–{ to } (af { total })',
+    'pagination.jump-to-a-page': 'Hop til en side',
+    'pagination.page-number': 'Sidenummer',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Gå',
 };

package/dist/collection/translations/de.js

@@ -127,4 +127,8 @@ Sie können Bilder weiterhin blockieren (die E-Mail kann unvollständig aussehen
     'pagination.go-to-page': 'Zu Seite { page } wechseln',
     'pagination.current-page': 'Seite { page }, aktuelle Seite',
     'pagination.items-range': '{ from }–{ to } (von { total })',
+    'pagination.jump-to-a-page': 'Zu einer Seite springen',
+    'pagination.page-number': 'Seitenzahl',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Los',
 };

package/dist/collection/translations/en.js

@@ -127,4 +127,8 @@ You can keep images blocked (the email may look incomplete), or load them if you
     'pagination.go-to-page': 'Go to page { page }',
     'pagination.current-page': 'Page { page }, current page',
     'pagination.items-range': '{ from }–{ to } (of { total })',
+    'pagination.jump-to-a-page': 'Jump to a page',
+    'pagination.page-number': 'Page number',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Go',
 };

package/dist/collection/translations/fi.js

@@ -127,4 +127,8 @@ Voit pitää kuvat estettyinä (sähköposti voi näyttää puutteelliselta) tai
     'pagination.go-to-page': 'Siirry sivulle { page }',
     'pagination.current-page': 'Sivu { page }, nykyinen sivu',
     'pagination.items-range': '{ from }–{ to } (yhteensä { total })',
+    'pagination.jump-to-a-page': 'Siirry tietylle sivulle',
+    'pagination.page-number': 'Sivunumero',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Siirry',
 };

package/dist/collection/translations/fr.js

@@ -127,4 +127,8 @@ Vous pouvez laisser les images bloquées (l'e-mail peut sembler incomplet) ou le
     'pagination.go-to-page': 'Aller à la page { page }',
     'pagination.current-page': 'Page { page }, page actuelle',
     'pagination.items-range': '{ from }–{ to } (sur { total })',
+    'pagination.jump-to-a-page': 'Aller à une page',
+    'pagination.page-number': 'Numéro de page',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Aller',
 };

package/dist/collection/translations/nl.js

@@ -127,4 +127,8 @@ Je kunt afbeeldingen geblokkeerd houden (de e-mail kan er onvolledig uitzien) of
     'pagination.go-to-page': 'Ga naar pagina { page }',
     'pagination.current-page': 'Pagina { page }, huidige pagina',
     'pagination.items-range': '{ from }–{ to } (van { total })',
+    'pagination.jump-to-a-page': 'Naar een pagina springen',
+    'pagination.page-number': 'Paginanummer',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Ga',
 };

package/dist/collection/translations/no.js

@@ -127,4 +127,8 @@ Du kan fortsette å blokkere bilder (e-posten kan se ufullstendig ut), eller las
     'pagination.go-to-page': 'Gå til side { page }',
     'pagination.current-page': 'Side { page }, gjeldende side',
     'pagination.items-range': '{ from }–{ to } (av { total })',
+    'pagination.jump-to-a-page': 'Hopp til en side',
+    'pagination.page-number': 'Sidenummer',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Gå',
 };

package/dist/collection/translations/sv.js

@@ -127,4 +127,8 @@ Du kan fortsätta blockera bilder (e-posten kan se ofullständig ut) eller ladda
     'pagination.go-to-page': 'Gå till sida { page }',
     'pagination.current-page': 'Sida { page }, aktuell sida',
     'pagination.items-range': '{ from }–{ to } (av { total })',
+    'pagination.jump-to-a-page': 'Hoppa till en sida',
+    'pagination.page-number': 'Sidnummer',
+    'pagination.page-range': '{ first }–{ last }',
+    'pagination.go': 'Gå',
 };