@siemens/ix 2.4.0 → 2.5.0

package/dist/cjs/ix-expanding-search.cjs.entry.js

@@ -54,20 +54,20 @@ const ExpandingSearch = class {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (index.h(index.Host, { key: 'ce6a0b2941966880a2a47a20ddf39820d8110836', class: {
+        return (index.h(index.Host, { key: 'fd70f74b8c961ba043bd2cfe646bf2ab287b7edf', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, index.h("ix-icon-button", { key: 'e773bc67a18476c86d530e14a0b062f1b10caae7', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, index.h("ix-icon-button", { key: 'afb4150bf7b4847e79723ec9595913eea9facecc', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), index.h("div", { key: 'ab6b7f77f88713c1b0230a83a3c2eb50df35f340', class: {
+            } }), index.h("div", { key: '69c41e59e7d3e780b50a8619049d44044aae699d', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, index.h("input", { key: 'fb3f5e5c926a5eed3d2a0bac878ef806684f9d8d', class: {
+            }, "data-testid": "input-wrapper" }, index.h("input", { key: '57daef5e26aa3dc16d9e8043ccfa14d2c4983cf6', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -20,7 +20,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '215ed3c9b71df4ba795032725d76950f10a33184', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '68f822ed7365a1b9375721e5fc9a9ce91bd79313', class: "slot-container" }, index.h("slot", { key: '8c334798a0c6c274d68564ba12b01d59054c338c' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (index.h(index.Host, { key: 'a4d7097df0582282fbd3550741fa0a231a4c782a', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '659346141b7c2645f0970629e6a8a53c52ee0759', class: "slot-container" }, index.h("slot", { key: '0799a1aa00aeae148532b56e847d2713f782e862' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     get el() { return index.getElement(this); }
 };
@@ -83,7 +83,7 @@ const SelectItem = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '73a6d9e2c4df3541658f2bdce0a4ec42aea2c5e1' }, index.h("ix-dropdown-item", { key: 'c8d0563af535129de120a4899d683038f02dad57', class: {
+        return (index.h(index.Host, { key: 'bac48ca281090f2dd8f56fce2772916cec959e8c' }, index.h("ix-dropdown-item", { key: 'a6f8cafd5ee9f9eedaa4e4e0bd82a32976434117', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

package/dist/cjs/ix-flip-tile-content.cjs.entry.js

@@ -13,7 +13,7 @@ const FlipTileContent = class {
         this.contentVisible = false;
     }
     render() {
-        return index.h(index.Host, { key: '5168ef23e528f9bb5a8408a6df292bd2bbadd1fc' }, this.contentVisible ? index.h("slot", null) : null);
+        return index.h(index.Host, { key: '04dc2496f04f8fd290df6f9583341f04b4dee5cd' }, this.contentVisible ? index.h("slot", null) : null);
     }
 };
 FlipTileContent.style = IxFlipTileContentStyle0;

package/dist/cjs/ix-flip-tile.cjs.entry.js

@@ -60,26 +60,26 @@ const FlipTile = class {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (index.h(index.Host, { key: '6325a67810cec0daa810626fd07fdee585dff321', style: {
+        return (index.h(index.Host, { key: 'c54bb71af0355c2bff52800f3ce2e94517690018', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, index.h("div", { key: 'b32de5296d6f9eaa2a47d7fca8fc37ccc3038ca8', class: {
+            } }, index.h("div", { key: '11724fe70d3bfdbc9a2c25db24cbcec60ad5f196', class: {
                 'flip-tile-container': true,
                 info: this.state === flipTileState.FlipTileState.Info,
                 warning: this.state === flipTileState.FlipTileState.Warning,
                 alarm: this.state === flipTileState.FlipTileState.Alarm,
                 primary: this.state === flipTileState.FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, index.h("div", { key: '547fd0065516281539327d61b7ba4806973b230e', class: "flip-tile-header" }, index.h("div", { key: '6f6105b466f35d94e7d5c51e6a8d0cd9190fda90', class: "header-slot-container text-l-title" }, index.h("slot", { key: 'e0d28500f1b867e120308d8ae08d19f8e2ed62ef', name: "header" })), index.h("ix-icon-button", { key: '9b1115eedef1cd2b5c20322e7126d69a7ddd5367', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { key: '208e84bf8a58d0f0d664e6afa61f4c0134c170a1', class: "content-container" }, index.h("slot", { key: 'e58477ccc1f34df0f10d34b76ebfeb8740e6a2b7' })), index.h("div", { key: '1d2775674ae6ccf49d45349bb092e62a4edb6839', class: {
+            } }, index.h("div", { key: '79931960e992363efd04bc4811cb47a3f810b47e', class: "flip-tile-header" }, index.h("div", { key: 'eb24f87ba961b4697c4903663cf9500cf8a41a80', class: "header-slot-container text-l-title" }, index.h("slot", { key: '5991a7e2ed03995507e9e4bc329c2a69bcd606e8', name: "header" })), index.h("ix-icon-button", { key: 'fdca5d22fde09917560092be5ed30d1ac9a8e1f2', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { key: '09a534b6123fc399549369dfe82abf1ebf74edb1', class: "content-container" }, index.h("slot", { key: '974a7da9316688e6971dabb9d0ba3427475ee72f' })), index.h("div", { key: '55408f796f09ea616f4ad2d5b51fb66c100101c9', class: {
                 footer: true,
                 'contrast-light': this.state === flipTileState.FlipTileState.Warning,
                 'contrast-dark': this.state === flipTileState.FlipTileState.Info ||
                     this.state === flipTileState.FlipTileState.Alarm,
-            } }, index.h("slot", { key: '0876aa784c23b91f289b9feec114d94c5860bf29', name: "footer" })))));
+            } }, index.h("slot", { key: '7aedaee90543dc68b0c5ac03fc24e657e18a2296', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-form-field.cjs.entry.js

@@ -17,7 +17,7 @@ const FormField = class {
     }
     componentWillLoad() { }
     render() {
-        return (index.h(index.Host, { key: '34305cf7e6ee023ae323d2c1b13248bb08f50001' }, this.label ? (index.h("label", { htmlFor: this.inputElement.id }, this.label)) : null, index.h("slot", { key: '7d9937b61fd5f5aa4711a7551c0665a1f048bb47' })));
+        return (index.h(index.Host, { key: '9ff1529dc21325a6644e16a91e145041699eeca6' }, this.label ? (index.h("label", { htmlFor: this.inputElement.id }, this.label)) : null, index.h("slot", { key: '67fa496dc86e3fd9194b62a7b5d2e9acbd5133b5' })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-529f21c1.js');
-const shadowDom = require('./shadow-dom-73f9d553.js');
+const shadowDom = require('./shadow-dom-454acc38.js');
 
 const groupContextMenuCss = ":host{display:block;position:relative;height:2rem;width:2rem;margin-block-start:0.3125rem;margin-inline-end:0.3125rem;margin-inline-start:auto}:host .hide{visibility:collapse}:host ::slotted(ix-dropdown){cursor:default}";
 const IxGroupContextMenuStyle0 = groupContextMenuCss;
@@ -38,13 +38,13 @@ const GroupContextMenu = class {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (index.h(index.Host, { key: 'f0540e7922380e5d6dc1ccd3a9cf89f8899f0b8f' }, index.h("ix-icon-button", { key: 'd252cde38720925875096a6e57d494da800139f3', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), index.h("slot", { key: 'e5f04fcdd55f57bd9bad2beeb5982f6c6352f19b', onSlotchange: () => this.onSlotChange() })));
+        return (index.h(index.Host, { key: '21c0c5e986892c5e94644b6988b93f04cc2d52e4' }, index.h("ix-icon-button", { key: 'da9e1ea025d3b0f4afaa9bcb9769a4771f04e98e', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), index.h("slot", { key: '29312b85ab7e60ce075cbe95d40e1e7e7e492640', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return index.getElement(this); }
 };
 GroupContextMenu.style = IxGroupContextMenuStyle0;
 
-const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.suppress-selection){pointer-events:none}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
+const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
 const IxGroupItemStyle0 = groupItemCss;
 
 const GroupItem = class {
@@ -55,21 +55,17 @@ const GroupItem = class {
         this.text = undefined;
         this.secondaryText = undefined;
         this.suppressSelection = false;
-        this.selected = undefined;
+        this.selected = false;
         this.focusable = true;
         this.index = undefined;
     }
     clickListen() {
-        if (this.suppressSelection) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (index.h(index.Host, { key: '1263d38096b46d1f07775d0907018af567054e6d', class: {
+        return (index.h(index.Host, { key: '5467fe7e41ae1ce688e2ed294fe8dc26da9b4926', class: {
                 selected: this.selected && !this.suppressSelection,
-                'suppress-selection': this.suppressSelection,
-            } }, index.h("button", { key: 'f5ca23ab1328e745e9bb8299db8d15a450cd3af7', tabindex: this.focusable ? 0 : -1 }, index.h("div", { key: '3a60d30b7686a8b3b67343e7c5cbd5b1faacf0e4', class: "group-entry-selection-indicator" }), this.icon ? index.h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", { key: 'a24a61b86fea34c7124b5345bd41c08550a145b5' }))));
+            } }, index.h("button", { key: '1d3bcb115867183f660958d432ffca1931197a6b', tabindex: this.focusable ? 0 : -1 }, index.h("div", { key: 'f8723d831c359decf7ca3481cdeeb6c262cd929b', class: "group-entry-selection-indicator" }), this.icon ? index.h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (index.h("span", { class: "group-entry-text" }, index.h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (index.h("span", { class: "group-entry-text-secondary" }, index.h("span", { title: this.secondaryText }, this.secondaryText))) : null, index.h("slot", { key: '202b787531c09feb239e6b7d7b4bf7aa186eb0cb' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-group-context-menu.ix-group-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,6NAA6N,CAAC;AAC1P,iCAAe,mBAAmB;;MCgBrB,gBAAgB;;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;KAC1C;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAGA,4BAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,6EACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ,EAClBA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;KACH;;;;;ACvEH,MAAM,YAAY,GAAG,gtFAAgtF,CAAC;AACtuF,0BAAe,YAAY;;MCwBd,SAAS;;;;;;;iCAqBQ,KAAK;;yBAWb,IAAI;;;IAaxB,WAAW;QACT,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;gBAClD,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;aAC7C,IAEDD,qEAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,IACvCA,kEAAK,KAAK,EAAC,iCAAiC,GAAO,EAClD,IAAI,CAAC,IAAI,GAAGA,qBAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,GAAG,IAAI,EACjE,IAAI,CAAC,IAAI,IACRA,kBAAM,KAAK,EAAC,kBAAkB,IAC5BA,kBAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,IACL,IAAI,EACP,IAAI,CAAC,aAAa,IACjBA,kBAAM,KAAK,EAAC,4BAA4B,IACtCA,kBAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,IACL,IAAI,EACRA,oEAAa,CACN,CACJ,EACP;KACH;;;;;;;;","names":["getSlottedElements","h","Host"],"sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx","src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.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:host {\n  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\n  }\n\n  ::slotted(ix-dropdown) {\n    cursor: default;\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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  @include ix-component;\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n\n  > button {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    outline: none;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid transparent;\n    color: var(--theme-color-std-text);\n    cursor: pointer;\n\n    padding-left: 2.5rem;\n\n    &:focus-visible {\n      border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n    }\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: -#{$focusBorderWidth};\n    height: calc(100% + #{$focusBorderWidth * 2});\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include text-default;\n    @include ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include text-default;\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.suppress-selection) {\n  pointer-events: none;\n}\n\n:host(.selected) {\n  border-top-width: 0.062rem !important;\n  background-color: var(--theme-color-ghost--selected);\n\n  .group-entry-selection-indicator {\n    background-color: var(--theme-group-item-indicator--background--selected);\n  }\n}\n\n:host(:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n  border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(.selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:active) {\n  background-color: var(--theme-color-ghost--selected-active);\n  border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(.selected:active) {\n  background-color: var(--theme-color-ghost--selected-active);\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  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-group-context-menu.ix-group-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,6NAA6N,CAAC;AAC1P,iCAAe,mBAAmB;;MCgBrB,gBAAgB;;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;KAC1C;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAGA,4BAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,6EACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ,EAClBA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;KACH;;;;;ACvEH,MAAM,YAAY,GAAG,iqFAAiqF,CAAC;AACvrF,0BAAe,YAAY;;MCwBd,SAAS;;;;;;;iCAqBQ,KAAK;wBAKL,KAAK;yBAMb,IAAI;;;IAaxB,WAAW;QACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;aACnD,IAEDD,qEAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,IACvCA,kEAAK,KAAK,EAAC,iCAAiC,GAAO,EAClD,IAAI,CAAC,IAAI,GAAGA,qBAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,GAAG,IAAI,EACjE,IAAI,CAAC,IAAI,IACRA,kBAAM,KAAK,EAAC,kBAAkB,IAC5BA,kBAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,IACL,IAAI,EACP,IAAI,CAAC,aAAa,IACjBA,kBAAM,KAAK,EAAC,4BAA4B,IACtCA,kBAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,IACL,IAAI,EACRA,oEAAa,CACN,CACJ,EACP;KACH;;;;;;;;","names":["getSlottedElements","h","Host"],"sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx","src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.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:host {\n  display: block;\n  position: relative;\n\n  height: 2rem;\n  width: 2rem;\n\n  margin-block-start: 0.3125rem;\n  margin-inline-end: 0.3125rem;\n  margin-inline-start: auto;\n\n  .hide {\n    visibility: collapse;\n  }\n\n  ::slotted(ix-dropdown) {\n    cursor: default;\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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group-context-menu',\n  styleUrl: './group-context-menu.scss',\n  shadow: true,\n})\nexport class GroupContextMenu {\n  @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n  @State() showContextMenu = false;\n\n  private getTrigger() {\n    return this.hostElement;\n  }\n\n  private configureDropdown(\n    dropdownElement: HTMLIxDropdownElement,\n    triggerElement: HTMLElement\n  ) {\n    dropdownElement.positioningStrategy = 'fixed';\n    dropdownElement.trigger = triggerElement;\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n\n    const dropdownElement = elements.find(\n      (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n    );\n\n    const triggerElement = this.getTrigger();\n\n    if (!triggerElement) {\n      return;\n    }\n\n    if (!dropdownElement) {\n      return;\n    }\n\n    this.configureDropdown(dropdownElement, triggerElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          class={{ hide: !this.showContextMenu }}\n          size=\"24\"\n          ghost={true}\n          icon={'context-menu'}\n        ></ix-icon-button>\n        <slot onSlotchange={() => this.onSlotChange()}></slot>\n      </Host>\n    );\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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n  @include ix-component;\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n\n  > button {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    align-items: center;\n    justify-content: flex-start;\n    position: relative;\n    outline: none;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid transparent;\n    color: var(--theme-color-std-text);\n    cursor: pointer;\n\n    padding-left: 2.5rem;\n\n    &:focus-visible {\n      border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n    }\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: -#{$focusBorderWidth};\n    height: calc(100% + #{$focusBorderWidth * 2});\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include text-default;\n    @include ellipsis();\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include text-default;\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.selected) {\n  border-top-width: 0.062rem !important;\n  background-color: var(--theme-color-ghost--selected);\n\n  .group-entry-selection-indicator {\n    background-color: var(--theme-group-item-indicator--background--selected);\n  }\n}\n\n:host(:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n  border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(.selected:hover) {\n  background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:active) {\n  background-color: var(--theme-color-ghost--selected-active);\n  border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(.selected:active) {\n  background-color: var(--theme-color-ghost--selected-active);\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  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  shadow: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText?: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index?: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n        }}\n      >\n        <button tabindex={this.focusable ? 0 : -1}>\n          <div class=\"group-entry-selection-indicator\"></div>\n          {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n          {this.text ? (\n            <span class=\"group-entry-text\">\n              <span title={this.text}>{this.text}</span>\n            </span>\n          ) : null}\n          {this.secondaryText ? (\n            <span class=\"group-entry-text-secondary\">\n              <span title={this.secondaryText}>{this.secondaryText}</span>\n            </span>\n          ) : null}\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-529f21c1.js');
 const mutationObserver = require('./mutation-observer-babb20a5.js');
-const shadowDom = require('./shadow-dom-73f9d553.js');
+const shadowDom = require('./shadow-dom-454acc38.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 = class {
@@ -15,19 +15,24 @@ const Group = class {
         this.selectGroup = index.createEvent(this, "selectGroup", 7);
         this.selectItem = index.createEvent(this, "selectItem", 7);
         this.collapsedChanged = index.createEvent(this, "collapsedChanged", 7);
+        this.observer = null;
         this.suppressHeaderSelection = false;
         this.header = undefined;
         this.subHeader = undefined;
         this.collapsed = true;
-        this.selected = undefined;
+        this.selected = false;
         this.index = undefined;
         this.expandOnHeaderClick = false;
         this.itemSelected = false;
-        this.dropdownTriggerRef = undefined;
         this.slotSize = this.groupItems.length;
         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'));
     }
@@ -35,55 +40,63 @@ const Group = class {
         return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
     }
     get groupContent() {
-        return this.hostElement.shadowRoot.querySelector('.group-content');
+        var _a;
+        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) {
-        if (index === this.index) {
-            this.index = undefined;
-            this.selectItem.emit(undefined);
+    changeHeaderSelection(newSelection) {
+        const oldIsHeaderSelected = this.selected;
+        const newIsHeaderSelected = newSelection;
+        this.selected = newIsHeaderSelected;
+        const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);
+        if (defaultPrevented) {
+            this.selected = oldIsHeaderSelected;
+            return;
         }
-        else {
-            this.index = index;
-            this.selectItem.emit(index);
-        }
-        if (this.index >= 0) {
-            this.itemSelected = true;
-        }
-        else
-            this.itemSelected = false;
-        this.setGroupSelection(false);
     }
-    setGroupSelection(selection) {
-        if (!this.suppressHeaderSelection) {
-            this.selected = selection;
-            this.selectGroup.emit(this.selected);
+    changeItemIndex(index) {
+        const oldIndex = this.index;
+        const newIndex = index === this.index ? undefined : index;
+        if (this.index === newIndex) {
+            return;
+        }
+        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() {
-        const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
+        var _a;
+        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
         if (slot) {
             this.footerVisible = shadowDom.hasSlottedElements(slot);
         }
     }
     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;
         });
@@ -92,41 +105,52 @@ const Group = class {
         this.observer = mutationObserver.createMutationObserver(() => {
             this.slotSize = this.groupItems.length;
         });
+        if (!this.groupContent) {
+            return;
+        }
         this.observer.observe(this.groupContent, {
             childList: true,
         });
-        this.groupContent.addEventListener('selectedChanged', (evt) => {
-            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 (index.h(index.Host, { key: 'a6c09009cd058c03a46699d1514a51e5befb5018' }, index.h("div", { key: '7d0802bd7566f7d47062e91a8264b6d783a8a44b', class: {
+        return (index.h(index.Host, { key: '812601d494909804a300f73d14e2e423e2c5cce9' }, index.h("div", { key: '2725ce086aee61abdfbf9e2db6bb1c1c1f936cc9', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, index.h("div", { key: '3f2e851b6d35893c2a3393348474e6cefa06ae79', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: 'dfed4e7962f4f3b071cc6b8d64b4efa06f139ebb', class: {
+            }, tabindex: "0" }, index.h("div", { key: '359308aacda0079e12bb33273b93aad571b2568e', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, index.h("div", { key: 'e770dd6b563036aef00730a5d497cc8b777bf1f9', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), index.h("div", { key: 'afe8c9b382b2506f1c86a56abe4b29da07c52b9f', class: "btn-expand-header" }, index.h("ix-icon", { key: 'de63d1492943de8e4bcf2f1f76b61feab1beea50', "data-testid": "expand-collapsed-icon", class: {
+            } }), index.h("div", { key: '52d7d439f1f2af260bfa707a418bdfe5979ade02', class: "btn-expand-header" }, index.h("ix-icon", { key: 'ab70e0357f2cd002412f950b6a770825f73e481d', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), index.h("div", { key: '5ca15ab167295402b4fc5f226b14697777b3abba', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '2f78d4b163682214e6325b49ce69f2f737da0399', name: "header" }))), index.h("ix-group-context-menu", { key: '56a4bcd4e623012de4a7a1bcc66bb1f280f66e90' }, index.h("slot", { key: '439f0ba04c6ec4543f740ca70b965cd50eae669f', name: "dropdown" }))), index.h("div", { key: '3cd56e5f026a12ad05ccf85760d2bb4a72ad47d4', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), index.h("div", { key: 'ec04f3094c5949cd96dc1bcbf00434dff3012be4', class: "group-header-content" }, this.header ? (index.h("div", { class: "group-header-props-container" }, index.h("div", { class: "group-header-title" }, index.h("span", { title: this.header }, this.header)), index.h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, index.h("slot", { key: '3a056192f8217060b9ef9f90cba385028b26c04e', name: "header" }))), index.h("ix-group-context-menu", { key: 'd3d14e900f4e6f6cbbbf27d76eab427f5149f900' }, index.h("slot", { key: 'c538f3b3fd67f4d486a94c304f9cd938f0337af2', name: "dropdown" }))), index.h("div", { key: 'ee27945481e3994204885fd6e0e6bd6f1601aaf5', class: {
                 'group-content': true,
-            } }, index.h("div", { key: 'c4fb98c378079efb91edc03c5e88e7a01b33a223', style: {
+            } }, index.h("div", { key: '5cd463be44651ec638b54ea469aa3dc077e3b04f', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, index.h("slot", { key: 'f77631e111614e753f99ec942ff88142c2739c36', onSlotchange: () => {
-                const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
+            } }, index.h("slot", { key: '1565d5c06d317e41f4d4851c69cd38af88e4918c', onSlotchange: () => {
+                var _a;
+                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = shadowDom.hasSlottedElements(slot);
-            } }), index.h("ix-group-item", { key: '9f84823ab01988af424b0b3beff5acc7ec963d01', suppressSelection: true, focusable: false, class: {
+            } }), index.h("ix-group-item", { key: '5d5632cba350db31eb5fa1f64fe3d33e6e0e2748', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, index.h("slot", { key: '14b0b37dfd590c88021c8c4c714a362dc0e82188', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, index.h("slot", { key: '13741bc640b4bed51ffaa9e414cfc0c9efe06444', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "selected": ["selectedChanged"]
+    }; }
 };
 Group.style = IxGroupStyle0;
 

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

@@ -1 +1 @@
-{"file":"ix-group.entry.cjs.js","mappings":"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","names":["hasSlottedElements","createMutationObserver","h","Host"],"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: boolean;\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() dropdownTriggerRef: HTMLElement;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver;\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    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (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    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\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('slot:not([name])');\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.entry.cjs.js","mappings":"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","names":["hasSlottedElements","createMutationObserver","h","Host"],"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/dist/cjs/ix-icon-button_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-529f21c1.js');
 const baseIconButton = require('./base-icon-button-44c72bc8.js');
-const a11y = require('./a11y-d3ce56d1.js');
+const a11y = require('./a11y-eba397e8.js');
 require('./base-button-3735b8c2.js');
 
 const iconButtonCss = ":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}";
@@ -88,7 +88,7 @@ const Spinner = class {
         this.hideTrack = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b83203aa7712519c8d12c8ff55378edc167b43f7', class: {
+        return (index.h(index.Host, { key: '0146dd2225f65f26b9e2853cbb13072e4df5206c', class: {
                 primary: this.variant === 'primary',
                 'xx-small': this.size === 'xx-small',
                 'x-small': this.size === 'x-small',