@siemens/ix 2.4.1 → 2.6.0

package/components/ix-group.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './group-item.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}: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{background-color:var(--theme-group-item--background--hover)}: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{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.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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0}: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>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-right:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}: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}";
+const groupCss = ":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color)}: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{background-color:var(--theme-group-item--background--hover)}: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{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.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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0}: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>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-right:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}: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}";
 const IxGroupStyle0 = groupCss;
 
 const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
@@ -30,6 +30,11 @@ const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
         this.footerVisible = false;
         this.showExpandCollapsedIcon = false;
     }
+    selectedChanged(newSelected) {
+        if (newSelected === false) {
+            this.changeItemIndex();
+        }
+    }
     get dropdownItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
     }
@@ -41,32 +46,49 @@ const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
+        const oldCollapsed = this.collapsed;
         this.collapsed = !this.collapsed;
-        this.collapsedChanged.emit(this.collapsed);
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
         event.stopPropagation();
+        if (defaultPrevented) {
+            this.collapsed = oldCollapsed;
+        }
     }
     onHeaderClick(event) {
-        this.setGroupSelection(!this.selected);
         if (this.suppressHeaderSelection) {
             this.onExpandClick(event);
+            return;
         }
+        this.changeHeaderSelection(!this.selected);
+        this.changeItemIndex();
     }
-    onItemClick(index) {
+    changeHeaderSelection(newSelection) {
+        const oldIsHeaderSelected = this.selected;
+        const newIsHeaderSelected = newSelection;
+        this.selected = newIsHeaderSelected;
+        const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);
+        if (defaultPrevented) {
+            this.selected = oldIsHeaderSelected;
+            return;
+        }
+    }
+    changeItemIndex(index) {
+        const oldIndex = this.index;
         const newIndex = index === this.index ? undefined : index;
-        this.selectItem.emit(newIndex);
-        this.index = newIndex;
-        if (this.index !== undefined && this.index >= 0) {
-            this.itemSelected = true;
+        if (this.index === newIndex) {
+            return;
         }
-        else
-            this.itemSelected = false;
-        this.setGroupSelection(false);
-    }
-    setGroupSelection(selection) {
-        if (!this.suppressHeaderSelection) {
-            this.selected = selection;
-            this.selectGroup.emit(this.selected);
+        this.index = newIndex;
+        const { defaultPrevented } = this.selectItem.emit(newIndex);
+        if (defaultPrevented) {
+            this.index = oldIndex;
+            return;
         }
+        const items = this.groupItems;
+        items.forEach((item, i) => {
+            item.selected = i === this.index;
+        });
+        this.itemSelected = items.some((item) => item.selected);
     }
     onSlotChange() {
         var _a;
@@ -77,18 +99,11 @@ const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
     }
     componentWillRender() {
         this.groupItems.forEach((item, index) => {
-            if (this.selected === true) {
-                item.selected = false;
-                this.index = undefined;
-                this.itemSelected = false;
-                return;
-            }
             item.selected = index === this.index;
             item.index = index;
         });
     }
     componentDidLoad() {
-        var _a;
         this.observer = createMutationObserver(() => {
             this.slotSize = this.groupItems.length;
         });
@@ -98,43 +113,46 @@ const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
         this.observer.observe(this.groupContent, {
             childList: true,
         });
-        (_a = this.groupContent) === null || _a === void 0 ? void 0 : _a.addEventListener('selectedChanged', (evt) => {
-            if (evt.detail.suppressSelection) {
-                evt.stopPropagation();
-                return;
-            }
-            this.onItemClick(evt.detail.index);
-        });
     }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
         }
     }
+    onItemClicked(event) {
+        if (event.target instanceof HTMLElement) {
+            const item = event.target;
+            const index = this.groupItems.indexOf(item);
+            this.changeItemIndex(index);
+        }
+    }
     render() {
-        return (h(Host, { key: '8153fe3f0c5fd78f733287dacb9fb5cfd23e624c' }, h("div", { key: '109139ea65795878ffd08e539ef5a59ade8c05ba', class: {
+        return (h(Host, { key: 'e3dc08bdd081992f3e104d2694289cffdd00e2d5' }, h("div", { key: 'dd9ae49a4772bca8c59b7dd30ae51bbfcf28e67a', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: '262c00872bbfb8958de008e6a5d9f847a6121777', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'c64dc6333e5b8cd876d5dac4ed294885fa9d97db', class: {
+            }, tabindex: "0" }, h("div", { key: 'bdd3e57474c382203ac92130db6aac7e5a091088', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'c53eeccfc402a6376b6ecd1130355428850af59b', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: 'b295acc0552867f1d97803cf7ffa2fcdafe30931', class: "btn-expand-header" }, h("ix-icon", { key: 'd0b798aa02a970d77d1636ff38677f2b5777dc0b', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: 'f45b5cb472ac2842093e117eddebaa9f31cf4105', class: "btn-expand-header" }, h("ix-icon", { key: '50132cef721b918beacb9c94d6eb3536d8a35f56', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: 'fa7a41f9e379ec4972d1c3db364f0ab82e57a0b5', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '4caba82a4558a06a999723d52dd05ed1c19c772b', name: "header" }))), h("ix-group-context-menu", { key: 'ca29c2ff305e9a0ba11299771cdb27c509cf887c' }, h("slot", { key: 'dfd21416520cac904b790be7fceb0f02f8ef630d', name: "dropdown" }))), h("div", { key: '07470786706f46bd197ea7ff9ce6b0b97d8b114a', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: '274809a5b36d4a53aac997179490e61611b615e7', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '3d0437fc04c0153e5df963cd90372f18e2b26446', name: "header" }))), h("ix-group-context-menu", { key: '2de378c24367eeca11a58946021fad53f5b8dc81' }, h("slot", { key: '4a46b76d48333986d6ee3b76278fc7b4bb1c3242', name: "dropdown" }))), h("div", { key: '5fc1aa340e95af877901c53c2546fe094017da89', class: {
                 'group-content': true,
-            } }, h("div", { key: 'f9ec75f57035ff5583dd728d34907139f7d787f5', style: {
+            } }, h("div", { key: '7ba0a9e6189940dc954ce8d2a2727b1afcf73b92', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, h("slot", { key: 'bc86c0d2b2cc896e350c61aeb98896979ffb3647', onSlotchange: () => {
+            } }, h("slot", { key: '980f2fd4380a6921e1ce6a5a601b255bd816ef7c', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: 'ad82143a05418d19517e06205452ed1db0367258', suppressSelection: true, focusable: false, class: {
+            } }), h("ix-group-item", { key: '0d9ecd669ba5f14d219578289853b91133c4dc43', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, h("slot", { key: 'e4aec4e664f7f4479e9be7d90bec9ea19c1b8677', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: '29d5b1440855ad87320fa79c60657f2b4c6e6a0c', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return this; }
+    static get watchers() { return {
+        "selected": ["selectedChanged"]
+    }; }
     static get style() { return IxGroupStyle0; }
 }, [1, "ix-group", {
         "suppressHeaderSelection": [4, "suppress-header-selection"],
@@ -148,6 +166,8 @@ const Group = /*@__PURE__*/ proxyCustomElement(class Group extends HTMLElement {
         "slotSize": [32],
         "footerVisible": [32],
         "showExpandCollapsedIcon": [32]
+    }, [[0, "selectedChanged", "onItemClicked"]], {
+        "selected": ["selectedChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/ix-group.js.map

@@ -1 +1 @@
-{"file":"ix-group.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,irGAAirG,CAAC;AACnsG,sBAAe,QAAQ;;MC0BV,KAAK;;;;;;;;QA4DR,aAAQ,GAAqB,IAAK,CAAC;uCAtDT,KAAK;;;yBAea,IAAI;wBAKL,KAAK;;mCAW1B,KAAK;4BAiBX,KAAK;wBACT,IAAI,CAAC,UAAU,CAAC,MAAM;6BACjB,KAAK;uCAEK,KAAK;;IAIxC,IAAI,aAAa;QACf,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAC5D,CAAC;KACH;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAChE,CAAC;KACH;IAED,IAAI,YAAY;;QACd,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;KACrE;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEvC,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC3B;KACF;IAEO,WAAW,CAAC,KAAc;QAChC,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC;QAC1D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE/B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,EAAE;YAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;;YAAM,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAEjC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;IAEO,iBAAiB,CAAC,SAAkB;QAC1C,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtC;KACF;IAEO,YAAY;;QAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACrD,qBAAqB,CACtB,CAAC;QAEF,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;SAC/C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAClC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;gBAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;gBACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,OAAO;aACR;YACD,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB,CAAC,CAAC;KACJ;IAED,gBAAgB;;QACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;YACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;SACxC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CACjC,iBAAiB,EACjB,CAAC,GAAwC;YACvC,IAAI,GAAG,CAAC,MAAM,CAAC,iBAAiB,EAAE;gBAChC,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,OAAO;aACR;YAED,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SACpC,CACF,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,QAAQ,EAAC,GAAG,IAEZ,4DACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAErC,4DACE,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI;gBACxC,gDAAgD,EAC9C,IAAI,CAAC,YAAY;aACpB,GACI,EACP,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+EACc,uBAAuB,EACnC,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC,IAAI,CAAC,uBAAuB;aACtC,EACD,IAAI,EACF,IAAI,CAAC,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,EAE/D,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAC5B,CACP,EAEN,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,MAAM,IACV,WAAK,KAAK,EAAC,8BAA8B,IACvC,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,KAAK,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,MAAM,CAAQ,CAC1C,EACN,WAAK,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAC/C,IAAI,CAAC,SAAS,CACX,CACF,IACJ,IAAI,EACR,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,EACN,gFACE,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACP,CACpB,EACN,4DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;aACtB,IAED,4DACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,UAAU;aAC9C,IAED,6DACE,YAAY,EAAE;;gBACZ,MAAM,IAAI,GACR,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACxC,kBAAkB,CACnB,CAAC;gBACJ,IAAI,CAAC,uBAAuB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;aACzD,GACK,EACR,sEACE,iBAAiB,EAAE,IAAI,EACvB,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,aAAa;aACrC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GACjC,CACM,CACZ,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    flex-basis: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n        padding-right: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index?: number) {\n    const newIndex = index === this.index ? undefined : index;\n    this.selectItem.emit(newIndex);\n\n    this.index = newIndex;\n\n    if (this.index !== undefined && this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    if (!this.groupContent) {\n      return;\n    }\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent?.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        if (evt.detail.suppressSelection) {\n          evt.stopPropagation();\n          return;\n        }\n\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-group.js","mappings":"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","names":[],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 19.75rem;\n  min-width: 12rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    flex-basis: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n        padding-right: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  @Watch('selected')\n  selectedChanged(newSelected: boolean) {\n    if (newSelected === false) {\n      this.changeItemIndex();\n    }\n  }\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    const oldCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n    const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n\n    if (defaultPrevented) {\n      this.collapsed = oldCollapsed;\n    }\n  }\n\n  private onHeaderClick(event: Event) {\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n      return;\n    }\n\n    this.changeHeaderSelection(!this.selected);\n    this.changeItemIndex();\n  }\n\n  private changeHeaderSelection(newSelection: boolean) {\n    const oldIsHeaderSelected = this.selected;\n    const newIsHeaderSelected = newSelection;\n    this.selected = newIsHeaderSelected;\n    const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n    if (defaultPrevented) {\n      this.selected = oldIsHeaderSelected;\n      return;\n    }\n  }\n\n  private changeItemIndex(index?: number) {\n    const oldIndex = this.index;\n    const newIndex = index === this.index ? undefined : index;\n\n    if (this.index === newIndex) {\n      return;\n    }\n\n    this.index = newIndex;\n    const { defaultPrevented } = this.selectItem.emit(newIndex);\n    if (defaultPrevented) {\n      this.index = oldIndex;\n      return;\n    }\n\n    const items = this.groupItems;\n    items.forEach((item, i) => {\n      item.selected = i === this.index;\n    });\n\n    this.itemSelected = items.some((item) => item.selected);\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n    if (!this.groupContent) {\n      return;\n    }\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Listen('selectedChanged')\n  onItemClicked(event: CustomEvent) {\n    if (event.target instanceof HTMLElement) {\n      const item = event.target as HTMLIxGroupItemElement;\n      const index = this.groupItems.indexOf(item);\n      this.changeItemIndex(index);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-helper-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxHelperText extends Components.IxHelperText, HTMLElement {}
+export const IxHelperText: {
+    prototype: IxHelperText;
+    new (): IxHelperText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-helper-text.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createClassMutationObserver, a as checkFieldClasses } from './validation.js';
+import { r as renderHelperText } from './helper-text-util.js';
+import { d as defineCustomElement$2 } from './typography.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 IxHelperTextStyle0 = helperTextCss;
+
+const HelperText = /*@__PURE__*/ proxyCustomElement(class HelperText extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.observer = new MutationObserver(() => this.checkForRequired());
+        this.htmlFor = undefined;
+        this.helperText = undefined;
+        this.invalidText = undefined;
+        this.validText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.validationResults = {
+            isInfo: false,
+            isInvalid: false,
+            isValid: false,
+            isWarning: false,
+            isInvalidByRequired: false,
+        };
+    }
+    connectedCallback() {
+        this.observer.observe(window.document, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    componentWillRender() {
+        this.checkForRequired();
+    }
+    async checkForRequired() {
+        if (!this.htmlFor) {
+            return;
+        }
+        const forElement = document.getElementById(this.htmlFor);
+        if (!forElement) {
+            return;
+        }
+        if (this.classObserver) {
+            this.classObserver.destroy();
+        }
+        this.classObserver = createClassMutationObserver(forElement, () => {
+            this.validationResults = checkFieldClasses(forElement);
+        });
+        this.validationResults = checkFieldClasses(forElement);
+    }
+    render() {
+        return (h(Host, { key: 'a15c6af1db5a3723e8f2facd899a513c56f034af' }, renderHelperText(Object.assign({ helperText: this.helperText, invalidText: this.invalidText, validText: this.validText, infoText: this.infoText, warningText: this.warningText }, this.validationResults))));
+    }
+    get hostElement() { return this; }
+    static get style() { return IxHelperTextStyle0; }
+}, [1, "ix-helper-text", {
+        "htmlFor": [1, "html-for"],
+        "helperText": [1, "helper-text"],
+        "invalidText": [1, "invalid-text"],
+        "validText": [1, "valid-text"],
+        "infoText": [1, "info-text"],
+        "warningText": [1, "warning-text"],
+        "validationResults": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-helper-text", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-helper-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HelperText);
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxHelperText = HelperText;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxHelperText, defineCustomElement };
+
+//# sourceMappingURL=ix-helper-text.js.map

package/components/ix-helper-text.js.map

@@ -0,0 +1 @@
+{"file":"ix-helper-text.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,kdAAkd,CAAC;AACze,2BAAe,aAAa;;MCef,UAAU;;;;;QAwCJ,aAAQ,GAAG,IAAI,gBAAgB,CAAC,MAC/C,IAAI,CAAC,gBAAgB,EAAE,CACxB,CAAC;;;;;;;iCAV8C;YAC9C,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,KAAK;YAChB,mBAAmB,EAAE,KAAK;SAC3B;;IAOD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE;YACrC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,MAAM,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO;SACR;QACD,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CACxC,IAAI,CAAC,OAAO,CAC0B,CAAC;QACzC,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;SAC9B;QACD,IAAI,CAAC,aAAa,GAAG,2BAA2B,CAAC,UAAU,EAAE;YAC3D,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,gBAAgB,iBACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,IAC1B,IAAI,CAAC,iBAAiB,EACzB,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/helper-text/helper-text.scss?tag=ix-helper-text&encapsulation=shadow","src/components/helper-text/helper-text.tsx"],"sourcesContent":["@import \"./../field-wrapper/field-wrapper.mixins.scss\";\n\n:host {\n  display: block;\n\n  @include helper-text;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  ClassMutationObserver,\n  HTMLIxFormComponentElement,\n  ValidationResults,\n  checkFieldClasses,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { renderHelperText } from '../field-wrapper/helper-text-util';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-helper-text',\n  styleUrl: 'helper-text.scss',\n  shadow: true,\n})\nexport class HelperText implements IxComponent {\n  @Element() hostElement!: HTMLIxHelperTextElement;\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlFor?: string;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  @State() validationResults: ValidationResults = {\n    isInfo: false,\n    isInvalid: false,\n    isValid: false,\n    isWarning: false,\n    isInvalidByRequired: false,\n  };\n\n  private readonly observer = new MutationObserver(() =>\n    this.checkForRequired()\n  );\n  private classObserver?: ClassMutationObserver;\n\n  connectedCallback() {\n    this.observer.observe(window.document, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForRequired();\n  }\n\n  private async checkForRequired() {\n    if (!this.htmlFor) {\n      return;\n    }\n    const forElement = document.getElementById(\n      this.htmlFor\n    ) as HTMLIxFormComponentElement<unknown>;\n    if (!forElement) {\n      return;\n    }\n\n    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\n    this.classObserver = createClassMutationObserver(forElement, () => {\n      this.validationResults = checkFieldClasses(forElement);\n    });\n    this.validationResults = checkFieldClasses(forElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        {renderHelperText({\n          helperText: this.helperText,\n          invalidText: this.invalidText,\n          validText: this.validText,\n          infoText: this.infoText,\n          warningText: this.warningText,\n          ...this.validationResults,\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-icon-toggle-button.js

@@ -3,7 +3,7 @@ import { B as BaseIconButton } from './base-icon-button.js';
 import { a as a11yBoolean } from './a11y.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const iconToggleButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";
+const iconToggleButtonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}";
 const IxIconToggleButtonStyle0 = iconToggleButtonCss;
 
 const IconToggleButton = /*@__PURE__*/ proxyCustomElement(class IconToggleButton extends HTMLElement {
@@ -70,8 +70,7 @@ const IconToggleButton = /*@__PURE__*/ proxyCustomElement(class IconToggleButton
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: '8e9838c22d5fced8887a6d6381394875b81433ac', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '5d758620c26f25e52825a2319320a770406a4cb7' }, baseButtonProps))));
+        return (h(Host, { key: '99ab49dda5fcdc55bbbaff72b2af203317cb56c0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7ba2608c0e1ac7d8e9e02966037f7b7a4facc66d' }, baseButtonProps))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-icon-toggle-button.js.map

@@ -1 +1 @@
-{"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,2luBAA2luB,CAAC;AACxnuB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1D,QACE,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,y7tBAAy7tB,CAAC;AACt9tB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-input-group.js

@@ -123,7 +123,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         return width;
     }
     render() {
-        return (h(Host, { key: '94b064c7c5cb011576c94a27846843f3c919ceac', class: { disabled: this.disabled } }, h("div", { key: 'a35679f97300d5070505e07c1a67591a578864b5', class: "group group-start" }, h("slot", { key: '6c1541e103b20d36ddc024399cc55284bebe239e', name: "input-start" })), h("slot", { key: 'a1d004e8ced49abd3ed2f861018af0d954e294f7' }), h("div", { key: '6e712535611adcfd25e91f1136c7a89808edaf0a', class: "group group-end" }, h("slot", { key: 'bf4302e8ecf94f5a83db1c5e3c9636c6c8a2e67e', name: "input-end" }))));
+        return (h(Host, { key: '14b39750443afa04ff5aec92500f1caadae7c999', class: { disabled: this.disabled } }, h("div", { key: '3fc82d83edf57457c7caf29b525d417008d59793', class: "group group-start" }, h("slot", { key: '4233fcfc1a643c6c3ade5ee07c3895a3175f91a5', name: "input-start" })), h("slot", { key: '21a780e71bb8ff5380656ed91fdc3d657f906edb' }), h("div", { key: '97daccc51ac8756c816820da74ea0027a88602e8', class: "group group-end" }, h("slot", { key: 'be5edf58af140972c314a14ff3d88da1fdeb5de9', name: "input-end" }))));
     }
     get hostElement() { return this; }
     static get style() { return IxInputGroupStyle0; }

package/components/ix-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxInput extends Components.IxInput, HTMLElement {}
+export const IxInput: {
+    prototype: IxInput;
+    new (): IxInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;