@limetech/lime-elements 40.6.0 → 40.6.1

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

@@ -93,12 +93,12 @@ export class PaginationJump {
         this.value = String(this.page);
         this.shouldFocusField = true;
     }
-    componentDidRender() {
+    async componentDidRender() {
         if (!this.shouldFocusField) {
             return;
         }
         this.shouldFocusField = false;
-        this.focusField();
+        await this.focusField();
     }
     render() {
         if (!this.open) {
@@ -135,16 +135,18 @@ export class PaginationJump {
      * 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() {
+    async 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();
-            });
+        if (!host) {
+            return;
+        }
+        await host.componentOnReady();
+        // 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();
         });
     }
     /**

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

@@ -113,10 +113,11 @@ export class Pagination {
             const page = event.detail;
             this.focusGap(this.openGap);
             this.openGap = undefined;
-            if (this.goTo(page)) {
-                this.awaitedJump = page;
-                this.jumpedFrom = this.view.page;
+            if (!this.goTo(page)) {
+                return;
             }
+            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.
@@ -303,7 +304,7 @@ export class Pagination {
     }
     render() {
         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)));
+        return (h(Host, { key: 'f2218cfa9c631d93e39ecee3a9823c3dd73ba505' }, h("nav", { key: '7b1989a9abdbf254b66d3d2780583749a3ecd44e', "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: 'ad9af64cb7885d6bb6227d5bb6897a267c1a598e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,

package/dist/collection/components/picker/picker.js

@@ -132,7 +132,7 @@ export class Picker {
         this.search = async (query) => {
             const timeoutId = setTimeout(() => {
                 this.loading = true;
-            });
+            }, 0);
             const searcher = this.searcher || this.defaultSearcher;
             const result = await searcher(this.textValue);
             // If the search function resolves immediately,
@@ -199,7 +199,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '3596e789685aa295baf079c38f4cc4cab0fa3317', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '5045ffdd72efce3465448fb8e1ae3044c32ffea2', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -483,32 +483,34 @@ export class Picker {
             listElement.focus();
             return;
         }
-        if (isUp) {
-            const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
-            const listElement = [...listItems].at(-1);
-            if (!listElement) {
-                return;
-            }
-            event.preventDefault();
-            listElement.focus();
+        if (!isUp) {
+            return;
         }
+        const listItems = list.shadowRoot.querySelectorAll('.mdc-deprecated-list-item');
+        const listElement = [...listItems].at(-1);
+        if (!listElement) {
+            return;
+        }
+        event.preventDefault();
+        listElement.focus();
     }
     handleSearchResult(query, result) {
         var _a;
-        if (query === this.textValue) {
-            let nextItems = result;
-            if (this.multiple) {
-                const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-                nextItems = result.filter((item) => {
-                    if ('separator' in item) {
-                        return true;
-                    }
-                    return !values.includes(item);
-                });
-            }
-            this.items = this.prependSearchHeader(query, nextItems);
-            this.loading = false;
+        if (query !== this.textValue) {
+            return;
         }
+        let nextItems = result;
+        if (this.multiple) {
+            const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
+            nextItems = result.filter((item) => {
+                if ('separator' in item) {
+                    return true;
+                }
+                return !values.includes(item);
+            });
+        }
+        this.items = this.prependSearchHeader(query, nextItems);
+        this.loading = false;
     }
     hasPickableItems(items) {
         return items.some((item) => !('separator' in item));

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

@@ -89,10 +89,11 @@ export class Popover {
     }
     watchOpen() {
         this.setupGlobalHandlers();
-        if (!this.open && this.shouldRestoreFocusOnClose) {
-            this.shouldRestoreFocusOnClose = false;
-            setTimeout(this.focusTrigger, 0);
+        if (this.open || !this.shouldRestoreFocusOnClose) {
+            return;
         }
+        this.shouldRestoreFocusOnClose = false;
+        setTimeout(this.focusTrigger, 0);
     }
     connectedCallback() {
         this.setupGlobalHandlers();
@@ -104,8 +105,9 @@ export class Popover {
         if (!this.triggerSlot) {
             return;
         }
-        // eslint-disable-next-line unicorn/no-array-for-each
-        this.triggerSlot.assignedElements().forEach(this.setTriggerAttributes);
+        for (const element of this.triggerSlot.assignedElements()) {
+            this.setTriggerAttributes(element);
+        }
     }
     setupGlobalHandlers() {
         // Stencil keeps firing `@Watch` on a detached instance, so `open` can
@@ -135,16 +137,17 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        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 }))));
+        return (h("div", { key: '5726846ff3f4ccc50067c63cab387ce9efa34e9b', class: "trigger-anchor" }, h("slot", { key: '9bc0082641e95e2345b0ae3eb548477827420e85', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'fb247bd41c2d0f62f598a0e7d21776661490c485', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '808155682967864b09f4344106cc0d1106f9e2c5', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
         const clickedInside = portalContains(this.host, element);
-        if (this.open && !clickedInside) {
-            event.stopPropagation();
-            event.preventDefault();
-            this.close.emit();
+        if (!this.open || clickedInside) {
+            return;
         }
+        event.stopPropagation();
+        event.preventDefault();
+        this.close.emit();
     }
     getCssProperties() {
         const propertyNames = [

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

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return h("div", { key: 'c3f7cda21c76bdd39eba1e8e4e28503561d28a7e', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '246fdc8fe255ae881e4ece6ae20bbb7f34a827b5', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/collection/components/portal/contains.js

@@ -11,14 +11,15 @@
  */
 export function portalContains(element, child) {
     var _a;
-    if (element.contains(child) || ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(child))) {
-        return true;
-    }
-    const parent = findParent(child);
-    if (!parent) {
-        return false;
-    }
-    return portalContains(element, parent);
+    let current = child;
+    do {
+        if (element.contains(current) ||
+            ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(current))) {
+            return true;
+        }
+        current = findParent(current);
+    } while (current);
+    return false;
 }
 function findParent(element) {
     const portal = element.closest('.limel-portal--container');

package/dist/collection/components/portal/portal.js

@@ -108,13 +108,14 @@ export class Portal {
         this.hideContainer();
         this.attachContainer();
         this.styleContainer();
-        if (this.visible) {
-            this.createPopper();
-            this.showContainer();
+        if (!this.visible) {
+            return;
         }
+        this.createPopper();
+        this.showContainer();
     }
     render() {
-        return h("slot", { key: 'ce5bfa7d65680773e1917e0a6d54256f5852bd65' });
+        return h("slot", { key: '7fd1ebea533dbbd8ff3df343830cc195e0a66555' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -141,11 +142,10 @@ export class Portal {
         Object.assign(this.container, {
             portalSource: this.host,
         });
-        // eslint-disable-next-line unicorn/no-array-for-each
-        content.forEach((element) => {
+        for (const element of content) {
             this.parents.set(element, element.parentElement);
             this.container.append(element);
-        });
+        }
     }
     attachContainer() {
         this.getParent().append(this.container);
@@ -154,14 +154,13 @@ export class Portal {
         if (!this.container) {
             return;
         }
-        // eslint-disable-next-line unicorn/no-array-for-each
-        [...this.container.children].forEach((element) => {
+        for (const element of [...this.container.children]) {
             const parent = this.parents.get(element);
             if (!parent) {
-                return;
+                continue;
             }
             parent.append(element);
-        });
+        }
         this.container.remove();
     }
     hideContainer() {
@@ -184,10 +183,11 @@ export class Portal {
                 return;
             }
             this.container.classList.remove(IS_HIDING_CLASS);
-            if (!this.visible) {
-                this.container.classList.remove(IS_VISIBLE_CLASS);
-                this.destroyPopper();
+            if (this.visible) {
+                return;
             }
+            this.container.classList.remove(IS_VISIBLE_CLASS);
+            this.destroyPopper();
         }, hideAnimationDuration);
     }
     styleContainer() {
@@ -217,8 +217,8 @@ export class Portal {
         return this.getContentWidth(elementContent);
     }
     setContainerStyles() {
-        for (const property of Object.keys(this.containerStyle)) {
-            this.container.style[property] = this.containerStyle[property];
+        for (const [property, value] of Object.entries(this.containerStyle)) {
+            this.container.style[property] = value;
         }
     }
     // Compared against what was last written rather than against

package/dist/collection/components/profile-picture/profile-picture.js

@@ -261,10 +261,11 @@ export class ProfilePicture {
         return undefined;
     }
     revokeObjectUrl() {
-        if (this.objectUrl) {
-            URL.revokeObjectURL(this.objectUrl);
-            this.objectUrl = undefined;
+        if (!this.objectUrl) {
+            return;
         }
+        URL.revokeObjectURL(this.objectUrl);
+        this.objectUrl = undefined;
     }
     static get is() { return "limel-profile-picture"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-flow/progress-flow.js

@@ -93,16 +93,17 @@ export class ProgressFlow {
     }
     scrollToSelectedItem() {
         const selectedElement = this.getElementForSelectedItem();
-        if (selectedElement) {
-            const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
-            const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
-            const selectedElementCentered = selectedElementLeftPositionCentered +
-                selectedElement.offsetWidth / 2;
-            this.element.scrollTo({
-                behavior: 'smooth',
-                left: selectedElementCentered,
-            });
+        if (!selectedElement) {
+            return;
         }
+        const selectedItemLeftPosition = selectedElement.offsetLeft - this.element.offsetLeft;
+        const selectedElementLeftPositionCentered = selectedItemLeftPosition - this.element.offsetWidth / 2;
+        const selectedElementCentered = selectedElementLeftPositionCentered +
+            selectedElement.offsetWidth / 2;
+        this.element.scrollTo({
+            behavior: 'smooth',
+            left: selectedElementCentered,
+        });
     }
     getElementForSelectedItem() {
         return this.element.shadowRoot.querySelector('.flow-item.selected');

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -37,7 +37,7 @@ export class RadioButtonGroup {
         };
     }
     render() {
-        return (h("limel-list", { key: '467b17f3d721555c52d871ab3f7b6a36cd70d6a6', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '1c3fef764fd84f4e84d38a4dbd04f2272fb73775', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/collection/components/radio-button-group/radio-button.js

@@ -31,12 +31,12 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonComponent {
     render() {
-        return (h(Host, { key: '01f0b56a991bc0a54e4ba09e7dd4a394d87d800a', class: {
+        return (h(Host, { key: '93e5adb101fd866a1c56e0233b32eddef6617a08', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '89371d4f79105022dc13ed8d50b9bf2004f4059a', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '7e7e210a4c703f69bfca2a3c8a5487be4221f0b4', class: "box" }), h("label", { key: 'b00bd3ac42a5b8e3691d9b5e698b59752ab795f1', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '816bc49ab2f8bd6fcbaa8d10c7b5250fd64aa044', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'e4656777d40210f46c5f28deace470a90f41cfdf', class: "box" }), h("label", { key: 'c27a557fea46c0951a0aed27df40a61b30809550', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {