@limetech/lime-elements 40.4.2 → 40.5.0

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

@@ -0,0 +1,331 @@
+import { h, Host, } from "@stencil/core";
+import translate from "../../../global/translations";
+import { ENTER } from "../../../util/keycodes";
+import { pageFromInput } from "../pagination.util";
+const FIRST_PAGE = 1;
+const FALLBACK_LANGUAGE = 'en';
+/**
+ * A field for going straight to a page, which `limel-pagination` puts inside
+ * the popover its `···` opens.
+ *
+ * It draws nothing until it is opened, so a pagination that is merely on
+ * screen pays for an empty element rather than a form. It lives in a
+ * component of its own because the popover carries its content into a shadow
+ * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+ * a component brings its own.
+ *
+ * @private
+ * @exampleComponent limel-example-pagination-jump-basic
+ */
+export class PaginationJump {
+    constructor() {
+        /**
+         * Whether the field is being shown.
+         */
+        this.open = false;
+        /**
+         * The page to start from, which is the one the user is on.
+         */
+        this.page = FIRST_PAGE;
+        /**
+         * How many pages there are, which is as far as a jump can go.
+         */
+        this.pageCount = FIRST_PAGE;
+        /**
+         * Set while a page is being fetched, so that another cannot be asked for.
+         */
+        this.loading = false;
+        /**
+         * The language used for the labels and for the way numbers are written.
+         */
+        this.language = 'en';
+        /** What the field shows: the page it opened with, then what is typed. */
+        this.value = '';
+        this.shouldFocusField = false;
+        /**
+         * Only to keep what is on screen honest. `limel-input-field` draws an
+         * unfocused number through its `value` prop, so a field left pinned to
+         * the page it opened with would show that again the moment the keyboard
+         * moved to the button, while the button submitted something else.
+         *
+         * @param event - the field reporting what it now holds
+         */
+        this.handleChange = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.value = String((_a = event.detail) !== null && _a !== void 0 ? _a : '');
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== ENTER) {
+                return;
+            }
+            event.preventDefault();
+            this.commit();
+        };
+        this.commit = () => {
+            const page = this.target;
+            if (page === null || this.loading) {
+                return;
+            }
+            this.jump.emit(page);
+        };
+        this.setField = (element) => {
+            this.field = element;
+        };
+        this.translate = (key, params) => {
+            return translate.get(key, this.language, params);
+        };
+    }
+    componentWillLoad() {
+        this.handleOpenChange();
+    }
+    handleLanguageChange() {
+        this.numberFormat = undefined;
+    }
+    /**
+     * Opening starts the field again rather than leaving what was last typed,
+     * so it always offers the page the user is on now.
+     */
+    handleOpenChange() {
+        if (!this.open) {
+            return;
+        }
+        this.value = String(this.page);
+        this.shouldFocusField = true;
+    }
+    componentDidRender() {
+        if (!this.shouldFocusField) {
+            return;
+        }
+        this.shouldFocusField = false;
+        this.focusField();
+    }
+    render() {
+        if (!this.open) {
+            return;
+        }
+        return (h(Host, { onKeyDown: this.handleKeyDown }, h("limel-input-field", { type: "number", label: this.translate('pagination.page-number'), placeholder: this.pageRange, value: this.value, onChange: this.handleChange, min: FIRST_PAGE, max: this.pageCount, step: 1, ref: this.setField }), h("limel-button", { primary: true, label: this.translate('pagination.go'), disabled: this.loading, onClick: this.commit })));
+    }
+    /**
+     * The page that is in the field now, or `null` when it holds none.
+     *
+     * Read from the field itself rather than from its `change` event, which
+     * arrives on a debounce: a page typed and submitted inside that window
+     * would otherwise be submitted as whatever preceded it.
+     */
+    get target() {
+        var _a, _b;
+        const typed = (_b = (_a = this.nativeField) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
+        return pageFromInput(typed, this.pageCount);
+    }
+    /** `1–492`, so that being moved to 492 is a stated bound, not a surprise. */
+    get pageRange() {
+        return this.translate('pagination.page-range', {
+            first: this.formatNumber(FIRST_PAGE),
+            last: this.formatNumber(this.pageCount),
+        });
+    }
+    /** `limel-input-field` wraps a native field but does not expose it. */
+    get nativeField() {
+        var _a, _b;
+        return (_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    }
+    /**
+     * The field delegates focus to the input it wraps, so focusing the host
+     * is enough. Selecting as well, so the page the user is on is both the
+     * starting value and out of the way of the first keystroke.
+     */
+    focusField() {
+        const host = this.field;
+        host === null || host === void 0 ? void 0 : host.componentOnReady().then(() => {
+            // A frame later, so the popover has been put where it belongs
+            // before the field takes the keyboard.
+            requestAnimationFrame(() => {
+                var _a, _b;
+                host.focus();
+                (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.select();
+            });
+        });
+    }
+    /**
+     * The parent warns about a language it cannot use, so this one only has
+     * to keep drawing.
+     *
+     * @param value - the number to write out
+     * @returns the number in the current language
+     */
+    formatNumber(value) {
+        var _a;
+        (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
+        return this.numberFormat.format(value);
+    }
+    /**
+     * The pagination hands down the language it settled on, so this only has
+     * to survive being handed one directly, as the example page does.
+     *
+     * @returns a formatter, in that language where it can be used
+     */
+    createNumberFormat() {
+        try {
+            return new Intl.NumberFormat(this.language);
+        }
+        catch (_a) {
+            return new Intl.NumberFormat(FALLBACK_LANGUAGE);
+        }
+    }
+    static get is() { return "limel-pagination-jump"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pagination-jump.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pagination-jump.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is being shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "page": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The page to start from, which is the one the user is on."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page",
+                "defaultValue": "1"
+            },
+            "pageCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many pages there are, which is as far as a jump can go."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-count",
+                "defaultValue": "1"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set while a page is being fetched, so that another cannot be asked for."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language used for the labels and for the way numbers are written."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "jump",
+                "name": "jump",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks for the page that was typed, already brought within the set."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "handleLanguageChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}

package/dist/collection/components/pagination/pagination.css

@@ -186,14 +186,18 @@ button limel-spinner {
   pointer-events: none;
 }
 
-.gap {
+limel-popover {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.75rem;
+}
+
+.gap {
   width: 1.75rem;
+  padding: 0;
   color: rgb(var(--contrast-1100));
 }
+.gap[aria-expanded=true] {
+  box-shadow: var(--button-shadow-inset-pressed) !important;
+}
 
 .arrow span {
   display: block;

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];
     });
 }