@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,228 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var popper = require('./popper-Dmp8OTYh.js');
+
+const tooltipCss = () => `:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1d1d1d;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#ffffff;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}`;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    tooltipVisible = false;
+    /** Header text displayed at the top of the tooltip. */
+    header = "";
+    /** Main content text displayed inside the tooltip. */
+    text = "";
+    /** Preferred position of the tooltip relative to the trigger element. */
+    position = "auto";
+    internalPosition = "auto";
+    /** Accessible label for screen readers. */
+    ariaLabelText;
+    /** Visual style variant of the tooltip. */
+    variant = "compact";
+    /** Optional icon displayed in the tooltip. */
+    icon;
+    /** If true, appends the tooltip element to document.body for positioning. */
+    appendToBody = false;
+    tooltipContainer;
+    tooltipEl;
+    referenceEl;
+    popperInstance = null;
+    getVariant() {
+        const normalizedVariant = this.variant?.toLowerCase().trim();
+        if (normalizedVariant === 'compact' ||
+            normalizedVariant === 'dismissible' ||
+            normalizedVariant === 'extended') {
+            return normalizedVariant;
+        }
+        return 'compact';
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent('ifx-tooltip', await framework);
+        }
+        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
+        const variant = this.getVariant();
+        if (variant === 'compact' || variant === 'extended') {
+            slotElement.addEventListener('mouseenter', this.onMouseEnter);
+            slotElement.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            slotElement.addEventListener('click', this.onClick);
+        }
+    }
+    initializePopper() {
+        if (this.popperInstance)
+            return;
+        this.referenceEl = this.el;
+        let originalTooltipEl;
+        const variant = this.getVariant();
+        if (variant === 'compact') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
+        }
+        else if (variant === 'dismissible') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
+        }
+        else {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
+        }
+        if (this.appendToBody && originalTooltipEl && !this.tooltipContainer) {
+            this.tooltipContainer = originalTooltipEl.cloneNode(true);
+            const computedStyle = window.getComputedStyle(originalTooltipEl);
+            Array.from(computedStyle).forEach(key => {
+                this.tooltipContainer.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
+            });
+            document.body.appendChild(this.tooltipContainer);
+            originalTooltipEl.style.visibility = 'hidden';
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else if (this.appendToBody && this.tooltipContainer) {
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else {
+            this.tooltipEl = originalTooltipEl;
+        }
+        let effectivePosition;
+        if (this.position === 'auto') {
+            effectivePosition = this.determineBestPosition();
+        }
+        else {
+            effectivePosition = this.position;
+        }
+        this.internalPosition = effectivePosition;
+        if (this.tooltipEl && this.referenceEl) {
+            this.popperInstance = popper.createPopper(this.referenceEl, this.tooltipEl, {
+                placement: this.internalPosition,
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'clippingParents',
+                            altBoundary: false,
+                            rootBoundary: 'viewport',
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        enabled: this.position === 'auto',
+                        options: {
+                            fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
+                            flipVariations: false,
+                        },
+                    },
+                    {
+                        name: 'computeStyles',
+                        options: {
+                            gpuAcceleration: false,
+                            adaptive: true,
+                        },
+                    },
+                ],
+            });
+        }
+        if (this.tooltipEl) {
+            this.tooltipEl.setAttribute('data-placement', this.internalPosition);
+        }
+    }
+    determineBestPosition() {
+        const rect = this.referenceEl.getBoundingClientRect();
+        const yOffset = window.scrollY;
+        const xOffset = window.scrollX;
+        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
+        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
+        if (verticalHalfwayPoint > window.innerHeight / 2) {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'top-end';
+            }
+            else {
+                return 'top-start';
+            }
+        }
+        else {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'bottom-end';
+            }
+            else {
+                return 'bottom-start';
+            }
+        }
+    }
+    positionChanged(newVal) {
+        this.internalPosition = newVal;
+        this.popperInstance?.destroy();
+        this.popperInstance = null; // Force re-initialization on next mouse enter
+    }
+    onMouseEnter = () => {
+        this.initializePopper();
+        this.tooltipVisible = true;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'block';
+        }
+        this.popperInstance?.update();
+    };
+    onMouseLeave = () => {
+        this.tooltipVisible = false;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'none';
+        }
+    };
+    disconnectedCallback() {
+        const slotElement = this.el.shadowRoot?.querySelector('.tooltip__container')?.firstChild;
+        if (slotElement) {
+            slotElement.removeEventListener('mouseenter', this.onMouseEnter);
+            slotElement.removeEventListener('mouseleave', this.onMouseLeave);
+            slotElement.removeEventListener('click', this.onClick);
+        }
+        this.popperInstance?.destroy();
+        if (this.tooltipContainer && this.tooltipContainer.parentNode) {
+            document.body.removeChild(this.tooltipContainer);
+        }
+    }
+    onClick = () => {
+        if (this.getVariant() === 'dismissible') {
+            this.initializePopper();
+            this.tooltipVisible = !this.tooltipVisible;
+            this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
+            this.popperInstance?.update();
+        }
+    };
+    onDismissClick = () => {
+        this.tooltipVisible = false;
+        this.tooltipEl.style.display = 'none';
+    };
+    render() {
+        const tooltipDismissible = {
+            "tooltip-dismissible": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipCompact = {
+            "tooltip-compact": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipExtended = {
+            "tooltip-extended": true,
+            visible: this.tooltipVisible,
+        };
+        return (index.h("div", { key: '9bf27bac66f598f51c1e30e27a6e10787160064c', "aria-label": this.ariaLabelText, "aria-value": this.header, class: "tooltip__container" }, index.h("slot", { key: 'd20fcd749e7d35cca65a592363600080b098d46e' }), this.getVariant() === 'dismissible' && (index.h("div", { key: '4a38c6ac152213456b088ec84f8bb6321037c40e', class: tooltipDismissible }, index.h("button", { key: '8201ab5b1d650cefb90ebbdfafa75aeb5cdcd0e6', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, index.h("ifx-icon", { key: '5f214bc9ee9a35187703ba8a520ffd146524529d', icon: "cross16" })), index.h("div", { key: 'f653fd795afa4888f00c5daac7911d46882a0dad', class: "tooltip-dismissible-content" }, this.header && index.h("div", { key: 'f1eb33d83439723b581f95134f65e5414160ca1b', class: "tooltip-dismissible-header" }, this.header), index.h("div", { key: '00b599eb81849359c8bef7aa27655b890c63a43c', class: "tooltip-dismissible-body" }, this.text)), index.h("svg", { key: 'ef44cb3e7636f3f53ad3c206167d4699cfe14805', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c815a0a02b8e44ad3c2963bb546cc0d4ff3c7a5f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'compact' && (index.h("div", { key: '467347c7622a4e463eb0ab1de899bcf2e63e2871', class: tooltipCompact }, this.text, index.h("svg", { key: 'f38dcf83756ffb2bf5f0fdac3b9dc5178ebe445c', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '900f2b96ce647f566bbbbacfa0d8aa1b8d012f84', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'extended' && (index.h("div", { key: '62513e32ad9418c3f5d0015431e62a8ea82699e8', class: tooltipExtended }, index.h("slot", { key: 'd947b84184430e4e3abfd6ac1270a2ab07c77201', name: "icon" }, this.icon ? (index.h("div", { class: "extended_icon" }, index.h("ifx-icon", { icon: this.icon }))) : (index.h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, index.h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), index.h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), index.h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" })))), index.h("div", { key: '58d52b35c0eeafaa1cdceb12f8bc8cb531313ade', class: "tooltip-extended-content" }, this.header && index.h("div", { key: '31b8e80497c10e662ac5da50665d09c4f1b7aee7', class: "tooltip-extended-header" }, this.header), index.h("div", { key: '777dac006f5554c30056a91901c2027acea21186', class: "tooltip-extended-body" }, this.text)), index.h("svg", { key: 'b6bdfb6860f70309569f68bb2b7830090636eb69', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'cb12c1f69e4f3538f9679fcf47f470c7f142fb46', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))))));
+    }
+    static get watchers() { return {
+        "position": [{
+                "positionChanged": 0
+            }]
+    }; }
+};
+Tooltip.style = tooltipCss();
+
+exports.ifx_tooltip = Tooltip;

package/dist/cjs/ifx-tree-view-item.cjs.entry.js

@@ -0,0 +1,404 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const treeViewItemCss = () => `.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#bfbbbb}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#f7f7f7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#ffffff}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#eeeded}.tree-item--disabled .tree-item__chevron-container::after{color:#eeeded}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0a8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}`;
+
+const TreeViewItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxTreeViewItemExpandChange = index.createEvent(this, "ifxTreeViewItemExpandChange", 7);
+        this.ifxTreeViewItemCheckChange = index.createEvent(this, "ifxTreeViewItemCheckChange", 7);
+        this.ifxTreeViewItemDisableChange = index.createEvent(this, "ifxTreeViewItemDisableChange", 7);
+    }
+    get host() { return index.getElement(this); }
+    /** Whether this tree item is currently expanded (shows its children). */
+    expanded = false;
+    /** If true, the item starts in an expanded state. */
+    initiallyExpanded = false;
+    /** If true, the item is disabled and not interactive. */
+    disableItem = false;
+    /** Accessible label for this tree item. */
+    ariaLabelText;
+    /** If true, the item starts in a selected/checked state. */
+    initiallySelected = false;
+    /** Value associated with this tree item. */
+    value;
+    /** Fired when the expanded / collapsed state of the item changes. */
+    ifxTreeViewItemExpandChange;
+    /** Fired when the checked / selected state of the item changes. */
+    ifxTreeViewItemCheckChange;
+    /** Fired when the disabled state of the item changes. */
+    ifxTreeViewItemDisableChange;
+    hasChildren = false;
+    isChecked = false;
+    partialChecked = false;
+    level = 0;
+    disableAllItems = false;
+    expandAllItems = false;
+    suppressExpandEvents = false;
+    get disabled() {
+        return this.disableAllItems || this.disableItem;
+    }
+    get isExpanded() {
+        return this.expandAllItems || this.expanded;
+    }
+    findChildren = () => Array.from(this.host.children).filter((child) => child instanceof HTMLElement && child.tagName === "IFX-TREE-VIEW-ITEM");
+    calculateNodeLevel = () => {
+        let level = 0, parent = this.host.parentElement;
+        while (parent) {
+            if (parent.tagName === "IFX-TREE-VIEW-ITEM")
+                level++;
+            parent = parent.parentElement;
+        }
+        return level;
+    };
+    componentWillLoad() {
+        this.expanded = this.initiallyExpanded;
+        this.hasChildren = this.findChildren().length > 0;
+        this.level = this.calculateNodeLevel();
+        this.host.setAttribute("data-level", this.level.toString());
+        this.isChecked = this.initiallySelected;
+        this.host.addEventListener("internal-check-state-change", this.handleStateChange);
+    }
+    componentDidLoad() {
+        this.observeParentAttribute("disable-all-items", (val) => (this.disableAllItems = val));
+        this.observeParentAttribute("data-expand-all-items", (val) => (this.expandAllItems = val), true);
+        if (this.shouldExpandFromParent())
+            this.expandAllDescendants();
+        this.host["__stencil_instance"] = this;
+        if (this.initiallySelected)
+            setTimeout(() => this.updateParentState(), 0);
+    }
+    observeParentAttribute(attr, cb, breakOnAttr = false) {
+        let parent = this.host.parentElement;
+        while (parent) {
+            if (parent.tagName === "IFX-TREE-VIEW" ||
+                (breakOnAttr && parent.hasAttribute(attr))) {
+                const observer = new MutationObserver(() => cb(parent.hasAttribute(attr)));
+                observer.observe(parent, { attributes: true });
+                cb(parent.hasAttribute(attr));
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    shouldExpandFromParent() {
+        let parent = this.host.parentElement;
+        while (parent) {
+            if (parent.tagName === "IFX-TREE-VIEW" &&
+                (parent.hasAttribute("expand-all-items") ||
+                    parent.hasAttribute("data-expand-all-items")))
+                return true;
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    expandAllDescendants() {
+        this.expanded = true;
+        this.findChildren().forEach((child) => {
+            child.expanded = true;
+            child.expandAllDescendants?.();
+        });
+    }
+    handleStateChange = (event) => {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.updateCheckState(event.detail.checked);
+    };
+    handleCheckboxChange = (event) => {
+        if (this.disabled)
+            return;
+        this.updateCheckState(event.detail?.checked ?? !this.isChecked);
+    };
+    handleHeaderClick = ({ target }) => {
+        if (this.disabled)
+            return;
+        if (!target.closest(".tree-item__checkbox-container, .tree-item__chevron-container")) {
+            if (this.hasChildren) {
+                const newCheckedState = !this.isChecked;
+                this.updateCheckState(newCheckedState);
+                const affectedItems = newCheckedState
+                    ? this.expandOrCollapseAllDescendants(true)
+                    : this.expandOrCollapseAllDescendants(false);
+                this.ifxTreeViewItemExpandChange.emit({
+                    expanded: newCheckedState,
+                    affectedItems,
+                    component: this,
+                });
+            }
+            else {
+                this.updateCheckState(!this.isChecked);
+            }
+        }
+    };
+    expandOrCollapseAllDescendants(expand) {
+        this.suppressExpandEvents = true;
+        const affectedItems = [];
+        this.expanded = expand;
+        if (this.hasChildren)
+            affectedItems.push({ expanded: expand, value: this.value });
+        this.findChildren().forEach((child) => {
+            const childInstance = child["__stencil_instance"];
+            if (childInstance && childInstance.hasChildren) {
+                childInstance.suppressExpandEvents = true;
+                childInstance.expanded = expand;
+                affectedItems.push({ expanded: expand, value: childInstance.value });
+                if (childInstance.hasChildren) {
+                    const childAffected = childInstance.expandOrCollapseAllDescendants(expand);
+                    affectedItems.push(...childAffected);
+                }
+            }
+        });
+        this.suppressExpandEvents = false;
+        return affectedItems;
+    }
+    async updateCheckState(checked, fromParent = false) {
+        if (this.disabled)
+            return;
+        if (!fromParent && this.hasChildren) {
+            const affected = this.collectDescendantStates(checked);
+            this.setNodeState({ isChecked: checked, partialChecked: false }, false);
+            await this.updateChildrenSilently(checked);
+            this.ifxTreeViewItemCheckChange.emit({
+                checked,
+                indeterminate: false,
+                value: this.value,
+                affectedChildItems: affected,
+                component: this,
+            });
+            this.updateParentState();
+        }
+        else if (fromParent) {
+            this.setNodeState({ isChecked: checked, partialChecked: false }, false);
+        }
+        else {
+            this.setNodeState({ isChecked: checked, partialChecked: false });
+            await this.updateChildrenState(checked);
+            this.updateParentState();
+        }
+    }
+    async updateChildrenSilently(checked) {
+        for (const child of this.findChildren()) {
+            const childInstance = child["__stencil_instance"];
+            if (childInstance && !childInstance.disabled) {
+                childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);
+                await childInstance.updateChildrenSilently(checked);
+            }
+        }
+    }
+    handleExpandedChange(newValue) {
+        if (!this.suppressExpandEvents) {
+            this.ifxTreeViewItemExpandChange.emit({
+                expanded: newValue,
+                value: this.value,
+                affectedItems: [{ expanded: newValue, value: this.value }],
+                component: this,
+            });
+        }
+    }
+    handleDisableItemChange(newValue) {
+        this.ifxTreeViewItemDisableChange.emit({
+            disabled: newValue,
+            component: this,
+        });
+    }
+    setNodeState(state, emitEvent = true) {
+        this.isChecked = state.isChecked;
+        this.partialChecked = state.partialChecked;
+        if (emitEvent) {
+            this.ifxTreeViewItemCheckChange.emit({
+                checked: this.isChecked,
+                indeterminate: this.partialChecked,
+                value: this.value,
+                level: this.level,
+                disabled: this.disabled,
+                component: this,
+            });
+        }
+    }
+    collectDescendantStates(checked) {
+        const descendants = [];
+        const collect = (el, skipSelf = false) => {
+            const instance = el === this.host ? this : el["__stencil_instance"];
+            if (!skipSelf && !instance?.disabled) {
+                descendants.push({
+                    checked,
+                    indeterminate: false,
+                    value: instance?.value,
+                });
+            }
+            Array.from(el.children).forEach((child) => {
+                if (child.tagName === "IFX-TREE-VIEW-ITEM")
+                    collect(child, false);
+            });
+        };
+        Array.from(this.host.children).forEach((child) => {
+            if (child.tagName === "IFX-TREE-VIEW-ITEM")
+                collect(child, false);
+        });
+        return descendants;
+    }
+    async updateChildrenState(checked) {
+        for (const child of this.findChildren()) {
+            const childInstance = child["__stencil_instance"];
+            if (childInstance && !childInstance.disabled) {
+                await child.componentOnReady();
+                child.dispatchEvent(new CustomEvent("internal-check-state-change", {
+                    detail: { checked },
+                    bubbles: false,
+                    composed: true,
+                }));
+            }
+        }
+    }
+    findSiblingNodes(parent) {
+        return Array.from(parent.children).filter((child) => child instanceof HTMLElement && child.tagName === "IFX-TREE-VIEW-ITEM");
+    }
+    updateParentState() {
+        const parent = this.host.parentElement?.closest("ifx-tree-view-item");
+        if (!parent)
+            return;
+        setTimeout(() => {
+            const parentInstance = parent["__stencil_instance"];
+            if (!parentInstance)
+                return;
+            const siblings = this.findSiblingNodes(parent);
+            const { allChecked, someChecked } = this.calculateSiblingStates(siblings);
+            parentInstance.setNodeState({
+                isChecked: allChecked,
+                partialChecked: !allChecked && someChecked,
+            }, false);
+            parentInstance.updateParentState();
+        }, 0);
+    }
+    calculateSiblingStates(siblings) {
+        const states = siblings.map((sib) => {
+            const instance = sib["__stencil_instance"];
+            return {
+                checked: instance?.isChecked,
+                partial: instance?.partialChecked,
+            };
+        });
+        const checkedCount = states.filter((state) => state.checked).length;
+        const partialCount = states.filter((state) => state.partial).length;
+        return {
+            allChecked: states.length > 0 &&
+                checkedCount === states.length &&
+                partialCount === 0,
+            someChecked: checkedCount > 0 || partialCount > 0,
+        };
+    }
+    toggleExpand = () => {
+        if (this.disabled || !this.hasChildren)
+            return;
+        this.expanded = !this.expanded;
+    };
+    handleKeyDown = (event) => {
+        const allItems = Array.from(this.host
+            .closest("ifx-tree-view")
+            ?.querySelectorAll("ifx-tree-view-item") || []);
+        const visibleItems = allItems.filter((item) => {
+            let parent = item.parentElement?.closest("ifx-tree-view-item");
+            while (parent) {
+                const parentCmp = parent;
+                if (!(parentCmp.expandAllItems || parentCmp.expanded))
+                    return false;
+                parent = parent.parentElement?.closest("ifx-tree-view-item");
+            }
+            return true;
+        });
+        const currentIndex = visibleItems.findIndex((el) => el === this.host);
+        const focusLabelIcon = (el) => el?.focus();
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                for (let i = currentIndex + 1; i < visibleItems.length; i++) {
+                    const next = visibleItems[i];
+                    if (!next.disabled) {
+                        focusLabelIcon(next.shadowRoot?.querySelector(".tree-item__label-icon-container"));
+                        break;
+                    }
+                }
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                for (let i = currentIndex - 1; i >= 0; i--) {
+                    const prev = visibleItems[i];
+                    if (!prev.disabled) {
+                        focusLabelIcon(prev.shadowRoot?.querySelector(".tree-item__label-icon-container"));
+                        break;
+                    }
+                }
+                break;
+            }
+            case "ArrowRight": {
+                event.preventDefault();
+                if (!this.isExpanded && this.hasChildren) {
+                    this.expanded = true;
+                }
+                else if (this.isExpanded && this.hasChildren) {
+                    const firstChild = this.host.querySelector("ifx-tree-view-item");
+                    if (firstChild && !firstChild.disabled) {
+                        focusLabelIcon(firstChild.shadowRoot?.querySelector(".tree-item__label-icon-container"));
+                    }
+                }
+                break;
+            }
+            case "ArrowLeft": {
+                event.preventDefault();
+                if (this.isExpanded && this.hasChildren) {
+                    this.expanded = false;
+                }
+                else {
+                    const parent = this.host.parentElement?.closest("ifx-tree-view-item");
+                    if (parent && !parent.disabled) {
+                        focusLabelIcon(parent.shadowRoot?.querySelector(".tree-item__label-icon-container"));
+                    }
+                }
+                break;
+            }
+            case " ":
+            case "Enter": {
+                event.preventDefault();
+                if (this.hasChildren) {
+                    const newCheckedState = !this.isChecked;
+                    this.updateCheckState(newCheckedState);
+                    const affectedItems = newCheckedState
+                        ? this.expandOrCollapseAllDescendants(true)
+                        : this.expandOrCollapseAllDescendants(false);
+                    this.ifxTreeViewItemExpandChange.emit({
+                        expanded: newCheckedState,
+                        affectedItems,
+                        component: this,
+                    });
+                }
+                else {
+                    this.updateCheckState(!this.isChecked);
+                }
+                break;
+            }
+        }
+    };
+    render() {
+        return (index.h("div", { key: '123da9bfe206bf6bd38c958f30eebb11950e126b', class: {
+                "tree-item": true,
+                "tree-item--expanded": this.isExpanded,
+                "tree-item--has-children": this.hasChildren,
+                "tree-item--disabled": this.disabled,
+            }, role: "treeitem", "aria-expanded": this.isExpanded ? "true" : "false", "data-level": this.level, "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.ariaLabelText }, index.h("div", { key: '2cd132c98025b46f8171601033332bf7900dd6c4', class: "tree-item__content" }, index.h("div", { key: '63116442499e9effc5ee9ff98b5592fe18149069', class: "tree-item__checkbox-container", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: '4e459a1bd676f541295f78f1b9c894dff4eb4ef8', size: "s", checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), index.h("div", { key: 'ed5a511ecab4a5ddf492caab1a5284ea3dd4b830', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? "true" : undefined }, this.hasChildren && (index.h("div", { key: '6db87ea4384b7c02c573640a6b9b77ecb41d06c7', class: "tree-item__chevron-container", onClick: this.toggleExpand }, index.h("ifx-icon", { key: '88a189f42e5a65c7b9be8ae56da4dab3c073348c', class: `tree-item__chevron ${this.isExpanded ? "chevron-down" : "chevron-right"}`, icon: "chevron-right-16" }), index.h("div", { key: '90a68efc36fcc9555fadd3f0480d8f136bd7bfe7', class: "tree-item__line" }))), index.h("div", { key: '1f2fb319858e95fa71d8bd3a8b67633c1b877ab5', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'e9d22a1c38483f36362ed04613cf7bace8afada1', class: "tree-item__icon-container" }, this.hasChildren ? (index.h(index.Fragment, null, index.h("ifx-icon", { class: { "icon--hidden": this.isExpanded }, icon: "folder-16" }), index.h("ifx-icon", { class: { "icon--hidden": !this.isExpanded }, icon: "folder-open-16" }))) : (index.h("ifx-icon", { icon: "file-16" }))), index.h("span", { key: 'a9c62e0dbbb224902610b33a73b404fc43e39edb', class: "tree-item__label" }, index.h("slot", { key: '6f052f54f516b40b283cd6b5604405576f145791' }))))), this.isExpanded && (index.h("div", { key: '8316ac5841ee4715e299071fb722740d09a5951e', class: "tree-item__children" }, index.h("slot", { key: '66cc980df39b81b7999797633c3aa84ed98c0ae1', name: "children" })))));
+    }
+    static get watchers() { return {
+        "expanded": [{
+                "handleExpandedChange": 0
+            }],
+        "disableItem": [{
+                "handleDisableItemChange": 0
+            }]
+    }; }
+};
+TreeViewItem.style = treeViewItemCss();
+
+exports.ifx_tree_view_item = TreeViewItem;