@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/cjs/xpl-dropdown_4.cjs.entry.js

@@ -0,0 +1,580 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var floatingUi_dom = require('./floating-ui.dom-DuvGwvW-.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+
+function getSide(placement) {
+    return placement.split('-')[0];
+}
+function startFloating(reference, floating, options) {
+    if (!lifecycle.isBrowser()) {
+        return {
+            update: async () => { },
+            stop: () => { },
+        };
+    }
+    const { placement, strategy, middleware, onPosition, onReferenceHidden, onError } = options;
+    let generation = 0;
+    let cleanup = null;
+    let active = true;
+    const run = async () => {
+        if (!active) {
+            return;
+        }
+        const myGen = generation;
+        try {
+            const result = await floatingUi_dom.computePosition(reference, floating, {
+                placement,
+                strategy,
+                middleware,
+            });
+            if (!active || myGen !== generation) {
+                return;
+            }
+            if (result.middlewareData.hide?.referenceHidden) {
+                if (onReferenceHidden?.() === true) {
+                    return;
+                }
+            }
+            onPosition(result);
+        }
+        catch (err) {
+            if (!active || myGen !== generation) {
+                return;
+            }
+            onError?.(err);
+        }
+    };
+    cleanup = floatingUi_dom.autoUpdate(reference, floating, run);
+    return {
+        update: run,
+        stop: () => {
+            active = false;
+            generation += 1;
+            if (cleanup) {
+                cleanup();
+                cleanup = null;
+            }
+        },
+    };
+}
+const DEFAULT_DROPDOWN_OFFSET_PX = 4;
+function dropdownMiddleware(opts) {
+    const { offsetPx = DEFAULT_DROPDOWN_OFFSET_PX, flipFallbackPlacements, sizeApply } = opts;
+    return [
+        floatingUi_dom.offset(offsetPx),
+        floatingUi_dom.flip(flipFallbackPlacements && flipFallbackPlacements.length > 0
+            ? { fallbackPlacements: flipFallbackPlacements }
+            : {}),
+        floatingUi_dom.size({ apply: sizeApply }),
+        floatingUi_dom.hide(),
+    ];
+}
+
+const VIRTUAL_LIST = {
+    rowHeight: 45,
+    overscan: 20,
+    virtualizeFrom: 200,
+};
+function renderOption(option, virtualIndex) {
+    const { groupName, options: opts, subtitle, ...properties } = option;
+    if (groupName) {
+        return (index.h("xpl-dropdown-group", { groupName: groupName, options: opts, ...properties }));
+    }
+    const isVirtual = virtualIndex !== undefined;
+    return (index.h("xpl-dropdown-option", { class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+            ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
+            : undefined, subtitle: subtitle, ...properties }));
+}
+const Dropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
+        this.virtualEnd = 0;
+        this.virtualStart = 0;
+        this.isOpen = false;
+        this.closeOnSelect = true;
+        this.mode = 'single';
+        this.anchorToTrigger = false;
+        this.placement = 'bottom-start';
+        this.selectOnFocus = false;
+        this.floating = null;
+        this.virtualScrollRaf = null;
+        this.openAlignmentRaf = null;
+        this.previousOptionCount = 0;
+        this.handleClickOutside = ({ target }) => {
+            const { triggerId } = this;
+            const targetEl = target;
+            const triggerElement = triggerId ? document.getElementById(triggerId) : null;
+            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;
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.isOpen = false;
+            }
+        };
+        this.handleVirtualScroll = () => {
+            if (this.virtualScrollRaf !== null)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = null;
+                this.updateVirtualRange();
+            });
+        };
+        this.setListEl = (el) => {
+            if (el === this.listEl)
+                return;
+            this.listEl = el;
+            this.listResizeObserver?.disconnect();
+            if (el && typeof ResizeObserver !== 'undefined') {
+                this.listResizeObserver ?? (this.listResizeObserver = new ResizeObserver(() => {
+                    if (this.isVirtualized)
+                        this.handleVirtualScroll();
+                }));
+                this.listResizeObserver.observe(el);
+            }
+        };
+        this.scheduleOpenAlignment = () => {
+            if (this.openAlignmentRaf !== null)
+                return;
+            this.openAlignmentRaf = requestAnimationFrame(() => {
+                this.openAlignmentRaf = null;
+                this.scrollSelectedIntoView();
+                this.updateVirtualRange();
+            });
+        };
+    }
+    onOptionsChanged() {
+        const total = this.options?.length ?? 0;
+        const listReplaced = total !== this.previousOptionCount;
+        this.previousOptionCount = total;
+        if (!this.isVirtualized) {
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+            return;
+        }
+        const list = this.listEl;
+        if (list) {
+            const maxScroll = Math.max(0, total * VIRTUAL_LIST.rowHeight - list.clientHeight);
+            if (list.scrollTop > maxScroll) {
+                list.scrollTop = maxScroll;
+            }
+            if (this.isOpen && listReplaced) {
+                const selectedIndex = this.options?.findIndex((option) => option.isSelected) ?? -1;
+                const outOfWindow = selectedIndex >= 0 &&
+                    (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
+                if (outOfWindow) {
+                    this.scrollSelectedIntoView();
+                }
+            }
+        }
+        this.updateVirtualRange();
+    }
+    onAnchorToTriggerChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
+    onFlipFallbackPlacementsChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
+    onPlacementChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
+    onTriggerIdChanged() {
+        if (this.isOpen) {
+            this.startPositioning();
+        }
+    }
+    onSelectedValuesChanged(newValues, initialRender = false) {
+        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 || '';
+                if (this.mode === 'single') {
+                    option.isSelected = optionValue === newValues;
+                }
+                else {
+                    const selectedArray = Array.isArray(newValues) ? newValues : [];
+                    option.isSelected = selectedArray.includes(optionValue);
+                }
+            });
+            const mapOptions = (option) => {
+                option.options = option.groupName ? option.options?.map(mapOptions) : undefined;
+                return option;
+            };
+            this.options = this.options.map(mapOptions);
+            if (this.update && !initialRender) {
+                this.update(null, { component: this });
+            }
+        }
+    }
+    onIsOpenStateChange(newValue) {
+        this.isOpenChange.emit(newValue);
+        if (newValue) {
+            this.startPositioning();
+            this.alignOnOpen();
+        }
+        else {
+            this.stopPositioning();
+            this.cancelVirtualScroll();
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+        }
+    }
+    connectedCallback() {
+        if (!lifecycle.isBrowser()) {
+            return;
+        }
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.stopPositioning();
+        this.cancelVirtualScroll();
+        this.listResizeObserver?.disconnect();
+    }
+    componentWillLoad() {
+        this.handleSelect = this.handleSelect.bind(this);
+        if (this.selectedValues) {
+            this.onSelectedValuesChanged(this.selectedValues, true);
+        }
+        this.previousOptionCount = this.options?.length ?? 0;
+    }
+    componentDidLoad() {
+        if (this.isOpen) {
+            this.startPositioning();
+            this.alignOnOpen();
+        }
+    }
+    async handleSelect(e, { component }) {
+        const { hostElement, mode, options, update } = this;
+        const isSingle = mode === 'single';
+        const isMulti = mode === 'multi';
+        if (options) {
+            const targetValue = component.hostElement.value || component.hostElement.label;
+            const hasGroups = options.some((option) => option.groupName);
+            if (!hasGroups) {
+                options.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        if (isMatch)
+                            component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                this.options = [...options];
+            }
+            else {
+                const flatOptions = options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
+                flatOptions.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                const mapOptions = (option) => {
+                    option.options = option.groupName ? option.options?.map(mapOptions) : undefined;
+                    return option;
+                };
+                this.options = options.map(mapOptions);
+            }
+        }
+        else if (isSingle) {
+            const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
+            optionNodes.forEach((node) => {
+                node.isSelected = node === component.hostElement;
+            });
+        }
+        else if (isMulti) {
+            component.isSelected = !component.isSelected;
+        }
+        if (update)
+            update(e, { component: this });
+    }
+    startPositioning() {
+        if (!this.anchorToTrigger || !this.triggerId) {
+            return;
+        }
+        const triggerEl = document.getElementById(this.triggerId);
+        if (!triggerEl)
+            return;
+        this.stopPositioning();
+        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() {
+        this.floating?.stop();
+        this.floating = null;
+        this.hostElement.style.left = '';
+        this.hostElement.style.top = '';
+        this.hostElement.style.width = '';
+        this.hostElement
+            .querySelector('.xpl-dropdown-list')
+            ?.style.removeProperty('max-height');
+        this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
+    }
+    cancelVirtualScroll() {
+        if (this.virtualScrollRaf !== null) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = null;
+        }
+        if (this.openAlignmentRaf !== null) {
+            cancelAnimationFrame(this.openAlignmentRaf);
+            this.openAlignmentRaf = null;
+        }
+    }
+    alignOnOpen() {
+        this.scrollSelectedIntoView();
+        this.updateVirtualRange();
+        this.scheduleOpenAlignment();
+    }
+    scrollSelectedIntoView() {
+        const { listEl: list, options } = this;
+        if (!list || !options?.length || !this.isVirtualized)
+            return;
+        const selectedIndex = options.findIndex((option) => option.isSelected);
+        if (selectedIndex < 0)
+            return;
+        const { rowHeight } = VIRTUAL_LIST;
+        const centered = selectedIndex * rowHeight - (list.clientHeight - rowHeight) / 2;
+        const maxScroll = Math.max(0, options.length * rowHeight - list.clientHeight);
+        list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
+    }
+    updateVirtualRange() {
+        const list = this.listEl;
+        const total = this.options?.length ?? 0;
+        if (!list || !total)
+            return;
+        const { rowHeight, overscan } = VIRTUAL_LIST;
+        const firstVisible = Math.floor(list.scrollTop / rowHeight);
+        const visibleCount = Math.ceil(list.clientHeight / rowHeight) || 1;
+        const start = Math.max(0, firstVisible - overscan);
+        const end = Math.min(total, firstVisible + visibleCount + overscan);
+        if (start !== this.virtualStart || end !== this.virtualEnd) {
+            this.virtualStart = start;
+            this.virtualEnd = end;
+        }
+    }
+    get isVirtualized() {
+        const { options } = this;
+        return (!!options &&
+            options.length > VIRTUAL_LIST.virtualizeFrom &&
+            options.every((option) => !option.groupName && !option.subtitle));
+    }
+    render() {
+        const { isOpen, mode, options } = this;
+        const hasOptions = !!(options && options.length);
+        const shouldVirtualize = this.isVirtualized;
+        let listContent;
+        if (!hasOptions) {
+            listContent = index.h("slot", { key: '1673c7d33d7dc1d16bf56081df85976ed389a38f', name: "options" });
+        }
+        else if (shouldVirtualize) {
+            const { rowHeight, overscan } = VIRTUAL_LIST;
+            const total = options.length;
+            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 = (index.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 (index.h(index.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" }, index.h("slot", { key: 'b9c87382e07b23b326fab22b8423021f8c4a83f8', name: "header" }), index.h("ul", { key: '3824b650e2bbcb09fdea7f25ab19afa9a7dd8abe', class: "xpl-dropdown-list", ref: (el) => {
+                this.setListEl(el);
+            }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "options": [{
+                "onOptionsChanged": 0
+            }],
+        "anchorToTrigger": [{
+                "onAnchorToTriggerChanged": 0
+            }],
+        "flipFallbackPlacements": [{
+                "onFlipFallbackPlacementsChanged": 0
+            }],
+        "placement": [{
+                "onPlacementChanged": 0
+            }],
+        "triggerId": [{
+                "onTriggerIdChanged": 0
+            }],
+        "selectedValues": [{
+                "onSelectedValuesChanged": 0
+            }],
+        "isOpen": [{
+                "onIsOpenStateChange": 0
+            }]
+    }; }
+};
+
+const DropdownGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const { groupName, options } = this;
+        const hasOptions = options && options.length;
+        const mappedOptions = hasOptions &&
+            options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (index.h("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (index.h("xpl-dropdown-option", { ...properties })));
+        return (index.h(index.Host, { key: '232eccef872d6563c056b3b709d3a741473de2b0', role: "group", "aria-label": groupName }, index.h("li", { key: '2185c7b55139ab7b144290c94ab53675a6224b46', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '26c0d13d0742fd34eb629c668bd929e5541fffb8', label: groupName }), index.h("ul", { key: '0f13b81deda008bf0588393ff1a4102a5c7a171d', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '70cf6f662d1471c815f5e7c747080d7558efe407', name: "options" })))));
+    }
+};
+
+const DropdownHeading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '04265224adcc5b65f53d2e35d0cfef470931ce41', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '27293255cdfe35d207f3f0155beae3dc4b737e0d' }, this.label || index.h("slot", { key: 'b5bbee144360b2e5da681864e3dae6c2cafd2552', name: "heading" }))));
+    }
+};
+
+const DropdownOptionCpnt = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropdown = null;
+    }
+    componentWillLoad() {
+        this.dropdown = this.hostElement.closest('xpl-dropdown');
+    }
+    handleClick(ev) {
+        if (!this.dropdown) {
+            return;
+        }
+        const { closeOnSelect, mode } = this.dropdown;
+        if (ev.x && ev.y) {
+            this.dropdown.handleSelect(ev, { component: this });
+            if (mode === 'single' && closeOnSelect)
+                this.dropdown.isOpen = false;
+        }
+    }
+    handleKeyup(ev) {
+        if (!this.dropdown) {
+            return;
+        }
+        const { dropdown } = this;
+        const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
+        const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
+        if (selectOnFocus && navigationKeys.includes(ev.key)) {
+            const { activeElement } = document;
+            const hostElement = activeElement?.closest('xpl-dropdown-option') ?? null;
+            const component = {
+                component: { hostElement },
+            };
+            dropdown.handleSelect(ev, component);
+            if (mode === 'single' && closeOnSelect)
+                this.dropdown.isOpen = false;
+            return;
+        }
+        const selectionKeys = ['Escape', 'Enter'];
+        if (selectionKeys.includes(ev.key)) {
+            dropdown.handleSelect(ev, { component: this });
+            if (ev.key === 'Escape' || (this.dropdown.closeOnSelect && ev.key === 'Enter')) {
+                this.dropdown.isOpen = false;
+            }
+        }
+    }
+    connectedCallback() {
+        this.hostElement.addEventListener('click', this.handleClick.bind(this));
+        this.hostElement.addEventListener('keyup', this.handleKeyup.bind(this));
+    }
+    disconnectedCallback() {
+        this.hostElement.removeEventListener('click', this.handleClick);
+        this.hostElement.removeEventListener('keyup', this.handleKeyup);
+    }
+    render() {
+        const { label, isSelected, isDisabled, value, subtitle, icon } = this;
+        return (index.h(index.Host, { key: 'f4fa4b0a3150fafd4b1c259aa140925219487898', class: {
+                'xpl-dropdown-option': true,
+                'xpl-dropdown-option--disabled': !!isDisabled,
+                'xpl-dropdown-option--selected': !!isSelected,
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: '417af38233cd4765cc54a0cc4541bb5caeaf10ab', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: '48cbe69b056142ce5ef5cd6c608a99f1defd2e9f', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '14b86d61bab431487cdef906a0a9b138d6ab4bbb', name: "option" }), subtitle && index.h("span", { key: 'c7ff5ee61b08f7a94d107183127c0b9cff0b49b5', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+
+exports.xpl_dropdown = Dropdown;
+exports.xpl_dropdown_group = DropdownGroup;
+exports.xpl_dropdown_heading = DropdownHeading;
+exports.xpl_dropdown_option = DropdownOptionCpnt;

package/dist/cjs/xpl-dynamic-table-cell.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const DynamicTableCell = class {
     constructor(hostRef) {
@@ -14,7 +14,7 @@ const DynamicTableCell = class {
         this.updateSlottedComponentsWhenDisabled();
     }
     updateSlottedComponentsWhenDisabled() {
-        const slottedElements = this.hostElement.querySelectorAll('*');
+        const slottedElements = this.hostElement?.querySelectorAll('*') ?? [];
         slottedElements.forEach((element) => {
             if ('disabled' in element) {
                 element.disabled = this.disabled;
@@ -22,10 +22,12 @@ const DynamicTableCell = class {
         });
     }
     render() {
-        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (index.h(index.Host, { key: '18dbf3410d7ecd8ccf08b4b7e8927c50777967b8', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
-                this.hostElement = el;
-            } }, index.h("slot", { key: '7efb10712db0c91fb2f745f23946270c488885a5' })));
+        const colIndex = this.el.parentElement
+            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
+            : 0;
+        return (index.h(index.Host, { key: '6a4eea3dcf826a18c24068acea56dc63261220f4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, index.h("slot", { key: '138598bb74c49c32b649f0955a53cb8ea479e04f' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xpl-dynamic-table-row.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const DynamicTableRow = class {
     constructor(hostRef) {
@@ -19,7 +19,7 @@ const DynamicTableRow = class {
         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;
         });
@@ -28,9 +28,9 @@ const DynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (index.h(index.Host, { key: '17fac4d9214237c1896a136839c79377dc9b3169', role: "row", class: classList, ref: (el) => {
-                this.hostElement = el;
-            } }, index.h("slot", { key: '7d41f904e2c1fa3dcde2b7652cd2840c6bde3470' })));
+        return (index.h(index.Host, { key: '4b0e558771154ca42ab57235d9b38861831d7eeb', role: "row", class: classList, ref: (el) => {
+                this.hostElement = el ?? undefined;
+            } }, index.h("slot", { key: '8b2b1a78d797c9a5fcaa8b31db2a41f57335b683' })));
     }
 };