@siemens/ix 4.4.0 → 5.1.0

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

@@ -12,23 +12,49 @@ import { renderDefaultItem } from "../tree-item/default-tree-item";
 import { VirtualList } from "./../utils/lazy-list";
 import { defaultRefreshTreeOptions } from "./tree.types";
 export class Tree {
-    constructor() {
-        /**
-         * Initial root element will not be rendered
-         */
-        this.root = 'root';
-        /**
-         * Tree model
-         */
-        this.model = {};
-        /**
-         * Selection and collapsed state management
-         */
-        this.context = {};
-        this.updates = new Map();
-        this.hasFirstRender = false;
-        this.dirtyItems = new Set();
-    }
+    hostElement;
+    /**
+     * Initial root element will not be rendered
+     */
+    root = 'root';
+    /**
+     * Tree model
+     */
+    model = {};
+    /**
+     * Render function of tree items
+     */
+    renderItem;
+    /**
+     * Selection and collapsed state management
+     */
+    context = {};
+    /**
+     * Enable to toggle items by click on the item
+     * @since 3.0.0
+     */
+    toggleOnItemClick;
+    /**
+     * Context changed
+     */
+    contextChange;
+    /**
+     * Node toggled event
+     */
+    nodeToggled;
+    /**
+     * Node clicked event
+     */
+    nodeClicked;
+    /**
+     * Emits removed nodes
+     */
+    nodeRemoved;
+    hyperlist;
+    updates = new Map();
+    observer;
+    hasFirstRender = false;
+    dirtyItems = new Set();
     updatePadding(element, item) {
         element.style.paddingLeft = item.level + 'rem';
     }
@@ -38,6 +64,7 @@ export class Tree {
             width: '100%',
             height: '100%',
             itemHeight: 32,
+            scrollerTagName: 'div',
             total: list.length,
             generate: (index) => {
                 const item = list[index];
@@ -48,12 +75,15 @@ export class Tree {
                  */
                 if (renderedTreeItem && refreshTreeOptions.force === false) {
                     renderedTreeItem.hasChildren = item.hasChildren;
-                    renderedTreeItem.context = Object.assign({}, context);
+                    renderedTreeItem.context = { ...context };
+                    renderedTreeItem.disabled = Boolean(item.disabled || context.isDisabled);
                     let forceRerender = this.dirtyItems.has(item.id);
                     if (this.updates.has(item.id)) {
                         const doUpdate = this.updates.get(item.id);
                         if (doUpdate) {
-                            const updateRequestedRerender = doUpdate(item, Object.assign({}, this.context));
+                            const updateRequestedRerender = doUpdate(item, {
+                                ...this.context,
+                            });
                             if (typeof updateRequestedRerender === 'boolean') {
                                 forceRerender = updateRequestedRerender;
                             }
@@ -69,7 +99,7 @@ export class Tree {
                 };
                 let innerElement = null;
                 if (this.renderItem) {
-                    innerElement = this.renderItem(index, item, list, Object.assign({}, this.context), update);
+                    innerElement = this.renderItem(index, item, list, { ...this.context }, update);
                 }
                 if (innerElement === null) {
                     innerElement = renderDefaultItem(item, context, update);
@@ -84,7 +114,10 @@ export class Tree {
         };
     }
     setContext(id, context) {
-        this.context = Object.assign(Object.assign({}, this.context), { [id]: context });
+        this.context = {
+            ...this.context,
+            [id]: context,
+        };
         this.contextChange.emit(this.context);
     }
     getContext(id) {
@@ -92,24 +125,26 @@ export class Tree {
             return {
                 isExpanded: false,
                 isSelected: false,
+                isDisabled: this.model[id]?.disabled,
             };
         }
         if (!this.context[id]) {
             this.context[id] = {
                 isExpanded: false,
                 isSelected: false,
+                isDisabled: this.model[id]?.disabled,
             };
         }
         return this.context[id];
     }
     buildTreeList(root, level = 0) {
         const itemList = [];
-        if (root === null || root === void 0 ? void 0 : root.hasChildren) {
+        if (root?.hasChildren) {
             const newLevel = level + 1;
             root.children.forEach((id) => {
                 const item = this.model[id];
                 const context = this.getContext(id);
-                itemList.push(Object.assign(Object.assign({}, item), { level }));
+                itemList.push({ ...item, level });
                 if (item.hasChildren && context.isExpanded) {
                     itemList.push(...this.buildTreeList(item, newLevel));
                 }
@@ -151,9 +186,8 @@ export class Tree {
         }
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
-        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.hyperlist?.destroy();
+        this.observer?.disconnect();
     }
     onModelChange() {
         if (this.hasFirstRender && !this.isListInitialized()) {
@@ -168,12 +202,11 @@ export class Tree {
         ids.forEach((id) => this.dirtyItems.add(id));
     }
     isListInitialized() {
-        var _a;
         //@ts-ignore
-        const itemPositions = (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a._itemPositions;
+        const itemPositions = this.hyperlist?._itemPositions;
         return (itemPositions !== undefined &&
             itemPositions.length &&
-            !(itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions.some((item) => item === undefined || Number.isNaN(item))));
+            !itemPositions?.some((item) => item === undefined || Number.isNaN(item)));
     }
     /**
      * Refresh the list.
@@ -185,11 +218,10 @@ export class Tree {
         }
     }
     initList() {
-        var _a;
         if (!this.model) {
             return;
         }
-        (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.hyperlist?.destroy();
         const config = this.getVirtualizerOptions(defaultRefreshTreeOptions);
         this.hyperlist = new VirtualList(this.hostElement, config);
     }
@@ -219,7 +251,13 @@ export class Tree {
         if (!item.hasChildren) {
             return;
         }
+        if (item.disabled) {
+            return;
+        }
         const context = this.getContext(id);
+        if (context.isDisabled) {
+            return;
+        }
         context.isExpanded = !context.isExpanded;
         this.nodeToggled.emit({ id, isExpanded: context.isExpanded });
         this.setContext(id, context);
@@ -234,6 +272,10 @@ export class Tree {
             return;
         }
         const item = this.model[id];
+        const context = this.getContext(id);
+        if (item.disabled || context.isDisabled) {
+            return;
+        }
         const path = event.composedPath();
         const treeIndex = path.indexOf(this.hostElement);
         const treePath = path.slice(0, treeIndex);
@@ -245,12 +287,10 @@ export class Tree {
             for (const itemContext of Object.values(this.context)) {
                 itemContext.isSelected = false;
             }
-            const context = this.getContext(id);
             context.isSelected = true;
             this.setContext(id, context);
         }
         if (this.toggleOnItemClick && item.hasChildren) {
-            const context = this.getContext(id);
             context.isExpanded = !context.isExpanded;
             this.nodeToggled.emit({
                 id: id,
@@ -261,7 +301,7 @@ export class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (h(Host, { key: '1274f32c7a5e24c885191db0cf9b0e58715f4eb1', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: '14196e9cedf85157bfeae56d6e6b769a1c9ed791' })));
+        return (h(Host, { key: '2559d80cdc3622837771d6f9484117b5d8ae15db', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'f1b3e2121e4833481dcf91594f38434318de84bc' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-item/default-tree-item.js

@@ -11,8 +11,10 @@ export function renderDefaultItem(item, context, update) {
     el.hasChildren = item.hasChildren;
     el.context = context;
     el.text = item.data.name;
+    el.disabled = item.disabled || false;
     update((updateTreeItem) => {
         el.text = updateTreeItem.data.name;
+        el.disabled = updateTreeItem.disabled || false;
     });
     return el;
 }

package/dist/collection/components/tree-item/tree-item.css

@@ -125,13 +125,13 @@
   transform: rotate(90deg);
 }
 
-:host(:not(.disabled):not(:disabled):not(.selected).hover),
-:host(:not(.disabled):not(:disabled):not(.selected):hover) {
+:host(:not(.disabled):not(.selected).hover),
+:host(:not(.disabled):not(.selected):hover) {
   background-color: var(--theme-tree-item--background--hover);
 }
 
-:host(:not(.disabled):not(:disabled):not(.selected).active),
-:host(:not(.disabled):not(:disabled):not(.selected):active) {
+:host(:not(.disabled):not(.selected).active),
+:host(:not(.disabled):not(.selected):active) {
   background-color: var(--theme-tree-item--background--active);
 }
 
@@ -147,4 +147,9 @@
 :host(.selected.active),
 :host(.selected:active) {
   background-color: var(--theme-tree-item--background--selected-active);
+}
+
+:host(.disabled) {
+  opacity: 0.5;
+  pointer-events: none;
 }

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

@@ -9,27 +9,59 @@
 import { h, Host } from "@stencil/core";
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
 export class TreeItem {
-    constructor() {
-        /**
-         * Has tree item children
-         */
-        this.hasChildren = false;
-    }
+    /**
+     * Text
+     */
+    text;
+    /**
+     * Has tree item children
+     */
+    hasChildren = false;
+    /**
+     * Context
+     */
+    context;
+    /**
+     * Disable tree item
+     *
+     * @since 5.0.0
+     */
+    disabled = false;
+    /**
+     * ARIA label for the chevron icon
+     */
+    ariaLabelChevronIcon;
+    /**
+     * Expand/Collapsed toggled
+     */
+    toggle;
+    /**
+     * Click on item not on the expand/collapse icon
+     */
+    itemClick;
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: 'd7bab1c02de111458ef484818bcec12c940f1bc4', class: {
-                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, h("div", { key: '43a86c7b782a881ee712d2950b6730fd3badebf9', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
-                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+        const isDisabled = this.disabled || this.context?.isDisabled;
+        return (h(Host, { key: 'e7e34e163bd93d7cd473167c20f6fe5cfc7a555b', class: {
+                selected: !!this.context?.isSelected,
+                disabled: !!isDisabled,
+            } }, h("div", { key: 'ad4deffb89068a0e74f3b0596f59de1262f549b3', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+                ['icon-toggle-down']: !!this.context?.isExpanded,
             }, color: "color-std-text", onClick: (e) => {
+                if (isDisabled) {
+                    return;
+                }
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            }, "aria-label": (_c = this.ariaLabelChevronIcon) !== null && _c !== void 0 ? _c : (((_d = this.context) === null || _d === void 0 ? void 0 : _d.isExpanded)
-                ? 'Collapse tree item'
-                : 'Expand tree item') })) : null), h("div", { key: 'b738b82fde5fe41ecc72b0cd765b2acdb17a6328', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon ??
+                (this.context?.isExpanded
+                    ? 'Collapse tree item'
+                    : 'Expand tree item') })) : null), h("div", { key: '632ac5edca96314ec279e229eb77c1b12fbc9af1', class: "tree-node-container", onClick: () => {
+                if (isDisabled) {
+                    return;
+                }
                 this.itemClick.emit();
-            } }, h("div", { key: 'a0deb8a582d9b63c8832d9ad1bec89a5bdd83af8', class: "tree-node-text" }, this.text), h("slot", { key: '8c71cde365667568a7c67448f0588690cd91b9ce' }))));
+            } }, h("div", { key: 'b2532d4c136111a563c4e54cbe1d8d6bfae3a20b', class: "tree-node-text" }, this.text), h("slot", { key: 'daf4d0a32bba8574b11903205fb8cecdf8ab3d11' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -108,6 +140,29 @@ export class TreeItem {
                 "getter": false,
                 "setter": false
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Disable tree item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "ariaLabelChevronIcon": {
                 "type": "string",
                 "mutable": false,

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

@@ -8,16 +8,22 @@
  */
 import { h, Host } from "@stencil/core";
 export class IxTypography {
-    constructor() {
-        /**
-         * Display text bold
-         */
-        this.bold = false;
-        /**
-         * Text decoration
-         */
-        this.textDecoration = 'none';
-    }
+    /**
+     * Text format
+     */
+    format;
+    /**
+     * Text color based on theme variables
+     */
+    textColor;
+    /**
+     * Display text bold
+     */
+    bold = false;
+    /**
+     * Text decoration
+     */
+    textDecoration = 'none';
     static getTextColor(color) {
         if (color.startsWith('inv-') || !color.endsWith('-contrast')) {
             return `var(--theme-color-${color}-text)`;
@@ -25,9 +31,8 @@ export class IxTypography {
         return `var(--theme-color-${color.replace('-', '--')})`;
     }
     render() {
-        var _a;
         let typographyClass = {};
-        typographyClass[`typography-${(_a = this.format) !== null && _a !== void 0 ? _a : 'body'}`] = true;
+        typographyClass[`typography-${this.format ?? 'body'}`] = true;
         if (this.textDecoration !== 'none') {
             typographyClass[`typography-decoration-${this.textDecoration}`] = true;
         }
@@ -38,7 +43,7 @@ export class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (h(Host, { key: '373bb7d6255698f7fed9130834b1ae14fbfd8586', class: typographyClass, style: style }, h("slot", { key: 'a6368136d7dc8ce6c0418c5debba69b4ec9fe137' })));
+        return (h(Host, { key: '618a929c958412cf860566ff38de557af16b4df1', class: typographyClass, style: style }, h("slot", { key: 'a766532919f0d8aa5e844b5501c724c5a149b2c0' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }