@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/utils/menu-service/menu-service.js

@@ -6,73 +6,53 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m")
-        throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _MenuService_menuElement, _MenuService_menuExpandChange, _MenuService_isPinned;
 import { TypedEvent } from "../typed-event";
 class MenuService {
-    constructor() {
-        _MenuService_menuElement.set(this, null);
-        _MenuService_menuExpandChange.set(this, new TypedEvent());
-        _MenuService_isPinned.set(this, false);
-    }
+    #menuElement = null;
+    #menuExpandChange = new TypedEvent();
+    #isPinned = false;
     register(menuElement) {
-        if (__classPrivateFieldGet(this, _MenuService_menuElement, "f")) {
+        if (this.#menuElement) {
             console.warn('Menu already defined');
             return;
         }
-        __classPrivateFieldSet(this, _MenuService_menuElement, menuElement, "f");
-        __classPrivateFieldGet(this, _MenuService_menuElement, "f").addEventListener('expandChange', (event) => {
-            __classPrivateFieldGet(this, _MenuService_menuExpandChange, "f").emit(event.detail);
+        this.#menuElement = menuElement;
+        this.#menuElement.addEventListener('expandChange', (event) => {
+            this.#menuExpandChange.emit(event.detail);
         });
     }
     setIsPinned(pinned) {
-        __classPrivateFieldSet(this, _MenuService_isPinned, pinned, "f");
+        this.#isPinned = pinned;
     }
     async open() {
-        if (__classPrivateFieldGet(this, _MenuService_menuElement, "f")) {
-            __classPrivateFieldGet(this, _MenuService_menuElement, "f").toggleMenu(true);
+        if (this.#menuElement) {
+            this.#menuElement.toggleMenu(true);
             return true;
         }
         return false;
     }
     async close() {
-        if (__classPrivateFieldGet(this, _MenuService_menuElement, "f")) {
-            __classPrivateFieldGet(this, _MenuService_menuElement, "f").toggleMenu(false);
+        if (this.#menuElement) {
+            this.#menuElement.toggleMenu(false);
             return true;
         }
         return false;
     }
     async toggle() {
-        if (__classPrivateFieldGet(this, _MenuService_menuElement, "f")) {
-            __classPrivateFieldGet(this, _MenuService_menuElement, "f").toggleMenu();
+        if (this.#menuElement) {
+            this.#menuElement.toggleMenu();
             return true;
         }
         return false;
     }
     get nativeElement() {
-        return __classPrivateFieldGet(this, _MenuService_menuElement, "f");
+        return this.#menuElement;
     }
     get expandChange() {
-        return __classPrivateFieldGet(this, _MenuService_menuExpandChange, "f");
+        return this.#menuExpandChange;
     }
     get isPinned() {
-        return __classPrivateFieldGet(this, _MenuService_isPinned, "f");
+        return this.#isPinned;
     }
 }
-_MenuService_menuElement = new WeakMap(), _MenuService_menuExpandChange = new WeakMap(), _MenuService_isPinned = new WeakMap();
 export const menuController = new MenuService();

package/dist/collection/components/utils/menu-tabs/menu-tabs-utils.js

@@ -1,49 +1 @@
-/*
- * SPDX-FileCopyrightText: 2023 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.
- */
-import { MenuSettings } from "../../menu-settings/menu-settings";
-function getItems(context) {
-    return Array.from(context.el.querySelectorAll(context instanceof MenuSettings
-        ? 'ix-menu-settings-item'
-        : 'ix-menu-about-item'));
-}
-export function setTab(context, label) {
-    if (context.activeTabLabel === label) {
-        return;
-    }
-    const { defaultPrevented } = context.tabChange.emit(label);
-    if (defaultPrevented) {
-        return;
-    }
-    context.activeTabLabel = label;
-}
-export function syncTabDisplay(context, label) {
-    context.items.forEach((i) => {
-        i.style.display = 'none';
-        if (i.label === label) {
-            i.style.display = 'block';
-        }
-    });
-}
-export function initialize(context) {
-    context.items = getItems(context);
-    if (context.items.length) {
-        const selectedLabel = context.activeTabLabel || context.items[0].label;
-        if (selectedLabel) {
-            setTab(context, selectedLabel);
-        }
-    }
-    context.items.forEach((item) => {
-        item.addEventListener('labelChange', (e) => {
-            context.items = getItems(context);
-            if (e.detail.oldLabel === context.activeTabLabel) {
-                context.activeTabLabel = e.detail.newLabel;
-            }
-        });
-    });
-}
+export {};

package/dist/collection/components/utils/modal/index.js

@@ -6,6 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { showModalLoading, } from './loading';
-export { showMessage } from './message';
+export { createShowModalLoading, showModalLoading, } from './loading';
+export { createShowMessage, showMessage, } from './message';
 export { closeModal, dismissModal, showModal, } from './modal';

package/dist/collection/components/utils/modal/loading.js

@@ -7,36 +7,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Animation from "../animation";
+import { createDependencyFunction, } from "../dependency-function";
 import { getCoreDelegate } from "../delegate";
-export function showModalLoading(messageOrOptions) {
-    const modal = document.createElement('ix-modal');
-    modal.disableEscapeClose = true;
-    const loading = document.createElement('ix-modal-loading');
-    if (typeof messageOrOptions === 'string') {
-        loading.innerText = messageOrOptions;
-    }
-    else {
-        loading.innerText = messageOrOptions.message;
-        if (messageOrOptions.centered) {
+/**
+ * Create a loading modal helper with custom element dependencies.
+ */
+export function createShowModalLoading(dependencies) {
+    return createDependencyFunction(async function showModalLoading(options) {
+        const modal = document.createElement('ix-modal');
+        modal.beforeDismiss = () => false;
+        const loading = document.createElement('ix-modal-loading');
+        loading.innerText = options.message;
+        if (options.centered) {
             modal.centered = true;
         }
-    }
-    modal.appendChild(loading);
-    getCoreDelegate().attachView(modal);
-    modal.showModal();
-    return {
-        update: (text) => (loading.innerHTML = text),
-        finish: (text, timeout = 250) => {
-            if (text !== undefined) {
-                loading.innerText = text;
-            }
-            else {
-                timeout = 0;
-            }
-            setTimeout(() => {
-                modal.closeModal(null);
-                setTimeout(async () => await getCoreDelegate().removeView(modal), Animation.mediumTime);
-            }, timeout);
-        },
-    };
+        modal.appendChild(loading);
+        await getCoreDelegate().attachView(modal);
+        await modal.showModal();
+        return {
+            update: (text) => (loading.innerText = text),
+            finish: (text, timeout = 250) => {
+                if (text !== undefined) {
+                    loading.innerText = text;
+                }
+                else {
+                    timeout = 0;
+                }
+                setTimeout(() => {
+                    modal.closeModal(null);
+                    setTimeout(async () => await getCoreDelegate().removeView(modal), Animation.mediumTime);
+                }, timeout);
+            },
+        };
+    }, dependencies);
 }
+export const showModalLoading = createShowModalLoading([
+    { tag: 'ix-modal', define: () => { } },
+    { tag: 'ix-modal-loading', define: () => { } },
+]);

package/dist/collection/components/utils/modal/message.js

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconError, iconInfo, iconQuestion, iconSuccess, iconWarning, } from "@siemens/ix-icons/icons";
+import { createDependencyFunction, } from "../dependency-function";
 import { getCoreDelegate } from "../delegate";
 import { TypedEvent } from "../typed-event";
 function setA11yAttributes(element, config) {
@@ -45,114 +46,140 @@ function createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel)
     ];
 }
 /**
- * Displays a message modal with configurable actions and returns an event emitter for action responses
+ * Create a message modal helper with custom element dependencies.
  */
-export async function showMessage(config) {
-    const onMessageAction = new TypedEvent();
-    const dialog = document.createElement('ix-modal');
-    const header = document.createElement('ix-modal-header');
-    const content = document.createElement('ix-modal-content');
-    const footer = document.createElement('ix-modal-footer');
-    setA11yAttributes(dialog, config);
-    Object.assign(header, config);
-    Object.assign(content, config);
-    Object.assign(footer, config);
-    header.innerText = config.messageTitle;
-    content.innerText = config.message;
-    config.actions.forEach(({ id, text, type, payload }) => {
-        const button = document.createElement('ix-button');
-        button.innerText = text;
-        footer.appendChild(button);
-        if (type === 'okay') {
-            button.variant = 'primary';
-            button.addEventListener('click', () => dialog.closeModal({
-                actionId: id,
-                payload,
-            }));
-            return;
-        }
-        else if (type === 'cancel') {
-            button.variant = 'secondary';
-            button.addEventListener('click', () => dialog.dismissModal({
-                actionId: id,
-                payload,
-            }));
-            return;
-        }
-    });
-    dialog.appendChild(header);
-    dialog.appendChild(content);
-    dialog.appendChild(footer);
-    const dialogRef = await getCoreDelegate().attachView(dialog);
-    dialogRef.addEventListener('dialogClose', (event) => {
-        onMessageAction.emit(event.detail);
-        dialogRef.remove();
-    });
-    dialogRef.addEventListener('dialogDismiss', (event) => {
-        onMessageAction.emit(event.detail);
-        dialogRef.remove();
+export function createShowMessage(dependencies) {
+    const showMessage = createDependencyFunction(async function (config) {
+        const onMessageAction = new TypedEvent();
+        const dialog = document.createElement('ix-modal');
+        const header = document.createElement('ix-modal-header');
+        const content = document.createElement('ix-modal-content');
+        const footer = document.createElement('ix-modal-footer');
+        setA11yAttributes(dialog, config);
+        Object.assign(header, config);
+        Object.assign(content, config);
+        Object.assign(footer, config);
+        header.innerText = config.messageTitle;
+        content.innerText = config.message;
+        config.actions.forEach(({ id, text, type, payload }) => {
+            const button = document.createElement('ix-button');
+            button.innerText = text;
+            footer.appendChild(button);
+            if (type === 'okay') {
+                button.variant = 'primary';
+                button.addEventListener('click', () => dialog.closeModal({
+                    actionId: id,
+                    payload,
+                }));
+                return;
+            }
+            else if (type === 'cancel') {
+                button.variant = 'secondary';
+                button.addEventListener('click', () => dialog.dismissModal({
+                    actionId: id,
+                    payload,
+                }));
+                return;
+            }
+        });
+        dialog.appendChild(header);
+        dialog.appendChild(content);
+        dialog.appendChild(footer);
+        const dialogRef = await getCoreDelegate().attachView(dialog);
+        dialogRef.addEventListener('dialogClose', (event) => {
+            onMessageAction.emit(event.detail);
+            dialogRef.remove();
+        });
+        dialogRef.addEventListener('dialogDismiss', (event) => {
+            onMessageAction.emit(event.detail);
+            dialogRef.remove();
+        });
+        setA11yAttributes(dialogRef, config);
+        Object.assign(dialogRef, config);
+        dialogRef.showModal();
+        return onMessageAction;
+    }, dependencies);
+    return Object.assign(showMessage, {
+        /**
+         * Displays an info message modal with an info icon
+         */
+        info: (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+            return showMessage({
+                message,
+                messageTitle: title,
+                icon: iconInfo,
+                actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+            });
+        },
+        /**
+         * Displays a warning message modal with a warning icon
+         */
+        warning: (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+            return showMessage({
+                message,
+                messageTitle: title,
+                icon: iconWarning,
+                //TODO(IX-3400): Remove warning-text when proper CSS variable is available
+                iconColor: 'color-warning-text',
+                actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+            });
+        },
+        /**
+         * Displays an error message modal with an error icon
+         */
+        error: (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+            return showMessage({
+                message,
+                messageTitle: title,
+                icon: iconError,
+                iconColor: 'color-alarm',
+                actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+            });
+        },
+        /**
+         * Displays a success message modal with a success icon
+         */
+        success: (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+            return showMessage({
+                message,
+                messageTitle: title,
+                icon: iconSuccess,
+                iconColor: 'color-success',
+                actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+            });
+        },
+        /**
+         * Displays a question message modal with a question icon
+         */
+        question: (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+            return showMessage({
+                message,
+                messageTitle: title,
+                icon: iconQuestion,
+                actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+            });
+        },
     });
-    setA11yAttributes(dialogRef, config);
-    Object.assign(dialogRef, config);
-    dialogRef.showModal();
-    return onMessageAction;
 }
 /**
- * Displays an info message modal with an info icon
- */
-showMessage.info = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
-    return showMessage({
-        message,
-        messageTitle: title,
-        icon: iconInfo,
-        actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
-    });
-};
-/**
- * Displays a warning message modal with a warning icon
- */
-showMessage.warning = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
-    return showMessage({
-        message,
-        messageTitle: title,
-        icon: iconWarning,
-        //TODO(IX-3400): Remove warning-text when proper CSS variable is available
-        iconColor: 'color-warning-text',
-        actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
-    });
-};
-/**
- * Displays an error message modal with an error icon
- */
-showMessage.error = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
-    return showMessage({
-        message,
-        messageTitle: title,
-        icon: iconError,
-        iconColor: 'color-alarm',
-        actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
-    });
-};
-/**
- * Displays a success message modal with a success icon
- */
-showMessage.success = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
-    return showMessage({
-        message,
-        messageTitle: title,
-        icon: iconSuccess,
-        iconColor: 'color-success',
-        actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
-    });
-};
-/**
- * Displays a question message modal with a question icon
+ * Displays a message modal with configurable actions and returns an event emitter for action responses
  */
-showMessage.question = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
-    return showMessage({
-        message,
-        messageTitle: title,
-        icon: iconQuestion,
-        actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
-    });
-};
+export const showMessage = createShowMessage([
+    {
+        tag: 'ix-modal',
+        define: () => { },
+    },
+    {
+        tag: 'ix-modal-header',
+        define: () => { },
+    },
+    {
+        tag: 'ix-modal-content',
+        define: () => { },
+    },
+    {
+        tag: 'ix-modal-footer',
+        define: () => { },
+    },
+    { tag: 'ix-button', define: () => { } },
+]);

package/dist/collection/components/utils/modal/modal.js

@@ -7,7 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { getCoreDelegate, resolveDelegate } from "../delegate";
+import { createDependencyFunction } from "../dependency-function";
 import { TypedEvent } from "../typed-event";
+export const IX_MODAL_AUTOFOCUS_SELECTOR = '[autofocus],[auto-focus]';
 /**
  * Set accessibility attributes on modal element
  */
@@ -49,7 +51,7 @@ export function dismissModal(element, dismissResult) {
 /**
  * Show modal with given configuration
  */
-export async function showModal(config) {
+export const showModal = createDependencyFunction(async function (config) {
     const delegate = resolveDelegate();
     let dialogRef;
     const onClose = new TypedEvent();
@@ -79,15 +81,16 @@ export async function showModal(config) {
         onDismiss.emit(detail);
         await delegate.removeView(dialogRef);
     });
-    requestAnimationFrame(() => {
-        const autofocusElement = dialogRef.querySelector('[autofocus],[auto-focus]');
-        if (autofocusElement) {
-            autofocusElement.focus();
-        }
-    });
     return {
         htmlElement: dialogRef,
         onClose,
         onDismiss,
     };
-}
+}, [
+    {
+        tag: 'ix-modal',
+        define: () => {
+            // Empty function body, because only necessary for dist-custom-elements
+        },
+    },
+]);

package/dist/collection/components/utils/overlay.js

@@ -1,7 +1,5 @@
 export class OverlayController {
-    constructor() {
-        this.overlays = new Set();
-    }
+    overlays = new Set();
     connected(instance) {
         this.overlays.add(instance);
     }

package/dist/collection/components/utils/shadow-dom.js

@@ -46,3 +46,45 @@ export function closestPassShadow(node, selector) {
     }
     return closestPassShadow(node.parentNode, selector);
 }
+/**
+ * Returns an array of elements representing the path from the given element
+ * to the document root, similar to Event.composedPath().
+ * This function respects shadow DOM boundaries and traverses through them.
+ *
+ * @param element - The HTMLElement to start the path from
+ * @returns An array of Elements including the element itself, shadow roots, and parent elements
+ *
+ * @example
+ * ```typescript
+ * const button = document.querySelector('ix-button');
+ * const path = getComposedPath(button);
+ * // Returns: [button, shadow-root, ix-button, body, html, document]
+ * ```
+ */
+export function getComposedPath(element) {
+    const path = [];
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement instanceof Element) {
+            path.push(currentElement);
+            // Check if we're inside a shadow root
+            const rootNode = currentElement.getRootNode();
+            if (rootNode instanceof ShadowRoot) {
+                // Continue with the shadow host
+                currentElement = rootNode.host;
+                continue;
+            }
+            // Move to the parent element
+            currentElement = currentElement.parentElement;
+        }
+        else if (currentElement instanceof Document) {
+            // Reached the document, stop here
+            break;
+        }
+        else {
+            // Move to parent node for other node types
+            currentElement = currentElement.parentNode;
+        }
+    }
+    return path;
+}

package/dist/collection/components/{drawer → utils}/test/animejs.mock.js

@@ -1,4 +1,3 @@
-"use strict";
 /*
  * SPDX-FileCopyrightText: 2025 Siemens AG
  *
@@ -7,19 +6,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-jest.mock('animejs', () => {
-    const mockAnimate = jest.fn(() => ({
+import { vi } from "vitest";
+vi.mock('animejs', () => {
+    const mockAnimate = vi.fn(() => ({
         finished: Promise.resolve(),
-        play: jest.fn(),
-        pause: jest.fn(),
-        restart: jest.fn(),
+        play: vi.fn(),
+        pause: vi.fn(),
+        restart: vi.fn(),
     }));
     return {
         __esModule: true,
         default: mockAnimate,
         animate: mockAnimate,
-        timeline: jest.fn(() => ({
-            add: jest.fn().mockReturnThis(),
+        timeline: vi.fn(() => ({
+            add: vi.fn().mockReturnThis(),
             finished: Promise.resolve(),
         })),
     };