@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-group-context-menu_2.cjs.entry.js

@@ -1,16 +1,17 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-BKQkUbyE.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 
 const groupContextMenuCss = () => `:host{display:block;position:relative;height:2rem;width:2rem;margin-block-start:0.3125rem;margin-inline-end:0.3125rem;margin-inline-start:auto}:host .hide{visibility:collapse}:host ::slotted(ix-dropdown){cursor:default}`;
 
 const GroupContextMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.showContextMenu = false;
     }
+    get hostElement() { return index.getElement(this); }
+    showContextMenu = false;
     getTrigger() {
         return this.hostElement;
     }
@@ -36,9 +37,8 @@ const GroupContextMenu = class {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'd3b00dddd05f3ac944f61b8a4098883dffe2acc2' }, index.h("ix-icon-button", { key: '0d427b8b754020e83b4aa03686a9fea1d8fbffc0', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: index$1.iconContextMenu }), index.h("slot", { key: 'baef7854222010ff76fc784c50804e4f343eafc3', onSlotchange: () => this.onSlotChange() })));
+        return (index.h(index.Host, { key: '3440dd5a4f2bab1b2c3448f5fcec00770892ab01' }, index.h("ix-icon-button", { key: 'ba6c8170bed28cb7060dc70fa457dfa41ec19e6c', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: index$1.iconContextMenu }), index.h("slot", { key: '217eae86a7748599fa9a5cab3e76fa27710e6c66', onSlotchange: () => this.onSlotChange() })));
     }
-    get hostElement() { return index.getElement(this); }
 };
 GroupContextMenu.style = groupContextMenuCss();
 
@@ -48,27 +48,52 @@ const GroupItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.selectedChanged = index.createEvent(this, "selectedChanged", 7);
-        /**
-         * Supress the selection of the group
-         */
-        this.suppressSelection = false;
-        /**
-         * @internal
-         * Item represents the footer of the group
-         */
-        this.groupFooter = false;
-        /**
-         * Show selected state
-         */
-        this.selected = false;
-        /**
-         * Disable the group item.
-         * The elements tabindex attribute will get set accordingly.
-         *
-         * If false tabindex will be 0, -1 otherwise.
-         */
-        this.disabled = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Group item icon
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     */
+    ariaLabelIcon;
+    /**
+     * Group item text
+     */
+    text;
+    /**
+     * Group item secondary text
+     */
+    secondaryText;
+    /**
+     * Supress the selection of the group
+     */
+    suppressSelection = false;
+    /**
+     * @internal
+     * Item represents the footer of the group
+     */
+    groupFooter = false;
+    /**
+     * Show selected state
+     */
+    selected = false;
+    /**
+     * Disable the group item.
+     * The elements tabindex attribute will get set accordingly.
+     *
+     * If false tabindex will be 0, -1 otherwise.
+     */
+    disabled = false;
+    /**
+     * Selection changed
+     */
+    selectedChanged;
+    /**
+     * Index
+     */
+    index;
     clickListen() {
         if (this.suppressSelection || this.disabled) {
             return;
@@ -83,7 +108,6 @@ const GroupItem = class {
                 selected: this.selected && !this.suppressSelection,
             } }, index.h("button", { tabindex: this.disabled ? -1 : 0, disabled: this.disabled }, index.h("div", { class: "group-entry-selection-indicator" }), this.icon ? (index.h("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", null))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 GroupItem.style = groupItemCss();
 

package/dist/cjs/ix-group.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-BKQkUbyE.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var index$1 = require('./index-Dw-NwUuT.js');
 
 const groupCss = () => `:host{display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover,:host .group-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected,:host .group-header:not(.disabled):not(:disabled).hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{height:calc(4rem - 2px);min-height:calc(4rem - 2px);border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-selection-indicator{width:calc(0.25rem - 1px)}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-content{padding:calc(0.5rem - 1px) calc(0.5rem - 1px) calc(0.5rem - 1px) 0}:host .group-header:not(.disabled):not(:disabled):focus-visible .btn-expand-header{margin-top:calc(0.5rem - 1px);margin-bottom:calc(0.5rem - 1px)}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{display:flex;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{min-width:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-subheader{height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}`;
 
@@ -13,29 +13,55 @@ const Group = class {
         this.selectGroup = index.createEvent(this, "selectGroup", 7);
         this.selectItem = index.createEvent(this, "selectItem", 7);
         this.expandedChanged = index.createEvent(this, "expandedChanged", 7);
-        /**
-         * Prevent header from being selectable
-         */
-        this.suppressHeaderSelection = false;
-        /**
-         * Whether the group is expanded or collapsed. Defaults to false.
-         */
-        this.expanded = false;
-        /**
-         * Whether the group is selected.
-         */
-        this.selected = false;
-        /**
-         * Expand the group if the header is clicked
-         */
-        this.expandOnHeaderClick = false;
-        this.itemSelected = false;
-        this.slotSize = this.groupItems.length;
-        this.footerVisible = false;
-        this.showExpandCollapsedIcon = false;
-        this.hasDropdown = false;
-        this.observer = null;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Prevent header from being selectable
+     */
+    suppressHeaderSelection = false;
+    /**
+     * Group header
+     */
+    header;
+    /**
+     * Group header subtitle
+     */
+    subHeader;
+    /**
+     * Whether the group is expanded or collapsed. Defaults to false.
+     */
+    expanded = false;
+    /**
+     * Whether the group is selected.
+     */
+    selected = false;
+    /**
+     * The index of the selected group entry.
+     * If undefined no group item is selected.
+     */
+    index;
+    /**
+     * Expand the group if the header is clicked
+     */
+    expandOnHeaderClick = false;
+    /**
+     * Emits when whole group gets selected.
+     */
+    selectGroup;
+    /**
+     * Emits when group item gets selected.
+     */
+    selectItem;
+    /**
+     * Group expanded
+     */
+    expandedChanged;
+    itemSelected = false;
+    slotSize = 0;
+    footerVisible = false;
+    showExpandCollapsedIcon = false;
+    hasDropdown = false;
+    observer = null;
     selectedChanged(newSelected) {
         if (newSelected === false) {
             this.changeItemIndex();
@@ -48,8 +74,7 @@ const Group = class {
         return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
     }
     get groupContent() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
+        return this.hostElement.shadowRoot?.querySelector('.group-content');
     }
     onExpandClick(event) {
         const oldExpanded = this.expanded;
@@ -97,8 +122,7 @@ const Group = class {
         this.itemSelected = items.some((item) => item.selected);
     }
     onSlotChange() {
-        var _a;
-        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
+        const slot = this.hostElement.shadowRoot?.querySelector('slot[name="footer"]');
         if (slot) {
             this.footerVisible = shadowDom.hasSlottedElements(slot);
         }
@@ -124,6 +148,7 @@ const Group = class {
             childList: true,
         });
         this.checkDropdownSlot();
+        this.slotSize = this.groupItems.length;
     }
     disconnectedCallback() {
         if (this.observer) {
@@ -138,29 +163,27 @@ const Group = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '99b00ca8c88730036688974abd67ff0534dd4d17' }, index.h("div", { key: '47384431d36ce7cdc5a2e81ecd682d6a0dd13b53', class: {
+        return (index.h(index.Host, { key: '27d311321d22d9017cb1b5ef1c8111ab6c64287a' }, index.h("div", { key: '12af89da94df847b308aeab2ae17b08706b30186', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, index.h("div", { key: '68968fc5816ca0fef0ae658a6925cc6b8ee3479a', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: 'a26153957aa76d882d95a3f88318c01517078a64', class: {
+            }, tabindex: "0" }, index.h("div", { key: 'c591e59143d43a8fae481c7453eaf41340bf57bf', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: '84d39c3f502d4a41e1d84f373d5da964bd5986d3', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), index.h("div", { key: '01427b28c1b873a1875bd4c2093fee6d900bdf89', class: "btn-expand-header" }, index.h("ix-icon", { key: '1feb76e98b4ebda01d902b76065cdcefa0dde5a4', "data-testid": "expand-collapsed-icon", class: {
+            } }), index.h("div", { key: '5f297db1492b8b30a00c59658b9a920a2c353500', class: "btn-expand-header" }, index.h("ix-icon", { key: '51b5c4f48401a22057af6b4ae3e1c461a51e8374', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? index$1.iconChevronUpSmall : index$1.iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: '5c6232f9b9a36ccbfa2f0e9352a5e739e202e275', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '592d03499639a45183c8837b421a33bbffbae954', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: 'f666ce19d8441bd3afc40800128e6326da14615e' }, index.h("slot", { key: '96d9509e35fbf388d31fbc832fc31dd2167842a8', name: "dropdown" })))), index.h("div", { key: '3d6f649530d00fd19761bb84ed4bf8769b0bec14', class: {
+            }, name: this.expanded ? index$1.iconChevronUpSmall : index$1.iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), index.h("div", { key: 'ba9fbc5a70927476e1ead817e64862fac6c97767', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: 'f760a427586603d9a186d35b0d42abb4b1ab460a', name: "header" }))), this.hasDropdown && (index.h("ix-group-context-menu", { key: 'b63443b4daf82bbd185f11965eb9ff4b54932f2b' }, index.h("slot", { key: '196393e4ae905b26075f4dd99008f71e69f5cdc5', name: "dropdown" })))), index.h("div", { key: 'd7114d36a07d2fe1dd9f71b0502e3cddb9eef8dc', class: {
                 'group-content': true,
-            } }, index.h("div", { key: 'cad4a7c42f5402400add10d1d5ac57174aa34b6e', style: {
+            } }, index.h("div", { key: 'f3ab7295ac0b6e7abf49f76f6b77cd35a234b8cd', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, index.h("slot", { key: '305a97c24f58db1e1d1264876c99316aceda6e8d', onSlotchange: () => {
-                var _a;
-                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            } }, index.h("slot", { key: '765ca882c56cb4153e97bc84c41c7a23fae1f02a', onSlotchange: () => {
+                const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = shadowDom.hasSlottedElements(slot);
-            } }), index.h("ix-group-item", { key: 'f19cce4aad2fc8465f57d94bb6a6b228204120e6', class: {
+            } }), index.h("ix-group-item", { key: '066f81aefb6cc93a2289640c5b7b076be7752e47', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, index.h("slot", { key: 'c073314bc4528f7559c8c1cfa43b88881d7a4e49', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, index.h("slot", { key: '4cd4ad5915dc00a1a723e83d515777343d2033bc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "selected": [{
                 "selectedChanged": 0

package/dist/cjs/ix-helper-text.cjs.entry.js

@@ -1,25 +1,52 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var validation = require('./validation-DF9UXqHB.js');
-var helperTextUtil = require('./helper-text-util-CX9jWl8m.js');
-require('./index-DIYO-Liy.js');
-require('./a11y-DldCLr8D.js');
+var index = require('./index-BKQkUbyE.js');
+var helperTextUtil = require('./helper-text-util-CvfY1JxE.js');
+var validation = require('./validation-Dier-uPA.js');
+require('./index-Dw-NwUuT.js');
+require('./a11y-C_6YiIMa.js');
+require('./index-B4J4JK0P.js');
 
 const helperTextCss = () => `:host{display:block}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}`;
 
 const HelperText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.validationResults = {
-            isInfo: false,
-            isInvalid: false,
-            isValid: false,
-            isWarning: false,
-            isInvalidByRequired: false,
-        };
-        this.observer = new MutationObserver(() => this.checkForRequired());
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * The id of the form element that the label is associated with
+     */
+    htmlFor;
+    /**
+     * Show text below the field component
+     */
+    helperText;
+    /**
+     * Error text for the field component
+     */
+    invalidText;
+    /**
+     * Valid text for the field component
+     */
+    validText;
+    /**
+     * Info text for the field component
+     */
+    infoText;
+    /**
+     * Warning text for the field component
+     */
+    warningText;
+    validationResults = {
+        isInfo: false,
+        isInvalid: false,
+        isValid: false,
+        isWarning: false,
+        isInvalidByRequired: false,
+    };
+    observer = new MutationObserver(() => this.checkForRequired());
+    classObserver;
     connectedCallback() {
         this.observer.observe(window.document, {
             childList: true,
@@ -51,13 +78,13 @@ const HelperText = class {
         this.validationResults = validation.checkFieldClasses(forElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'aa99794dc7b9c59abf2fdd8f2ac8112cf705a5ad' }, index.h(helperTextUtil.HelperText, Object.assign({ key: 'c3e36ebbae8617aa43cf2616242b035739ab4cc7', helperText: this.helperText,
+        return (index.h(index.Host, { key: 'e86aee742388bd82aab6cbf8e9847cc720636a4b' }, index.h(helperTextUtil.HelperText, { key: '310510c551f0595d975a0b4690a26a4d4ee53fff', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,
-            warningText: this.warningText }, this.validationResults))));
+            warningText: this.warningText,
+            ...this.validationResults })));
     }
-    get hostElement() { return index.getElement(this); }
 };
 HelperText.style = helperTextCss();