@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/utils/lazy-list/lazy.js

@@ -15,6 +15,28 @@ const addClass = (element, className) => {
     element.classList.add(className);
 };
 export class VirtualList {
+    _config;
+    _lastRepaint;
+    _maxElementHeight;
+    _renderAnimationFrame;
+    _averageHeight;
+    _scrollListener = null;
+    _pendingRender = false;
+    static defaultConfig = {
+        width: '100%',
+        height: '100%',
+    };
+    _element;
+    _scroller;
+    _itemHeights;
+    _containerSize;
+    _scrollPaddingBottom;
+    _scrollPaddingTop;
+    _scrollHeight;
+    _itemPositions;
+    _screenItemsLen;
+    _lastFrom;
+    _cachedItemsLen;
     static create(element, userProvidedConfig = VirtualList.defaultConfig) {
         return new VirtualList(element, userProvidedConfig);
     }
@@ -51,8 +73,6 @@ export class VirtualList {
         return maxElementHeight;
     }
     constructor(element, userProvidedConfig) {
-        this._scrollListener = null;
-        this._pendingRender = false;
         this._lastRepaint = null;
         this._maxElementHeight = VirtualList.getMaxBrowserHeight();
         this.refresh(element, userProvidedConfig);
@@ -90,14 +110,13 @@ export class VirtualList {
             window.cancelAnimationFrame(this._renderAnimationFrame);
         }
         const config = this._config;
-        const scrollContainer = (config === null || config === void 0 ? void 0 : config.scrollContainer) || this._element;
+        const scrollContainer = config?.scrollContainer || this._element;
         if (this._scrollListener && scrollContainer) {
             scrollContainer.removeEventListener('scroll', this._scrollListener);
         }
     }
     refresh(element, userProvidedConfig = VirtualList.defaultConfig) {
-        var _a;
-        const oldScrollContainer = ((_a = this._config) === null || _a === void 0 ? void 0 : _a.scrollContainer) || this._element;
+        const oldScrollContainer = this._config?.scrollContainer || this._element;
         if (this._scrollListener && oldScrollContainer) {
             oldScrollContainer.removeEventListener('scroll', this._scrollListener);
         }
@@ -365,7 +384,3 @@ export class VirtualList {
         return i;
     }
 }
-VirtualList.defaultConfig = {
-    width: '100%',
-    height: '100%',
-};

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

@@ -12,7 +12,10 @@ const defaultOptions = {
     defaultEnabled: true,
 };
 export function createListener(event, options = {}) {
-    const opts = Object.assign(Object.assign({}, defaultOptions), options);
+    const opts = {
+        ...defaultOptions,
+        ...options,
+    };
     let callback;
     const onEvent = (event) => {
         callback(event);
@@ -43,9 +46,8 @@ export function OnListener(event, fnExp) {
         const { componentWillLoad, componentWillRender, disconnectedCallback } = proto;
         if (fnExp) {
             proto.componentWillRender = function () {
-                var _a;
                 const host = getElement(this);
-                (_a = host[`__ix__${methodName}`]) === null || _a === void 0 ? void 0 : _a.enable(fnExp(this));
+                host[`__ix__${methodName}`]?.enable(fnExp(this));
                 return componentWillRender && componentWillRender.call(this);
             };
         }
@@ -58,10 +60,9 @@ export function OnListener(event, fnExp) {
             return componentWillLoad && componentWillLoad.call(this);
         };
         proto.disconnectedCallback = function () {
-            var _a;
             const host = getElement(this);
             if (host && host[`__ix__${methodName}`]) {
-                (_a = host[`__ix__${methodName}`]) === null || _a === void 0 ? void 0 : _a.destroy();
+                host[`__ix__${methodName}`]?.destroy();
                 host[`__ix__${methodName}`] = null;
             }
             return disconnectedCallback && disconnectedCallback.call(this);

package/dist/collection/components/utils/luxon-datetime-format-masks.js

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ */
+/** Used when a format string has time tokens but no date prefix (e.g. time-only mask). */
+export const LUXON_DEFAULT_DATE_ONLY_FORMAT = 'yyyy/LL/dd';
+/** Used when a format string has no time tokens. */
+export const LUXON_DEFAULT_TIME_ONLY_FORMAT = 'HH:mm:ss';
+function firstLuxonTimeTokenIndex(format) {
+    return format.search(/[HhmsaSZ]/);
+}
+/**
+ * Luxon date mask: substring of `format` before the first time token, trimmed.
+ * Matches splitting used for `ix-datetime-input` / `ix-datetime-picker` embedded date column.
+ */
+export function getLuxonDateOnlyFormatMask(format, fallback = LUXON_DEFAULT_DATE_ONLY_FORMAT) {
+    const timeTokenIndex = firstLuxonTimeTokenIndex(format);
+    if (timeTokenIndex === -1) {
+        return format;
+    }
+    let end = timeTokenIndex;
+    while (end > 0 && " \t'T".includes(format[end - 1])) {
+        end--;
+    }
+    const prefix = format.slice(0, end).trimEnd();
+    return prefix === '' ? fallback : prefix;
+}
+/**
+ * Luxon time mask: substring of `format` from the first time token through the end.
+ */
+export function getLuxonTimeFormatMask(format, fallback = LUXON_DEFAULT_TIME_ONLY_FORMAT) {
+    const timeTokenIndex = firstLuxonTimeTokenIndex(format);
+    if (timeTokenIndex === -1) {
+        return fallback;
+    }
+    return format.slice(timeTokenIndex);
+}

package/dist/collection/components/utils/make-ref.js

@@ -7,8 +7,8 @@ export function makeRef(currentChangedCallback) {
             return;
         }
         current = setRefFunction.current = ref;
-        currentChangedCallback === null || currentChangedCallback === void 0 ? void 0 : currentChangedCallback(ref);
-        resolve === null || resolve === void 0 ? void 0 : resolve(ref);
+        currentChangedCallback?.(ref);
+        resolve?.(ref);
     };
     setRefFunction.current = current;
     setRefFunction.waitForCurrent = async () => {
@@ -17,3 +17,6 @@ export function makeRef(currentChangedCallback) {
     };
     return setRefFunction;
 }
+export function isMakeRef(ref) {
+    return (typeof ref === 'function' && 'current' in ref && 'waitForCurrent' in ref);
+}

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

@@ -6,73 +6,64 @@
  * 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;
+    #expandChangeListener = null;
     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.#expandChangeListener = (event) => {
+            this.#menuExpandChange.emit(event.detail);
+        };
+        this.#menuElement.addEventListener('expandChange', this.#expandChangeListener);
+    }
+    unregister(menuElement) {
+        if (this.#menuElement === menuElement) {
+            if (this.#expandChangeListener) {
+                menuElement.removeEventListener('expandChange', this.#expandChangeListener);
+            }
+            this.#expandChangeListener = null;
+            this.#menuElement = null;
+        }
     }
     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: () => { } },
+]);