@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/group/group.css

@@ -0,0 +1,176 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+: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, :host .group-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-group-item--background--hover);
+}
+:host .group-header:not(.disabled):not(:disabled):hover.selected, :host .group-header:not(.disabled):not(:disabled):hover.selected {
+  background-color: var(--theme-group-item--background--selected);
+}
+:host .group-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .group-header:not(.disabled):not(:disabled):active, :host .group-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-group-item--background--active);
+}
+:host .group-header:not(.disabled):not(:disabled):active.selected, :host .group-header:not(.disabled):not(:disabled).active.selected {
+  background-color: var(--theme-group-item--background--selected);
+}
+:host .group-header:not(.disabled):not(:disabled):focus-visible {
+  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;
+}

package/dist/collection/components/group/group.js

@@ -0,0 +1,382 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, } from "@stencil/core";
+import { createMutationObserver } from "../utils/mutation-observer";
+import { hasSlottedElements } from "../utils/shadow-dom";
+import { iconChevronDownSmall, iconChevronRightSmall, } from "@siemens/ix-icons/icons";
+export class Group {
+    constructor() {
+        /**
+         * Prevent header from being selectable
+         */
+        this.suppressHeaderSelection = false;
+        /**
+         * Whether the group is collapsed or expanded. Defaults to true.
+         */
+        this.collapsed = true;
+        /**
+         * Whether the group is selected.
+         */
+        this.selected = false;
+        /**
+         * Expand the group if the header is clicked
+         */
+        this.expandOnHeaderClick = false;
+        this.itemSelected = false;
+        this.slotSize = this.groupItems.length;
+        this.footerVisible = false;
+        this.showExpandCollapsedIcon = false;
+        this.observer = null;
+    }
+    selectedChanged(newSelected) {
+        if (newSelected === false) {
+            this.changeItemIndex();
+        }
+    }
+    get dropdownItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
+    }
+    get groupItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
+    }
+    get groupContent() {
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
+    }
+    onExpandClick(event) {
+        const oldCollapsed = this.collapsed;
+        this.collapsed = !this.collapsed;
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
+        event.stopPropagation();
+        if (defaultPrevented) {
+            this.collapsed = oldCollapsed;
+        }
+    }
+    onHeaderClick(event) {
+        if (this.suppressHeaderSelection) {
+            this.onExpandClick(event);
+            return;
+        }
+        this.changeHeaderSelection(!this.selected);
+        this.changeItemIndex();
+    }
+    changeHeaderSelection(newSelection) {
+        const oldIsHeaderSelected = this.selected;
+        const newIsHeaderSelected = newSelection;
+        this.selected = newIsHeaderSelected;
+        const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);
+        if (defaultPrevented) {
+            this.selected = oldIsHeaderSelected;
+            return;
+        }
+    }
+    changeItemIndex(index) {
+        const oldIndex = this.index;
+        const newIndex = index === this.index ? undefined : index;
+        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() {
+        var _a;
+        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
+        if (slot) {
+            this.footerVisible = hasSlottedElements(slot);
+        }
+    }
+    componentWillRender() {
+        this.groupItems.forEach((item, index) => {
+            item.selected = index === this.index;
+            item.index = index;
+        });
+    }
+    componentDidLoad() {
+        this.observer = createMutationObserver(() => {
+            this.slotSize = this.groupItems.length;
+        });
+        if (!this.groupContent) {
+            return;
+        }
+        this.observer.observe(this.groupContent, {
+            childList: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    onItemClicked(event) {
+        if (event.target instanceof HTMLElement) {
+            const item = event.target;
+            const index = this.groupItems.indexOf(item);
+            this.changeItemIndex(index);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c268f5611ec43b90822fbb853a7ce6e8ec659a46' }, h("div", { key: '85edebe78504c756468a755017455878f2275731', class: {
+                'group-header': true,
+                expand: !this.collapsed,
+                selected: this.selected,
+            }, tabindex: "0" }, h("div", { key: 'de1e83c31d43105090f32a385c05dae380494e16', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'be571bb02cbc5a87526fb2233843109694fb0483', class: {
+                'group-header-selection-indicator': true,
+                'group-header-selection-indicator-item-selected': this.itemSelected,
+            } }), h("div", { key: '28eed0500509cfa077c392b571b94b7f58ffc5a9', class: "btn-expand-header" }, h("ix-icon", { key: 'c03a24366b283854b593a7535f6ec74a546e2f35', "data-testid": "expand-collapsed-icon", class: {
+                hidden: !this.showExpandCollapsedIcon,
+            }, name: this.collapsed ? iconChevronRightSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '3017f37e708850dcc99315d6e9ae8f04b2eb056a', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '8748bbeddeb1131bd97c4451040a502ea4d304f5', name: "header" }))), h("ix-group-context-menu", { key: 'ae30b548cd0fe88981f39d0eec4cb4b1e84ee4a3' }, h("slot", { key: '784f9e0fc19d89463890a26bf12e3617929b09e3', name: "dropdown" }))), h("div", { key: 'a1799b001f3ba51b5df2fcf88f85d09560211dad', class: {
+                'group-content': true,
+            } }, h("div", { key: 'f366922798c0d4629497445b8edfd4c47bc82147', style: {
+                display: this.collapsed ? 'none' : 'contents',
+            } }, h("slot", { key: '15c9060eac795f4d2ad0f605316713a67b06ebe1', onSlotchange: () => {
+                var _a;
+                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+                this.showExpandCollapsedIcon = hasSlottedElements(slot);
+            } }), h("ix-group-item", { key: '3d56e41df5f67e26e8923403dda2ca56f5cadc7d', suppressSelection: true, focusable: false, class: {
+                footer: true,
+                'footer-visible': this.footerVisible,
+            } }, h("slot", { key: '2aba775c0b328782dc802ca63c6ea7ff08038262', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+    }
+    static get is() { return "ix-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "suppressHeaderSelection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevent header from being selectable"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suppress-header-selection",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group header"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header",
+                "reflect": false
+            },
+            "subHeader": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group header subtitle"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sub-header",
+                "reflect": false
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the group is collapsed or expanded. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the group is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "index": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The index of the selected group entry.\nIf undefined no group item is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "index",
+                "reflect": true
+            },
+            "expandOnHeaderClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expand the group if the header is clicked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expand-on-header-click",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "itemSelected": {},
+            "slotSize": {},
+            "footerVisible": {},
+            "showExpandCollapsedIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectGroup",
+                "name": "selectGroup",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when whole group gets selected."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "selectItem",
+                "name": "selectItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when group item gets selected."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "collapsedChanged",
+                "name": "collapsedChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group collapsed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "selectedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "selectedChanged",
+                "method": "onItemClicked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=group.js.map

package/dist/collection/components/group/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAOjC,MAAM,OAAO,KAAK;IALlB;QAQE;;WAEG;QACK,4BAAuB,GAAG,KAAK,CAAC;QAYxC;;WAEG;QACqC,cAAS,GAAG,IAAI,CAAC;QAEzD;;WAEG;QACqC,aAAQ,GAAG,KAAK,CAAC;QAQzD;;WAEG;QACK,wBAAmB,GAAG,KAAK,CAAC;QAiB3B,iBAAY,GAAG,KAAK,CAAC;QACrB,aAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;QAClC,kBAAa,GAAG,KAAK,CAAC;QAEtB,4BAAuB,GAAG,KAAK,CAAC;QAEjC,aAAQ,GAAqB,IAAK,CAAC;KAuN5C;IApNC,eAAe,CAAC,WAAoB;QAClC,IAAI,WAAW,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAC5D,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAChE,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;;QACd,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtE,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB,CAAC,YAAqB;QACjD,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1C,MAAM,mBAAmB,GAAG,YAAY,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,mBAAmB,CAAC;QACpC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAExE,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,mBAAmB,CAAC;YACpC,OAAO;QACT,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAc;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;QAE1D,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5D,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC;IAEO,YAAY;;QAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACrD,qBAAqB,CACtB,CAAC;QAEF,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,KAAkB;QAC9B,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE,CAAC;YACxC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAgC,CAAC;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,QAAQ,EAAC,GAAG;gBAEZ,4DACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;oBAErC,4DACE,KAAK,EAAE;4BACL,kCAAkC,EAAE,IAAI;4BACxC,gDAAgD,EAC9C,IAAI,CAAC,YAAY;yBACpB,GACI;oBACP,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,+EACc,uBAAuB,EACnC,KAAK,EAAE;gCACL,MAAM,EAAE,CAAC,IAAI,CAAC,uBAAuB;6BACtC,EACD,IAAI,EACF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,EAE/D,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAC3C,CACP;oBAEN,4DAAK,KAAK,EAAC,sBAAsB;wBAC9B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAC,8BAA8B;4BACvC,WAAK,KAAK,EAAC,oBAAoB;gCAC7B,YAAM,KAAK,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,MAAM,CAAQ,CAC1C;4BACN,WAAK,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,IAC/C,IAAI,CAAC,SAAS,CACX,CACF,CACP,CAAC,CAAC,CAAC,IAAI;wBACR,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;gBACN;oBACE,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACP,CACpB;YACN,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;iBACtB;gBAED,4DACE,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;qBAC9C;oBAED,6DACE,YAAY,EAAE,GAAG,EAAE;;4BACjB,MAAM,IAAI,GACR,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CACxC,kBAAkB,CACnB,CAAC;4BACJ,IAAI,CAAC,uBAAuB,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;wBAC1D,CAAC,GACK;oBACR,sEACE,iBAAiB,EAAE,IAAI,EACvB,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;4BACL,MAAM,EAAE,IAAI;4BACZ,gBAAgB,EAAE,IAAI,CAAC,aAAa;yBACrC;wBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GACjC,CACM,CACZ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\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';\nimport {\n  iconChevronDownSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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 ? iconChevronRightSmall : iconChevronDownSmall\n                }\n                onClick={(event: Event) => this.onExpandClick(event)}\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"]}