npm - @siemens/ix - Versions diffs - 2.4.1 → 2.5.0 - Mend

@siemens/ix 2.4.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (830) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","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\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-group',\n styleUrl: 'group.scss',\n shadow: true,\n})\nexport class Group {\n @Element() hostElement!: HTMLIxGroupElement;\n\n /\n Prevent header from being selectable\n /\n @Prop() suppressHeaderSelection = false;\n\n /\n Group header\n /\n @Prop() header?: string;\n\n /\n Group header subtitle\n /\n @Prop() subHeader?: string;\n\n /\n Whether the group is collapsed or expanded. Defaults to true.\n /\n @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n /\n Whether the group is selected.\n /\n @Prop({ mutable: true, reflect: true }) selected = false;\n\n /\n The index of the selected group entry.\n * If undefined no group item is selected.\n /\n @Prop({ mutable: true, reflect: true }) index?: number;\n\n /\n Expand the group if the header is clicked\n /\n @Prop() expandOnHeaderClick = false;\n\n /\n Emits when whole group gets selected.\n /\n @Event() selectGroup!: EventEmitter<boolean>;\n\n /\n Emits when group item gets selected.\n /\n @Event() selectItem!: EventEmitter<number>;\n\n /\n Group collapsed\n */\n @Event() collapsedChanged!: EventEmitter<boolean>;\n\n @State() itemSelected = false;\n @State() slotSize = this.groupItems.length;\n @State() footerVisible = false;\n\n @State() showExpandCollapsedIcon = false;\n\n private observer: MutationObserver = null!;\n\n get dropdownItems() {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-dropdown-item')\n );\n }\n\n get groupItems(): Array<HTMLIxGroupItemElement> {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n );\n }\n\n get groupContent() {\n return this.hostElement.shadowRoot?.querySelector('.group-content');\n }\n\n private onExpandClick(event: Event) {\n this.collapsed = !this.collapsed;\n\n this.collapsedChanged.emit(this.collapsed);\n event.stopPropagation();\n }\n\n private onHeaderClick(event: Event) {\n this.setGroupSelection(!this.selected);\n\n if (this.suppressHeaderSelection) {\n this.onExpandClick(event);\n }\n }\n\n private onItemClick(index?: number) {\n const newIndex = index === this.index ? undefined : index;\n this.selectItem.emit(newIndex);\n\n this.index = newIndex;\n\n if (this.index !== undefined && this.index >= 0) {\n this.itemSelected = true;\n } else this.itemSelected = false;\n\n this.setGroupSelection(false);\n }\n\n private setGroupSelection(selection: boolean) {\n if (!this.suppressHeaderSelection) {\n this.selected = selection;\n this.selectGroup.emit(this.selected);\n }\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n );\n\n if (slot) {\n this.footerVisible = hasSlottedElements(slot);\n }\n }\n\n componentWillRender() {\n this.groupItems.forEach((item, index) => {\n if (this.selected === true) {\n item.selected = false;\n this.index = undefined;\n this.itemSelected = false;\n return;\n }\n item.selected = index === this.index;\n item.index = index;\n });\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => {\n this.slotSize = this.groupItems.length;\n });\n\n if (!this.groupContent) {\n return;\n }\n\n this.observer.observe(this.groupContent, {\n childList: true,\n });\n\n this.groupContent?.addEventListener(\n 'selectedChanged',\n (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n if (evt.detail.suppressSelection) {\n evt.stopPropagation();\n return;\n }\n\n this.onItemClick(evt.detail.index);\n }\n );\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'group-header': true,\n expand: !this.collapsed,\n selected: this.selected,\n }}\n tabindex=\"0\"\n >\n <div\n class=\"group-header-clickable\"\n onClick={(e) => this.onHeaderClick(e)}\n >\n <div\n class={{\n 'group-header-selection-indicator': true,\n 'group-header-selection-indicator-item-selected':\n this.itemSelected,\n }}\n ></div>\n <div class=\"btn-expand-header\">\n <ix-icon\n data-testid=\"expand-collapsed-icon\"\n class={{\n hidden: !this.showExpandCollapsedIcon,\n }}\n name={\n this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n }\n onClick={(e) => this.onExpandClick(e)}\n ></ix-icon>\n </div>\n\n <div class=\"group-header-content\">\n {this.header ? (\n <div class=\"group-header-props-container\">\n <div class=\"group-header-title\">\n <span title={this.header}>{this.header}</span>\n </div>\n <div class=\"group-subheader\" title={this.subHeader}>\n {this.subHeader}\n </div>\n </div>\n ) : null}\n <slot name=\"header\"></slot>\n </div>\n </div>\n <ix-group-context-menu>\n <slot name=\"dropdown\"></slot>\n </ix-group-context-menu>\n </div>\n <div\n class={{\n 'group-content': true,\n }}\n >\n <div\n style={{\n display: this.collapsed ? 'none' : 'contents',\n }}\n >\n <slot\n onSlotchange={() => {\n const slot =\n this.hostElement.shadowRoot?.querySelector(\n 'slot:not([name])'\n );\n this.showExpandCollapsedIcon = hasSlottedElements(slot);\n }}\n ></slot>\n <ix-group-item\n suppressSelection={true}\n focusable={false}\n class={{\n footer: true,\n 'footer-visible': this.footerVisible,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.onSlotChange()}\n ></slot>\n </ix-group-item>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","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';\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"]}

package/dist/collection/components/group/test/group.ct.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -64,7 +64,7 @@ test('suppress selection should not stop event propagation', async ({ mount, pag
     await groupItem.click();
     await expect(groupItem).toHaveText('Item 1Clicked');
 });
-test('prevent default', async ({ mount, page }) => {
+test('item prevent default selection item event', async ({ mount, page }) => {
     await mount(`
     <ix-group>
       <ix-group-item>Item 1</ix-group-item>
@@ -77,9 +77,39 @@ test('prevent default', async ({ mount, page }) => {
     const groupItem = page.locator('ix-group-item').first();
     await expect(group).toHaveClass(/hydrated/);
     await group.evaluate((item) => {
-        item.addEventListener('selectedChanged', (e) => e.preventDefault());
+        item.addEventListener('selectItem', (e) => e.preventDefault());
     });
     await groupItem.click();
-    await expect(groupItem).not.toHaveClass('/hydrated selected');
+    await expect(groupItem).not.toHaveClass(/hydrated selected/);
+});
+test('group header prevent default collapse/expand', async ({ mount, page, }) => {
+    await mount(`
+    <ix-group>
+      <ix-group-item>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const expandIcon = group.getByTestId('expand-collapsed-icon');
+    await group.evaluate((item) => {
+        item.addEventListener('collapsedChanged', (e) => e.preventDefault());
+    });
+    await expandIcon.click();
+    await expect(group).toHaveAttribute('collapsed');
+});
+test('group header prevent default selection event', async ({ mount, page, }) => {
+    await mount(`
+    <ix-group header="Test" sub-header="Test2">
+      <ix-group-item>Item 1</ix-group-item>
+      <ix-group-item>Item 2</ix-group-item>
+    </ix-group>
+  `);
+    const group = page.locator('ix-group');
+    const groupHeader = group.locator('.group-header');
+    await group.evaluate((item) => {
+        item.addEventListener('selectGroup', (e) => e.preventDefault());
+    });
+    await groupHeader.click();
+    await expect(group).not.toHaveAttribute('selected');
 });
 //# sourceMappingURL=group.ct.js.map

package/dist/collection/components/group/test/group.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"group.ct.js","sourceRoot":"","sources":["../../../../src/components/group/test/group.ct.ts"],"names":[],"mappings":"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~~iBAAiB~~,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;~~IAChD~~,MAAM,KAAK,CAAC;;;;;GAKX,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC9D,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;IACxD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,IAAI,CAAC,gBAAgB,CAAC,~~iBAAiB~~,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC;~~IACtE~~,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,~~oBAAoB~~,CAAC,CAAC;~~AAChE~~,CAAC,CAAC,CAAC","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\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`<ix-group></ix-group>`);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n});\n\ntest('hide expand icon initial', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expect(expandIcon).not.toBeVisible();\n\n await group.evaluate((group) => {\n const item = document.createElement('ix-group-item');\n group.appendChild(item);\n });\n\n await expect(expandIcon).toBeVisible();\n});\n\ntest('show expand icon initial', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n <ix-group-item>Item 1</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expect(expandIcon).toBeVisible();\n\n await group.evaluate((group) => {\n const item = group.querySelector('ix-group-item');\n if (item) {\n item.remove();\n }\n });\n\n await expect(expandIcon).not.toBeVisible();\n});\n\ntest('suppress selection should not stop event propagation', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-group>\n <ix-group-item suppress-selection>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expandIcon.click();\n\n const groupItem = page.locator('ix-group-item').first();\n await expect(group).toHaveClass(/hydrated/);\n\n await groupItem.evaluate((item) => {\n item.addEventListener('click', () => (item.innerHTML += 'Clicked'));\n });\n\n await groupItem.click();\n await expect(groupItem).toHaveText('Item 1Clicked');\n});\n\ntest('prevent default', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n <ix-group-item>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expandIcon.click();\n\n const groupItem = page.locator('ix-group-item').first();\n await expect(group).toHaveClass(/hydrated/);\n\n await group.evaluate((item) => {\n item.addEventListener('~~selectedChanged~~', (e) => e.preventDefault());\n });\n\n await groupItem.click();\n await expect(groupItem).not.toHaveClass('/hydrated selected');\n});\n"]}
1	+ {"version":3,"file":"group.ct.js","sourceRoot":"","sources":["../../../../src/components/group/test/group.ct.ts"],"names":[],"mappings":"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","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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`<ix-group></ix-group>`);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n});\n\ntest('hide expand icon initial', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expect(expandIcon).not.toBeVisible();\n\n await group.evaluate((group) => {\n const item = document.createElement('ix-group-item');\n group.appendChild(item);\n });\n\n await expect(expandIcon).toBeVisible();\n});\n\ntest('show expand icon initial', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n <ix-group-item>Item 1</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n await expect(group).toHaveClass(/hydrated/);\n\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expect(expandIcon).toBeVisible();\n\n await group.evaluate((group) => {\n const item = group.querySelector('ix-group-item');\n if (item) {\n item.remove();\n }\n });\n\n await expect(expandIcon).not.toBeVisible();\n});\n\ntest('suppress selection should not stop event propagation', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-group>\n <ix-group-item suppress-selection>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expandIcon.click();\n\n const groupItem = page.locator('ix-group-item').first();\n await expect(group).toHaveClass(/hydrated/);\n\n await groupItem.evaluate((item) => {\n item.addEventListener('click', () => (item.innerHTML += 'Clicked'));\n });\n\n await groupItem.click();\n await expect(groupItem).toHaveText('Item 1Clicked');\n});\n\ntest('item prevent default selection item event', async ({ mount, page }) => {\n await mount(`\n <ix-group>\n <ix-group-item>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n await expandIcon.click();\n\n const groupItem = page.locator('ix-group-item').first();\n await expect(group).toHaveClass(/hydrated/);\n\n await group.evaluate((item) => {\n item.addEventListener('selectItem', (e) => e.preventDefault());\n });\n\n await groupItem.click();\n await expect(groupItem).not.toHaveClass(/hydrated selected/);\n});\n\ntest('group header prevent default collapse/expand', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-group>\n <ix-group-item>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const expandIcon = group.getByTestId('expand-collapsed-icon');\n\n await group.evaluate((item) => {\n item.addEventListener('collapsedChanged', (e) => e.preventDefault());\n });\n\n await expandIcon.click();\n\n await expect(group).toHaveAttribute('collapsed');\n});\n\ntest('group header prevent default selection event', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-group header=\"Test\" sub-header=\"Test2\">\n <ix-group-item>Item 1</ix-group-item>\n <ix-group-item>Item 2</ix-group-item>\n </ix-group>\n `);\n const group = page.locator('ix-group');\n const groupHeader = group.locator('.group-header');\n\n await group.evaluate((item) => {\n item.addEventListener('selectGroup', (e) => e.preventDefault());\n });\n\n await groupHeader.click();\n\n await expect(group).not.toHaveAttribute('selected');\n});\n"]}

package/dist/collection/components/group-item/group-item.js CHANGED Viewed

@@ -21,9 +21,9 @@ export class GroupItem {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'ae51a9df7d4b27336b05017a18300c5ee91473c7', class: {
+        return (h(Host, { key: '5467fe7e41ae1ce688e2ed294fe8dc26da9b4926', class: {
                 selected: this.selected && !this.suppressSelection,
-            } }, h("button", { key: 'd70ce085f9deb507c5365c4d4c3c75dac4864560', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '194d910fb5b1dc94e27b504568ef9b5d774fcaca', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '4934b9729052b030c04ea695d23abde6634eaf10' }))));
+            } }, h("button", { key: '1d3bcb115867183f660958d432ffca1931197a6b', tabindex: this.focusable ? 0 : -1 }, h("div", { key: 'f8723d831c359decf7ca3481cdeeb6c262cd929b', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '202b787531c09feb239e6b7d7b4bf7aa186eb0cb' }))));
     }
     static get is() { return "ix-group-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js CHANGED Viewed

@@ -73,7 +73,7 @@ export class IconToggleButton {
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
         console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: '8e9838c22d5fced8887a6d6381394875b81433ac', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '5d758620c26f25e52825a2319320a770406a4cb7' }, baseButtonProps))));
+        return (h(Host, { key: 'd20169e8c23f65f145a9c7029a2691c84a3e9933', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '07e82b2f5e78c8705500cfdece4ceb57c14b8aa0' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/input-group.js CHANGED Viewed

@@ -124,7 +124,7 @@ export class InputGroup {
         return width;
     }
     render() {
-        return (h(Host, { key: '94b064c7c5cb011576c94a27846843f3c919ceac', class: { disabled: this.disabled } }, h("div", { key: 'a35679f97300d5070505e07c1a67591a578864b5', class: "group group-start" }, h("slot", { key: '6c1541e103b20d36ddc024399cc55284bebe239e', name: "input-start" })), h("slot", { key: 'a1d004e8ced49abd3ed2f861018af0d954e294f7' }), h("div", { key: '6e712535611adcfd25e91f1136c7a89808edaf0a', class: "group group-end" }, h("slot", { key: 'bf4302e8ecf94f5a83db1c5e3c9636c6c8a2e67e', name: "input-end" }))));
+        return (h(Host, { key: '604ccecde3e72a8c5ff1eed248433d820ddaca17', class: { disabled: this.disabled } }, h("div", { key: '6ce2ae4b208e39806e1b8c56007284fad21d76f8', class: "group group-start" }, h("slot", { key: '742724f4b4451a95a0703475956958008be8891c', name: "input-start" })), h("slot", { key: 'c1bfd62e16fbab1a74ed1c14f2eed18bfdad01f9' }), h("div", { key: '0b7a3a9990f3d8d7575d54dcb9bbadbba7c76ee8', class: "group group-end" }, h("slot", { key: 'bae1040ab929585017edcbc77d2e618c688910c8', name: "input-end" }))));
     }
     static get is() { return "ix-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/key-value-list/key-value-list.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class KeyValueList {
         this.striped = undefined;
     }
     render() {
-        return (h(Host, { key: 'f33fc856c54a05f54dff4184c275c8cac7f18426', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '75c282f8c79a273477382e250157aef6865e6d8d' })));
+        return (h(Host, { key: '41f224f172d1d9ed9a1eab8c1e1c434fa2e4e1c9', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '400532fe69d357f8bde037257f4397723c8129a0' })));
     }
     static get is() { return "ix-key-value-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/kpi/kpi.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -33,13 +33,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'd55ca486905d0294052dcb2ce5dca5e82a8c7566', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: '8bd4d575bc630ca0e55365b87842f138d3e214e2', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '99f29f60ed8257b14dd062d13813d2078ae5c8b0', class: {
+            } }, h("div", { key: '6e68fc8f36b4b55510d960ea0ec7546448b2d7eb', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '49d9bbffb0b97df9dea86542347bb5defe46728e', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '5947f6b00f33857cf93c1bb161734a6505b5cb3c', class: "kpi-label-text" }, this.label)), h("span", { key: '55a429623ac5bcf1e3884d5af539e03b8e51605a', class: "kpi-value-container" }, h("span", { key: '3569aac806ad75bb105290c55a14aa297d47662e', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: 'b99e39255dfeb1cf2b5a7cbd6d3c59376dbd7d3a', class: "kpi-label" }, this.getStateIcon(), h("span", { key: 'aba4b1311cd4230a20c7b65fb72d59aeb48c4e8e', class: "kpi-label-text" }, this.label)), h("span", { key: '2bc45831f6b3015bee224f521680242db7a0bd9c', class: "kpi-value-container" }, h("span", { key: '36fef5f214e0075dd4f9c996aeb787e34a27982e', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kpi/kpi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-kpi',\n styleUrl: 'kpi.scss',\n shadow: true,\n})\nexport class Kpi {\n /\n \n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() value: string \| number;\n\n /\n \n /\n @Prop() unit: string;\n\n /\n \n /\n @Prop() state: 'neutral' \| 'warning' \| 'alarm' = 'neutral';\n\n /\n \n */\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n private getStateIcon() {\n switch (this.state) {\n case 'alarm':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'alarm'}\n size=\"16\"\n ></ix-icon>\n );\n\n case 'warning':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'warning'}\n size=\"16\"\n ></ix-icon>\n );\n\n default:\n return '';\n }\n }\n\n private getTooltipText() {\n let tooltip = `${this.label}: ${this.value}`;\n\n if (this.unit) {\n tooltip = tooltip.concat(` ${this.unit}`);\n }\n\n return tooltip;\n }\n\n render() {\n return (\n <Host\n title={this.getTooltipText()}\n tabindex=\"1\"\n class={{\n stacked: this.orientation === 'vertical',\n }}\n >\n <div\n class={{\n 'kpi-container': true,\n alarm: this.state === 'alarm',\n warning: this.state === 'warning',\n }}\n >\n <span class=\"kpi-label\">\n {this.getStateIcon()}\n <span class=\"kpi-label-text\">{this.label}</span>\n </span>\n <span class=\"kpi-value-container\">\n <span class=\"kpi-value\">{this.value}</span>\n {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-kpi',\n styleUrl: 'kpi.scss',\n shadow: true,\n})\nexport class Kpi {\n /\n \n /\n @Prop() label: string;\n\n /\n \n /\n @Prop() value: string \| number;\n\n /\n \n /\n @Prop() unit: string;\n\n /\n \n /\n @Prop() state: 'neutral' \| 'warning' \| 'alarm' = 'neutral';\n\n /\n \n */\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n private getStateIcon() {\n switch (this.state) {\n case 'alarm':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'alarm'}\n size=\"16\"\n ></ix-icon>\n );\n\n case 'warning':\n return (\n <ix-icon\n color=\"kpi-display-icon--color\"\n name={'warning'}\n size=\"16\"\n ></ix-icon>\n );\n\n default:\n return '';\n }\n }\n\n private getTooltipText() {\n let tooltip = `${this.label}: ${this.value}`;\n\n if (this.unit) {\n tooltip = tooltip.concat(` ${this.unit}`);\n }\n\n return tooltip;\n }\n\n render() {\n return (\n <Host\n title={this.getTooltipText()}\n tabindex=\"1\"\n class={{\n stacked: this.orientation === 'vertical',\n }}\n >\n <div\n class={{\n 'kpi-container': true,\n alarm: this.state === 'alarm',\n warning: this.state === 'warning',\n }}\n >\n <span class=\"kpi-label\">\n {this.getStateIcon()}\n <span class=\"kpi-label-text\">{this.label}</span>\n </span>\n <span class=\"kpi-value-container\">\n <span class=\"kpi-value\">{this.value}</span>\n {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/link-button/link-button.js CHANGED Viewed

@@ -17,13 +17,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: 'c0753708c00f43909af85a98f619b407545a69a2' }, h("a", { key: 'a7935cfb13d2743192bd678bf99e7e2dc09657f5', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: 'a6bb7077867b0a9e30a02d02b7fbc97fb747235d' }, h("a", { key: '2a433a6a960e2daebb282e1059a8e461446660ec', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'e18e4e6c7f69fce4cf7c9708f3ec18a14e825b3f', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '20d6785d5ecd08978bdb8a58c0e11b85584143f8', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '43a87812bddd34d6e82eb174ba35844fa618e1b7', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '8ca27684566c0fe53cc572169c5c38f508d7d83d', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '6d5ac72219c3565dc5c3adec23b59e6d0bdf93a7' })))));
+            } }, h("slot", { key: '8d8de54a124c5348d046dfc8ddf83fcb06ddbcc8' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation/map-navigation.css CHANGED Viewed

@@ -148,11 +148,11 @@
 }
 :host .map-nav-header .map-nav-header-brand {
   background-color: var(--theme-map-navigation-background);
-  display: flex;
-  align-items: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.625rem;
   height: 100%;
   width: 100%;
-  padding: 0 1rem;
   --theme-app-header--color: var(--theme-map-navigation-header--color);
   --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);
 }

package/dist/collection/components/map-navigation/map-navigation.js CHANGED Viewed

@@ -155,11 +155,11 @@ export class MapNavigation {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: '65d980effdeeac98d92a0c8d150cf96d9b9beb3d' }, h("slot", { key: '822f13c097836e57452c453d9b45e4774d7394ed', name: "menu" }), h("div", { key: '8f58c729f86f0e3b6d6083b5f0f0fda28e74c9eb', class: "map-nav" }, h("div", { key: '0f979e624122ce789aa094bf428dc39414d66207', class: "map-nav-sidebar" }, h("div", { key: 'a8cf78610ff79460f00716f52968f18f0fc83859', class: "map-nav-header" }, h("ix-application-header", { key: '98c2b5e98691c1505879a3ed2d1f3cdba4c94a62', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'b9036cd5a8873b9562d58783264286bb74cf08f7', slot: "logo", name: "logo" }))), h("div", { key: '42a13b7c8ee93cf69b06c12a3fb600f740555d1b', class: "map-nav-sidebar-content" }, h("div", { key: 'd4e0218e43cabf84bd7faa2c38a7e17074982ba2', class: "map-nav-sidebar-static-content" }, h("div", { key: '0b1add8805f5b3d37a546d20fa6e99a1d6bf35ac', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'b2e15f627226c8d01e7f1e73f14d40ebb58e151d', class: "map-nav-sidebar-user-content" }, h("slot", { key: 'cb26bf448b02c54e46398d65b0361e453115c20d', name: "sidebar-content" })))), h("div", { key: '8fe42e8570256b4f09874100e2d34d323e22ac0d', class: "content" }, h("div", { key: '17a816d735d80ebca9e6cc7a7e9c6671e2e9a059', class: {
+        return (h(Host, { key: 'cb5c6f39555fbd806f1eca16919c277843a23351' }, h("slot", { key: '9da04acd9ef3e5b8f322669406f9ad4b812c9c79', name: "menu" }), h("div", { key: 'dced8e859776aa7d9923156a91fb149e9409af31', class: "map-nav" }, h("div", { key: '97fb4b6ff84005e96873680cfe32c7a2b33b7c0e', class: "map-nav-sidebar" }, h("div", { key: '1f069b0b89c0993df6ad24fba1335a5cb2cd2083', class: "map-nav-header" }, h("ix-application-header", { key: 'bbb0e01ae9194aed17711514b70124704831f7ac', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: '78b9d282b03368708a5a4a6197fccfcd586ae16f', slot: "logo", name: "logo" }))), h("div", { key: '061ae2f057117ac51f9baa296940cddc66c89d23', class: "map-nav-sidebar-content" }, h("div", { key: 'f5d5adb2daf4ba5212e7bf66ddc860431e453f1b', class: "map-nav-sidebar-static-content" }, h("div", { key: '07f6bebd3988744a4e03b61a5f30ecce310bba85', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: '2ac8e086d83fc82409f5bfd1ecea2ba66eb06606', class: "map-nav-sidebar-user-content" }, h("slot", { key: 'f447fb6a5995ddb0ea0c08e3101c2d7ab29805f4', name: "sidebar-content" })))), h("div", { key: 'be19906feccbba5e0fd4736df63afa4584b2ab1f', class: "content" }, h("div", { key: 'bf1127e632cc4b7ee9f5afb8cc51aabc8abe5600', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: '734a74f600419d597f306638cbe97c5504a2e15d', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '76d831c62b3a1339e18ab4f4b77c2dd73b915118' }, h("slot", { key: '5ec164d85791363dc232b3861458446c2a9787dc' }), h("slot", { key: 'cc823b370d2b9f0f7151388ebedcd4958277422c', name: "overlay" }))))));
+            } }, h("slot", { key: '803807a9158ad13f04e6e66c5472c527dde93a4a', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: 'ae117dd7c985f85cede7303f459c9a00b1981ba0' }, h("slot", { key: 'b3d43c7ab67a52d5bfe07c63da2197fa0db1b9f4' }), h("slot", { key: 'eac80e880d505ca915b96c01aedddd2685c41ad7', name: "overlay" }))))));
     }
     static get is() { return "ix-map-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.js CHANGED Viewed

@@ -44,14 +44,14 @@ export class MapNavigationOverlay {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ba9761a6768f6e916af12c4cac2a45700a330516' }, h("div", { key: 'd7d8fbe16ed3146b8e2046d2b072ff0dea862afe', class: "overlay-header" }, h("div", { key: 'de34af360f2b336051fb532b08c579d30d3f6579', class: {
+        return (h(Host, { key: 'ce3a4a2521b63c93dc1b44db381d4f8469015695' }, h("div", { key: '6763f67ec6e925d14300405d3fca2d72a77314a0', class: "overlay-header" }, h("div", { key: 'efa95e00e4e8a9d2a7fd9ec7404d469214e3b42c', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: 'c7ed1f2c9274d805763837568a403cc9f2a0a6c9', class: "overlay-header-content" }, h("ix-icon", { key: '75ed428d1a2862edb18bb14459f02252d39d8ea4', size: "32", name: this.icon }), h("span", { key: 'ea903f87bf838d4ef2fce43e7453f2f7f98fbb57', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'f0f6c8b720f59dd7d589116fada723e2e0c7c7c0', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: 'b7cc3f4acc922c0ba629f444d756e083cc69d5dd' })));
+            } }), h("div", { key: '0692c3e12b96fe4ca45031b1a249461630a164dd', class: "overlay-header-content" }, h("ix-icon", { key: '74221507a80a1178850c3ddbd6a2f14e6641a148', size: "32", name: this.icon }), h("span", { key: '129df0f6b48f9f0a70253b6a4977bcd9e9e9614b', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '0efdf528ab8f3f63e361adb24fd0d2753a8448b6', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '0a9fb2f073f950622738bc17b04efcc00fd91d05' })));
     }
     static get is() { return "ix-map-navigation-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu/menu-expand-icon.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -46,7 +46,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'c7240a676b21f75e3729f4d80d3c99879fdda313', class: {
+        return (h(Host, { key: '04c0e5b43f6de34672561d67612587ccf57b8de2', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

package/dist/collection/components/menu/menu-expand-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-expand-icon.js","sourceRoot":"","sources":["../../../src/components/menu/menu-expand-icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AAMH,MAAM,OAAO,cAAc;;2BAEK,QAAQ;wBAGF,KAAK;;sBAMxB,KAAK;;IAEtB,kBAAkB;QAChB,OAAO,CACL,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;YAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACnE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACpE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,CAChE,CACC,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,OAAO,CACL,sBACE,IAAI,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAC1D,KAAK,SACW,CACnB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 * 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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport { Breakpoint } from '../utils/breakpoints';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-menu-expand-icon',\n styleUrl: './menu-expand-icon.scss',\n shadow: true,\n})\nexport class MenuExpandIcon {\n /* Accessibility label for the menu expand icon (MANDATORY) /\n @Prop() ixAriaLabel: string = 'Expand';\n\n /* Whether the menu expand icon displays the expanded state or not /\n @Prop({ reflect: true }) expanded = false;\n\n /* Controls which icon is displayed /\n @Prop({ reflect: true }) breakpoint: Breakpoint;\n\n /* Display as pinned */\n @Prop() pinned = false;\n\n getSmallScreenIcon() {\n return (\n <button\n class={{\n ...getButtonClasses(\n 'secondary',\n false,\n true,\n true,\n false,\n false,\n false\n ),\n 'menu-expand-button': true,\n }}\n type=\"button\"\n aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n aria-pressed={a11yBoolean(this.expanded)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n </svg>\n </button>\n );\n }\n\n getLargeScreenIcon() {\n return (\n <ix-icon-button\n icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}\n ghost\n ></ix-icon-button>\n );\n }\n\n getMenuIcon() {\n if (this.pinned) {\n return this.getLargeScreenIcon();\n }\n\n if (this.breakpoint === 'md') {\n return this.getLargeScreenIcon();\n }\n\n if (this.breakpoint === 'lg') {\n return this.getLargeScreenIcon();\n }\n\n return this.getSmallScreenIcon();\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n {this.getMenuIcon()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"menu-expand-icon.js","sourceRoot":"","sources":["../../../src/components/menu/menu-expand-icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AAMH,MAAM,OAAO,cAAc;;2BAEK,QAAQ;wBAGF,KAAK;;sBAMxB,KAAK;;IAEtB,kBAAkB;QAChB,OAAO,CACL,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;YAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACnE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACpE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,CAChE,CACC,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,OAAO,CACL,sBACE,IAAI,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAC1D,KAAK,SACW,CACnB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,WAAW,EAAE,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/\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, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport { Breakpoint } from '../utils/breakpoints';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-menu-expand-icon',\n styleUrl: './menu-expand-icon.scss',\n shadow: true,\n})\nexport class MenuExpandIcon {\n /* Accessibility label for the menu expand icon (MANDATORY) /\n @Prop() ixAriaLabel: string = 'Expand';\n\n /* Whether the menu expand icon displays the expanded state or not /\n @Prop({ reflect: true }) expanded = false;\n\n /* Controls which icon is displayed /\n @Prop({ reflect: true }) breakpoint: Breakpoint;\n\n /* Display as pinned */\n @Prop() pinned = false;\n\n getSmallScreenIcon() {\n return (\n <button\n class={{\n ...getButtonClasses(\n 'secondary',\n false,\n true,\n true,\n false,\n false,\n false\n ),\n 'menu-expand-button': true,\n }}\n type=\"button\"\n aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n aria-pressed={a11yBoolean(this.expanded)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n </svg>\n </button>\n );\n }\n\n getLargeScreenIcon() {\n return (\n <ix-icon-button\n icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}\n ghost\n ></ix-icon-button>\n );\n }\n\n getMenuIcon() {\n if (this.pinned) {\n return this.getLargeScreenIcon();\n }\n\n if (this.breakpoint === 'md') {\n return this.getLargeScreenIcon();\n }\n\n if (this.breakpoint === 'lg') {\n return this.getLargeScreenIcon();\n }\n\n return this.getSmallScreenIcon();\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n {this.getMenuIcon()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/menu/menu.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -1779,10 +1779,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 3.25rem;
+  width: calc(3.25rem + var(--ix-application-menu-safe-area-left, 0rem));
   height: 100%;
-  padding-block-end: 1rem;
+  padding-block-end: calc(1rem + var(--ix-safe-area-inset-bottom, 0rem));
   overflow: hidden;
+  padding-left: var(--ix-application-menu-safe-area-left, 0rem);
   background-color: var(--theme-nav--background);
   transition: width var(--theme-default-time) ease-in-out;
 }

package/dist/collection/components/menu/menu.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -382,44 +382,44 @@ export class Menu {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a0107a4aefcea2a7d9f5a907cf3931734d6dd7f8', class: {
+        return (h(Host, { key: 'a84bbcad87774f4ccfed4038adf791b7905145e5', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("aside", { key: 'fd881d335c4a8d1b2594e838aefa10a06de68064', class: {
+            }, slot: "menu" }, h("aside", { key: 'b430d95050f0e3cd578cf1e0e66b9edce7026e48', class: {
                 menu: true,
                 expanded: this.expand,
             }, onClick: () => {
                 this.resetActiveTab();
-            } }, h("div", { key: 'aed59393d3c475579032a9d8e630ecdeaff59a68', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '9d19b6510dc89b2468f9cbc1c126f82f6083ffce', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { key: 'd129f2c3aa57dcd8b59e1f3b5304f56d1bdbc002', onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: 'f33850c76cb8e8cea745c6e084535683f8390f61', id: "menu-tabs", style: {
+            } }, h("div", { key: '8b21b8b85e928cc28c82fbd70fda6360b2b13865', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'a118273b801370c8ddda429ddd930d5a350d0c9d', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext.appSwitchConfig && (h("ix-icon-button", { key: 'af4c7ca9bb43d92fb07c80558290004af1ecef42', onClick: () => showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), h("div", { key: 'cdeb37aaaf57fdd7b9f4f1eb4f7973c52247dd9e', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'cfdb221d28845a07893470e16d5fb1e275bb8750', class: "tabs-shadow-container" }, h("div", { key: '050a7c00b9f057644204e9a957ced6bb6628d921', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '158c152bf09f2c615042f684014589276d9390e9', class: "tabs-shadow-container" }, h("div", { key: '03de44d899f5329c4756dbab62a8d00b9ec123ff', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: 'fb5808e714fff7e8487429db31027a112d04018b', class: {
+            } }), h("div", { key: '3ee05c4db903f6e1dea707b10ad2d81f23c4ac12', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '780791a45a5f995e5b9e03cc9ce909dda00af11d', class: "menu-avatar" }, h("slot", { key: '66b7a9ad9ec85e1d8ff2d849b97b15f13be7bd45', name: "ix-menu-avatar" })), h("slot", { key: 'f4fd7270ab2c876a0f4edff9ea7c4133f21ef42f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'a32377cefb178304cdde2795df69591b052ed959', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: 'df6c064dc921714e6a50ebb28856635c1daedfeb', class: "menu-avatar" }, h("slot", { key: '16e29ae7d5af0079d33b43d06309d535cf9dd7f9', name: "ix-menu-avatar" })), h("slot", { key: 'ef3c8a69c6c5054f92fdccb9a9f2aaf033a943d0', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'f2eb8e58cf7950628bf9cf4afb3f93fd04e8e5af', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: 'c30586a8a9f709592ce56b177d5b2a210cd80b57', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '8898857ee017c3a1ec3c993af57fb50782626935', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: '166914210ed93da0ff02633a66ae8757894190aa', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '2b9875367a362a28d36a812363ec88c8deda1591', name: "bottom" })), h("div", { key: 'a301ed1f5c1bcaafe972ca74422b9c6c0955668c', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, h("div", { key: 'a703b9481ea9570998dc0079b5459631e482f405', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '1cbe0b0641e0ad72428ac59dabd1964684b70864', name: "bottom" })), h("div", { key: '1c4126c931628c8461fb020f2701eaf750de86d5', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null), h("div", { key: 'b92b85831072f33e7eb42c24f225d0b9d50a006e', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark', label: this.i18nToggleTheme })) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null), h("div", { key: '869cf96b7215d40677bd69fa6b82e0d9fdc037db', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: 'b2bbadd82da2548e19f2e6e40fa4ecaa3335aa26', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'b2a0ff3de07bcb3baf1170f4ee89d0dddcbbc93d', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: 'dbdf64b9a47629c10cd8b2636d236ee9a6c48e28', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'fe7022d1d7ad7c6da31c2db029892c3a37714c8c', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }