@siemens/ix 4.4.0 → 5.1.0

package/dist/cjs/dropdown-controller-kBwdbfGD.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var pathUtils = require('./path-utils-CQKWhbQW.js');
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function hasDropdownItemWrapperImplemented(item) {
+    return (item !== null &&
+        item.getDropdownItemElement !== undefined &&
+        typeof item.getDropdownItemElement === 'function');
+}
+class DropdownController {
+    stack = new pathUtils.NestedOverlayStack({
+        blocksOutsideDismiss: (dropdown) => dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false,
+    }, (dropdown) => this.dismiss(dropdown));
+    isWindowListenerActive = false;
+    connected(dropdown) {
+        if (!this.isWindowListenerActive) {
+            this.addOverlayListeners();
+        }
+        this.stack.connect(dropdown);
+        if (dropdown.discoverAllSubmenus) {
+            this.discoverSubmenus();
+        }
+    }
+    disconnected(dropdown) {
+        this.stack.disconnect(dropdown);
+    }
+    removeFromSubmenuIds(id) {
+        this.stack.removeFromHierarchy(id);
+    }
+    getDropdownById(id) {
+        return this.stack.get(id);
+    }
+    discoverSubmenus() {
+        this.stack.forEach((dropdown) => {
+            dropdown.discoverSubmenu();
+        });
+    }
+    present(dropdown) {
+        if (!dropdown.isPresent() && dropdown.willPresent?.()) {
+            this.stack.setChildIds(dropdown.getId(), dropdown.getAssignedSubmenuIds());
+            dropdown.present();
+        }
+    }
+    dismissChildren(uid) {
+        this.stack.dismissChildren(uid);
+    }
+    dismiss(dropdown) {
+        if (dropdown.isPresent() && dropdown.willDismiss?.()) {
+            this.stack.dismissChildren(dropdown.getId());
+            dropdown.dismiss();
+            this.stack.deleteChildIdsEntry(dropdown.getId());
+        }
+    }
+    dismissAll(ignoreBehaviorForIds = [], ignoreRelatedDropdowns = false) {
+        this.stack.dismissAll({
+            ignorePolicyForIds: ignoreBehaviorForIds,
+            ignoreRelatedInHierarchy: ignoreRelatedDropdowns,
+        });
+    }
+    dismissOthers(uid) {
+        this.stack.dismissOthers(uid);
+    }
+    pathIncludesTrigger(eventTargets) {
+        return pathUtils.pathIncludesTrigger(eventTargets, 'data-ix-dropdown-trigger');
+    }
+    getParentDropdownId(dropdownId) {
+        return pathUtils.getParentId(dropdownId, this.stack.getChildIdsByParent());
+    }
+    pathIncludesDropdown(eventTargets) {
+        return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
+    }
+    addOverlayListeners() {
+        this.isWindowListenerActive = true;
+        window.addEventListener('click', (event) => {
+            const hasTrigger = this.pathIncludesTrigger(event.composedPath());
+            const hasDropdown = this.pathIncludesDropdown(event.composedPath());
+            if (!hasTrigger && !hasDropdown) {
+                this.dismissAll();
+            }
+        });
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.dismissAll(this.stack.keys());
+            }
+        });
+    }
+}
+const dropdownController = new DropdownController();
+
+exports.dropdownController = dropdownController;
+exports.hasDropdownItemWrapperImplemented = hasDropdownItemWrapperImplemented;

package/dist/cjs/{floating-ui.dom-CMzYsRR7.js → find-element-DPxOAdgO.js}

@@ -1782,11 +1782,112 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Will try to resolve the selector in the light dom, shadow dom or slot
+ * @param selector The selector to resolve
+ * @param hostElement The element to start the search from
+ * @returns Promise with the resolved elements or undefined if not found
+ */
+async function resolveSelector(selector, hostElement) {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (elements.length > 0) {
+        return Promise.resolve(elements);
+    }
+    if (hostElement === undefined) {
+        return Promise.resolve(undefined);
+    }
+    const shadowRoot = getRootFor(hostElement);
+    if (shadowRoot === undefined || !(shadowRoot instanceof ShadowRoot)) {
+        return Promise.resolve(undefined);
+    }
+    const elementsInShadowRoot = Array.from(shadowRoot.querySelectorAll(selector));
+    const elementsInHost = Array.from(shadowRoot.host.querySelectorAll(selector));
+    const elementsInComponent = [
+        ...elementsInHost,
+        ...elementsInShadowRoot,
+    ];
+    if (elementsInComponent.length > 0) {
+        return Promise.resolve(elementsInComponent);
+    }
+    return Promise.resolve(undefined);
+}
+/**
+ * Walk up the DOM to find the nearest shadow root
+ * @param element The element to get the root for
+ * @param parent This will determine how far up the DOM to travel to find the root
+ * @returns The root element
+ */
+function getRootFor(element, parent = document.body) {
+    if (!element.parentElement && !element.parentNode) {
+        return undefined;
+    }
+    if (element.parentNode instanceof ShadowRoot) {
+        return element.parentNode;
+    }
+    let currentNode = element.parentElement;
+    while (currentNode) {
+        if (currentNode.shadowRoot) {
+            return currentNode.shadowRoot;
+        }
+        else if (currentNode.parentNode instanceof ShadowRoot) {
+            return currentNode.parentNode;
+        }
+        currentNode = currentNode.parentElement;
+    }
+    return parent;
+}
+function waitForSelector(selector, node = document, hostElement) {
+    return new Promise((resolve) => {
+        const waitForElements = () => {
+            resolveSelector(selector, hostElement).then((elements) => {
+                if (elements && elements.length > 0) {
+                    resolve(elements[0]);
+                    observer?.disconnect();
+                }
+            });
+        };
+        waitForElements();
+        const observer = new MutationObserver(() => {
+            waitForElements();
+        });
+        observer.observe(node.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+/**
+ * Find an element by ID or reference
+ * @param element The element to find
+ * @param hostElement The element to start the search from
+ * @returns A promise that will resolve to the element
+ */
+function findElement(element, hostElement) {
+    if (element instanceof Promise) {
+        return element;
+    }
+    if (typeof element === 'object') {
+        return Promise.resolve(element);
+    }
+    const selector = `#${element}`;
+    return waitForSelector(selector, document, hostElement);
+}
+
 exports.arrow = arrow;
 exports.autoUpdate = autoUpdate;
 exports.computePosition = computePosition;
+exports.findElement = findElement;
 exports.flip = flip;
 exports.hide = hide;
 exports.inline = inline;
 exports.offset = offset;
+exports.resolveSelector = resolveSelector;
 exports.shift = shift;

package/dist/cjs/focus-proxy-CjxFZupW.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-DnclGKUw.js');
+
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Add a focus proxy element to the DOM to allow for better keyboard navigation and accessibility.
+ *
+ * Important: Also import the focus proxy mixin in the host component's scss file to ensure the proxy is visually hidden but still accessible to screen readers and keyboard navigation.
+ */
+const FocusProxy = (props) => {
+    return (index.h("ul", { class: "proxy-list", role: "listbox", id: `${props.hostId}-${PROXY_LIST_ID_SUFFIX}`, ...props.otherProps }));
+};
+const PROXY_LIST_ID_SUFFIX = 'proxy-listbox';
+const PROXY_LISTITEM_ID_SUFFIX = 'proxy-listbox-item';
+const updateFocusProxyList = (proxyListElement, items, modifyProxyElement) => {
+    if (proxyListElement && items.length > 0) {
+        const itemRect = items[0].getBoundingClientRect();
+        const containerRect = (proxyListElement.offsetParent ?? proxyListElement.parentElement)?.getBoundingClientRect();
+        const top = containerRect
+            ? Math.max(0, itemRect.top - containerRect.top - itemRect.height + 8)
+            : 0;
+        proxyListElement.innerHTML = '';
+        proxyListElement.style.top = top + 'px';
+        proxyListElement.style.padding = '0px';
+        proxyListElement.style.margin = '0px';
+        items.forEach((item) => {
+            const li = document.createElement('li');
+            li.id = item.id + '-' + PROXY_LISTITEM_ID_SUFFIX;
+            if (modifyProxyElement) {
+                modifyProxyElement(item, li);
+            }
+            item.ariaHidden = 'true';
+            proxyListElement.appendChild(li);
+        });
+    }
+};
+
+exports.FocusProxy = FocusProxy;
+exports.PROXY_LISTITEM_ID_SUFFIX = PROXY_LISTITEM_ID_SUFFIX;
+exports.PROXY_LIST_ID_SUFFIX = PROXY_LIST_ID_SUFFIX;
+exports.updateFocusProxyList = updateFocusProxyList;

package/dist/cjs/focus-trap-Be3N4ytz.js

@@ -0,0 +1,310 @@
+'use strict';
+
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var focusUtilities = require('./focus-utilities-5SZMxJg4.js');
+
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const TRAP_FOCUS_EXCLUDE_ATTRIBUTE = 'data-ix-focus-trap-exclude';
+const TRAP_FOCUS_INCLUDE_ATTRIBUTE = 'data-ix-focus-trap-include';
+const POPOVER_TAG = 'IX-POPOVER';
+const POPOVER_HEADER_TAG = 'IX-POPOVER-HEADER';
+const focusTrapQuery = `${focusUtilities.focusableQueryString}, [${TRAP_FOCUS_INCLUDE_ATTRIBUTE}]`;
+const mergeUniqueInDocumentOrder = (...lists) => {
+    const unique = [];
+    const seen = new Set();
+    for (const list of lists) {
+        for (const element of list) {
+            if (!seen.has(element)) {
+                seen.add(element);
+                unique.push(element);
+            }
+        }
+    }
+    return unique.sort((a, b) => {
+        const position = a.compareDocumentPosition(b);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+};
+const getDeepActiveElement = () => {
+    let active = document.activeElement;
+    while (active) {
+        if (active instanceof HTMLElement && active.shadowRoot?.activeElement) {
+            const shadowActive = active.shadowRoot.activeElement;
+            if (shadowActive !== active) {
+                active = shadowActive;
+                continue;
+            }
+        }
+        const root = active.getRootNode();
+        if (root instanceof ShadowRoot &&
+            root.activeElement &&
+            root.activeElement !== active) {
+            active = root.activeElement;
+            continue;
+        }
+        break;
+    }
+    return active;
+};
+const resolveFocusTrapActiveElement = (trapHost, focusableElements) => {
+    let activeElement = getDeepActiveElement();
+    if (findActiveFocusableIndex(activeElement, focusableElements) !== -1) {
+        if (activeElement instanceof HTMLElement &&
+            activeElement.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE) &&
+            activeElement.shadowRoot?.activeElement) {
+            const includedActive = activeElement.shadowRoot.activeElement;
+            if (findActiveFocusableIndex(includedActive, focusableElements) !== -1) {
+                return includedActive;
+            }
+        }
+        return activeElement;
+    }
+    const shadowActive = trapHost.shadowRoot?.activeElement;
+    if (shadowActive instanceof HTMLElement &&
+        findActiveFocusableIndex(shadowActive, focusableElements) !== -1) {
+        return shadowActive;
+    }
+    return activeElement;
+};
+function findActiveFocusableIndex(active, focusableElements) {
+    if (!(active instanceof HTMLElement)) {
+        return -1;
+    }
+    const directIndex = focusableElements.indexOf(active);
+    if (directIndex !== -1) {
+        return directIndex;
+    }
+    for (let index = 0; index < focusableElements.length; index++) {
+        const candidate = focusableElements[index];
+        if (candidate.shadowRoot?.contains(active)) {
+            return index;
+        }
+        const activeRoot = active.getRootNode();
+        if (activeRoot instanceof ShadowRoot && activeRoot.host === candidate) {
+            return index;
+        }
+        if (candidate.contains(active)) {
+            return index;
+        }
+    }
+    return -1;
+}
+const isOpenPopoverHost = (host) => {
+    if (host.classList.contains('visible')) {
+        return true;
+    }
+    const dialog = host.shadowRoot?.querySelector('dialog');
+    return dialog?.matches(':popover-open') ?? false;
+};
+const isNestedOpenPopoverLayer = (element, trapHost) => {
+    const ownerPopover = getPopoverHostForElement(element);
+    return (ownerPopover !== undefined &&
+        ownerPopover !== trapHost &&
+        isOpenPopoverHost(ownerPopover));
+};
+function getPopoverHostForElement(element) {
+    let current = element;
+    while (current) {
+        if (current instanceof HTMLElement && current.tagName === POPOVER_TAG) {
+            return current;
+        }
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+function isWithinInertSubtree(element) {
+    let current = element;
+    while (current) {
+        if (current instanceof HTMLElement && current.inert) {
+            return true;
+        }
+        if (current instanceof ShadowRoot) {
+            current = current.host;
+            continue;
+        }
+        current = current.parentNode;
+    }
+    return false;
+}
+function shouldExcludeFromFocusTrap(element, trapHost) {
+    if (isWithinInertSubtree(element)) {
+        return true;
+    }
+    const ownerPopover = getPopoverHostForElement(element);
+    if (!ownerPopover || ownerPopover === trapHost) {
+        return false;
+    }
+    return true;
+}
+/** CSS-hidden controls can match the focusable query but are not in tab order. */
+function isHiddenFromTabOrder(element) {
+    const { display, visibility } = getComputedStyle(element);
+    return display === 'none' || visibility === 'hidden';
+}
+/** Drops focusables inside closed or nested child popovers (not tabbable in the active layer). */
+function filterFocusTrapFocusables(focusableElements, trapHost) {
+    return focusableElements.filter((element) => !shouldExcludeFromFocusTrap(element, trapHost));
+}
+function expandFocusTrapIncludes(focusableElements, options) {
+    const useBoth = options?.trapFocusInShadowDom === 'both';
+    for (let index = 0; index < focusableElements.length; index++) {
+        const includeElement = focusableElements[index];
+        if (!includeElement.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE)) {
+            continue;
+        }
+        const includedFocusableElements = focusUtilities.queryElements(useBoth ||
+            (options?.trapFocusInShadowDom === true && includeElement.shadowRoot)
+            ? (includeElement.shadowRoot ?? includeElement)
+            : includeElement, focusUtilities.focusableQueryString, useBoth).filter((element) => element !== includeElement && !isHiddenFromTabOrder(element));
+        for (const includedElement of includedFocusableElements) {
+            const duplicateIndex = focusableElements.indexOf(includedElement);
+            if (duplicateIndex !== -1) {
+                focusableElements.splice(duplicateIndex, 1);
+                if (duplicateIndex < index) {
+                    index--;
+                }
+            }
+        }
+        focusableElements.splice(index, 1, ...includedFocusableElements);
+        index += includedFocusableElements.length - 1;
+    }
+}
+function getFocusTrapFocusables(ref, options) {
+    const useBoth = options?.trapFocusInShadowDom === 'both';
+    let focusableElements;
+    if (useBoth) {
+        const fromShadow = ref.shadowRoot
+            ? focusUtilities.queryElements(ref.shadowRoot, focusTrapQuery, false)
+            : [];
+        const fromLight = focusUtilities.queryElements(ref, focusTrapQuery, false);
+        focusableElements = mergeUniqueInDocumentOrder(fromShadow, fromLight);
+    }
+    else {
+        const focusTrapRoot = options?.trapFocusInShadowDom === true ? ref.shadowRoot : ref;
+        focusableElements = focusUtilities.queryElements(focusTrapRoot, focusTrapQuery, useBoth);
+    }
+    expandFocusTrapIncludes(focusableElements, options);
+    const filtered = filterFocusTrapFocusables(focusableElements, ref).filter((element) => !isHiddenFromTabOrder(element));
+    if (!options?.excludeElements) {
+        return filtered;
+    }
+    return filtered.filter((element) => !element.hasAttribute(TRAP_FOCUS_EXCLUDE_ATTRIBUTE));
+}
+function isHeaderFocusable(element, trapHost) {
+    let current = element;
+    while (current && current !== trapHost) {
+        if (current instanceof HTMLElement &&
+            current.tagName === POPOVER_HEADER_TAG) {
+            return true;
+        }
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return false;
+}
+/** Focus the first content control; falls back to the header close when content has none. */
+function focusFirstFocusTrapElement(ref, options, focusOptions) {
+    const focusableElements = getFocusTrapFocusables(ref, options);
+    const contentFirst = focusableElements.find((element) => !isHeaderFocusable(element, ref));
+    const target = contentFirst ?? focusableElements[0];
+    focusUtilities.focusElementInContext(target ?? null, ref, focusOptions);
+}
+const resolveFocusTrapElement = async (target) => {
+    if (target instanceof HTMLElement) {
+        return target;
+    }
+    if (makeRef.isMakeRef(target)) {
+        return target.waitForCurrent();
+    }
+    throw new Error('Invalid focus trap element reference');
+};
+const addFocusTrap = async (element, options) => {
+    const trapHost = options?.targetElement
+        ? await resolveFocusTrapElement(options.targetElement)
+        : element;
+    let listenerTarget = element;
+    if (options?.listenOnDocument) {
+        listenerTarget = document;
+    }
+    else if (options?.targetElement) {
+        listenerTarget = trapHost;
+    }
+    const onKeydown = (event) => {
+        const keyboardEvent = event;
+        if (keyboardEvent.key !== 'Tab') {
+            return;
+        }
+        if (options?.listenOnDocument) {
+            if (options.shouldDeferTabTrap?.(trapHost)) {
+                return;
+            }
+            const deepActive = getDeepActiveElement();
+            if (deepActive instanceof HTMLElement &&
+                isNestedOpenPopoverLayer(deepActive, trapHost)) {
+                return;
+            }
+        }
+        const focusableElements = getFocusTrapFocusables(trapHost, options);
+        if (focusableElements.length === 0) {
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const activeElement = resolveFocusTrapActiveElement(trapHost, focusableElements);
+        const activeIndex = findActiveFocusableIndex(activeElement, focusableElements);
+        let handled = false;
+        if (activeIndex === -1) {
+            return;
+        }
+        if (keyboardEvent.shiftKey) {
+            if (activeIndex === 0) {
+                keyboardEvent.preventDefault();
+                focusUtilities.tryFocusElement(lastElement);
+                handled = true;
+            }
+        }
+        else if (activeIndex === focusableElements.length - 1) {
+            keyboardEvent.preventDefault();
+            focusUtilities.tryFocusElement(firstElement);
+            handled = true;
+        }
+        if (handled) {
+            event.stopImmediatePropagation();
+        }
+    };
+    listenerTarget.addEventListener('keydown', onKeydown);
+    const destroy = () => {
+        listenerTarget.removeEventListener('keydown', onKeydown);
+    };
+    return {
+        destroy,
+    };
+};
+
+exports.TRAP_FOCUS_EXCLUDE_ATTRIBUTE = TRAP_FOCUS_EXCLUDE_ATTRIBUTE;
+exports.TRAP_FOCUS_INCLUDE_ATTRIBUTE = TRAP_FOCUS_INCLUDE_ATTRIBUTE;
+exports.addFocusTrap = addFocusTrap;
+exports.focusFirstFocusTrapElement = focusFirstFocusTrapElement;
+exports.getFocusTrapFocusables = getFocusTrapFocusables;