@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/utils/input/validation.js

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { getElement } from "@stencil/core";
+import { isIxInputFieldComponent, } from ".";
 export async function isTouched(host) {
     if (typeof host.isTouched === 'function') {
         return host.isTouched();
@@ -26,8 +27,8 @@ export async function shouldSuppressInternalValidation(host) {
 export function createClassMutationObserver(element, callback, options) {
     const observer = new MutationObserver(callback);
     observer.observe(element, {
-        subtree: options === null || options === void 0 ? void 0 : options.includeChildren,
-        childList: options === null || options === void 0 ? void 0 : options.includeChildren,
+        subtree: options?.includeChildren,
+        childList: options?.includeChildren,
         attributes: true,
         attributeFilter: ['class'],
     });
@@ -63,6 +64,10 @@ export function HookValidationLifecycle(options) {
                 if (skipValidation) {
                     return;
                 }
+                if (!isIxInputFieldComponent(host)) {
+                    return;
+                }
+                const validationElement = await host.getNativeInputElement?.();
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
@@ -79,23 +84,41 @@ export function HookValidationLifecycle(options) {
                     const touched = await isTouched(host);
                     host.classList.toggle(`ix-invalid--validity-patternMismatch`, validityState.patternMismatch);
                     host.classList.toggle('ix-invalid--validity-invalid', !validityState.valid && touched);
+                    const fieldWrapper = host.shadowRoot?.querySelector('ix-field-wrapper');
+                    if (validationElement && fieldWrapper) {
+                        const ariaErrorMessageElement = await fieldWrapper.getAriaErrorMessageElement();
+                        const ariaHelperMessageElement = await fieldWrapper.getAriaHelperMessageElement();
+                        if (ariaHelperMessageElement) {
+                            validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
+                        }
+                        if (!validityState.valid) {
+                            validationElement?.setAttribute('aria-invalid', 'true');
+                            if (ariaErrorMessageElement && !validityState.valid) {
+                                validationElement.setAttribute('aria-errormessage', `${ariaErrorMessageElement.id}`);
+                                validationElement.setAttribute('aria-describedby', `${ariaErrorMessageElement.id}`);
+                            }
+                        }
+                        else {
+                            validationElement?.removeAttribute('aria-invalid');
+                        }
+                    }
                 }
             };
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
             setTimeout(checkIfRequiredFunction);
-            return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+            return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
             const host = getElement(this);
             classMutationObserver = createClassMutationObserver(host, () => {
-                const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+                const result = checkFieldClasses(host, options?.includeChildren);
                 proto[methodName].call(this, result);
             }, options);
-            const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+            const result = checkFieldClasses(host, options?.includeChildren);
             proto[methodName].call(this, result);
-            return componentWillLoad === null || componentWillLoad === void 0 ? void 0 : componentWillLoad.call(this);
+            return componentWillLoad?.call(this);
         };
         proto.disconnectedCallback = function () {
             const host = getElement(this);
@@ -109,13 +132,13 @@ export function HookValidationLifecycle(options) {
                 host.removeEventListener('ixBlur', checkIfRequiredFunction);
                 checkIfRequiredFunction = null;
             }
-            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+            return disconnectedCallback?.call(this);
         };
     };
 }
 export function getValidationText(isInputInvalid, customInvalidText, i18nFallbackText) {
     if (isInputInvalid) {
-        return customInvalidText !== null && customInvalidText !== void 0 ? customInvalidText : i18nFallbackText;
+        return customInvalidText ?? i18nFallbackText;
     }
     return customInvalidText;
 }

package/dist/collection/components/utils/internal/component.js

@@ -1 +1,2 @@
-export {};
+import { SetupMixin } from "./mixins/setup.mixin";
+export const DefaultMixins = [SetupMixin];

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

@@ -1 +1 @@
-export {};
+export { SetupMixin } from './mixins/setup.mixin';

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

@@ -0,0 +1,84 @@
+/*
+ * 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";
+export const AriaActiveDescendantMixin = (Base) => {
+    class AriaActiveDescendantMixinCtor extends Base {
+        constructor() {
+            super();
+        }
+        suppressAriaActiveDescendant = false;
+        isAriaActiveDescendantActive() {
+            return false;
+        }
+        getControllingAriaElement() {
+            return null;
+        }
+        getAriaActiveDescendantProxyItemId() {
+            return false;
+        }
+        async clearActiveDescendant() {
+            if (this.suppressAriaActiveDescendant) {
+                return;
+            }
+            const controllingElement = await this.getControllingAriaElement();
+            if (!controllingElement) {
+                return;
+            }
+            if ('ariaActiveDescendantElement' in Element.prototype) {
+                //@ts-ignore
+                controllingElement.ariaActiveDescendantElement = null;
+            }
+            controllingElement.removeAttribute('aria-activedescendant');
+        }
+        async $internal_onActiveDescendantChange(event) {
+            if (this.suppressAriaActiveDescendant) {
+                return;
+            }
+            if (!this.isAriaActiveDescendantActive()) {
+                this.clearActiveDescendant();
+                return;
+            }
+            const controllingElement = await this.getControllingAriaElement();
+            if (!controllingElement) {
+                return;
+            }
+            if (event.detail.currentFocus.length > 0) {
+                const item = event.detail.currentFocus[event.detail.currentFocus.length - 1];
+                if (!item.id) {
+                    Build.isDev &&
+                        console.warn('aria-activedescendant item has no id', item);
+                    return;
+                }
+                if ('ariaActiveDescendantElement' in Element.prototype) {
+                    //@ts-ignore
+                    controllingElement.ariaActiveDescendantElement = item;
+                }
+                const proxyId = this.getAriaActiveDescendantProxyItemId();
+                if (typeof proxyId === 'string' && proxyId) {
+                    controllingElement.setAttribute('aria-activedescendant', item.id + '-' + proxyId);
+                }
+                else {
+                    controllingElement.setAttribute('aria-activedescendant', item.id);
+                }
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+        static get listeners() {
+            return [{
+                    "name": "ixFocusVisibleChange",
+                    "method": "$internal_onActiveDescendantChange",
+                    "target": "document",
+                    "capture": false,
+                    "passive": false
+                }];
+        }
+    }
+    return AriaActiveDescendantMixinCtor;
+};

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