@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/empty-state/empty-state.js

@@ -8,14 +8,38 @@
  */
 import { h, Host } from "@stencil/core";
 export class EmptyState {
-    constructor() {
-        /**
-         * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'
-         */
-        this.layout = 'large';
-    }
+    /**
+     * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'
+     */
+    layout = 'large';
+    /**
+     * Optional empty state icon
+     */
+    icon;
+    /**
+     * Empty state header
+     */
+    header;
+    /**
+     * Optional empty state sub header
+     */
+    subHeader;
+    /**
+     * Optional empty state action
+     */
+    action;
+    /**
+     * ARIA label for the empty state icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelEmptyStateIcon;
+    /**
+     * Empty state action click event
+     */
+    actionClick;
     render() {
-        return (h(Host, { key: 'f87d35f9c8ae39f3ed46f8ebf0fe1b0487d91108', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '41eb63bad03958baeb5f683895ea196f883b5312', class: "emptyState__icon" }, h("ix-icon", { key: '3bd1032f996cdf7c046f767ac9fec79756a7b8e5', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '1a287d69a879f7dd52e9801e9fd0a973849fc244', class: "emptyState__content" }, h("div", { key: '8e2ff9b6f189e732dd16bf943922b09f32b9adfc', class: "content__label" }, h("ix-typography", { key: '74bc4394d9b94c2d3161091b71fbeb8ca091d6d8', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '43e21aec14323f18a4df1116c7841702a945bcfe', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'd80c01f388e99df9affc47086ac2f67ef89ca8ca', class: "content__action" }, h("ix-button", { key: '0ba60803afb761fbae046546ed06f6ab07bc728c', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '788853c0170edd6124ee95f6f37023c3de53f7b4', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'fa915d69e9ff30ad13f5edbb70136d16ea0766f4', class: "emptyState__icon" }, h("ix-icon", { key: 'f9b951b527e138dc58c4bf1b2abd46e3ebf570fa', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '4d531a294a9bcd8281c37ac497a576ab86e6192c', class: "emptyState__content" }, h("div", { key: '1cc40c9096599b31580cea0edf449a146c8ff768', class: "content__label" }, h("ix-typography", { key: 'd708fc4fb0306b5ec54efb44f003c4792e4eb75f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'a08cf6802626709bba74186fd0e5f0056da20981', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'ff17b01d8fffe6ba98d5a5a0a91985972b8368e8', class: "content__action" }, h("ix-button", { key: 'c78f1ddb54915618c6e2783e025dd608e6c2152a', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get is() { return "ix-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list/event-list.js

@@ -11,28 +11,29 @@ import { createMutationObserver } from "../utils/mutation-observer";
 import { convertToRemString } from "../utils/rwd.util";
 import { animate } from "animejs";
 export class EventList {
-    constructor() {
-        this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
-        /**
-         * Determines the height of list items.
-         * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
-         * In case a number is supplied it will get converted to rem internally.
-         * Defaults to 'S'.
-         */
-        this.itemHeight = 'S';
-        /**
-         * Make event-list items more compact
-         */
-        this.compact = false;
-        /**
-         * Animate state change transitions. Defaults to 'false'.
-         */
-        this.animated = false;
-        /**
-         * Display a chevron icon in list items. Defaults to 'false'
-         */
-        this.chevron = false;
-    }
+    mutationObserver = createMutationObserver(this.onMutation.bind(this));
+    static fadeOutDuration = 50;
+    static fadeInDuration = 150;
+    hostElement;
+    /**
+     * Determines the height of list items.
+     * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.
+     * In case a number is supplied it will get converted to rem internally.
+     * Defaults to 'S'.
+     */
+    itemHeight = 'S';
+    /**
+     * Make event-list items more compact
+     */
+    compact = false;
+    /**
+     * Animate state change transitions. Defaults to 'false'.
+     */
+    animated = false;
+    /**
+     * Display a chevron icon in list items. Defaults to 'false'
+     */
+    chevron = false;
     watchChevron(chevron) {
         this.handleChevron(chevron);
     }
@@ -128,11 +129,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: 'a21a4d23666ba43d7d10bd569c7a9feb01423b1f', class: {
+        return (h(Host, { key: 'a8161bcd519a0ea5d700db37a1d265d9bf742080', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: 'cbb5ffb72ce1a393c99df6624ffc3e36a3d6a4b5', role: "list" }, h("slot", { key: '50ca67f2071b058ee4e43bfcad1bf23d5fc623d3' }))));
+            } }, h("div", { key: '121bef25c280fea75efaf170b49c0752f00b9123', role: "list" }, h("slot", { key: 'bfb322b874b47d0beb33813d0b352d08b59e9437' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }
@@ -238,5 +239,3 @@ export class EventList {
             }];
     }
 }
-EventList.fadeOutDuration = 50;
-EventList.fadeInDuration = 150;

package/dist/collection/components/event-list-item/event-list-item.js

@@ -10,45 +10,54 @@ import { iconChevronRight } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 export class EventListItem {
-    constructor() {
-        /**
-         * Variant of the event list item
-         *
-         * @since 4.0.0
-         */
-        this.variant = 'outline';
-        /**
-         * Show event list item as selected
-         */
-        this.selected = false;
-        /**
-         * Disable event list item
-         */
-        this.disabled = false;
-        /**
-         * Show chevron on right side of the event list item
-         */
-        this.chevron = false;
-    }
+    /**
+     * Variant of the event list item
+     *
+     * @since 4.0.0
+     */
+    variant = 'outline';
+    /**
+     * Color of the status indicator.
+     * You can find a list of all available colors in our documentation.
+     * Example values are `--theme-color-alarm` or `color-alarm`
+     *
+     * {@link https://ix.siemens.io/docs/styles/colors}
+     */
+    itemColor;
+    /**
+     * Show event list item as selected
+     */
+    selected = false;
+    /**
+     * Disable event list item
+     */
+    disabled = false;
+    /**
+     * Show chevron on right side of the event list item
+     */
+    chevron = false;
+    /**
+     * Event list item click
+     */
+    itemClick;
     handleItemClick() {
         this.itemClick.emit();
     }
     render() {
-        var _a;
-        let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
+        let color = this.itemColor?.startsWith('--theme')
             ? `var(${this.itemColor})`
             : `var(--theme-${this.itemColor})`;
-        return (h(Host, { key: '3fa7304c0d114cd65b572e6d7e1a7362d3f63950', class: {
+        return (h(Host, { key: '62246c6ecf60106320d54a3cc214b359cd654dc3', class: {
                 disabled: this.disabled,
                 [`event-list-item-${this.variant}`]: true,
-            } }, h("div", { key: '9dc5734ea43068e74efc45d89a6fda3bad040cd1', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("div", { key: '7c0055e2e67b53d02d5b9cc5b6e769aea1913841', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '5fc29826643c430d3f0c82826142b461395d5075', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: 'b05eb8e2f3b0009c8d3d58a3c27bc0f5b447ef26', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
                 'background-color': this.itemColor ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: 'c53b6ea99b0744dc6a0d57024853d0627a3963e2', class: "event-list-item-container" }, h("div", { key: '22a50db11d9997caa9df67fea550e1f58224344c', class: "event-content" }, h("slot", { key: '6361d1b0c326919f46ed7eb1b6bcb4b17421258e' })), this.chevron && (h("ix-icon", { key: 'edd5d1e1ef0fa1c85b319f9bdccdf1e2cbe8183a', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
+            } }), h("div", { key: 'e64d403714e4627338cc68eda2adacedc8960c2b', class: "event-list-item-container" }, h("div", { key: 'fca0440ca4783be7c45ac7b9f52574241e7eca49', class: "event-content" }, h("slot", { key: '1bcdd9678b8e47904f06474a8b507c3eb24c98c8' })), this.chevron && (h("ix-icon", { key: '8e71379a54c18b1e491e899da196387a5ab2a208', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expanding-search/expanding-search.js

@@ -9,6 +9,54 @@
 import { iconClear, iconSearch } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 export class ExpandingSearch {
+    /**
+     * Search icon
+     */
+    icon;
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Enter text here';
+    /**
+     * Default value
+     */
+    value = '';
+    /**
+     * If true the search field will fill all available horizontal space of it's parent container when expanded.
+     */
+    fullWidth = false;
+    /**
+     * button variant
+     */
+    variant = 'tertiary';
+    /**
+     * ARIA label for the search icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelSearchIconButton;
+    /**
+     * ARIA label for the clear icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelClearIconButton = 'Clear search';
+    /**
+     * ARIA label for the search input
+     * Will be set as aria-label on the nested HTML input element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelSearchInput = 'Search input';
+    isFieldChanged = false;
+    expanded = false;
+    hasFocus = false;
+    /**
+     * Value changed
+     */
+    valueChange;
     expandInput() {
         setTimeout(this.focusTextInput, 300);
         this.expanded = true;
@@ -32,68 +80,34 @@ export class ExpandingSearch {
         }
         this.valueChange.emit(this.value);
     }
+    textInput;
     constructor() {
-        /**
-         * Placeholder text
-         */
-        this.placeholder = 'Enter text here';
-        /**
-         * Default value
-         */
-        this.value = '';
-        /**
-         * If true the search field will fill all available horizontal space of it's parent container when expanded.
-         */
-        this.fullWidth = false;
-        /**
-         * button variant
-         */
-        this.variant = 'tertiary';
-        /**
-         * ARIA label for the clear icon button
-         * Will be set as aria-label on the nested HTML button element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelClearIconButton = 'Clear search';
-        /**
-         * ARIA label for the search input
-         * Will be set as aria-label on the nested HTML input element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelSearchInput = 'Search input';
-        this.isFieldChanged = false;
-        this.expanded = false;
-        this.hasFocus = false;
         this.focusTextInput = this.focusTextInput.bind(this);
     }
     focusTextInput() {
-        var _a;
-        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+        this.textInput?.focus();
     }
     clearClicked() {
-        var _a;
         this.clearInput();
-        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+        this.textInput?.focus();
         this.valueChange.emit(this.value);
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '89dd7b99531c8ccd578ff26517ae2959c3e73c66', class: {
+        return (h(Host, { key: 'f954d610f8eee9f8864262567d501f7f53596b14', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: 'bf53f12935f7026517f1466383ddd38c4fdb5165', size: this.expanded ? '16' : '24', icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: '760a79a6faced78eb06603357b83e460991926fa', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            }, "aria-label": (_b = this.ariaLabelSearchIconButton) !== null && _b !== void 0 ? _b : (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '84a10a9fa5599e4c15aeed3e10b4523d7d99d373', class: {
+            }, "aria-label": this.ariaLabelSearchIconButton ??
+                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '2f29b9e24e4875fa907226a97fe2c20aedbf5b73', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'f4e4779e2db00e5c1b2478853e29748cae03452a', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'ff934d36786c9f6be7b235773309c32ba6ed1842', class: {
                 'ix-form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/collection/components/field-label/field-label.css

@@ -11,4 +11,14 @@
   position: relative;
   margin-top: 0.5rem;
   margin-bottom: 0.25rem;
+}
+
+:host(.text-overflow-no-wrap) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host(.text-overflow-no-wrap) ix-typography {
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

package/dist/collection/components/field-label/field-label.js

@@ -10,18 +10,31 @@ import { h, Host } from "@stencil/core";
 import { a11yHostAttributes } from "../utils/a11y";
 import { createClassMutationObserver, isIxInputFieldComponent, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
+import { closestPassShadow } from "../utils/shadow-dom";
 export class FormFieldLabel {
-    constructor() {
-        /** @internal */
-        this.isInvalid = false;
-        this.explicitIsInvalid = undefined;
-        this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
-        this.a11yAttributes = {};
-        this.labelRef = makeRef();
-    }
+    hostElement;
+    /**
+     * A value is required or must be checked for the form to be submittable
+     */
+    required;
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor;
+    /** @internal */
+    controlRef;
+    /** @internal */
+    isInvalid = false;
+    textOverflow = 'wrap';
+    explicitIsInvalid = undefined;
     isInvalidChanged(newValue) {
         this.explicitIsInvalid = newValue;
     }
+    htmlForObserver = new MutationObserver(() => this.checkForInternalState());
+    htmlForClassObserver;
+    controlRefClassObserver;
+    a11yAttributes = {};
+    labelRef = makeRef();
     connectedCallback() {
         this.registerHtmlForObserver();
         this.registerControlRefObserver();
@@ -39,6 +52,9 @@ export class FormFieldLabel {
     }
     componentWillRender() {
         this.checkForInternalState();
+        if (closestPassShadow(this.hostElement, 'ix-range-field')) {
+            this.textOverflow = 'no-wrap';
+        }
     }
     componentWillLoad() {
         this.a11yAttributes = a11yHostAttributes(this.hostElement);
@@ -76,10 +92,9 @@ export class FormFieldLabel {
         this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
     }
     checkForInvalidState(elementToCheck) {
-        var _a;
         const hasInvalidClass = elementToCheck.classList.contains('is-invalid') ||
             elementToCheck.classList.contains('ix-invalid');
-        this.isInvalid = (_a = this.explicitIsInvalid) !== null && _a !== void 0 ? _a : hasInvalidClass;
+        this.isInvalid = this.explicitIsInvalid ?? hasInvalidClass;
     }
     async checkForInternalState() {
         if (this.htmlFor) {
@@ -119,7 +134,10 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: '1a8134a30a1b101f6bfd678f905eb88e927e47d6', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: 'ef6df6072485fb72ea02a0a9800be3be15e84314', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '572975edeae54d15932c3b6091ed63dfff8bb231', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '452847ea7365cefc945bc6166bf2e8fd44d3f530' }), this.required && h("span", { key: '5e85f801d6fe8a01d6595a55bb263d0bcf91a888' }, "*")))));
+        return (h(Host, { key: 'ae3bda5074f387a20d9d464a7237584bf9cd185f', onClick: () => this.focusOnClick(), class: {
+                'text-overflow-wrap': this.textOverflow === 'wrap',
+                'text-overflow-no-wrap': this.textOverflow === 'no-wrap',
+            } }, h("label", { key: '1813ab2ed336d585667522a9e01f30891da1c794', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: '0af94d2c01fbaf5450af1d7a5beeb591401dd4f3', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '4eff5cfac2491d6a716b8def24671422c5796a15' }), this.required && h("span", { key: 'd466918f68a18d7474b607827649baf67caf0a01' }, "*")))));
     }
     static get is() { return "ix-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -237,6 +255,11 @@ export class FormFieldLabel {
             }
         };
     }
+    static get states() {
+        return {
+            "textOverflow": {}
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

package/dist/collection/components/field-wrapper/field-wrapper.css

@@ -25,8 +25,7 @@
   position: relative;
   justify-content: space-between;
   gap: 1rem;
-  width: -moz-min-content;
-  width: min-content;
+  width: 100%;
   min-width: 100%;
 }
 :host .field-bottom .bottom-right {