@xplortech/apollo-core 2.10.0 → 2.12.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,71 +26,14 @@ 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 triggerElement = triggerId ? document.getElementById(triggerId) : null;
-            const isTriggerOrChild = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(target);
+            const isTriggerOrChild = triggerElement?.contains(target);
             const isInside = this.hostElement.contains(target);
             if (!isInside && !isTriggerOrChild && this.isOpen) {
                 this.isOpen = false;
@@ -121,13 +53,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 +76,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 +91,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 +125,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 +135,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 +158,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 +220,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 +246,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 +326,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 +337,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 +363,7 @@ export class Dropdown {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = h("slot", { key: '859e13193ab2db2f10197aaf8b9699a177d480c6', name: "options" });
+            listContent = h("slot", { key: '97760aa46be9b95b750cd5db5453a9229a258182', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -395,18 +371,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: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', 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: 'e26d99dc6d29290d64e6408c19b3357b590cffe3', 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: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: '564b912fee05be97c27e1d791593066793ea5cf4', "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: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, h("slot", { key: '1f84f1ce175fc1affae09ad93ed7c2b349b900ba', name: "header" }), h("ul", { key: '933fac0a3585043bf66fcb59525ca1d6874bc2c3', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
@@ -526,8 +502,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 +526,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 +606,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 +660,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 +675,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/dynamic-table.stories.js

@@ -1,3 +1,4 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Dynamic Table/Dynamic Table',
     component: 'xpl-dynamic-table',
@@ -14,7 +15,10 @@ export default {
             handles: ['selectedItemCountChange', 'checkboxChange', 'deselectAll'],
         },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
 };
 const tableData = [
     {

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: '3d5c3e5aea065c98323fbdbf17392af63975c9dd', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'f6076fef5e85fdf22b03e532e920396ce5f6ce63', name: "header" }), h("slot", { key: '3b94b04b8f6b7a1cca9277161c0c32b117ce315f', name: "body" })));
+        return (h("div", { key: '227ec50512aeedc2cd1989c3eb59e8d990ff9e9f', role: "grid", class: {
+                'xpl-dynamic-table': true,
+                'xpl-dynamic-table--accordion': this.hasAccordion,
+            }, "aria-colcount": this.colCount }, h("slot", { key: '7dbc7ff3246211e89da64d07593a015016c60b59', name: "header" }), h("slot", { key: '2f4fd56d6f05d62bc2eb57afaf1d3e382c06ca57', 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: 'e6e9a3695c9d8ca3743b188284bc8e69f50f3397', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
-                this.hostElement = el;
-            } }, h("slot", { key: 'abfa632a3ac88d663acaaacbc431d07c9da4b375' })));
+        const colIndex = this.el.parentElement
+            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
+            : 0;
+        return (h(Host, { key: 'c2cfd05197952dd882bb3cf138dcbbc556e34583', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, h("slot", { key: 'bb48fdae37888679b567f842e7343091c851318a' })));
     }
     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: 'e070f32db6cee0bcbf0dd84e41e13e6d3b88e8a1', role: "row", class: classList, ref: (el) => {
-                this.hostElement = el;
-            } }, h("slot", { key: '78ea8e02e97e0017dc4aa35af4883446d4e4c4bf' })));
+        return (h(Host, { key: '385be648a5890a43b63bf78e5cdbb08ded40b350', role: "row", class: classList, ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, h("slot", { key: 'aa2519e69e547492a25d9fbf18c4dc5b090fbded' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Grid',
     argTypes: {
         unit1Lg: { control: { type: 'number' } },

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: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', class: "xpl-grid" });
+        return h(Host, { key: 'e0b3ddfde22d4bd211e259baa6617363a654463c', 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: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
+        return (h(Host, { key: 'e0f19711fdc2c90a192335de13f7adaeb65560ef', class: className }, h("slot", { key: 'f79adf56e33fdf5b4aceee1c2e9b8410d7a43350' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

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

@@ -1,3 +1,4 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Dynamic Table/Header Accordion',
     component: 'xpl-header-accordion',
@@ -6,9 +7,12 @@ export default {
         expanded: { type: { name: 'boolean' } },
         disabled: { type: { name: 'boolean' } },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
 };
-export const HeaderAccordion = ({ title, expanded, disabled }) => `
+export const HeaderAccordion = ({ title, expanded, disabled, }) => `
         <xpl-header-accordion content-id="1" initial-expanded=${expanded} disabled=${disabled}>
             <div slot="title">${title}</div>
             <div slot="content" class="content"><strong>Table slot</strong> Replace me with your content</div>