@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-dropdown/xpl-dropdown.js

@@ -1,31 +1,20 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { h, Host, } from "@stencil/core";
-import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
+import { dropdownMiddleware, getSide, startFloating, } from "../../utils/floating";
+import { isBrowser } from "../../utils/lifecycle";
 const VIRTUAL_LIST = {
     rowHeight: 45,
     overscan: 20,
     virtualizeFrom: 200,
 };
 function renderOption(option, virtualIndex) {
-    const { groupName, options: opts, subtitle } = option, properties = __rest(option, ["groupName", "options", "subtitle"]);
+    const { groupName, options: opts, subtitle, ...properties } = option;
     if (groupName) {
-        return (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties)));
+        return (h("xpl-dropdown-group", { groupName: groupName, options: opts, ...properties }));
     }
     const isVirtual = virtualIndex !== undefined;
-    return (h("xpl-dropdown-option", Object.assign({ class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+    return (h("xpl-dropdown-option", { class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
             ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
-            : undefined, subtitle: subtitle }, properties)));
+            : undefined, subtitle: subtitle, ...properties }));
 }
 export class Dropdown {
     constructor() {
@@ -37,73 +26,19 @@ export class Dropdown {
         this.anchorToTrigger = false;
         this.placement = 'bottom-start';
         this.selectOnFocus = false;
-        this.cleanupAutoUpdate = null;
+        this.floating = null;
         this.virtualScrollRaf = null;
         this.openAlignmentRaf = null;
         this.previousOptionCount = 0;
-        this.updateDropdownPosition = async (triggerEl) => {
-            var _a, _b;
-            const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
-                strategy: 'fixed',
-                placement: this.placement,
-                middleware: [
-                    offset(4),
-                    flip(((_a = this.flipFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length)
-                        ? { fallbackPlacements: this.flipFallbackPlacements }
-                        : {}),
-                    size({
-                        apply: ({ availableHeight, rects }) => {
-                            const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
-                            let usedBeforeList = 0;
-                            if (listEl) {
-                                const children = Array.from(this.hostElement.children);
-                                const listIndex = children.indexOf(listEl);
-                                children.slice(0, listIndex).forEach((child) => {
-                                    if (child instanceof HTMLElement) {
-                                        usedBeforeList += child.offsetHeight;
-                                    }
-                                });
-                            }
-                            const cs = getComputedStyle(this.hostElement);
-                            const hostVerticalChrome = parseFloat(cs.paddingTop) +
-                                parseFloat(cs.paddingBottom) +
-                                parseFloat(cs.borderTopWidth) +
-                                parseFloat(cs.borderBottomWidth);
-                            const cssMaxHeight = listEl
-                                ? parseFloat(getComputedStyle(listEl).getPropertyValue('--xpl-dropdown-list-max-height'))
-                                : Infinity;
-                            const listMaxHeight = Math.min(cssMaxHeight, Math.max(0, availableHeight - usedBeforeList - hostVerticalChrome));
-                            Object.assign(this.hostElement.style, {
-                                width: `${rects.reference.width}px`,
-                            });
-                            if (listEl) {
-                                listEl.style.maxHeight = `${listMaxHeight}px`;
-                            }
-                        },
-                    }),
-                    hide(),
-                ],
-            });
-            if (!this.cleanupAutoUpdate)
-                return;
-            if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
-                this.isOpen = false;
-                return;
-            }
-            const isAbove = placement.startsWith('top');
-            Object.assign(this.hostElement.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            this.hostElement.classList.toggle('xpl-dropdown--above', isAbove);
-            this.hostElement.classList.toggle('xpl-dropdown--below', !isAbove);
-        };
         this.handleClickOutside = ({ target }) => {
             const { triggerId } = this;
+            const targetEl = target;
             const triggerElement = triggerId ? document.getElementById(triggerId) : null;
-            const isTriggerOrChild = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(target);
-            const isInside = this.hostElement.contains(target);
-            if (!isInside && !isTriggerOrChild && this.isOpen) {
+            const isTriggerOrChild = triggerElement?.contains(targetEl);
+            const isInside = this.hostElement.contains(targetEl);
+            const labelEl = targetEl?.closest('label');
+            const isTriggerLabel = !!labelEl && !!triggerId && labelEl.getAttribute('for') === triggerId;
+            if (!isInside && !isTriggerOrChild && !isTriggerLabel && this.isOpen) {
                 this.isOpen = false;
             }
         };
@@ -121,13 +56,12 @@ export class Dropdown {
             });
         };
         this.setListEl = (el) => {
-            var _a, _b;
             if (el === this.listEl)
                 return;
             this.listEl = el;
-            (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.listResizeObserver?.disconnect();
             if (el && typeof ResizeObserver !== 'undefined') {
-                (_b = this.listResizeObserver) !== null && _b !== void 0 ? _b : (this.listResizeObserver = new ResizeObserver(() => {
+                this.listResizeObserver ?? (this.listResizeObserver = new ResizeObserver(() => {
                     if (this.isVirtualized)
                         this.handleVirtualScroll();
                 }));
@@ -145,8 +79,7 @@ export class Dropdown {
         };
     }
     onOptionsChanged() {
-        var _a, _b, _c, _d;
-        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const total = this.options?.length ?? 0;
         const listReplaced = total !== this.previousOptionCount;
         this.previousOptionCount = total;
         if (!this.isVirtualized) {
@@ -161,7 +94,7 @@ export class Dropdown {
                 list.scrollTop = maxScroll;
             }
             if (this.isOpen && listReplaced) {
-                const selectedIndex = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex((option) => option.isSelected)) !== null && _d !== void 0 ? _d : -1;
+                const selectedIndex = this.options?.findIndex((option) => option.isSelected) ?? -1;
                 const outOfWindow = selectedIndex >= 0 &&
                     (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
                 if (outOfWindow) {
@@ -195,7 +128,7 @@ export class Dropdown {
         if (this.options && this.options.length > 0) {
             const flatOptions = this.options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
             flatOptions.forEach((option) => {
-                const optionValue = option.value || option.label;
+                const optionValue = option.value || option.label || '';
                 if (this.mode === 'single') {
                     option.isSelected = optionValue === newValues;
                 }
@@ -205,7 +138,7 @@ export class Dropdown {
                 }
             });
             const mapOptions = (option) => {
-                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                option.options = option.groupName ? option.options?.map(mapOptions) : undefined;
                 return option;
             };
             this.options = this.options.map(mapOptions);
@@ -228,24 +161,25 @@ export class Dropdown {
         }
     }
     connectedCallback() {
+        if (!isBrowser()) {
+            return;
+        }
         document.addEventListener('mousedown', this.handleClickOutside);
         document.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
-        var _a;
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
         this.stopPositioning();
         this.cancelVirtualScroll();
-        (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.listResizeObserver?.disconnect();
     }
     componentWillLoad() {
-        var _a, _b;
         this.handleSelect = this.handleSelect.bind(this);
         if (this.selectedValues) {
             this.onSelectedValuesChanged(this.selectedValues, true);
         }
-        this.previousOptionCount = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        this.previousOptionCount = this.options?.length ?? 0;
     }
     componentDidLoad() {
         if (this.isOpen) {
@@ -289,7 +223,7 @@ export class Dropdown {
                     }
                 });
                 const mapOptions = (option) => {
-                    option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                    option.options = option.groupName ? option.options?.map(mapOptions) : undefined;
                     return option;
                 };
                 this.options = options.map(mapOptions);
@@ -315,21 +249,67 @@ export class Dropdown {
         if (!triggerEl)
             return;
         this.stopPositioning();
-        this.cleanupAutoUpdate = autoUpdate(triggerEl, this.hostElement, () => {
-            this.updateDropdownPosition(triggerEl);
+        this.floating = startFloating(triggerEl, this.hostElement, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: dropdownMiddleware({
+                flipFallbackPlacements: this.flipFallbackPlacements,
+                sizeApply: ({ availableHeight, rects }) => {
+                    const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
+                    let usedBeforeList = 0;
+                    if (listEl) {
+                        const children = Array.from(this.hostElement.children);
+                        const listIndex = children.indexOf(listEl);
+                        children.slice(0, listIndex).forEach((child) => {
+                            if (child instanceof HTMLElement) {
+                                usedBeforeList += child.offsetHeight;
+                            }
+                        });
+                    }
+                    const cs = getComputedStyle(this.hostElement);
+                    const hostVerticalChrome = parseFloat(cs.paddingTop) +
+                        parseFloat(cs.paddingBottom) +
+                        parseFloat(cs.borderTopWidth) +
+                        parseFloat(cs.borderBottomWidth);
+                    const cssMaxHeight = listEl
+                        ? parseFloat(getComputedStyle(listEl).getPropertyValue('--xpl-dropdown-list-max-height'))
+                        : Infinity;
+                    const listMaxHeight = Math.min(cssMaxHeight, Math.max(0, availableHeight - usedBeforeList - hostVerticalChrome));
+                    Object.assign(this.hostElement.style, {
+                        width: `${rects.reference.width}px`,
+                    });
+                    if (listEl) {
+                        listEl.style.maxHeight = `${listMaxHeight}px`;
+                    }
+                },
+            }),
+            onPosition: ({ x, y, placement: resolvedPlacement }) => {
+                if (!this.floating) {
+                    return;
+                }
+                const isAbove = getSide(resolvedPlacement) === 'top';
+                Object.assign(this.hostElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+                this.hostElement.classList.toggle('xpl-dropdown--above', isAbove);
+                this.hostElement.classList.toggle('xpl-dropdown--below', !isAbove);
+            },
+            onReferenceHidden: () => {
+                this.isOpen = false;
+                return true;
+            },
         });
     }
     stopPositioning() {
-        var _a;
-        if (this.cleanupAutoUpdate) {
-            this.cleanupAutoUpdate();
-            this.cleanupAutoUpdate = null;
-        }
+        this.floating?.stop();
+        this.floating = null;
         this.hostElement.style.left = '';
         this.hostElement.style.top = '';
         this.hostElement.style.width = '';
-        (_a = this.hostElement
-            .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
+        this.hostElement
+            .querySelector('.xpl-dropdown-list')
+            ?.style.removeProperty('max-height');
         this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
     cancelVirtualScroll() {
@@ -349,7 +329,7 @@ export class Dropdown {
     }
     scrollSelectedIntoView() {
         const { listEl: list, options } = this;
-        if (!list || !(options === null || options === void 0 ? void 0 : options.length) || !this.isVirtualized)
+        if (!list || !options?.length || !this.isVirtualized)
             return;
         const selectedIndex = options.findIndex((option) => option.isSelected);
         if (selectedIndex < 0)
@@ -360,9 +340,8 @@ export class Dropdown {
         list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
     }
     updateVirtualRange() {
-        var _a, _b;
         const list = this.listEl;
-        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const total = this.options?.length ?? 0;
         if (!list || !total)
             return;
         const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -387,7 +366,7 @@ export class Dropdown {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = h("slot", { key: '7a604ed002d4c412eb709aa7c3ef1a9e80f614ed', name: "options" });
+            listContent = h("slot", { key: '1673c7d33d7dc1d16bf56081df85976ed389a38f', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -395,18 +374,18 @@ export class Dropdown {
             const start = Math.min(this.virtualStart, total);
             const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
             const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
-            listContent = (h("li", { key: 'd7730538dfae58a6efc6a8971e0078b28fc5b9de', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+            listContent = (h("li", { key: '94094d9464c2f4ded9714f7ed16ca2b426c19794', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
         }
         else {
             listContent = options.map((option) => renderOption(option));
         }
-        return (h(Host, { key: '282d3bc09a8ce0e63d55bbc9707936afe0efae01', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: '6e2fe2b904530c7966a23b3715485ea9ed415880', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
                 'xpl-dropdown--virtualized': shouldVirtualize,
-            }, role: "listbox" }, h("slot", { key: '977cfb27b24bcecaf22587bd2e6350ad52743cad', name: "header" }), h("ul", { key: '46274999327ffdb9749a012b839ef124df4d72d2', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, h("slot", { key: 'b9c87382e07b23b326fab22b8423021f8c4a83f8', name: "header" }), h("ul", { key: '3824b650e2bbcb09fdea7f25ab19afa9a7dd8abe', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
@@ -526,8 +505,8 @@ export class Dropdown {
                     "references": {
                         "Placement": {
                             "location": "import",
-                            "path": "@floating-ui/dom",
-                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "path": "../../utils/floating",
+                            "id": "src/components/utils/floating.ts::Placement",
                             "referenceLocation": "Placement"
                         }
                     }
@@ -550,8 +529,8 @@ export class Dropdown {
                     "references": {
                         "Placement": {
                             "location": "import",
-                            "path": "@floating-ui/dom",
-                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "path": "../../utils/floating",
+                            "id": "src/components/utils/floating.ts::Placement",
                             "referenceLocation": "Placement"
                         }
                     }
@@ -630,9 +609,15 @@ export class Dropdown {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(e, { component }: { component: Dropdown }) => void",
-                    "resolved": "(e: any, { component }: { component: Dropdown; }) => void",
+                    "original": "(e: Event | null, context: { component: Dropdown }) => void",
+                    "resolved": "(e: Event, context: { component: Dropdown; }) => void",
                     "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        },
                         "Dropdown": {
                             "location": "global",
                             "id": "global::Dropdown"
@@ -678,14 +663,14 @@ export class Dropdown {
         return {
             "handleSelect": {
                 "complexType": {
-                    "signature": "(e: any, { component }: { component: XplDropdownOption; }) => Promise<void>",
+                    "signature": "(e: Event | null, { component }: DropdownSelectContext) => Promise<void>",
                     "parameters": [{
                             "name": "e",
-                            "type": "any",
+                            "type": "Event",
                             "docs": ""
                         }, {
                             "name": "__1",
-                            "type": "{ component: XplDropdownOption; }",
+                            "type": "DropdownSelectContext",
                             "docs": ""
                         }],
                     "references": {
@@ -693,15 +678,25 @@ export class Dropdown {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "XplDropdownOption": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        },
+                        "DropdownSelectContext": {
                             "location": "global",
-                            "id": "global::XplDropdownOption"
+                            "id": "global::DropdownSelectContext"
                         },
                         "DropdownItem": {
                             "location": "import",
                             "path": "./dropdown-option",
                             "id": "src/components/components/xpl-dropdown/dropdown-option.ts::DropdownItem",
                             "referenceLocation": "DropdownItem"
+                        },
+                        "HTMLXplDropdownOptionElement": {
+                            "location": "global",
+                            "id": "global::HTMLXplDropdownOptionElement"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
 export class DynamicTable {
     constructor() {
-        this.selectedItemCount = 0;
         this.colCount = 0;
+        this.hasAccordion = false;
+        this.selectedItemCount = 0;
     }
     updateColumnCount() {
         const headerCells = this.el.querySelectorAll('xpl-table-header-cell');
@@ -15,7 +16,7 @@ export class DynamicTable {
             }
             return '1fr';
         });
-        this.el.style.setProperty('--column-widths', columnWidths.join(' '));
+        this.el.style.setProperty('--xpl-column-widths', columnWidths.join(' '));
         this.colCount = headerCells.length;
     }
     listenToDeselectEvent() {
@@ -24,24 +25,13 @@ export class DynamicTable {
     }
     listenToChangeEvent() {
         const childCheckboxes = document.querySelectorAll('.xpl-dynamic-table xpl-checkbox:not([class^="xpl-header-accordion__parent-checkbox"]) input:not([disabled])');
-        const checkedIds = Array.from(childCheckboxes)
-            .filter((checkbox) => checkbox.checked)
-            .map((checkbox) => checkbox.getAttribute('data-id'));
+        const checkedCheckboxes = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked);
+        const checkedIds = checkedCheckboxes.map((checkbox) => checkbox.getAttribute('data-id') ?? '');
         this.selectedItemCount = checkedIds.length;
         this.selectedItemCountChange.emit(checkedIds);
     }
     updateRowGap() {
-        const hasHeaderAccordion = this.el.querySelector('xpl-header-accordion') !== null;
-        if (!hasHeaderAccordion) {
-            return;
-        }
-        const selectors = ['.xpl-dynamic-table', '.xpl-dynamic-table > [slot="body"]'];
-        selectors.forEach((sel) => {
-            const element = this.el.querySelector(sel);
-            if (element !== null) {
-                element.style.rowGap = '0.5rem';
-            }
-        });
+        this.hasAccordion = this.el.querySelector('xpl-header-accordion') !== null;
     }
     componentDidLoad() {
         this.updateColumnCount();
@@ -51,13 +41,17 @@ export class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '7b1ac3b1461e69fb7001baf63c256abcc65cb3a3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '5d7484d4517b132dbb2400f7c63da3be14064586', name: "header" }), h("slot", { key: '292c502f9cb58467bbb69a3eeacff51af557d826', name: "body" })));
+        return (h("div", { key: '9fdd0a6b9adfad92d89ff30873009e08ca981124', role: "grid", class: {
+                'xpl-dynamic-table': true,
+                'xpl-dynamic-table--accordion': this.hasAccordion,
+            }, "aria-colcount": this.colCount }, h("slot", { key: 'a105d82f752d34618a0603c59f85ea9e2ee6c3dd', name: "header" }), h("slot", { key: '24817b404a5a6f50ab1f17674a85391a8645f728', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {
         return {
-            "selectedItemCount": {},
-            "colCount": {}
+            "colCount": {},
+            "hasAccordion": {},
+            "selectedItemCount": {}
         };
     }
     static get events() {

package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js

@@ -10,7 +10,7 @@ export class DynamicTableCell {
         this.updateSlottedComponentsWhenDisabled();
     }
     updateSlottedComponentsWhenDisabled() {
-        const slottedElements = this.hostElement.querySelectorAll('*');
+        const slottedElements = this.hostElement?.querySelectorAll('*') ?? [];
         slottedElements.forEach((element) => {
             if ('disabled' in element) {
                 element.disabled = this.disabled;
@@ -18,10 +18,12 @@ export class DynamicTableCell {
         });
     }
     render() {
-        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '18dbf3410d7ecd8ccf08b4b7e8927c50777967b8', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
-                this.hostElement = el;
-            } }, h("slot", { key: '7efb10712db0c91fb2f745f23946270c488885a5' })));
+        const colIndex = this.el.parentElement
+            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
+            : 0;
+        return (h(Host, { key: '6a4eea3dcf826a18c24068acea56dc63261220f4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, h("slot", { key: '138598bb74c49c32b649f0955a53cb8ea479e04f' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js

@@ -15,7 +15,7 @@ export class DynamicTableRow {
         this.updateRowCellsDisabledState();
     }
     updateRowCellsDisabledState() {
-        const cells = this.hostElement.querySelectorAll('xpl-dynamic-table-cell');
+        const cells = this.hostElement?.querySelectorAll('xpl-dynamic-table-cell') ?? [];
         cells.forEach((cell) => {
             cell.disabled = this.isDisabled;
         });
@@ -24,9 +24,9 @@ export class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '17fac4d9214237c1896a136839c79377dc9b3169', role: "row", class: classList, ref: (el) => {
-                this.hostElement = el;
-            } }, h("slot", { key: '7d41f904e2c1fa3dcde2b7652cd2840c6bde3470' })));
+        return (h(Host, { key: '4b0e558771154ca42ab57235d9b38861831d7eeb', role: "row", class: classList, ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, h("slot", { key: '8b2b1a78d797c9a5fcaa8b31db2a41f57335b683' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

package/dist/collection/components/xpl-grid/xpl-grid.js

@@ -7,10 +7,10 @@ export class Grid {
         let smCounter = 0;
         let xsCounter = 0;
         items.forEach((item) => {
-            lgCounter += +item.getAttribute('lg') || 6;
-            mdCounter += +item.getAttribute('md') || 6;
-            smCounter += +item.getAttribute('sm') || 6;
-            xsCounter += +item.getAttribute('xs') || 6;
+            lgCounter += Number(item.getAttribute('lg')) || 6;
+            mdCounter += Number(item.getAttribute('md')) || 6;
+            smCounter += Number(item.getAttribute('sm')) || 6;
+            xsCounter += Number(item.getAttribute('xs')) || 6;
             if (lgCounter % 6 === 0)
                 item.classList.add('xpl-grid-item-lg-last');
             if (mdCounter % 6 === 0)
@@ -22,7 +22,7 @@ export class Grid {
         });
     }
     render() {
-        return h(Host, { key: '3700079a0f7bbea9755a217d7757dff5a82ee601', class: "xpl-grid" });
+        return h(Host, { key: '94440d9d2f50c8712e7e4599409101da361f66d8', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -12,7 +12,7 @@ export class GridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: 'a541967d85e9a4fcd643aa95b62226e46c476dc6', class: className }, h("slot", { key: 'e20ba799288ffb654334698215518e8cfe6ba9a3' })));
+        return (h(Host, { key: '0fc1d60f8f0d0df7208302a3668930afdb1dc5ba', class: className }, h("slot", { key: '0385c17beb3982d060b4e2a4bdd0fd16f924a0d3' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -12,38 +12,26 @@ export class HeaderAccordion {
             this.expanded = !this.expanded;
         };
         this.handleParentCheckboxChange = (checked) => {
-            var _a;
             this.parentChecked = checked;
             this.parentIndeterminate = false;
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            childCheckboxes.forEach((checkbox) => {
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            childCheckboxes?.forEach((checkbox) => {
                 checkbox.checked = checked;
             });
         };
     }
-    applyBorderRadiusToLastRow() {
-        var _a;
-        if (this.expanded) {
-            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
-            const lastRow = rows[rows.length - 1];
-            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
-            cells[0].style.borderBottomLeftRadius = '0.5rem';
-            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
-        }
-    }
     watchSelectedCount(selectedCount, _previousCount) {
         if (selectedCount > -1) {
             this.updateParentCheckbox(selectedCount);
         }
     }
     updateParentCheckbox(selectedCount) {
-        var _a;
-        const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+        const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
         if (selectedCount === 0) {
             this.parentChecked = false;
             this.parentIndeterminate = false;
         }
-        else if (selectedCount === childCheckboxes.length) {
+        else if (selectedCount === (childCheckboxes?.length ?? 0)) {
             this.parentChecked = true;
             this.parentIndeterminate = false;
         }
@@ -53,10 +41,9 @@ export class HeaderAccordion {
         }
     }
     handleChildCheckboxChange() {
-        var _a;
         if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            const childCheckboxes = this.el?.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes ?? []).filter((checkbox) => checkbox.checked).length;
             this.updateParentCheckbox(checkedCount);
         }
     }
@@ -64,11 +51,8 @@ export class HeaderAccordion {
         const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
         this.updateParentCheckbox(initialCheckoxesValue);
     }
-    componentWillRender() {
-        this.applyBorderRadiusToLastRow();
-    }
     render() {
-        return (h(Host, { key: '5a1f1085ff8351162fc87a30e939035ec81795fc', class: "xpl-header-accordion" }, h("div", { key: 'dd3e3b0a441b380e28fb898283e93d53d7347866', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6550eb878d0f55262beb1ee114ea54801037ad16', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '80e0b49c5d52866293eac2aef91bbe97d4a8ad96', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '9a29e3496f29f6179aae2c122e17db09943e2067', name: "title" }), h("xpl-icon", { key: 'c3fddf66a6c41353240adb706da7faf6231caa57', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e1ffea5a3a456b5556d67f42326ec17eb80fe305', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7c4e2677463ad9bbd1adcafc95692bdd95a09c0b', name: "content" }))));
+        return (h(Host, { key: '7a9c486fd491732cafa29086b3e3edab9090fcef', class: "xpl-header-accordion" }, h("div", { key: 'c63b756d6336e89b7976fb9a072782ed9d67a7c9', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '65d41ff6f70d0cc9022f0337335305737a23617d', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '514f9bfe4a024416b8a4e152472c2bd7bbe3ab1d', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '29a2434b4a4be46751f4425b7837f11324547e1a', name: "title" }), h("xpl-icon", { key: 'cf2e043da31d9845e6b4db91022f67c3abb4918d', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), h("div", { key: '6bcc05f2ebf545ef67fa7cf1e3bb1e6f39f0f170', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '6bbcd7e23979d93d88168f173766f86701ecc382', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {