@limetech/lime-elements 40.2.2 → 40.2.4

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

@@ -44,6 +44,9 @@ const hideAnimationDuration = 300;
  * @exampleComponent limel-example-portal-basic
  */
 export class Portal {
+    get anchorElement() {
+        return this.anchor || this.host;
+    }
     constructor() {
         /**
          * Decides which direction the portal content should open.
@@ -75,14 +78,13 @@ export class Portal {
          */
         this.anchor = null;
         this.loaded = false;
+        this.writtenStyles = {};
         this.parents = new WeakMap();
     }
     disconnectedCallback() {
         this.removeContainer();
         this.destroyPopper();
-        if (this.observer && this.container) {
-            this.observer.unobserve(this.container);
-        }
+        this.observer = null;
         this.container = null;
     }
     connectedCallback() {
@@ -109,18 +111,9 @@ export class Portal {
             this.createPopper();
             this.showContainer();
         }
-        if ('ResizeObserver' in window) {
-            this.observer = new ResizeObserver(() => {
-                if (this.popperInstance) {
-                    this.styleContainer();
-                    this.popperInstance.update();
-                }
-            });
-            this.observer.observe(this.container);
-        }
     }
     render() {
-        return h("slot", { key: '7a76d96c24d8404f46205dc00cc2351be9fe1c19' });
+        return h("slot", { key: '18852003d1bf5f0aeb7c18f73eb26f37e8c75294' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -140,6 +133,7 @@ export class Portal {
     createContainer() {
         const slot = this.host.shadowRoot.querySelector('slot');
         const content = (slot.assignedElements && slot.assignedElements()) || [];
+        this.writtenStyles = {};
         this.container = document.createElement('div');
         this.container.setAttribute('id', this.containerId);
         this.container.setAttribute('class', 'limel-portal--container');
@@ -196,20 +190,19 @@ export class Portal {
         }, hideAnimationDuration);
     }
     styleContainer() {
-        this.setContainerWidth();
-        this.setContainerHeight();
+        const hostRect = this.host.getBoundingClientRect();
+        this.setContainerWidth(hostRect);
+        this.setContainerHeight(hostRect);
         this.setContainerStyles();
     }
-    setContainerWidth() {
-        const hostWidth = this.host.getBoundingClientRect().width;
-        if (this.inheritParentWidth) {
-            const containerWidth = this.getContentWidth(this.container);
-            let width = containerWidth;
-            if (hostWidth > 0) {
-                width = hostWidth;
-            }
-            this.container.style.width = `${width}px`;
+    setContainerWidth(hostRect) {
+        if (!this.inheritParentWidth) {
+            return;
         }
+        const width = hostRect.width > 0
+            ? hostRect.width
+            : this.getContentWidth(this.container);
+        this.setContainerStyle('width', `${width}px`);
     }
     getContentWidth(element) {
         if (!element) {
@@ -227,15 +220,42 @@ export class Portal {
             this.container.style[property] = this.containerStyle[property];
         }
     }
+    // Compared against what was last written rather than against
+    // `container.style`, which serializes lengths to six significant digits
+    // and so never reads back a fractional width verbatim.
+    setContainerStyle(property, value) {
+        if (this.writtenStyles[property] === value) {
+            return;
+        }
+        this.writtenStyles[property] = value;
+        this.container.style[property] = value;
+    }
     createPopper() {
+        this.destroyPopper();
         const config = this.createPopperConfig();
-        this.popperInstance = createPopper(this.anchor || this.host, this.container, config);
+        this.popperInstance = createPopper(this.anchorElement, this.container, config);
+        this.observeResize();
     }
     destroyPopper() {
-        var _a;
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        var _a, _b;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.destroy();
         this.popperInstance = null;
     }
+    observeResize() {
+        var _a;
+        if (!('ResizeObserver' in window)) {
+            return;
+        }
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new ResizeObserver(() => {
+            if (this.popperInstance) {
+                this.styleContainer();
+                this.popperInstance.update();
+            }
+        }));
+        this.observer.observe(this.container);
+        this.observer.observe(this.anchorElement);
+    }
     createPopperConfig() {
         const placement = this.getPlacement(this.openDirection);
         const flipPlacement = this.getFlipPlacement(this.openDirection);
@@ -286,20 +306,19 @@ export class Portal {
         };
         return flipPlacements[direction];
     }
-    setContainerHeight() {
+    setContainerHeight(hostRect) {
         const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-        const { top, bottom } = this.host.getBoundingClientRect();
-        const spaceAboveTopOfSurface = Math.max(top, 0);
-        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);
+        const spaceAboveTopOfSurface = Math.max(hostRect.top, 0);
+        const spaceBelowTopOfSurface = Math.max(viewHeight - hostRect.bottom, 0);
         const extraCosmeticSpace = 16;
-        const maxHeight = Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -
-            extraCosmeticSpace;
-        this.container.style.maxHeight = `${maxHeight}px`;
+        const maxHeight = Math.max(0, Math.round(Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -
+            extraCosmeticSpace));
+        this.setContainerStyle('maxHeight', `${maxHeight}px`);
     }
     // Returns the parent element where the content of the portal will be moved to.
     // It needs to have styling of the portal container.
     getParent() {
-        let element = this.anchor || this.host;
+        let element = this.anchorElement;
         while (element) {
             const parent = element.closest('.limel-portal--parent');
             if (parent) {

package/dist/collection/components/select/select.css

@@ -136,8 +136,7 @@
   will-change: grid-template-rows;
 }
 
-.limel-select--focused + limel-helper-line,
-.limel-select--invalid limel-helper-line {
+div.limel-select__field--open limel-helper-line {
   --limel-h-l-grid-template-rows-transition-speed: 0.46s;
   --limel-h-l-grid-template-rows: 1fr;
 }

package/dist/collection/components/select/select.js

@@ -274,12 +274,12 @@ export class Select {
         trigger.focus();
     }
     // During the first render(), the shadow DOM isn't populated yet, so
-    // querySelector('.limel-select-trigger') returns null and we fall back
+    // querySelector('.limel-select__field') returns null and we fall back
     // to this.host. componentDidLoad() calls updatePortalAnchor() to
     // imperatively refresh the anchor once the shadow DOM is available.
     getAnchorElement() {
         var _a;
-        return ((_a = this.host.shadowRoot.querySelector('.limel-select-trigger')) !== null && _a !== void 0 ? _a : this.host);
+        return ((_a = this.host.shadowRoot.querySelector('.limel-select__field')) !== null && _a !== void 0 ? _a : this.host);
     }
     updatePortalAnchor() {
         const portal = this.host.shadowRoot.querySelector('limel-portal');

package/dist/collection/components/select/select.template.js

@@ -25,9 +25,12 @@ export const SelectTemplate = (props) => {
         'limel-select--invalid': !isValid,
         'limel-select--with-helper-text': typeof props.helperText === 'string',
     };
+    const fieldClassList = {
+        'limel-select__field': true,
+        'limel-select__field--open': props.isOpen,
+    };
     return [
-        h("limel-notched-outline", { class: classList, labelId: "s-label", label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: floatLabelAbove(props) }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))),
-        h(HelperText, { text: props.helperText, isValid: !props.invalid }),
+        h("div", { class: fieldClassList }, h("limel-notched-outline", { class: classList, labelId: "s-label", label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: floatLabelAbove(props) }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))), h(HelperText, { text: props.helperText, isValid: isValid })),
         h(SelectDropdown, Object.assign({}, props)),
     ];
 };

package/dist/collection/components/table/table.js

@@ -74,6 +74,7 @@ export class Table {
          */
         this.paginationLocation = 'bottom';
         this.initialized = false;
+        this.pendingColumnRefresh = false;
         this.destroyed = false;
         this.shouldSort = false;
         this.hasWarnedOnConflictingMovableAndSortable = false;
@@ -162,6 +163,7 @@ export class Table {
         var _a;
         this.destroyed = true;
         this.initialized = false;
+        this.pendingColumnRefresh = false;
         (_a = this.rowDragManager) === null || _a === void 0 ? void 0 : _a.destroy();
         this.rowDragManager = null;
         if (this.resizeObserver) {
@@ -229,7 +231,8 @@ export class Table {
         });
     }
     updateColumns(newColumns, oldColumns) {
-        if (!this.tabulator) {
+        if (!this.tabulator || !this.initialized) {
+            this.pendingColumnRefresh = true;
             return;
         }
         if (this.areSameColumns(newColumns, oldColumns)) {
@@ -246,7 +249,8 @@ export class Table {
         this.shouldSort = true;
     }
     updateAggregates(newAggregates, oldAggregates) {
-        if (!this.tabulator) {
+        if (!this.tabulator || !this.initialized) {
+            this.pendingColumnRefresh = true;
             return;
         }
         if (isEqual(newAggregates, oldAggregates)) {
@@ -282,7 +286,8 @@ export class Table {
     }
     updateSortableColumns() {
         this.warnOnConflictingMovableAndSortable();
-        if (!this.tabulator) {
+        if (!this.tabulator || !this.initialized) {
+            this.pendingColumnRefresh = true;
             return;
         }
         this.tabulator.setColumns(this.getColumnDefinitions());
@@ -417,6 +422,7 @@ export class Table {
                 return;
             }
             this.initialized = true;
+            this.applyPendingColumnRefresh();
             if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) {
                 this.updateData(this.data, []);
                 if (this.isRemoteMode()) {
@@ -429,6 +435,14 @@ export class Table {
         });
         return tabulator;
     }
+    applyPendingColumnRefresh() {
+        if (!this.pendingColumnRefresh || !this.tabulator) {
+            return;
+        }
+        this.pendingColumnRefresh = false;
+        this.tabulator.setColumns(this.getColumnDefinitions());
+        this.tabulator.recalc();
+    }
     initRowDragManager() {
         if (this.movableRows) {
             this.rowDragManager = new RowDragManager(this.pool, this.reorder, () => this.language);
@@ -734,13 +748,13 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: 'abde9eef09b7816ace05ec610cd4ddce67fa5ed3', class: {
+        return (h(Host, { key: 'bdf212a18d552e674b125bc7211720a4c12017c9', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-pagination': totalRows > this.pageSize,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: 'bc980a5060588b1b639dfa2136e560b81a36af56', id: "tabulator-container" }, h("div", { key: '0314fff7389a8daf170819b37d0477e8cdb8f5f1', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '285d6d51846d26edf9b0bcc154178c2694bb0dba', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'add09d7a5c4d43981af2f966bb481b74b724928f', id: "tabulator-table" }))));
+            } }, h("div", { key: '7e2255cc81d1df9ec44b0b10de49ef1dff6c6119', id: "tabulator-container" }, h("div", { key: 'c413d5abefd874be1d7da0764ff6c8b41c096ec0', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'f2018824ceef425f572839540a543d71d19b77b3', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '27dcea556552419f9c904320192c847b94742d2c', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/esm/limel-hotkey_4.entry.js

@@ -1919,6 +1919,9 @@ const IS_VISIBLE_CLASS = 'is-visible';
 const IS_HIDING_CLASS = 'is-hiding';
 const hideAnimationDuration = 300;
 const Portal = class {
+    get anchorElement() {
+        return this.anchor || this.host;
+    }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
@@ -1951,14 +1954,13 @@ const Portal = class {
          */
         this.anchor = null;
         this.loaded = false;
+        this.writtenStyles = {};
         this.parents = new WeakMap();
     }
     disconnectedCallback() {
         this.removeContainer();
         this.destroyPopper();
-        if (this.observer && this.container) {
-            this.observer.unobserve(this.container);
-        }
+        this.observer = null;
         this.container = null;
     }
     connectedCallback() {
@@ -1985,18 +1987,9 @@ const Portal = class {
             this.createPopper();
             this.showContainer();
         }
-        if ('ResizeObserver' in window) {
-            this.observer = new ResizeObserver(() => {
-                if (this.popperInstance) {
-                    this.styleContainer();
-                    this.popperInstance.update();
-                }
-            });
-            this.observer.observe(this.container);
-        }
     }
     render() {
-        return h("slot", { key: '7a76d96c24d8404f46205dc00cc2351be9fe1c19' });
+        return h("slot", { key: '18852003d1bf5f0aeb7c18f73eb26f37e8c75294' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -2016,6 +2009,7 @@ const Portal = class {
     createContainer() {
         const slot = this.host.shadowRoot.querySelector('slot');
         const content = (slot.assignedElements && slot.assignedElements()) || [];
+        this.writtenStyles = {};
         this.container = document.createElement('div');
         this.container.setAttribute('id', this.containerId);
         this.container.setAttribute('class', 'limel-portal--container');
@@ -2072,20 +2066,19 @@ const Portal = class {
         }, hideAnimationDuration);
     }
     styleContainer() {
-        this.setContainerWidth();
-        this.setContainerHeight();
+        const hostRect = this.host.getBoundingClientRect();
+        this.setContainerWidth(hostRect);
+        this.setContainerHeight(hostRect);
         this.setContainerStyles();
     }
-    setContainerWidth() {
-        const hostWidth = this.host.getBoundingClientRect().width;
-        if (this.inheritParentWidth) {
-            const containerWidth = this.getContentWidth(this.container);
-            let width = containerWidth;
-            if (hostWidth > 0) {
-                width = hostWidth;
-            }
-            this.container.style.width = `${width}px`;
+    setContainerWidth(hostRect) {
+        if (!this.inheritParentWidth) {
+            return;
         }
+        const width = hostRect.width > 0
+            ? hostRect.width
+            : this.getContentWidth(this.container);
+        this.setContainerStyle('width', `${width}px`);
     }
     getContentWidth(element) {
         if (!element) {
@@ -2103,15 +2096,42 @@ const Portal = class {
             this.container.style[property] = this.containerStyle[property];
         }
     }
+    // Compared against what was last written rather than against
+    // `container.style`, which serializes lengths to six significant digits
+    // and so never reads back a fractional width verbatim.
+    setContainerStyle(property, value) {
+        if (this.writtenStyles[property] === value) {
+            return;
+        }
+        this.writtenStyles[property] = value;
+        this.container.style[property] = value;
+    }
     createPopper() {
+        this.destroyPopper();
         const config = this.createPopperConfig();
-        this.popperInstance = createPopper(this.anchor || this.host, this.container, config);
+        this.popperInstance = createPopper(this.anchorElement, this.container, config);
+        this.observeResize();
     }
     destroyPopper() {
-        var _a;
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        var _a, _b;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.destroy();
         this.popperInstance = null;
     }
+    observeResize() {
+        var _a;
+        if (!('ResizeObserver' in window)) {
+            return;
+        }
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new ResizeObserver(() => {
+            if (this.popperInstance) {
+                this.styleContainer();
+                this.popperInstance.update();
+            }
+        }));
+        this.observer.observe(this.container);
+        this.observer.observe(this.anchorElement);
+    }
     createPopperConfig() {
         const placement = this.getPlacement(this.openDirection);
         const flipPlacement = this.getFlipPlacement(this.openDirection);
@@ -2162,20 +2182,19 @@ const Portal = class {
         };
         return flipPlacements[direction];
     }
-    setContainerHeight() {
+    setContainerHeight(hostRect) {
         const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-        const { top, bottom } = this.host.getBoundingClientRect();
-        const spaceAboveTopOfSurface = Math.max(top, 0);
-        const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);
+        const spaceAboveTopOfSurface = Math.max(hostRect.top, 0);
+        const spaceBelowTopOfSurface = Math.max(viewHeight - hostRect.bottom, 0);
         const extraCosmeticSpace = 16;
-        const maxHeight = Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -
-            extraCosmeticSpace;
-        this.container.style.maxHeight = `${maxHeight}px`;
+        const maxHeight = Math.max(0, Math.round(Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -
+            extraCosmeticSpace));
+        this.setContainerStyle('maxHeight', `${maxHeight}px`);
     }
     // Returns the parent element where the content of the portal will be moved to.
     // It needs to have styling of the portal container.
     getParent() {
-        let element = this.anchor || this.host;
+        let element = this.anchorElement;
         while (element) {
             const parent = element.closest('.limel-portal--parent');
             if (parent) {