@siemens/ix 4.4.0 → 5.1.0

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

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var floatingUi_dom = require('./floating-ui.dom-CMzYsRR7.js');
-var findElement = require('./find-element-D7yD1Ukn.js');
-var makeRef = require('./make-ref-BaH6_YJk.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
+var index = require('./index-DnclGKUw.js');
+var findElement = require('./find-element-DPxOAdgO.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
 var disposableEventListener = require('./disposable-event-listener-BALEIeXq.js');
 
 const tooltipCss = () => `.dialog{margin:0;padding:0;border:none;max-width:18.25rem;width:-moz-max-content;width:max-content;background-color:transparent;overflow-wrap:break-word;box-shadow:none;overflow:visible}.tooltip-container{display:block;position:relative;width:auto;height:-moz-fit-content;height:fit-content;background:var(--theme-tootlip--background);color:var(--theme-color-std-text);padding:0.375rem 0.75rem;box-shadow:var(--theme-shadow-4);border-radius:0.25rem}.content-wrapper{overflow:auto}.tooltip-title{display:flex}.tooltip-title ::slotted(ix-icon){margin:0.125rem 0.25rem 0.125rem 0}.arrow,.arrow::before{position:absolute;width:12px;height:12px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}`;
@@ -15,25 +14,42 @@ let tooltipInstance = 0;
 const Tooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Define if the user can access the tooltip via mouse.
-         */
-        this.interactive = false;
-        /**
-         * Initial placement of the tooltip.
-         * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
-         */
-        this.placement = 'top';
-        /** @internal */
-        this.showDelay = 0;
-        /** @internal */
-        this.hideDelay = 50;
-        /** @internal */
-        this.animationFrame = false;
-        this.visible = false;
-        this.instance = tooltipInstance++;
-        this.dialogRef = makeRef.makeRef();
     }
+    /**
+     * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+     */
+    for;
+    /**
+     * Title of the tooltip
+     */
+    titleContent;
+    /**
+     * Define if the user can access the tooltip via mouse.
+     */
+    interactive = false;
+    /**
+     * Initial placement of the tooltip.
+     * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
+     */
+    placement = 'top';
+    /** @internal */
+    showDelay = 0;
+    /** @internal */
+    hideDelay = 50;
+    /** @internal */
+    animationFrame = false;
+    get hostElement() { return index.getElement(this); }
+    visible = false;
+    hideTooltipTimeout;
+    showTooltipTimeout;
+    visibleFor;
+    disposeAutoUpdate;
+    disposeTriggerListener;
+    disposeTooltipListener;
+    disposeDomChangeListener;
+    hasDisconnected = false;
+    instance = tooltipInstance++;
+    dialogRef = makeRef.makeRef();
     get arrowElement() {
         return this.hostElement.shadowRoot.querySelector('.arrow');
     }
@@ -62,11 +78,10 @@ const Tooltip = class {
         }
         const dialog = await this.dialogRef.waitForCurrent();
         this.hideTooltipTimeout = setTimeout(() => {
-            var _a, _b;
             this.setAnchorElement();
             dialog.hidePopover();
-            (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-            (_b = this.disposeTooltipListener) === null || _b === void 0 ? void 0 : _b.call(this);
+            this.disposeAutoUpdate?.();
+            this.disposeTooltipListener?.();
         }, hideDelay);
     }
     setAnchorElement(anchorElement) {
@@ -88,34 +103,50 @@ const Tooltip = class {
             left: 'unset',
         };
         if (placement.startsWith('top')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), bottom: numberToPixel(ARROW_OFFSET) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                bottom: numberToPixel(ARROW_OFFSET),
+            };
         }
         if (placement.startsWith('right')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(ARROW_OFFSET),
+                top: numberToPixel(y),
+            };
         }
         if (placement.startsWith('bottom')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(ARROW_OFFSET) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                top: numberToPixel(ARROW_OFFSET),
+            };
         }
         if (placement.startsWith('left')) {
-            return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+            return {
+                ...resetPosition,
+                right: numberToPixel(ARROW_OFFSET),
+                top: numberToPixel(y),
+            };
         }
     }
     async computeTooltipPosition(target, dialog) {
-        return floatingUi_dom.computePosition(target, dialog, {
+        return findElement.computePosition(target, dialog, {
             strategy: 'fixed',
             placement: this.placement,
             middleware: [
-                floatingUi_dom.shift(),
-                floatingUi_dom.offset(12),
-                floatingUi_dom.arrow({
+                findElement.shift(),
+                findElement.offset(12),
+                findElement.arrow({
                     element: this.arrowElement,
                 }),
-                floatingUi_dom.flip({
+                findElement.flip({
                     fallbackStrategy: 'initialPlacement',
                     fallbackAxisSideDirection: 'end',
                     padding: 10,
                 }),
-                floatingUi_dom.hide(),
+                findElement.hide(),
             ],
         });
     }
@@ -128,12 +159,10 @@ const Tooltip = class {
             return;
         }
         return new Promise((resolve) => {
-            var _a;
-            (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-            this.disposeAutoUpdate = floatingUi_dom.autoUpdate(target, dialog, async () => {
-                var _a;
+            this.disposeAutoUpdate?.();
+            this.disposeAutoUpdate = findElement.autoUpdate(target, dialog, async () => {
                 const computeResponse = await this.computeTooltipPosition(target, dialog);
-                const isHidden = (_a = computeResponse.middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+                const isHidden = computeResponse.middlewareData.hide?.referenceHidden;
                 if (isHidden) {
                     this.hideTooltip(0);
                     resolve(computeResponse);
@@ -184,8 +213,7 @@ const Tooltip = class {
         return elements;
     }
     async registerTriggerListener() {
-        var _a;
-        (_a = this.disposeTriggerListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposeTriggerListener?.();
         const triggerElementList = await this.queryAnchorElements();
         if (!triggerElementList) {
             return;
@@ -226,8 +254,7 @@ const Tooltip = class {
         this.disposeTriggerListener = disposableEventListener.addDisposableEventListenerAsArray(listeners);
     }
     registerTooltipListener(dialog) {
-        var _a;
-        (_a = this.disposeTooltipListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposeTooltipListener?.();
         this.disposeTooltipListener = disposableEventListener.addDisposableEventListenerAsArray([
             {
                 element: dialog,
@@ -280,6 +307,7 @@ const Tooltip = class {
         ]);
     }
     registerDomChangeListener() {
+        this.disposeDomChangeListener?.();
         const observer = new MutationObserver(() => {
             this.registerTriggerListener();
         });
@@ -311,13 +339,19 @@ const Tooltip = class {
     componentDidLoad() {
         this.registerDomChangeListener();
     }
+    connectedCallback() {
+        if (this.hasDisconnected) {
+            this.registerTriggerListener();
+            this.registerDomChangeListener();
+        }
+    }
     disconnectedCallback() {
-        var _a, _b, _c, _d;
+        this.hasDisconnected = true;
         this.clearTimeouts();
-        (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.disposeTriggerListener) === null || _b === void 0 ? void 0 : _b.call(this);
-        (_c = this.disposeTooltipListener) === null || _c === void 0 ? void 0 : _c.call(this);
-        (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
+        this.disposeAutoUpdate?.();
+        this.disposeTriggerListener?.();
+        this.disposeTooltipListener?.();
+        this.disposeDomChangeListener?.();
     }
     handleTitleIconSlotChange(e) {
         const slot = e.target;
@@ -329,9 +363,8 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0c5234ef90749fc655fcfe1b207ff07a56542c9a', role: "tooltip", class: { visible: this.visible } }, index.h("dialog", { key: '0d47ccccc273824891784dea6985f8d465bbb97a', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, index.h("div", { key: '3c2b83f9d07786a69d8defe6942eb47e2c92bf72', class: "tooltip-container" }, index.h("div", { key: '799cc98634dcded6644c8b556d5f9dbc58bea809', class: "content-wrapper" }, index.h("div", { key: '760197461d8959ae1a04f827435f925359f54e04', class: 'tooltip-title' }, index.h("slot", { key: 'f5316e309883dac441181c3ffe05594e1a2a9034', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), index.h("ix-typography", { key: '9e9b3a4390f4e586b91ae2ce1bbd94bc53d432c1', format: "h5" }, this.titleContent, index.h("slot", { key: '1e05a5984ce3638bdea2bdbea322e505b8211495', name: "title-content" }))), index.h("slot", { key: 'b74f4b6142b68920fc74029d751521b6c4faf706' }), index.h("div", { key: '26a4a736c0f1dbedaf788472a7232cefc095c8a8', class: "arrow" }))))));
+        return (index.h(index.Host, { key: '8aed42852f615787c48fa06b0682738a1f330440', role: "tooltip", class: { visible: this.visible } }, index.h("dialog", { key: 'f9291fb22d6a57c8cb4e6a2ad00b93291e21ba8e', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, index.h("div", { key: 'b3549060bdc5e21ce10c3a131d96172b156e4b15', class: "tooltip-container" }, index.h("div", { key: '9faaaf7ad71f73267270b97d2d4ba06de1c9db15', class: "content-wrapper" }, index.h("div", { key: '2613a69b5ade812a9bf6850c40ea0b6c3b231c29', class: 'tooltip-title' }, index.h("slot", { key: 'b4e2bd1cbefd7a1e684967e876404e9df78b3c2b', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), index.h("ix-typography", { key: 'ad34b68a4b538da01990d41b8ba5f35e6f54f71a', format: "h5" }, this.titleContent, index.h("slot", { key: '670455a0bfda60771c9af9b1b1890826f9a9431f', name: "title-content" }))), index.h("slot", { key: '82e0591cfb4861702b6a65f8e598d6475e5054f6' }), index.h("div", { key: '19145d17a5db3aaaf1750f3e6fcb0091d4baad4c', class: "arrow" }))))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 Tooltip.style = tooltipCss();
 

package/dist/cjs/ix-tree-item.cjs.entry.js

@@ -1,35 +1,69 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$1 = require('./index-DIYO-Liy.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 
-const treeItemCss = () => `:host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):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){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}`;
+const treeItemCss = () => `:host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(.selected).hover),:host(:not(.disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(.selected).active),:host(:not(.disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}:host(.disabled){opacity:0.5;pointer-events:none}`;
 
 const TreeItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggle = index.createEvent(this, "toggle", 7);
         this.itemClick = index.createEvent(this, "itemClick", 7);
-        /**
-         * 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 (index.h(index.Host, { key: 'd7bab1c02de111458ef484818bcec12c940f1bc4', class: {
-                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, index.h("div", { key: '43a86c7b782a881ee712d2950b6730fd3badebf9', class: "icon-toggle-container" }, this.hasChildren ? (index.h("ix-icon", { name: index$1.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 (index.h(index.Host, { key: 'e7e34e163bd93d7cd473167c20f6fe5cfc7a555b', class: {
+                selected: !!this.context?.isSelected,
+                disabled: !!isDisabled,
+            } }, index.h("div", { key: 'ad4deffb89068a0e74f3b0596f59de1262f549b3', class: "icon-toggle-container" }, this.hasChildren ? (index.h("ix-icon", { name: index$1.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), index.h("div", { key: 'b738b82fde5fe41ecc72b0cd765b2acdb17a6328', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon ??
+                (this.context?.isExpanded
+                    ? 'Collapse tree item'
+                    : 'Expand tree item') })) : null), index.h("div", { key: '632ac5edca96314ec279e229eb77c1b12fbc9af1', class: "tree-node-container", onClick: () => {
+                if (isDisabled) {
+                    return;
+                }
                 this.itemClick.emit();
-            } }, index.h("div", { key: 'a0deb8a582d9b63c8832d9ad1bec89a5bdd83af8', class: "tree-node-text" }, this.text), index.h("slot", { key: '8c71cde365667568a7c67448f0588690cd91b9ce' }))));
+            } }, index.h("div", { key: 'b2532d4c136111a563c4e54cbe1d8d6bfae3a20b', class: "tree-node-text" }, this.text), index.h("slot", { key: 'daf4d0a32bba8574b11903205fb8cecdf8ab3d11' }))));
     }
 };
 TreeItem.style = treeItemCss();

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var dropdownController = require('./dropdown-controller-BLOjtc6w.js');
-var tree_types = require('./tree.types-BygtRFW3.js');
+var index = require('./index-DnclGKUw.js');
+var dropdownController = require('./dropdown-controller-kBwdbfGD.js');
+var tree_types = require('./tree.types-Cs9O1Wtf.js');
+require('./path-utils-CQKWhbQW.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -21,6 +22,28 @@ const addClass = (element, className) => {
     element.classList.add(className);
 };
 class VirtualList {
+    _config;
+    _lastRepaint;
+    _maxElementHeight;
+    _renderAnimationFrame;
+    _averageHeight;
+    _scrollListener = null;
+    _pendingRender = false;
+    static defaultConfig = {
+        width: '100%',
+        height: '100%',
+    };
+    _element;
+    _scroller;
+    _itemHeights;
+    _containerSize;
+    _scrollPaddingBottom;
+    _scrollPaddingTop;
+    _scrollHeight;
+    _itemPositions;
+    _screenItemsLen;
+    _lastFrom;
+    _cachedItemsLen;
     static create(element, userProvidedConfig = VirtualList.defaultConfig) {
         return new VirtualList(element, userProvidedConfig);
     }
@@ -57,8 +80,6 @@ class VirtualList {
         return maxElementHeight;
     }
     constructor(element, userProvidedConfig) {
-        this._scrollListener = null;
-        this._pendingRender = false;
         this._lastRepaint = null;
         this._maxElementHeight = VirtualList.getMaxBrowserHeight();
         this.refresh(element, userProvidedConfig);
@@ -96,14 +117,13 @@ class VirtualList {
             window.cancelAnimationFrame(this._renderAnimationFrame);
         }
         const config = this._config;
-        const scrollContainer = (config === null || config === void 0 ? void 0 : config.scrollContainer) || this._element;
+        const scrollContainer = config?.scrollContainer || this._element;
         if (this._scrollListener && scrollContainer) {
             scrollContainer.removeEventListener('scroll', this._scrollListener);
         }
     }
     refresh(element, userProvidedConfig = VirtualList.defaultConfig) {
-        var _a;
-        const oldScrollContainer = ((_a = this._config) === null || _a === void 0 ? void 0 : _a.scrollContainer) || this._element;
+        const oldScrollContainer = this._config?.scrollContainer || this._element;
         if (this._scrollListener && oldScrollContainer) {
             oldScrollContainer.removeEventListener('scroll', this._scrollListener);
         }
@@ -371,10 +391,6 @@ class VirtualList {
         return i;
     }
 }
-VirtualList.defaultConfig = {
-    width: '100%',
-    height: '100%',
-};
 
 const treeCss = () => `:host{display:block}`;
 
@@ -385,22 +401,50 @@ const Tree = class {
         this.nodeToggled = index.createEvent(this, "nodeToggled", 7);
         this.nodeClicked = index.createEvent(this, "nodeClicked", 7);
         this.nodeRemoved = index.createEvent(this, "nodeRemoved", 7);
-        /**
-         * 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();
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * 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';
     }
@@ -410,6 +454,7 @@ const Tree = class {
             width: '100%',
             height: '100%',
             itemHeight: 32,
+            scrollerTagName: 'div',
             total: list.length,
             generate: (index) => {
                 const item = list[index];
@@ -420,12 +465,15 @@ const Tree = class {
                  */
                 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;
                             }
@@ -441,7 +489,7 @@ const Tree = class {
                 };
                 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 = tree_types.renderDefaultItem(item, context, update);
@@ -456,7 +504,10 @@ const Tree = class {
         };
     }
     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) {
@@ -464,24 +515,26 @@ const Tree = class {
             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));
                 }
@@ -523,9 +576,8 @@ const Tree = class {
         }
     }
     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()) {
@@ -540,12 +592,11 @@ const Tree = class {
         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.
@@ -557,11 +608,10 @@ const Tree = class {
         }
     }
     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(tree_types.defaultRefreshTreeOptions);
         this.hyperlist = new VirtualList(this.hostElement, config);
     }
@@ -591,7 +641,13 @@ const Tree = class {
         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);
@@ -606,6 +662,10 @@ const Tree = class {
             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);
@@ -617,12 +677,10 @@ const Tree = class {
             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,
@@ -633,9 +691,8 @@ const Tree = class {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (index.h(index.Host, { key: '1274f32c7a5e24c885191db0cf9b0e58715f4eb1', onClick: (event) => this.onTreeItemClick(event) }, index.h("slot", { key: '14196e9cedf85157bfeae56d6e6b769a1c9ed791' })));
+        return (index.h(index.Host, { key: '2559d80cdc3622837771d6f9484117b5d8ae15db', onClick: (event) => this.onTreeItemClick(event) }, index.h("slot", { key: 'f1b3e2121e4833481dcf91594f38434318de84bc' })));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "model": [{
                 "onModelChange": 0