npm - @siemens/ix - Versions diffs - 3.0.0-alpha.3 → 3.0.0-alpha.4 - Mend

@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

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 (893) hide show

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

@@ -187,4 +187,169 @@ regressionTest('dropdown trigger', async ({ mount, page }) => {
     await item2.click();
     await expect(dropdown2).toBeVisible();
 });
+regressionTest('Detach tree, re-attach, and verify virtual scrolling functionality', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    let treeElement;
+    await tree.evaluate((element) => {
+        treeElement = element;
+        const initializeTreeContext = (model) => {
+            const context = {};
+            Object.keys(model).forEach((id) => {
+                context[id] = {
+                    isExpanded: model[id].hasChildren,
+                    isSelected: false,
+                };
+            });
+            return context;
+        };
+        element.context = initializeTreeContext(element.model);
+        new Array(10).fill(0).forEach((_, index) => {
+            const id = `Item-${index}`;
+            treeElement.model[id] = {
+                id,
+                data: {
+                    name: id,
+                },
+                hasChildren: false,
+                children: [],
+            };
+            treeElement === null || treeElement === void 0 ? void 0 : treeElement.model.root.children.push(id);
+        });
+        const parent = element.parentElement;
+        if (parent) {
+            parent.removeChild(element);
+        }
+    });
+    await expect(tree).not.toBeVisible();
+    await page.evaluate(() => {
+        var _a;
+        const newDiv = document.createElement('div');
+        newDiv.id = 'new-container';
+        newDiv.style.height = 'inherit';
+        (_a = document.querySelector('#mount > div')) === null || _a === void 0 ? void 0 : _a.appendChild(newDiv);
+        if (treeElement !== undefined) {
+            newDiv.appendChild(treeElement);
+        }
+    });
+    await page.waitForSelector('ix-tree');
+    const newContainer = page.locator('#new-container');
+    const reattachedTree = newContainer.locator('ix-tree');
+    await expect(newContainer).toBeVisible();
+    await expect(reattachedTree).toBeVisible();
+    await reattachedTree.evaluate((element) => {
+        element.scrollTo({ top: element.scrollHeight, behavior: 'instant' });
+    });
+    const lastItem = reattachedTree.locator('ix-tree-item').last();
+    await expect(lastItem).toBeVisible();
+    await reattachedTree.evaluate((element) => {
+        element.scrollTo({ top: 0, behavior: 'instant' });
+    });
+    const firstItem = reattachedTree.locator('ix-tree-item').first();
+    await expect(firstItem).toBeVisible();
+});
+regressionTest('should expand and collapse but not select item when toggle icon is clicked twice', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    await expect(tree).toHaveClass(/hydrated/);
+    const sampleItem = tree.locator('ix-tree-item', {
+        hasText: 'Sample',
+        hasNotText: 'Child',
+    });
+    const iconElement = sampleItem.locator('ix-icon');
+    await expect(iconElement).not.toHaveClass(/icon-toggle-down/);
+    await iconElement.click();
+    const items = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child ',
+    });
+    await expect(items.nth(0)).toBeVisible();
+    await expect(items.nth(1)).toBeVisible();
+    await expect(items.nth(2)).toBeVisible();
+    await expect(sampleItem).not.toHaveClass(/selected/);
+    await expect(iconElement).toHaveClass(/icon-toggle-down/);
+    await iconElement.click();
+    await expect(items.nth(0)).not.toBeVisible();
+    await expect(items.nth(1)).not.toBeVisible();
+    await expect(items.nth(2)).not.toBeVisible();
+    await expect(sampleItem).not.toHaveClass(/selected/);
+    await expect(iconElement).not.toHaveClass(/icon-toggle-down/);
+});
+regressionTest('should select but not toggle item when it is clicked', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    await expect(tree).toHaveClass(/hydrated/);
+    const sampleItem = tree.locator('ix-tree-item', {
+        hasText: 'Sample',
+        hasNotText: 'Child',
+    });
+    await sampleItem.click();
+    await expect(sampleItem).toHaveClass(/selected/);
+    const items = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child ',
+    });
+    await expect(items.nth(0)).not.toBeVisible();
+    await expect(items.nth(1)).not.toBeVisible();
+    await expect(items.nth(2)).not.toBeVisible();
+});
+regressionTest('should select item when icon-toggle-container is clicked without the toggle icon to be visible', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    await expect(tree).toHaveClass(/hydrated/);
+    await tree
+        .locator('ix-tree-item', {
+        hasText: 'Sample',
+        hasNotText: 'Child',
+    })
+        .locator('ix-icon')
+        .click();
+    const element1 = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child 1',
+    });
+    await expect(element1).not.toHaveClass(/selected/);
+    await element1.locator('.icon-toggle-container').click();
+    await expect(element1).toHaveClass(/selected/);
+});
+regressionTest('item should stay selected when toggle icon is clicked', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    await expect(tree).toHaveClass(/hydrated/);
+    await tree
+        .locator('ix-tree-item', {
+        hasText: 'Sample',
+        hasNotText: 'Child',
+    })
+        .locator('ix-icon')
+        .click();
+    const element2 = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child 2',
+    });
+    await element2.click();
+    await expect(element2).toHaveClass(/selected/);
+    await element2.locator('ix-icon').click();
+    const element4 = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child 4',
+    });
+    await expect(element4).toBeVisible();
+    await element2.locator('ix-icon').click();
+    await expect(element4).not.toBeVisible();
+    await expect(element2).toHaveClass(/selected/);
+});
+regressionTest('should select and toggle item when it is clicked and toggle on item is enabled', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    await tree.evaluate((treeElement) => {
+        treeElement.setAttribute('toggle-on-item-click', 'true');
+    });
+    await expect(tree).toHaveClass(/hydrated/);
+    const sampleItem = tree.locator('ix-tree-item', {
+        hasText: 'Sample',
+        hasNotText: 'Child',
+    });
+    await sampleItem.click();
+    await expect(sampleItem).toHaveClass(/selected/);
+    const items = tree.locator('ix-tree-item', {
+        hasText: 'Sample Child ',
+    });
+    await expect(items.nth(0)).toBeVisible();
+    await expect(items.nth(1)).toBeVisible();
+    await expect(items.nth(2)).toBeVisible();
+    sampleItem.click();
+    await expect(items.nth(0)).not.toBeVisible();
+    await expect(items.nth(1)).not.toBeVisible();
+    await expect(items.nth(2)).not.toBeVisible();
+});
 //# sourceMappingURL=tree.ct.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.ct.js","sourceRoot":"","sources":["../../../../src/components/tree/test/tree.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 */\nimport { expect, Locator, Page } from '@playwright/test';\nimport { Mount, regressionTest } from '@utils/test';\nimport { TreeItem } from '../tree-model';\n\nconst defaultModel = {\n root: {\n id: 'root',\n data: {\n name: '',\n },\n hasChildren: true,\n children: ['sample'],\n },\n sample: {\n id: 'sample',\n data: {\n name: 'Sample',\n },\n hasChildren: true,\n children: ['sample-child-1', 'sample-child-2', 'sample-child-3'],\n },\n 'sample-child-1': {\n id: 'sample-child-1',\n data: {\n name: 'Sample Child 1',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-2': {\n id: 'sample-child-2',\n data: {\n name: 'Sample Child 2',\n },\n hasChildren: true,\n children: ['sample-child-4'],\n },\n 'sample-child-3': {\n id: 'sample-child-3',\n data: {\n name: 'Sample Child 3',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-4': {\n id: 'sample-child-4',\n data: {\n name: 'Sample Child 4',\n },\n hasChildren: false,\n children: [],\n },\n};\n\nconst initializeTree = async (mount: Mount, page: Page) => {\n await mount(`\n <div style=\" height: 20rem; width: 100%;\">\n <ix-tree root=\"root\"></ix-tree>\n </div>\n `);\n const tree = page.locator('ix-tree');\n\n await tree.evaluate(\n (element: HTMLIxTreeElement, [model]) => {\n element.model = model;\n },\n [defaultModel]\n );\n\n const item = tree.locator('ix-tree-item').nth(0);\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n\n return tree;\n};\n\nconst updateModel = async (tree: Locator, updatedModel: any) => {\n await tree.evaluate(\n (element: HTMLIxTreeElement, [model]) => {\n element.model = model;\n },\n [updatedModel]\n );\n};\n\nregressionTest('renders', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n const item = tree.locator('ix-tree-item').nth(0);\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n});\n\nregressionTest('update tree', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n\n const item = tree.locator('ix-tree-item').nth(0);\n await item.locator('.icon-toggle-container').click();\n\n const item2 = tree.locator('ix-tree-item').nth(2);\n await item2.locator('.icon-toggle-container').click();\n\n const item3 = tree.locator('ix-tree-item').nth(4);\n await expect(item3).toBeVisible();\n await expect(item3).toHaveText('Sample Child 3');\n await expect(item3).toHaveCSS('padding-left', '16px');\n\n await updateModel(tree, {\n root: {\n id: 'root',\n data: {\n name: '',\n },\n hasChildren: true,\n children: ['sample'],\n },\n sample: {\n id: 'sample',\n data: {\n name: 'Sample',\n },\n hasChildren: true,\n children: ['sample-child-1', 'sample-child-2'],\n },\n 'sample-child-1': {\n id: 'sample-child-1',\n data: {\n name: 'Sample Child 1',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-2': {\n id: 'sample-child-2',\n data: {\n name: 'Sample Child 2',\n },\n hasChildren: true,\n children: ['sample-child-3', 'sample-child-4'],\n },\n 'sample-child-3': {\n id: 'sample-child-3',\n data: {\n name: 'Sample Child 3',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-4': {\n id: 'sample-child-4',\n data: {\n name: 'Sample Child 4',\n },\n hasChildren: false,\n children: [],\n },\n });\n\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n await expect(item2).toBeVisible();\n\n const newChildItem = tree.locator('ix-tree-item').nth(3);\n await expect(newChildItem).toBeVisible();\n await expect(newChildItem).toHaveCSS('padding-left', '32px');\n});\n\nregressionTest('dropdown trigger', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n\n await tree.evaluate(\n (t) =>\n ((t as HTMLIxTreeElement).renderItem = (\n _index,\n item,\n _dataList,\n context,\n update\n ) => {\n const el = document.createElement('ix-tree-item');\n const treeItem = item as TreeItem<unknown>;\n el.hasChildren = treeItem.hasChildren;\n el.context = context[treeItem.id];\n el.id = `trigger-${treeItem.id}`;\n\n const div = document.createElement('div');\n div.style.display = 'flex';\n\n const name = document.createElement('span');\n const dd = document.createElement('ix-dropdown');\n const ddItem = document.createElement('ix-dropdown-item');\n ddItem.innerHTML = 'Action 1';\n dd.trigger = `trigger-${treeItem.id}`;\n\n div.appendChild(name);\n div.appendChild(dd);\n dd.appendChild(ddItem);\n\n name.innerText = treeItem.id;\n\n el.appendChild(div);\n\n update((updateTreeItem) => {\n name.innerText = updateTreeItem.data.name;\n });\n\n return el;\n })\n );\n\n const root = tree.locator('ix-tree-item').first();\n await root.locator('.icon-toggle-container').click();\n\n const item1 = tree.locator('ix-tree-item').nth(1);\n const dropdown1 = item1.locator('ix-dropdown');\n await item1.click();\n await expect(dropdown1).toBeVisible();\n\n const item2 = tree.locator('ix-tree-item').nth(2);\n const dropdown2 = item2.locator('ix-dropdown');\n await item2.click();\n await expect(dropdown2).toBeVisible();\n});\n"]}
1	+ {"version":3,"file":"tree.ct.js","sourceRoot":"","sources":["../../../../src/components/tree/test/tree.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 */\nimport { expect, Locator, Page } from '@playwright/test';\nimport { Mount, regressionTest } from '@utils/test';\nimport { TreeContext, TreeItem, TreeModel } from '../tree-model';\n\nconst defaultModel = {\n root: {\n id: 'root',\n data: {\n name: '',\n },\n hasChildren: true,\n children: ['sample'],\n },\n sample: {\n id: 'sample',\n data: {\n name: 'Sample',\n },\n hasChildren: true,\n children: ['sample-child-1', 'sample-child-2', 'sample-child-3'],\n },\n 'sample-child-1': {\n id: 'sample-child-1',\n data: {\n name: 'Sample Child 1',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-2': {\n id: 'sample-child-2',\n data: {\n name: 'Sample Child 2',\n },\n hasChildren: true,\n children: ['sample-child-4'],\n },\n 'sample-child-3': {\n id: 'sample-child-3',\n data: {\n name: 'Sample Child 3',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-4': {\n id: 'sample-child-4',\n data: {\n name: 'Sample Child 4',\n },\n hasChildren: false,\n children: [],\n },\n};\n\nconst initializeTree = async (mount: Mount, page: Page) => {\n await mount(`\n <div style=\" height: 20rem; width: 100%;\">\n <ix-tree root=\"root\"></ix-tree>\n </div>\n `);\n const tree = page.locator('ix-tree');\n\n await tree.evaluate(\n (element: HTMLIxTreeElement, [model]) => {\n element.model = model;\n },\n [defaultModel]\n );\n\n const item = tree.locator('ix-tree-item').nth(0);\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n\n return tree;\n};\n\nconst updateModel = async (tree: Locator, updatedModel: any) => {\n await tree.evaluate(\n (element: HTMLIxTreeElement, [model]) => {\n element.model = model;\n },\n [updatedModel]\n );\n};\n\nregressionTest('renders', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n const item = tree.locator('ix-tree-item').nth(0);\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n});\n\nregressionTest('update tree', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n\n const item = tree.locator('ix-tree-item').nth(0);\n await item.locator('.icon-toggle-container').click();\n\n const item2 = tree.locator('ix-tree-item').nth(2);\n await item2.locator('.icon-toggle-container').click();\n\n const item3 = tree.locator('ix-tree-item').nth(4);\n await expect(item3).toBeVisible();\n await expect(item3).toHaveText('Sample Child 3');\n await expect(item3).toHaveCSS('padding-left', '16px');\n\n await updateModel(tree, {\n root: {\n id: 'root',\n data: {\n name: '',\n },\n hasChildren: true,\n children: ['sample'],\n },\n sample: {\n id: 'sample',\n data: {\n name: 'Sample',\n },\n hasChildren: true,\n children: ['sample-child-1', 'sample-child-2'],\n },\n 'sample-child-1': {\n id: 'sample-child-1',\n data: {\n name: 'Sample Child 1',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-2': {\n id: 'sample-child-2',\n data: {\n name: 'Sample Child 2',\n },\n hasChildren: true,\n children: ['sample-child-3', 'sample-child-4'],\n },\n 'sample-child-3': {\n id: 'sample-child-3',\n data: {\n name: 'Sample Child 3',\n },\n hasChildren: false,\n children: [],\n },\n 'sample-child-4': {\n id: 'sample-child-4',\n data: {\n name: 'Sample Child 4',\n },\n hasChildren: false,\n children: [],\n },\n });\n\n await expect(tree).toHaveClass(/hydrated/);\n await expect(item).toBeVisible();\n await expect(item2).toBeVisible();\n\n const newChildItem = tree.locator('ix-tree-item').nth(3);\n await expect(newChildItem).toBeVisible();\n await expect(newChildItem).toHaveCSS('padding-left', '32px');\n});\n\nregressionTest('dropdown trigger', async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n\n await tree.evaluate(\n (t) =>\n ((t as HTMLIxTreeElement).renderItem = (\n _index,\n item,\n _dataList,\n context,\n update\n ) => {\n const el = document.createElement('ix-tree-item');\n const treeItem = item as TreeItem<unknown>;\n el.hasChildren = treeItem.hasChildren;\n el.context = context[treeItem.id];\n el.id = `trigger-${treeItem.id}`;\n\n const div = document.createElement('div');\n div.style.display = 'flex';\n\n const name = document.createElement('span');\n const dd = document.createElement('ix-dropdown');\n const ddItem = document.createElement('ix-dropdown-item');\n ddItem.innerHTML = 'Action 1';\n dd.trigger = `trigger-${treeItem.id}`;\n\n div.appendChild(name);\n div.appendChild(dd);\n dd.appendChild(ddItem);\n\n name.innerText = treeItem.id;\n\n el.appendChild(div);\n\n update((updateTreeItem) => {\n name.innerText = updateTreeItem.data.name;\n });\n\n return el;\n })\n );\n\n const root = tree.locator('ix-tree-item').first();\n await root.locator('.icon-toggle-container').click();\n\n const item1 = tree.locator('ix-tree-item').nth(1);\n const dropdown1 = item1.locator('ix-dropdown');\n await item1.click();\n await expect(dropdown1).toBeVisible();\n\n const item2 = tree.locator('ix-tree-item').nth(2);\n const dropdown2 = item2.locator('ix-dropdown');\n await item2.click();\n await expect(dropdown2).toBeVisible();\n});\n\nregressionTest(\n 'Detach tree, re-attach, and verify virtual scrolling functionality',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n\n let treeElement: HTMLIxTreeElement \| undefined;\n\n await tree.evaluate((element: HTMLIxTreeElement) => {\n treeElement = element;\n const initializeTreeContext = (\n model: TreeModel<unknown>\n ): TreeContext => {\n const context: TreeContext = {};\n\n Object.keys(model).forEach((id) => {\n context[id] = {\n isExpanded: model[id].hasChildren,\n isSelected: false,\n };\n });\n\n return context;\n };\n\n element.context = initializeTreeContext(element.model);\n\n new Array(10).fill(0).forEach((_, index) => {\n const id = `Item-${index}`;\n treeElement!.model[id] = {\n id,\n data: {\n name: id,\n },\n hasChildren: false,\n children: [],\n };\n\n treeElement?.model.root.children.push(id);\n });\n\n const parent = element.parentElement;\n if (parent) {\n parent.removeChild(element);\n }\n });\n\n await expect(tree).not.toBeVisible();\n\n await page.evaluate(() => {\n const newDiv = document.createElement('div');\n newDiv.id = 'new-container';\n newDiv.style.height = 'inherit';\n\n document.querySelector('#mount > div')?.appendChild(newDiv);\n\n if (treeElement !== undefined) {\n newDiv.appendChild(treeElement);\n }\n });\n\n await page.waitForSelector('ix-tree');\n\n const newContainer = page.locator('#new-container');\n const reattachedTree = newContainer.locator('ix-tree');\n\n await expect(newContainer).toBeVisible();\n await expect(reattachedTree).toBeVisible();\n\n await reattachedTree.evaluate((element: HTMLIxTreeElement) => {\n element.scrollTo({ top: element.scrollHeight, behavior: 'instant' });\n });\n\n const lastItem = reattachedTree.locator('ix-tree-item').last();\n await expect(lastItem).toBeVisible();\n\n await reattachedTree.evaluate((element: HTMLIxTreeElement) => {\n element.scrollTo({ top: 0, behavior: 'instant' });\n });\n\n const firstItem = reattachedTree.locator('ix-tree-item').first();\n await expect(firstItem).toBeVisible();\n }\n);\n\nregressionTest(\n 'should expand and collapse but not select item when toggle icon is clicked twice',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n await expect(tree).toHaveClass(/hydrated/);\n\n const sampleItem = tree.locator('ix-tree-item', {\n hasText: 'Sample',\n hasNotText: 'Child',\n });\n\n const iconElement = sampleItem.locator('ix-icon');\n await expect(iconElement).not.toHaveClass(/icon-toggle-down/);\n await iconElement.click();\n\n const items = tree.locator('ix-tree-item', {\n hasText: 'Sample Child ',\n });\n\n await expect(items.nth(0)).toBeVisible();\n await expect(items.nth(1)).toBeVisible();\n await expect(items.nth(2)).toBeVisible();\n\n await expect(sampleItem).not.toHaveClass(/selected/);\n await expect(iconElement).toHaveClass(/icon-toggle-down/);\n\n await iconElement.click();\n\n await expect(items.nth(0)).not.toBeVisible();\n await expect(items.nth(1)).not.toBeVisible();\n await expect(items.nth(2)).not.toBeVisible();\n\n await expect(sampleItem).not.toHaveClass(/selected/);\n await expect(iconElement).not.toHaveClass(/icon-toggle-down/);\n }\n);\n\nregressionTest(\n 'should select but not toggle item when it is clicked',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n await expect(tree).toHaveClass(/hydrated/);\n\n const sampleItem = tree.locator('ix-tree-item', {\n hasText: 'Sample',\n hasNotText: 'Child',\n });\n\n await sampleItem.click();\n await expect(sampleItem).toHaveClass(/selected/);\n\n const items = tree.locator('ix-tree-item', {\n hasText: 'Sample Child ',\n });\n\n await expect(items.nth(0)).not.toBeVisible();\n await expect(items.nth(1)).not.toBeVisible();\n await expect(items.nth(2)).not.toBeVisible();\n }\n);\n\nregressionTest(\n 'should select item when icon-toggle-container is clicked without the toggle icon to be visible',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n await expect(tree).toHaveClass(/hydrated/);\n\n await tree\n .locator('ix-tree-item', {\n hasText: 'Sample',\n hasNotText: 'Child',\n })\n .locator('ix-icon')\n .click();\n\n const element1 = tree.locator('ix-tree-item', {\n hasText: 'Sample Child 1',\n });\n await expect(element1).not.toHaveClass(/selected/);\n await element1.locator('.icon-toggle-container').click();\n await expect(element1).toHaveClass(/selected/);\n }\n);\n\nregressionTest(\n 'item should stay selected when toggle icon is clicked',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n await expect(tree).toHaveClass(/hydrated/);\n\n await tree\n .locator('ix-tree-item', {\n hasText: 'Sample',\n hasNotText: 'Child',\n })\n .locator('ix-icon')\n .click();\n\n const element2 = tree.locator('ix-tree-item', {\n hasText: 'Sample Child 2',\n });\n\n await element2.click();\n await expect(element2).toHaveClass(/selected/);\n await element2.locator('ix-icon').click();\n\n const element4 = tree.locator('ix-tree-item', {\n hasText: 'Sample Child 4',\n });\n await expect(element4).toBeVisible();\n\n await element2.locator('ix-icon').click();\n\n await expect(element4).not.toBeVisible();\n await expect(element2).toHaveClass(/selected/);\n }\n);\n\nregressionTest(\n 'should select and toggle item when it is clicked and toggle on item is enabled',\n async ({ mount, page }) => {\n const tree = await initializeTree(mount, page);\n await tree.evaluate((treeElement: HTMLIxTreeElement) => {\n treeElement.setAttribute('toggle-on-item-click', 'true');\n });\n await expect(tree).toHaveClass(/hydrated/);\n\n const sampleItem = tree.locator('ix-tree-item', {\n hasText: 'Sample',\n hasNotText: 'Child',\n });\n\n await sampleItem.click();\n await expect(sampleItem).toHaveClass(/selected/);\n\n const items = tree.locator('ix-tree-item', {\n hasText: 'Sample Child ',\n });\n await expect(items.nth(0)).toBeVisible();\n await expect(items.nth(1)).toBeVisible();\n await expect(items.nth(2)).toBeVisible();\n\n sampleItem.click();\n\n await expect(items.nth(0)).not.toBeVisible();\n await expect(items.nth(1)).not.toBeVisible();\n await expect(items.nth(2)).not.toBeVisible();\n }\n);\n"]}

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

@@ -86,16 +86,24 @@ export class Tree {
                         const treeIndex = path.indexOf(this.hostElement);
                         const treePath = path.slice(0, treeIndex);
                         const hasTrigger = dropdownController.pathIncludesTrigger(treePath);
-                        if (event.defaultPrevented) {
-                            return;
-                        }
                         if (hasTrigger) {
                             return;
                         }
-                        Object.values(this.context).forEach((c) => (c.isSelected = false));
-                        const context = this.getContext(item.id);
-                        context.isSelected = true;
-                        this.setContext(item.id, context);
+                        if (!event.defaultPrevented) {
+                            Object.values(this.context).forEach((c) => (c.isSelected = false));
+                            const context = this.getContext(item.id);
+                            context.isSelected = true;
+                            this.setContext(item.id, context);
+                        }
+                        if (this.toggleOnItemClick && item.hasChildren) {
+                            const context = this.getContext(item.id);
+                            context.isExpanded = !context.isExpanded;
+                            this.nodeToggled.emit({
+                                id: item.id,
+                                isExpaned: context.isExpanded,
+                            });
+                            this.setContext(item.id, context);
+                        }
                         this.nodeClicked.emit(item.id);
                     };
                     el.addEventListener('toggle', (event) => {
@@ -171,6 +179,11 @@ export class Tree {
             this.initList();
         }
     }
+    connectedCallback() {
+        if (this.hasFirstRender) {
+            this.initList();
+        }
+    }
     disconnectedCallback() {
         var _a, _b;
         (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
@@ -204,7 +217,7 @@ export class Tree {
         this.hyperlist = new VirtualList(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: 'f07f8e18cb87e576426b1ba321d8d198712db756' }, h("slot", { key: 'c2f1bfa0cb99eeac46d11270d22e949a4d8674c3' })));
+        return (h(Host, { key: '3d9a880f2714c69333145042506d396a3a2828cd' }, h("slot", { key: '7d61c95a13e449305c3a8d33c509eed0389e5abe' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -222,6 +235,7 @@ export class Tree {
         return {
             "root": {
                 "type": "string",
+                "attribute": "root",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -236,11 +250,11 @@ export class Tree {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "root",
                 "reflect": false
             },
             "model": {
                 "type": "unknown",
+                "attribute": "model",
                 "mutable": false,
                 "complexType": {
                     "original": "TreeModel<any>",
@@ -265,6 +279,7 @@ export class Tree {
             },
             "renderItem": {
                 "type": "unknown",
+                "attribute": "render-item",
                 "mutable": false,
                 "complexType": {
                     "original": "<T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement",
@@ -305,6 +320,7 @@ export class Tree {
             },
             "context": {
                 "type": "unknown",
+                "attribute": "context",
                 "mutable": true,
                 "complexType": {
                     "original": "TreeContext",
@@ -326,6 +342,28 @@ export class Tree {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "toggleOnItemClick": {
+                "type": "boolean",
+                "attribute": "toggle-on-item-click",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Enable to toggle items by click on the item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.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 Prop,\n Watch,\n} from '@stencil/core';\nimport { VirtualList, VirtualListConfig } from './../utils/lazy-list';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n TreeContext,\n TreeItem,\n TreeItemContext,\n TreeItemVisual,\n TreeModel,\n UpdateCallback,\n} from './tree-model';\nimport { dropdownController } from '../dropdown/dropdown-controller';\n\n@Component({\n tag: 'ix-tree',\n styleUrl: 'tree.css',\n shadow: true,\n})\nexport class Tree {\n @Element() hostElement!: HTMLIxTreeElement;\n\n /\n Initial root element will not be rendered\n /\n @Prop() root!: string;\n\n /\n Tree model\n /\n @Prop() model: TreeModel<any> = {};\n\n /\n Render function of tree items\n /\n @Prop() renderItem?: <T = any>(\n index: number,\n data: T,\n dataList: Array<T>,\n context: TreeContext,\n update: (callback: UpdateCallback) => void\n ) => HTMLElement;\n\n /\n Selection and collapsed state management\n /\n @Prop({ mutable: true }) context: TreeContext = {};\n\n /\n Context changed\n /\n @Event() contextChange!: EventEmitter<TreeContext>;\n\n /\n Node toggled event\n * @since 1.5.0\n /\n @Event() nodeToggled!: EventEmitter<{ id: string; isExpaned: boolean }>;\n\n /\n Node clicked event\n * @since 1.5.0\n /\n @Event() nodeClicked!: EventEmitter<string>;\n\n /\n Emits removed nodes\n */\n @Event() nodeRemoved!: EventEmitter<any>;\n\n private hyperlist?: VirtualList;\n\n private toggleListener = new Map<HTMLElement, Function>();\n private itemClickListener = new Map<HTMLElement, Function>();\n private updates = new Map<string, UpdateCallback>();\n private observer!: MutationObserver;\n private hasFirstRender = false;\n\n private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n element.style.paddingLeft = item.level + 'rem';\n }\n\n private getVirtualizerOptions(): VirtualListConfig {\n const list = this.buildTreeList(this.model[this.root]);\n\n let setToggleListener = (\n item: TreeItemVisual<any>,\n el: HTMLElement,\n index: number\n ) => {\n if (item.hasChildren && !this.toggleListener.has(el)) {\n const toggleCallback = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n const context = this.getContext(list[index].id);\n context.isExpanded = !context.isExpanded;\n this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });\n this.setContext(item.id, context);\n };\n el.addEventListener('toggle', toggleCallback);\n this.toggleListener.set(el, toggleCallback);\n }\n };\n\n return {\n width: '100%',\n height: '100%',\n itemHeight: 32,\n total: list.length,\n generate: (index: number) => {\n const item = list[index];\n\n const renderedTreeItem = this.hostElement.querySelector(\n `[data-tree-node-id=\"${item.id}\"]`\n ) as HTMLIxTreeItemElement;\n\n const context = this.getContext(item.id);\n\n if (renderedTreeItem) {\n renderedTreeItem.hasChildren = item.hasChildren;\n renderedTreeItem.context = { ...context };\n\n setToggleListener(item, renderedTreeItem, index);\n\n if (this.updates.has(item.id)) {\n const doUpdate = this.updates.get(item.id);\n\n if (doUpdate) {\n doUpdate(item, { ...this.context });\n }\n }\n\n this.updatePadding(renderedTreeItem, item);\n return renderedTreeItem;\n }\n\n const update = (callback: UpdateCallback) => {\n this.updates.set(item.id, callback);\n };\n\n let innerElement: HTMLElement \| null = null;\n if (this.renderItem) {\n innerElement = this.renderItem(\n index,\n item,\n list,\n { ...this.context },\n update\n );\n }\n\n if (innerElement === null) {\n innerElement = renderDefaultItem(item, context, update);\n }\n\n const el = innerElement;\n el.setAttribute('data-tree-node-id', item.id);\n el.style.paddingRight = '1rem';\n this.updatePadding(el, item);\n\n if (!this.itemClickListener.has(el)) {\n const itemClickCallback = (event: Event) => {\n const path = event.composedPath();\n const treeIndex = path.indexOf(this.hostElement);\n const treePath = path.slice(0, treeIndex);\n const hasTrigger = dropdownController.pathIncludesTrigger(treePath);\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (hasTrigger) {\n return;\n }\n\n Object.values(this.context).forEach((c) => (c.isSelected = false));\n const context = this.getContext(item.id);\n context.isSelected = true;\n this.setContext(item.id, context);\n this.nodeClicked.emit(item.id);\n };\n el.addEventListener('toggle', (event) => {\n event.preventDefault();\n });\n el.addEventListener('click', itemClickCallback);\n this.itemClickListener.set(el, itemClickCallback);\n }\n\n setToggleListener(item, el, index);\n\n return el;\n },\n };\n }\n\n private setContext(id: string, context: TreeItemContext) {\n this.context = {\n ...this.context,\n [id]: context,\n };\n\n this.contextChange.emit(this.context);\n }\n\n private getContext(id: string): TreeItemContext {\n if (!this.context) {\n return {\n isExpanded: false,\n isSelected: false,\n };\n }\n if (!this.context[id]) {\n this.context[id] = {\n isExpanded: false,\n isSelected: false,\n };\n }\n return this.context[id];\n }\n\n private buildTreeList(\n root: TreeItem<any>,\n level: number = 0\n ): TreeItemVisual<any>[] {\n const itemList: TreeItemVisual<any>[] = [];\n\n if (root?.hasChildren) {\n const newLevel = level + 1;\n root.children.forEach((id: string) => {\n const item = this.model[id];\n const context = this.getContext(id);\n itemList.push({ ...item, level });\n if (item.hasChildren && context.isExpanded) {\n itemList.push(...this.buildTreeList(item, newLevel));\n }\n });\n }\n\n return itemList;\n }\n\n componentDidLoad() {\n this.initList();\n\n this.observer = new MutationObserver((records) => {\n let removed: unknown[] = [];\n\n records.forEach((record) => {\n removed = [...removed, ...Array.from(record.removedNodes)];\n\n record.addedNodes.forEach((an) => {\n const index = removed.indexOf(an);\n if (index >= 0) {\n removed.splice(index, 1);\n }\n });\n });\n\n this.nodeRemoved.emit(removed);\n });\n\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n }\n\n componentWillRender() {\n this.hasFirstRender = true;\n\n if (this.isListInitialized()) {\n this.refreshList();\n } else {\n this.initList();\n }\n }\n\n disconnectedCallback() {\n this.hyperlist?.destroy();\n this.observer?.disconnect();\n }\n\n @Watch('model')\n modelChange() {\n if (this.hasFirstRender && !this.isListInitialized()) {\n this.initList();\n }\n }\n\n private isListInitialized() {\n //@ts-ignore\n const itemPositions = this.hyperlist?._itemPositions;\n\n return (\n itemPositions !== undefined &&\n itemPositions.length &&\n !itemPositions?.some(\n (item: number) => item === undefined \|\| Number.isNaN(item)\n )\n );\n }\n\n private refreshList() {\n if (this.hyperlist) {\n this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());\n }\n }\n\n private initList() {\n if (!this.model) {\n return;\n }\n\n this.hyperlist?.destroy();\n const config = this.getVirtualizerOptions();\n this.hyperlist = new VirtualList(this.hostElement, config);\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.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 Prop,\n Watch,\n} from '@stencil/core';\nimport { VirtualList, VirtualListConfig } from './../utils/lazy-list';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n TreeContext,\n TreeItem,\n TreeItemContext,\n TreeItemVisual,\n TreeModel,\n UpdateCallback,\n} from './tree-model';\nimport { dropdownController } from '../dropdown/dropdown-controller';\n\n@Component({\n tag: 'ix-tree',\n styleUrl: 'tree.css',\n shadow: true,\n})\nexport class Tree {\n @Element() hostElement!: HTMLIxTreeElement;\n\n /\n Initial root element will not be rendered\n /\n @Prop() root!: string;\n\n /\n Tree model\n /\n @Prop() model: TreeModel<any> = {};\n\n /\n Render function of tree items\n /\n @Prop() renderItem?: <T = any>(\n index: number,\n data: T,\n dataList: Array<T>,\n context: TreeContext,\n update: (callback: UpdateCallback) => void\n ) => HTMLElement;\n\n /\n Selection and collapsed state management\n /\n @Prop({ mutable: true }) context: TreeContext = {};\n\n /\n Enable to toggle items by click on the item\n * @since 3.0.0\n /\n @Prop() toggleOnItemClick?: boolean;\n\n /\n Context changed\n /\n @Event() contextChange!: EventEmitter<TreeContext>;\n\n /\n Node toggled event\n * @since 1.5.0\n /\n @Event() nodeToggled!: EventEmitter<{ id: string; isExpaned: boolean }>;\n\n /\n Node clicked event\n * @since 1.5.0\n /\n @Event() nodeClicked!: EventEmitter<string>;\n\n /\n Emits removed nodes\n */\n @Event() nodeRemoved!: EventEmitter<any>;\n\n private hyperlist?: VirtualList;\n\n private toggleListener = new Map<HTMLElement, Function>();\n private itemClickListener = new Map<HTMLElement, Function>();\n private updates = new Map<string, UpdateCallback>();\n private observer!: MutationObserver;\n private hasFirstRender = false;\n\n private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n element.style.paddingLeft = item.level + 'rem';\n }\n\n private getVirtualizerOptions(): VirtualListConfig {\n const list = this.buildTreeList(this.model[this.root]);\n\n let setToggleListener = (\n item: TreeItemVisual<any>,\n el: HTMLElement,\n index: number\n ) => {\n if (item.hasChildren && !this.toggleListener.has(el)) {\n const toggleCallback = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n const context = this.getContext(list[index].id);\n context.isExpanded = !context.isExpanded;\n this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });\n this.setContext(item.id, context);\n };\n el.addEventListener('toggle', toggleCallback);\n this.toggleListener.set(el, toggleCallback);\n }\n };\n\n return {\n width: '100%',\n height: '100%',\n itemHeight: 32,\n total: list.length,\n generate: (index: number) => {\n const item = list[index];\n\n const renderedTreeItem = this.hostElement.querySelector(\n `[data-tree-node-id=\"${item.id}\"]`\n ) as HTMLIxTreeItemElement;\n\n const context = this.getContext(item.id);\n\n if (renderedTreeItem) {\n renderedTreeItem.hasChildren = item.hasChildren;\n renderedTreeItem.context = { ...context };\n\n setToggleListener(item, renderedTreeItem, index);\n\n if (this.updates.has(item.id)) {\n const doUpdate = this.updates.get(item.id);\n\n if (doUpdate) {\n doUpdate(item, { ...this.context });\n }\n }\n\n this.updatePadding(renderedTreeItem, item);\n return renderedTreeItem;\n }\n\n const update = (callback: UpdateCallback) => {\n this.updates.set(item.id, callback);\n };\n\n let innerElement: HTMLElement \| null = null;\n if (this.renderItem) {\n innerElement = this.renderItem(\n index,\n item,\n list,\n { ...this.context },\n update\n );\n }\n\n if (innerElement === null) {\n innerElement = renderDefaultItem(item, context, update);\n }\n\n const el = innerElement;\n el.setAttribute('data-tree-node-id', item.id);\n el.style.paddingRight = '1rem';\n this.updatePadding(el, item);\n\n if (!this.itemClickListener.has(el)) {\n const itemClickCallback = (event: Event) => {\n const path = event.composedPath();\n const treeIndex = path.indexOf(this.hostElement);\n const treePath = path.slice(0, treeIndex);\n const hasTrigger = dropdownController.pathIncludesTrigger(treePath);\n\n if (hasTrigger) {\n return;\n }\n\n if (!event.defaultPrevented) {\n Object.values(this.context).forEach(\n (c) => (c.isSelected = false)\n );\n const context = this.getContext(item.id);\n context.isSelected = true;\n this.setContext(item.id, context);\n }\n\n if (this.toggleOnItemClick && item.hasChildren) {\n const context = this.getContext(item.id);\n context.isExpanded = !context.isExpanded;\n this.nodeToggled.emit({\n id: item.id,\n isExpaned: context.isExpanded,\n });\n this.setContext(item.id, context);\n }\n\n this.nodeClicked.emit(item.id);\n };\n el.addEventListener('toggle', (event) => {\n event.preventDefault();\n });\n el.addEventListener('click', itemClickCallback);\n this.itemClickListener.set(el, itemClickCallback);\n }\n\n setToggleListener(item, el, index);\n\n return el;\n },\n };\n }\n\n private setContext(id: string, context: TreeItemContext) {\n this.context = {\n ...this.context,\n [id]: context,\n };\n\n this.contextChange.emit(this.context);\n }\n\n private getContext(id: string): TreeItemContext {\n if (!this.context) {\n return {\n isExpanded: false,\n isSelected: false,\n };\n }\n if (!this.context[id]) {\n this.context[id] = {\n isExpanded: false,\n isSelected: false,\n };\n }\n return this.context[id];\n }\n\n private buildTreeList(\n root: TreeItem<any>,\n level: number = 0\n ): TreeItemVisual<any>[] {\n const itemList: TreeItemVisual<any>[] = [];\n\n if (root?.hasChildren) {\n const newLevel = level + 1;\n root.children.forEach((id: string) => {\n const item = this.model[id];\n const context = this.getContext(id);\n itemList.push({ ...item, level });\n if (item.hasChildren && context.isExpanded) {\n itemList.push(...this.buildTreeList(item, newLevel));\n }\n });\n }\n\n return itemList;\n }\n\n componentDidLoad() {\n this.initList();\n\n this.observer = new MutationObserver((records) => {\n let removed: unknown[] = [];\n\n records.forEach((record) => {\n removed = [...removed, ...Array.from(record.removedNodes)];\n\n record.addedNodes.forEach((an) => {\n const index = removed.indexOf(an);\n if (index >= 0) {\n removed.splice(index, 1);\n }\n });\n });\n\n this.nodeRemoved.emit(removed);\n });\n\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n }\n\n componentWillRender() {\n this.hasFirstRender = true;\n\n if (this.isListInitialized()) {\n this.refreshList();\n } else {\n this.initList();\n }\n }\n\n connectedCallback() {\n if (this.hasFirstRender) {\n this.initList();\n }\n }\n\n disconnectedCallback() {\n this.hyperlist?.destroy();\n this.observer?.disconnect();\n }\n\n @Watch('model')\n modelChange() {\n if (this.hasFirstRender && !this.isListInitialized()) {\n this.initList();\n }\n }\n\n private isListInitialized() {\n //@ts-ignore\n const itemPositions = this.hyperlist?._itemPositions;\n\n return (\n itemPositions !== undefined &&\n itemPositions.length &&\n !itemPositions?.some(\n (item: number) => item === undefined \|\| Number.isNaN(item)\n )\n );\n }\n\n private refreshList() {\n if (this.hyperlist) {\n this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());\n }\n }\n\n private initList() {\n if (!this.model) {\n return;\n }\n\n this.hyperlist?.destroy();\n const config = this.getVirtualizerOptions();\n this.hyperlist = new VirtualList(this.hostElement, config);\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -19,14 +19,15 @@ export class TreeItem {
         var _a, _b, _c;
         return (h(Host, { key: 'bb6da9e7cfe6133c51d8aa4a6eebfb8e7fdb68b2', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, h("div", { key: '8c6046145871b5b27731d78150ce8db3a3d5d5ad', class: "icon-toggle-container", onClick: (e) => {
+            } }, h("div", { key: 'fe3053f50feb3a1f00c3bcefb5a1c5c78909b1aa', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRight, size: "16", class: {
+                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}`, onClick: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
                 this.toggle.emit();
-            } }, this.hasChildren ? (h("ix-icon", { name: iconChevronRight, size: "16", class: {
-                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: '54dde9d64be32bcc705ca8503ceb23146e70e7b7', class: "tree-node-container", onClick: () => {
+            } })) : null), h("div", { key: '96bf8b81859c8292195f4418598057c0371259f9', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, h("div", { key: '91747fdc39f9e1207200639d1ef1d0d4cb582947', class: "tree-node-text" }, this.text), h("slot", { key: 'bacce3961714116f77a23657c30437ac719916de' }))));
+            } }, h("div", { key: 'bfd399d7d167978c6e4781fb1394957b48bf85b6', class: "tree-node-text" }, this.text), h("slot", { key: 'df8688241a7fa8ae7046313e779e3937640ccdde' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +45,7 @@ export class TreeItem {
         return {
             "text": {
                 "type": "string",
+                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -58,11 +60,11 @@ export class TreeItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
             "hasChildren": {
                 "type": "boolean",
+                "attribute": "has-children",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,12 +79,12 @@ export class TreeItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-children",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "context": {
                 "type": "unknown",
+                "attribute": "context",
                 "mutable": false,
                 "complexType": {
                     "original": "TreeItemContext",

package/dist/collection/components/tree-item/tree-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/components/tree-item/tree-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO3D,MAAM,OAAO,QAAQ;IALrB;QAWE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;~~KAwD7B~~;~~IAvCC~~,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;aACrC;YAED,~~4DACE~~,KAAK,EAAC,uBAAuB,~~EAC7B~~,~~OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,~~IAAI,CAAC,~~MAAM,CAAC,IAAI,EAAE,CAAC;gBACrB,CAAC,IAEA,IAAI,CAAC,~~WAAW,CAAC,CAAC,CAAC,CAClB,eACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;oBACL,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;iBACjD,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UACzC,EAAE,~~GACF~~,CACH,CAAC,CAAC,CAAC,IAAI,CACJ;YACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACxB,CAAC;gBAED,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO;gBAC7C,8DAAa,CACT,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRight } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text?: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren = false;\n\n /\n Context\n /\n @Prop() context?: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle!: EventEmitter<void>;\n\n /\n Click on item not on the expand/collapse icon\n */\n @Event() itemClick!: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: !!this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"~~\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n~~ >\n {this.hasChildren ? (\n <ix-icon\n name={iconChevronRight}\n size=\"16\"\n class={{\n ['icon-toggle-down']: !!this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n <div class=\"tree-node-text\">{this.text}</div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/components/tree-item/tree-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO3D,MAAM,OAAO,QAAQ;IALrB;QAWE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;KAuD7B;IAtCC,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;aACrC;YAED,4DAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,eACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;oBACL,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;iBACjD,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UACzC,EAAE,EACF,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACrB,CAAC,GACD,CACH,CAAC,CAAC,CAAC,IAAI,CACJ;YACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACxB,CAAC;gBAED,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO;gBAC7C,8DAAa,CACT,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRight } from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text?: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren = false;\n\n /\n Context\n /\n @Prop() context?: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle!: EventEmitter<void>;\n\n /\n Click on item not on the expand/collapse icon\n */\n @Event() itemClick!: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: !!this.context?.isSelected,\n }}\n >\n <div class=\"icon-toggle-container\">\n {this.hasChildren ? (\n <ix-icon\n name={iconChevronRight}\n size=\"16\"\n class={{\n ['icon-toggle-down']: !!this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n onClick={(e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle.emit();\n }}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n <div class=\"tree-node-text\">{this.text}</div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -21,6 +21,12 @@ export class IxTypography {
          */
         this.textDecoration = 'none';
     }
+    static getTextColor(color) {
+        if (color.startsWith('inv-') || !color.endsWith('-contrast')) {
+            return `var(--theme-color-${color}-text)`;
+        }
+        return `var(--theme-color-${color.replace('-', '--')})`;
+    }
     render() {
         var _a;
         let typographyClass = {};
@@ -32,10 +38,10 @@ export class IxTypography {
         let style = {};
         if (this.textColor) {
             style = {
-                color: `var(--theme-color-${this.textColor}-text)`,
+                color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (h(Host, { key: '09495783bef6449f7a5a70f12f5dd4e4886a9e07', class: typographyClass, style: style }, h("slot", { key: '902b34b3839cc4868ad65b61f1398bf93eedec17' })));
+        return (h(Host, { key: '98b5d010c3167750cd167157c45a9305f382c19a', class: typographyClass, style: style }, h("slot", { key: '01586058f3ff1bcd88bdc5044c102dd4b09569d3' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +59,7 @@ export class IxTypography {
         return {
             "format": {
                 "type": "string",
+                "attribute": "format",
                 "mutable": false,
                 "complexType": {
                     "original": "TypographyFormat",
@@ -73,15 +80,15 @@ export class IxTypography {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "format",
                 "reflect": false
             },
             "textColor": {
                 "type": "string",
+                "attribute": "text-color",
                 "mutable": false,
                 "complexType": {
                     "original": "TypographyColors",
-                    "resolved": "\"alarm\" | \"contrast\" | \"inv-contrast\" | \"inv-soft\" | \"inv-std\" | \"inv-weak\" | \"soft\" | \"std\" | \"weak\"",
+                    "resolved": "\"alarm\" | \"alarm-contrast\" | \"contrast\" | \"critical-contrast\" | \"info-contrast\" | \"inv-contrast\" | \"inv-soft\" | \"inv-std\" | \"inv-weak\" | \"neutral-contrast\" | \"primary-contrast\" | \"soft\" | \"std\" | \"success-contrast\" | \"warning-contrast\" | \"weak\"",
                     "references": {
                         "TypographyColors": {
                             "location": "local",
@@ -98,11 +105,11 @@ export class IxTypography {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-color",
                 "reflect": false
             },
             "bold": {
                 "type": "boolean",
+                "attribute": "bold",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -117,12 +124,12 @@ export class IxTypography {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bold",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "textDecoration": {
                 "type": "string",
+                "attribute": "text-decoration",
                 "mutable": false,
                 "complexType": {
                     "original": "TextDecoration",
@@ -143,7 +150,6 @@ export class IxTypography {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-decoration",
                 "reflect": false,
                 "defaultValue": "'none'"
             }