@limetech/lime-elements 40.4.1 → 40.5.0

package/dist/collection/components/menu/menu.js

@@ -84,6 +84,7 @@ export class Menu {
         this.keepOpenOnSelect = false;
         this.shouldRestoreFocusOnClose = false;
         this.normalizedHotkeyCache = new Map();
+        this.triggersDisabledByMenu = new WeakSet();
         this.cachedSubMenuSource = null;
         this.cachedSubMenuItems = null;
         this.handleDocumentKeyDown = (event) => {
@@ -363,20 +364,32 @@ export class Menu {
             this.handleSelect(parent);
         };
         this.setTriggerAttributes = (element) => {
-            const attributes = {
-                'aria-haspopup': true,
-                'aria-expanded': this.open,
-                'aria-controls': this.portalId,
-                disabled: this.disabled,
-                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');
+            element.setAttribute('aria-controls', this.portalId);
+            element.setAttribute('role', 'button');
+            // `aria-expanded` is needed even when the menu is closed. Without
+            // it, the trigger reads as an ordinary button to a screen reader.
+            element.setAttribute('aria-expanded', String(this.open));
+            this.setTriggerDisabled(element);
+        };
+        /**
+         * `disabled` has to be removed rather than set to `false`, because the
+         * presence of the attribute is what disables the element. Only the one the
+         * menu put there may go: a consumer can disable their own trigger, and
+         * stripping that attribute would re-enable it on every render.
+         * @param element - the slotted trigger element
+         */
+        this.setTriggerDisabled = (element) => {
+            if (this.disabled) {
+                if (!element.hasAttribute('disabled')) {
+                    element.setAttribute('disabled', 'true');
+                    this.triggersDisabledByMenu.add(element);
                 }
+                return;
+            }
+            if (this.triggersDisabledByMenu.has(element)) {
+                element.removeAttribute('disabled');
+                this.triggersDisabledByMenu.delete(element);
             }
         };
         this.onClose = () => {
@@ -579,7 +592,7 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '60e7d159ae0a65582f3184b6a6bfe6c252fe7850', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'f492115bc3b7115964814883bc103a00496d0178', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'a38e4fbab9a03fb34b86030d2782a2215ed72650', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'dd95ff8c4fc87135cdd00cf5174cef72af61c31d', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: 'c66307a5cc7257e2b394f0b5d56d6fbc6fce18b1', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '7c37448e29deaee202f74d3288d21697529c82b5', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'f7f1b14ae5c6e19fa8e9651c2a847db0bb246427', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'c2fd7257bfe8ccf820b8aabc6a8959f6d5d1cd2f', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }
@@ -589,24 +602,33 @@ export class Menu {
         this.setFocus();
     }
     connectedCallback() {
-        if (this.open) {
-            document.addEventListener('keydown', this.handleDocumentKeyDown, true);
-        }
+        this.setupGlobalHandlers();
     }
     disconnectedCallback() {
-        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
+        this.teardownGlobalHandlers();
     }
     openWatcher(newValue) {
-        const opened = newValue;
-        if (opened) {
-            document.addEventListener('keydown', this.handleDocumentKeyDown, true);
+        this.setupGlobalHandlers();
+        if (newValue) {
             this.setFocus();
         }
         else {
-            document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
             this.clearSearch();
         }
     }
+    setupGlobalHandlers() {
+        // Stencil keeps firing `@Watch` on a detached instance, so `open` can
+        // still flip after `disconnectedCallback` has run. Listening then
+        // would leave a listener behind that no disconnect takes down.
+        if (!this.open || !this.host.isConnected) {
+            this.teardownGlobalHandlers();
+            return;
+        }
+        document.addEventListener('keydown', this.handleDocumentKeyDown, true);
+    }
+    teardownGlobalHandlers() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
+    }
     isFromTextInput(event) {
         const path = typeof event.composedPath === 'function'
             ? event.composedPath()

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

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  min-width: 12rem;
+}
+
+:host(:not([open])) {
+  display: none;
+}

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;