@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/typed-event-Bw4IfJC0.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/*
+ * 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.
+ */
+class TypedEvent {
+    listeners = [];
+    listenersOncer = [];
+    on = (listener) => {
+        this.listeners.push(listener);
+        return {
+            dispose: () => this.off(listener),
+        };
+    };
+    once = (listener) => {
+        this.listenersOncer.push(listener);
+    };
+    off = (listener) => {
+        const callbackIndex = this.listeners.indexOf(listener);
+        if (callbackIndex > -1) {
+            this.listeners.splice(callbackIndex, 1);
+        }
+    };
+    emit = (event) => {
+        /** Update any general listeners */
+        this.listeners.forEach((listener) => listener(event));
+        /** Clear the `once` queue */
+        if (this.listenersOncer.length > 0) {
+            const toCall = this.listenersOncer;
+            this.listenersOncer = [];
+            toCall.forEach((listener) => listener(event));
+        }
+    };
+    pipe = (te) => {
+        return this.on((e) => te.emit(e));
+    };
+}
+
+exports.TypedEvent = TypedEvent;

package/dist/cjs/{validation-DF9UXqHB.js → validation-Dier-uPA.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-B4J4JK0P.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -29,8 +30,8 @@ async function shouldSuppressInternalValidation(host) {
 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'],
     });
@@ -66,6 +67,10 @@ function HookValidationLifecycle(options) {
                 if (skipValidation) {
                     return;
                 }
+                if (!index$1.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);
@@ -82,23 +87,41 @@ 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 = index.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 = index.getElement(this);
@@ -112,13 +135,13 @@ function HookValidationLifecycle(options) {
                 host.removeEventListener('ixBlur', checkIfRequiredFunction);
                 checkIfRequiredFunction = null;
             }
-            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+            return disconnectedCallback?.call(this);
         };
     };
 }
 function getValidationText(isInputInvalid, customInvalidText, i18nFallbackText) {
     if (isInputInvalid) {
-        return customInvalidText !== null && customInvalidText !== void 0 ? customInvalidText : i18nFallbackText;
+        return customInvalidText ?? i18nFallbackText;
     }
     return customInvalidText;
 }

package/dist/collection/collection-manifest.json

@@ -1,14 +1,11 @@
 {
   "entries": [
     "components/button/button.js",
-    "components/menu-settings/menu-settings.js",
-    "components/menu-about/menu-about.js",
     "components/toggle-button/toggle-button.js",
     "components/action-card/action-card.js",
     "components/application/application.js",
     "components/application-header/application-header.js",
     "components/application-header/application-switch-modal/application-switch-modal.js",
-    "components/application-sidebar/application-sidebar.js",
     "components/avatar/avatar.js",
     "components/blind/blind.js",
     "components/breadcrumb/breadcrumb.js",
@@ -32,9 +29,9 @@
     "components/date-input/date-input.js",
     "components/date-picker/date-picker.js",
     "components/date-time-card/date-time-card.js",
+    "components/datetime-input/datetime-input.js",
     "components/datetime-picker/datetime-picker.js",
     "components/divider/divider.js",
-    "components/drawer/drawer.js",
     "components/dropdown/dropdown.js",
     "components/dropdown-button/dropdown-button.js",
     "components/dropdown-header/dropdown-header.js",
@@ -58,7 +55,7 @@
     "components/input/input.js",
     "components/input/number-input.js",
     "components/input/textarea.js",
-    "components/input-group/input-group.js",
+    "components/ix-playground/ix-playground.js",
     "components/key-value/key-value.js",
     "components/key-value-list/key-value-list.js",
     "components/kpi/kpi.js",
@@ -67,12 +64,14 @@
     "components/link-button/link-button.js",
     "components/menu/menu-expand-icon.js",
     "components/menu/menu.js",
+    "components/menu-about/menu-about.js",
     "components/menu-about-item/menu-about-item.js",
     "components/menu-about-news/menu-about-news.js",
     "components/menu-avatar/menu-avatar.js",
     "components/menu-avatar-item/menu-avatar-item.js",
     "components/menu-category/menu-category.js",
     "components/menu-item/menu-item.js",
+    "components/menu-settings/menu-settings.js",
     "components/menu-settings-item/menu-settings-item.js",
     "components/message-bar/message-bar.js",
     "components/modal/modal.js",
@@ -88,6 +87,7 @@
     "components/push-card/push-card.js",
     "components/radio/radio.js",
     "components/radio-group/radio-group.js",
+    "components/range-field/range-field.js",
     "components/row/row.js",
     "components/select/select.js",
     "components/select-item/select-item.js",
@@ -95,6 +95,8 @@
     "components/spinner/spinner.js",
     "components/split-button/split-button.js",
     "components/tab-item/tab-item.js",
+    "components/tab-panel/tab-panel.js",
+    "components/tab-set/tab-set.js",
     "components/tabs/tabs.js",
     "components/tile/tile.js",
     "components/time-input/time-input.js",
@@ -107,16 +109,21 @@
     "components/tree-item/tree-item.js",
     "components/typography/typography.js",
     "components/upload/upload.js",
-    "components/validation-tooltip/validation-tooltip.js",
     "components/workflow-step/workflow-step.js",
     "components/workflow-steps/workflow-steps.js"
   ],
+  "mixins": [
+    "components/utils/internal/mixins/focus-visible.mixin.js",
+    "components/utils/internal/mixins/accessibility/inherit-aria-attributes.mixin.js",
+    "components/utils/internal/mixins/accessibility/aria-activedescendant.mixin.js",
+    "components/utils/internal/mixins/input/input-picker.mixin.js",
+    "components/tab-item/tab.mixin.js"
+  ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.1",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],
-  "bundles": [],
-  "global": "setup.js"
+  "bundles": []
 }

package/dist/collection/components/action-card/action-card.js

@@ -9,24 +9,42 @@
 import { h, Host } from "@stencil/core";
 import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
 export class IxActionCard {
-    constructor() {
-        /**
-         * Card variant
-         */
-        this.variant = 'outline';
-        /**
-         * Card icon
-         */
-        this.icon = undefined;
-        /**
-         * Card selection
-         */
-        this.selected = false;
-        /**
-         * If true, disables hover and active styles and changes cursor to default
-         */
-        this.passive = false;
-    }
+    /**
+     * Card variant
+     */
+    variant = 'outline';
+    /**
+     * Card icon
+     */
+    icon = undefined;
+    /**
+     * ARIA label for the icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelIcon;
+    /**
+     * Card heading
+     */
+    heading;
+    /**
+     * Card subheading
+     */
+    subheading;
+    /**
+     * Card selection
+     */
+    selected = false;
+    /**
+     * ARIA label for the card
+     *
+     * @since 3.2.0
+     */
+    ariaLabelCard;
+    /**
+     * If true, disables hover and active styles and changes cursor to default
+     */
+    passive = false;
     getSubheadingTextColor() {
         return this.variant === 'outline' || this.variant === 'filled'
             ? 'soft'
@@ -36,7 +54,7 @@ export class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (h(Host, { key: '600ad1913e671fb47ec9da8f66e984bbde498fae' }, h("ix-card", { key: '1a8168a17a643908126f841e9cdd6d0055a62399', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, h("ix-card-content", { key: 'c138b94b131af478fee65244f32b91cdf78b31df' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'eb0252c628c75709fddae387a3b4a7abbf7c3df0' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'f47fd515fc5b8f22344dc83b808e527116238618' }))))));
+        return (h(Host, { key: '3c4975b39af044bc6af37f6420fa95c772904906' }, h("ix-card", { key: 'aab19e577dd323f564c4fb00e1a0a6dd893a5744', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, h("ix-card-content", { key: 'fa5beccb483bd702884770b50e7105a6b57167a1' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'd694d8b0a424c7971c2fa2e860045cf25b20ae3d' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'edf7f011821f3fe44120583025255ecdb9441f4f' }))))));
     }
     static get is() { return "ix-action-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application/application.js

@@ -14,18 +14,21 @@ import { menuController } from "../utils/menu-service/menu-service";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { themeSwitcher } from "../utils/theme-switcher";
 export class Application {
-    constructor() {
-        /**
-         * Use the system appearance dark or light
-         */
-        this.themeSystemAppearance = false;
-        /**
-         * Supported layouts
-         */
-        this.breakpoints = ['sm', 'md', 'lg'];
-        this.breakpoint = 'lg';
-        this.applicationSidebarSlotted = false;
-    }
+    hostElement;
+    /**
+     * Application theme
+     */
+    theme;
+    /**
+     * Color schema of the theme
+     *
+     * @since 5.0.0
+     */
+    colorSchema = 'system';
+    /**
+     * Change the responsive layout of the menu structure
+     */
+    forceBreakpoint;
     forceLayoutChange(newMode) {
         if (!newMode) {
             applicationLayoutService.enableBreakpointDetection();
@@ -34,21 +37,32 @@ export class Application {
         applicationLayoutService.disableBreakpointDetection();
         applicationLayoutService.setBreakpoint(newMode);
     }
+    /**
+     * Supported layouts
+     */
+    breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
         applicationLayoutService.setBreakpoints(breakpoints);
     }
+    /**
+     * Define application switch configuration
+     */
+    appSwitchConfig;
+    breakpoint = 'lg';
+    applicationSidebarSlotted = false;
+    contextProvider;
     get menu() {
         return this.hostElement.querySelector('ix-menu');
     }
     get applicationSidebarSlot() {
         return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
     }
+    modeDisposable;
     onContentClick() {
-        var _a;
         if (menuController.isPinned) {
             return;
         }
-        (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+        this.menu?.toggleMenu(false);
     }
     componentWillLoad() {
         applicationLayoutService.setBreakpoints(this.breakpoints);
@@ -64,24 +78,21 @@ export class Application {
         if (this.forceBreakpoint) {
             this.forceLayoutChange(this.forceBreakpoint);
         }
-        this.changeTheme();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.modeDisposable?.dispose();
     }
     changeTheme() {
         if (!this.theme) {
-            if (this.themeSystemAppearance) {
-                themeSwitcher.setVariant();
-            }
             return;
         }
-        if (themeSwitcher.hasVariantSuffix(this.theme)) {
-            themeSwitcher.setTheme(`theme-${this.theme}`);
+        themeSwitcher.setTheme(this.theme);
+    }
+    changeColorSchema() {
+        if (!this.colorSchema) {
             return;
         }
-        themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+        themeSwitcher.setColorSchema(this.colorSchema);
     }
     onApplicationSidebarChange() {
         if (!this.contextProvider) {
@@ -95,12 +106,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '80437ae705c381c0167b8d7c5ce429e611b03f91', "data-role": "", class: {
+        return (h(Host, { key: '9621e446a9532a740dcdef516a51d326c59587a7', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '865d2e5a9252459f62ff8ab5dce1413d11c04379', name: "application-header" }), h("div", { key: 'ae1960437e8721fbc4afab659d149265660e4164', class: "application" }, h("slot", { key: 'a2a9a835af35e30d2ebe52347903f1838e75ac8d', name: "menu" }), h("aside", { key: '6141152471ac7dc7310247b23278dc594e025fa3', class: {
+            } }, h("slot", { key: '0061a139b7fa722e97da65fbcaf2853bdd185466', name: "application-header" }), h("div", { key: 'b2da184f99ab27ce576be02221497bb24462bb69', class: "application" }, h("slot", { key: '8e5895c10cb495320f251c9c44949700629be9ee', name: "menu" }), h("aside", { key: '60a6cd879294682b56061f4b0fd9bb2342fce229', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '3285cc16452a7a6936a542dd26758beebb515972', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'c6d022a1a5c220ed088adeba49ab5daa27ff8c77', class: "content-area" }, h("main", { key: '8ab781e17318078290a6ce4e1e64dfea43d5ae00', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '24e83882ab5746f4e00a0c16c797ddf4111aa1e8' })), h("footer", { key: '3ce838daa8f8f4b4e56cb2626476223d9575177c', class: "footer" }, h("slot", { key: 'e49d1cd476554dfddca3b538194040ca29394967', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '19416cec696ff2b7ae2818ebe375b98892df3116', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'd6bd6479222c1b19c6e45f68e6993c534ce5afd2', class: "content-area" }, h("main", { key: 'ac7117c1a192eadf913e8ab474019dcdd5c81025', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'bac13c155b023321b111f3ea89603840c6b73fe0' })), h("footer", { key: '5acded667f8360c952516a0a55ca5b0936834add', class: "footer" }, h("slot", { key: '34be70c1aa056e735aa52c17d4a8c469a68611ed', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }
@@ -120,16 +131,9 @@ export class Application {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IxTheme",
-                    "resolved": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & Record<never, never> | undefined",
-                    "references": {
-                        "IxTheme": {
-                            "location": "import",
-                            "path": "../utils/theme-switcher",
-                            "id": "src/components/utils/theme-switcher.ts::IxTheme",
-                            "referenceLocation": "IxTheme"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -142,25 +146,35 @@ export class Application {
                 "reflect": false,
                 "attribute": "theme"
             },
-            "themeSystemAppearance": {
-                "type": "boolean",
+            "colorSchema": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "ThemeVariant",
+                    "resolved": "\"dark\" | \"light\" | \"system\" | undefined",
+                    "references": {
+                        "ThemeVariant": {
+                            "location": "import",
+                            "path": "../utils/theme-switcher",
+                            "id": "src/components/utils/theme-switcher.ts::ThemeVariant",
+                            "referenceLocation": "ThemeVariant"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Use the system appearance dark or light"
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Color schema of the theme"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "theme-system-appearance",
-                "defaultValue": "false"
+                "attribute": "color-schema",
+                "defaultValue": "'system'"
             },
             "forceBreakpoint": {
                 "type": "string",
@@ -254,8 +268,8 @@ export class Application {
                 "propName": "theme",
                 "methodName": "changeTheme"
             }, {
-                "propName": "themeSystemAppearance",
-                "methodName": "changeTheme"
+                "propName": "colorSchema",
+                "methodName": "changeColorSchema"
             }, {
                 "propName": "appSwitchConfig",
                 "methodName": "onApplicationSidebarChange"