@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/utils/internal/mixins/accessibility/inherit-aria-attributes.mixin.js

@@ -0,0 +1,190 @@
+import { a11yHostAttributes, } from "./../../../a11y";
+export const InheritAriaAttributesMixin = (Base) => {
+    class InheritAriaAttributesMixinCtor extends Base {
+        inheritAriaAttributes = {};
+        constructor(...args) {
+            super(...args);
+        }
+        getIgnoredAriaAttributes() {
+            return [];
+        }
+        componentWillLoad() {
+            this.inheritAriaAttributes = a11yHostAttributes(this.hostElement, this.getIgnoredAriaAttributes ? this.getIgnoredAriaAttributes() : []);
+        }
+        ariaAttributeChanged(newValue, _, propName) {
+            const ignoredAttributes = this.getIgnoredAriaAttributes();
+            if (ignoredAttributes.includes(propName)) {
+                return;
+            }
+            const updateAttribute = {
+                [propName]: newValue,
+            };
+            this.inheritAriaAttributes = {
+                ...this.inheritAriaAttributes,
+                ...updateAttribute,
+            };
+        }
+        static get states() {
+            return {
+                "inheritAriaAttributes": {}
+            };
+        }
+        static get watchers() {
+            return [{
+                    "propName": "role",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-activedescendant",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-atomic",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-autocomplete",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-braillelabel",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-brailleroledescription",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-busy",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-checked",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-colcount",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-colindex",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-colindextext",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-colspan",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-controls",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-current",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-describedby",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-description",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-details",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-disabled",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-errormessage",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-expanded",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-flowto",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-haspopup",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-hidden",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-invalid",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-keyshortcuts",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-label",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-labelledby",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-level",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-live",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-multiline",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-multiselectable",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-orientation",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-owns",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-placeholder",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-posinset",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-pressed",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-readonly",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-relevant",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-required",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-roledescription",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-rowcount",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-rowindex",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-rowindextext",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-rowspan",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-selected",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-setsize",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-sort",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-valuemax",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-valuemin",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-valuenow",
+                    "methodName": "ariaAttributeChanged"
+                }, {
+                    "propName": "aria-valuetext",
+                    "methodName": "ariaAttributeChanged"
+                }];
+        }
+    }
+    return InheritAriaAttributesMixinCtor;
+};

package/dist/collection/components/utils/internal/mixins/focus-visible.mixin.js

@@ -0,0 +1,91 @@
+import { a11yBoolean } from "../../a11y";
+export const FocusVisibleMixin = (Base) => {
+    class FocusVisibleMixinCtor extends Base {
+        /**
+         * @internal
+         */
+        ixFocusVisible = false;
+        /**
+         * When `true`, do not map keyboard focus visibility to `aria-selected` on the host.
+         * Use when selection state must not mirror roving focus (e.g. `ix-select-item`).
+         *
+         * @internal
+         */
+        disableAriaSelectHandling = false;
+        constructor(...args) {
+            super(...args);
+        }
+        componentDidLoad() {
+            if (super.componentDidLoad) {
+                super.componentDidLoad();
+            }
+        }
+        $internal_checkAriaSelected(focusVisible) {
+            if (!this.hostElement) {
+                return;
+            }
+            if (this.disableAriaSelectHandling) {
+                this.hostElement.removeAttribute('aria-selected');
+                return;
+            }
+            this.hostElement.ariaSelected = a11yBoolean(focusVisible);
+        }
+        static get properties() {
+            return {
+                "ixFocusVisible": {
+                    "type": "boolean",
+                    "mutable": false,
+                    "complexType": {
+                        "original": "boolean",
+                        "resolved": "boolean",
+                        "references": {}
+                    },
+                    "required": false,
+                    "optional": false,
+                    "docs": {
+                        "tags": [{
+                                "name": "internal",
+                                "text": undefined
+                            }],
+                        "text": ""
+                    },
+                    "getter": false,
+                    "setter": false,
+                    "reflect": true,
+                    "attribute": "ix-focus-visible",
+                    "defaultValue": "false"
+                },
+                "disableAriaSelectHandling": {
+                    "type": "boolean",
+                    "mutable": false,
+                    "complexType": {
+                        "original": "boolean",
+                        "resolved": "boolean",
+                        "references": {}
+                    },
+                    "required": false,
+                    "optional": false,
+                    "docs": {
+                        "tags": [{
+                                "name": "internal",
+                                "text": undefined
+                            }],
+                        "text": "When `true`, do not map keyboard focus visibility to `aria-selected` on the host.\nUse when selection state must not mirror roving focus (e.g. `ix-select-item`)."
+                    },
+                    "getter": false,
+                    "setter": false,
+                    "reflect": false,
+                    "attribute": "disable-aria-select-handling",
+                    "defaultValue": "false"
+                }
+            };
+        }
+        static get watchers() {
+            return [{
+                    "propName": "ixFocusVisible",
+                    "methodName": "$internal_checkAriaSelected"
+                }];
+        }
+    }
+    return FocusVisibleMixinCtor;
+};

package/dist/collection/components/utils/internal/mixins/id.mixin.js

@@ -0,0 +1,17 @@
+let componentId = 0;
+export const ComponentIdMixin = (Base) => {
+    class ComponentIdMixinCtor extends Base {
+        $internal_id = ++componentId;
+        getHostElementId() {
+            if (this.hostElement) {
+                if (this.hostElement.id !== '') {
+                    return this.hostElement.id;
+                }
+                const tagName = this.hostElement.tagName.toLowerCase();
+                return `ix-component-${tagName}-${this.$internal_id}`;
+            }
+            return `ix-component-${this.$internal_id}`;
+        }
+    }
+    return ComponentIdMixinCtor;
+};

package/dist/collection/components/utils/internal/mixins/input/input-picker.mixin.js

@@ -0,0 +1,45 @@
+import { dropdownController } from "./../../../../dropdown/dropdown-controller";
+export const InputPickerMixin = (Base) => {
+    class InputPickerMixinCtor extends Base {
+        constructor() {
+            super();
+        }
+        /** @internal */
+        async openPicker() {
+            const pickerRef = this.getPickerElement();
+            const pickerElement = await pickerRef?.waitForCurrent();
+            if (!pickerElement) {
+                return;
+            }
+            dropdownController.dismissAll();
+            requestAnimationFrame(() => {
+                pickerElement.show = true;
+            });
+        }
+        static get methods() {
+            return {
+                "openPicker": {
+                    "complexType": {
+                        "signature": "() => Promise<void>",
+                        "parameters": [],
+                        "references": {
+                            "Promise": {
+                                "location": "global",
+                                "id": "global::Promise"
+                            }
+                        },
+                        "return": "Promise<void>"
+                    },
+                    "docs": {
+                        "text": "",
+                        "tags": [{
+                                "name": "internal",
+                                "text": undefined
+                            }]
+                    }
+                }
+            };
+        }
+    }
+    return InputPickerMixinCtor;
+};

package/dist/collection/components/utils/internal/mixins/setup.mixin.js

@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+import { Build } from "@stencil/core";
+import { detectKeyboardMode, } from "../../focus/detect-keyboard-mode";
+import { getComposedPath } from "../../shadow-dom";
+import { IX_FOCUS_VISIBLE, IX_FOCUS_VISIBLE_ACTIVE, } from "../../focus/focus-utilities";
+let originalFocus = null;
+let globalKeyboardDetectionInitialized = false;
+let keyboardMode = null;
+export function hasKeyboardMode() {
+    return keyboardMode?.hasKeyboardMode() ?? false;
+}
+let currentFocus = [];
+export function removeVisibleFocus() {
+    currentFocus.forEach((el) => {
+        el.classList.remove(IX_FOCUS_VISIBLE_ACTIVE);
+        el.ixFocusVisible = false;
+    });
+}
+export class IxFocusVisibleChangeEvent extends CustomEvent {
+    static eventName = 'ixFocusVisibleChange';
+    constructor(detail) {
+        super(IxFocusVisibleChangeEvent.eventName, {
+            detail,
+            bubbles: true,
+            cancelable: true,
+        });
+    }
+}
+export function updateFocusState(target) {
+    const composedPath = getComposedPath(target);
+    const focusableElements = composedPath.filter((el) => el.classList.contains(IX_FOCUS_VISIBLE));
+    // Clear previous focus
+    removeVisibleFocus();
+    // Set new focus if keyboard mode is active
+    if (hasKeyboardMode()) {
+        focusableElements.forEach((el) => {
+            el.classList.add(IX_FOCUS_VISIBLE_ACTIVE);
+            el.ixFocusVisible = true;
+        });
+        currentFocus = focusableElements;
+    }
+    else {
+        currentFocus = [];
+    }
+    document.dispatchEvent(new IxFocusVisibleChangeEvent({ currentFocus }));
+}
+function applyFocusPatch() {
+    if (typeof HTMLElement !== 'undefined' && !originalFocus) {
+        originalFocus = HTMLElement.prototype.focus;
+        HTMLElement.prototype.focus = function (options) {
+            if (Build.isDev) {
+                const composedPath = getComposedPath(this);
+                const hasFocusableClass = composedPath.some((el) => el.classList.contains(IX_FOCUS_VISIBLE));
+                if (!hasFocusableClass && this.tabIndex === -1) {
+                    console.warn(`Calling focus() on an element that is not focus-visible aware, or has tabIndex -1:`, this, composedPath);
+                }
+            }
+            originalFocus?.call(this, options);
+            updateFocusState(this);
+        };
+        document.addEventListener('focusin', (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement) {
+                updateFocusState(target);
+            }
+        }, true);
+        document.addEventListener('keyboardmodechange', (event) => {
+            const customEvent = event;
+            const isKeyboardMode = customEvent.detail.keyboardMode;
+            if (!isKeyboardMode) {
+                removeVisibleFocus();
+                return;
+            }
+        });
+        document.addEventListener('focusout', (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement) {
+                updateFocusState(target);
+            }
+        });
+    }
+}
+/**
+ * Mixin to add global focus visible handling to a component. Mixin will be used via base class IxComponent().
+ * Not necessary to use this mixin directly in components.
+ */
+export const SetupMixin = (Base) => {
+    class FocusListenerMixin extends Base {
+        componentDidLoad() {
+            if (super.componentDidLoad) {
+                super.componentDidLoad();
+            }
+            if (!originalFocus) {
+                applyFocusPatch();
+            }
+            if (!globalKeyboardDetectionInitialized) {
+                if (Build.isDev) {
+                    console.info('Initializing global keyboard mode detection');
+                }
+                globalKeyboardDetectionInitialized = true;
+                keyboardMode = detectKeyboardMode();
+            }
+        }
+        disconnectedCallback() {
+            if (super.disconnectedCallback) {
+                super.disconnectedCallback();
+            }
+        }
+    }
+    return FocusListenerMixin;
+};

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);
+}