@infineon/infineon-design-system-stencil 34.0.0 → 34.1.0--canary.1869.c99e8e229a05ce3ff2fac5e98c5530c239905300.0

package/dist/components/ifx-tree-view-item.js

@@ -0,0 +1,431 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-f8e6a4ef.js';
+import { d as defineCustomElement$3 } from './p-3ec421ea.js';
+import { d as defineCustomElement$2 } from './p-11e95622.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 IfxTreeViewItemStyle0 = treeViewItemCss;
+
+const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ifxTreeViewItemExpandChange = createEvent(this, "ifxTreeViewItemExpandChange", 7);
+        this.ifxTreeViewItemCheckChange = createEvent(this, "ifxTreeViewItemCheckChange", 7);
+        this.ifxTreeViewItemDisableChange = createEvent(this, "ifxTreeViewItemDisableChange", 7);
+        this.expanded = false;
+        this.initiallyExpanded = false;
+        this.disableItem = false;
+        this.initiallySelected = false;
+        this.hasChildren = false;
+        this.isChecked = false;
+        this.partialChecked = false;
+        this.level = 0;
+        this.disableAllItems = false;
+        this.expandAllItems = false;
+        this.suppressExpandEvents = false;
+        this.findChildren = () => Array.from(this.host.children)
+            .filter((child) => child instanceof H && child.tagName === 'IFX-TREE-VIEW-ITEM');
+        this.calculateNodeLevel = () => {
+            let level = 0, parent = this.host.parentElement;
+            while (parent) {
+                if (parent.tagName === 'IFX-TREE-VIEW-ITEM')
+                    level++;
+                parent = parent.parentElement;
+            }
+            return level;
+        };
+        this.handleStateChange = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            this.updateCheckState(event.detail.checked);
+        };
+        this.handleCheckboxChange = (event) => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            this.updateCheckState((_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : !this.isChecked);
+        };
+        this.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);
+                }
+            }
+        };
+        this.toggleExpand = () => {
+            if (this.disabled || !this.hasChildren)
+                return;
+            this.expanded = !this.expanded;
+        };
+        this.handleKeyDown = (event) => {
+            var _a, _b, _c, _d, _e, _f;
+            const allItems = Array.from(((_a = this.host.closest('ifx-tree-view')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ifx-tree-view-item')) || []);
+            const visibleItems = allItems.filter(item => {
+                var _a, _b;
+                let parent = (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.closest('ifx-tree-view-item');
+                while (parent) {
+                    const parentCmp = parent;
+                    if (!(parentCmp.expandAllItems || parentCmp.expanded))
+                        return false;
+                    parent = (_b = parent.parentElement) === null || _b === void 0 ? void 0 : _b.closest('ifx-tree-view-item');
+                }
+                return true;
+            });
+            const currentIndex = visibleItems.findIndex(el => el === this.host);
+            const focusLabelIcon = (el) => el === null || el === void 0 ? void 0 : 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((_b = next.shadowRoot) === null || _b === void 0 ? void 0 : _b.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((_c = prev.shadowRoot) === null || _c === void 0 ? void 0 : _c.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((_d = firstChild.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.tree-item__label-icon-container'));
+                        }
+                    }
+                    break;
+                }
+                case 'ArrowLeft': {
+                    event.preventDefault();
+                    if (this.isExpanded && this.hasChildren) {
+                        this.expanded = false;
+                    }
+                    else {
+                        const parent = (_e = this.host.parentElement) === null || _e === void 0 ? void 0 : _e.closest('ifx-tree-view-item');
+                        if (parent && !parent.disabled) {
+                            focusLabelIcon((_f = parent.shadowRoot) === null || _f === void 0 ? void 0 : _f.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;
+                }
+            }
+        };
+    }
+    get disabled() {
+        return this.disableAllItems || this.disableItem;
+    }
+    get isExpanded() {
+        return this.expandAllItems || this.expanded;
+    }
+    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 => {
+            var _a, _b;
+            child.expanded = true;
+            (_b = (_a = child).expandAllDescendants) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    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) => {
+            let instance = el === this.host ? this : el['__stencil_instance'];
+            if (!skipSelf && !(instance === null || instance === void 0 ? void 0 : instance.disabled)) {
+                descendants.push({
+                    checked,
+                    indeterminate: false,
+                    value: instance === null || instance === void 0 ? void 0 : 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 H && child.tagName === 'IFX-TREE-VIEW-ITEM');
+    }
+    updateParentState() {
+        var _a;
+        const parent = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.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 === null || instance === void 0 ? void 0 : instance.isChecked, partial: instance === null || instance === void 0 ? void 0 : 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
+        };
+    }
+    render() {
+        return (h("div", { key: 'a9d59c9b8dd8066d186e3323adea642b925045b2', 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.ariaLabel }, h("div", { key: '353aa44572a1710a9340f5eefbf92cd396c57fa4', class: "tree-item__content" }, h("div", { key: '828025aa5d888adbfadce16e8db4eec030c737ee', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: 'cd75240b9967a87cb40eaa8878e557066260a8d9', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '7bf991606bc035d8efd18f10d52c2d8f1ad76d58', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '5fe8d7365fdd17c229104cbc64f5c6672f368641', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'a65f170b1641d1e51a41bb416356ffade165dcd9', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '7ab7e0c29e82675dbb580fa151de31eb4c77a6d9', class: "tree-item__line" }))), h("div", { key: 'acfb91c00067b93379017e0f4b8045b0b6dbeb9b', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: '199b30b9ff17c848cf12c2e35bcce61bb3dfcb88', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '1e0b6af57c3d56b66c002e0423ed8e4844b3239d', class: "tree-item__label" }, h("slot", { key: '702a2e5442471fb4de268b25604569014ed4a7fc' }))))), this.isExpanded && h("div", { key: '05d41654a2fd8526f0f0b79b16c32627162d3e7e', class: "tree-item__children" }, h("slot", { key: 'e485081137af0e7ee3725a251675f85f605f2b0c', name: "children" }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "expanded": ["handleExpandedChange"],
+        "disableItem": ["handleDisableItemChange"]
+    }; }
+    static get style() { return IfxTreeViewItemStyle0; }
+}, [1, "ifx-tree-view-item", {
+        "expanded": [1540],
+        "initiallyExpanded": [4, "initially-expanded"],
+        "disableItem": [4, "disable-item"],
+        "ariaLabel": [1, "aria-label"],
+        "initiallySelected": [4, "initially-selected"],
+        "value": [1],
+        "hasChildren": [32],
+        "isChecked": [32],
+        "partialChecked": [32],
+        "level": [32],
+        "disableAllItems": [32],
+        "expandAllItems": [32],
+        "suppressExpandEvents": [32]
+    }, undefined, {
+        "expanded": ["handleExpandedChange"],
+        "disableItem": ["handleDisableItemChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-tree-view-item", "ifx-checkbox", "ifx-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-tree-view-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TreeViewItem);
+            }
+            break;
+        case "ifx-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ifx-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IfxTreeViewItem = TreeViewItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IfxTreeViewItem, defineCustomElement };
+
+//# sourceMappingURL=ifx-tree-view-item.js.map

package/dist/components/ifx-tree-view-item.js.map

@@ -0,0 +1 @@
+{"file":"ifx-tree-view-item.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/tree-view/tree-view-item.scss?tag=ifx-tree-view-item&encapsulation=shadow","src/components/tree-view/tree-view-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.tree-item {\n  position: relative;\n  cursor: pointer;\n  list-style: none;\n\n  &.tree-item--expanded {\n    position: relative;\n  }\n\n  &.tree-item--has-children {\n    position: relative;\n\n    .tree-item__header > .tree-item__chevron-container {\n      display: flex;\n    }\n\n    &.tree-item--expanded {\n      .tree-item__header > .tree-item__chevron-container::after {\n        display: block;\n      }\n    }\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n    color: tokens.$ifxColorEngineering300;\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: row;\n\n    &:hover {\n      .tree-item__checkbox-container,\n      .tree-item__header {\n        background-color: tokens.$ifxColorEngineering100;\n      }\n    }\n  }\n\n  &__checkbox-container {\n    position: sticky;\n    left: 0;\n    z-index: 10;\n    padding: tokens.$ifxSpace50;\n    background-color: tokens.$ifxColorBaseWhite;\n  }\n\n  &__header {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    height: tokens.$ifxSize250;\n    padding-top: tokens.$ifxSpace50;\n    padding-right: tokens.$ifxSpace200;\n    padding-bottom: tokens.$ifxSpace50;\n    padding-left: tokens.$ifxSpace100;\n  }\n\n  &__chevron-container {\n    display: none;\n    align-items: center;\n    margin-right: tokens.$ifxSpace100;\n    height: tokens.$ifxSize250;\n\n    &::after {\n      --height-line-start: 28px;\n\n      display: none;\n      content: '';\n      position: absolute;\n      z-index: 1;\n      top: var(--height-line-start);\n      left: auto;\n      margin-left: tokens.$ifxSpace100;\n      width: tokens.$ifxSize12;\n      height: calc(100% - var(--height-line-start));\n      background-color: tokens.$ifxColorEngineering200;\n\n      .tree-item--disabled & {\n        color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &__chevron {\n    &.chevron-down {\n      transform: rotate(90deg);\n    }\n\n    &.chevron-right {\n      transform: rotate(0);\n    }\n  }\n\n  &__label-icon-container {\n    display: flex;\n    align-items: center;\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 2px solid tokens.$ifxColorOcean500;\n      outline-offset: 2px;\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n  }\n\n  &__icon-container {\n    position: relative;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    ifx-icon {\n      position: absolute;\n      left: 0;\n      top: 0;\n      opacity: 1;\n      transition: opacity 0.2s ease-in-out;\n\n      &.icon--hidden {\n        opacity: 0;\n      }\n    }\n  }\n\n  &__label {\n    padding-left: tokens.$ifxSpace100;\n  }\n\n  &__children {\n    display: none;\n\n    .tree-item[aria-expanded=\"true\"] > & {\n      display: block;\n    }\n  }\n}\n\n","import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\n\nexport interface TreeViewCheckChangeEvent {\n  checked: boolean;\n  indeterminate: boolean;\n  value?: string;\n  affectedChildItems?: Array<{ checked: boolean; indeterminate: boolean; value?: string }>;\n  component?: TreeViewItem;\n}\n\nexport interface TreeViewExpandChangeEvent {\n  expanded: boolean;\n  value?: string;\n  affectedItems?: Array<{ expanded: boolean; value?: string }>;\n  component?: TreeViewItem;\n}\n\nexport interface TreeViewDisableChangeEvent {\n  disabled: boolean;\n  component?: TreeViewItem;\n}\n\ninterface TreeState {\n  isChecked: boolean;\n  partialChecked: boolean;\n}\n\ntype HTMLIfxTreeViewItemElement = HTMLElement & { componentOnReady: () => Promise<unknown> };\n\n@Component({\n  tag: 'ifx-tree-view-item',\n  styleUrl: 'tree-view-item.scss',\n  shadow: true,\n})\nexport class TreeViewItem {\n  @Element() host: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n  @Prop() initiallyExpanded: boolean = false;\n  @Prop() disableItem: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() initiallySelected: boolean = false;\n  @Prop() value: string;\n\n  @Event() ifxTreeViewItemExpandChange: EventEmitter<TreeViewExpandChangeEvent>;\n  @Event() ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;\n  @Event() ifxTreeViewItemDisableChange: EventEmitter<TreeViewDisableChangeEvent>;\n\n  @State() private hasChildren: boolean = false;\n  @State() private isChecked: boolean = false;\n  @State() private partialChecked: boolean = false;\n  @State() private level: number = 0;\n  @State() private disableAllItems: boolean = false;\n  @State() private expandAllItems: boolean = false;\n  @State() private suppressExpandEvents: boolean = false;\n\n  private get disabled() {\n    return this.disableAllItems || this.disableItem;\n  }\n\n  private get isExpanded() {\n    return this.expandAllItems || this.expanded;\n  }\n\n  private findChildren = () =>\n    Array.from(this.host.children)\n      .filter((child): child is HTMLElement => child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM');\n\n  private calculateNodeLevel = (): number => {\n    let level = 0, parent = this.host.parentElement;\n    while (parent) {\n      if (parent.tagName === 'IFX-TREE-VIEW-ITEM') level++;\n      parent = parent.parentElement;\n    }\n    return level;\n  };\n\n  componentWillLoad() {\n    this.expanded = this.initiallyExpanded;\n    this.hasChildren = this.findChildren().length > 0;\n    this.level = this.calculateNodeLevel();\n    this.host.setAttribute('data-level', this.level.toString());\n    this.isChecked = this.initiallySelected;\n    this.host.addEventListener('internal-check-state-change', this.handleStateChange);\n  }\n\n  componentDidLoad() {\n    this.observeParentAttribute('disable-all-items', val => this.disableAllItems = val);\n    this.observeParentAttribute('data-expand-all-items', val => this.expandAllItems = val, true);\n    if (this.shouldExpandFromParent()) this.expandAllDescendants();\n    (this.host as any)['__stencil_instance'] = this;\n    if (this.initiallySelected) setTimeout(() => this.updateParentState(), 0);\n  }\n\n  private observeParentAttribute(attr: string, cb: (val: boolean) => void, breakOnAttr = false) {\n    let parent = this.host.parentElement;\n    while (parent) {\n      if (parent.tagName === 'IFX-TREE-VIEW' || (breakOnAttr && parent.hasAttribute(attr))) {\n        const observer = new MutationObserver(() => cb(parent.hasAttribute(attr)));\n        observer.observe(parent, { attributes: true });\n        cb(parent.hasAttribute(attr));\n        break;\n      }\n      parent = parent.parentElement;\n    }\n  }\n\n  private shouldExpandFromParent(): boolean {\n    let parent = this.host.parentElement;\n    while (parent) {\n      if (\n        parent.tagName === 'IFX-TREE-VIEW' &&\n        (parent.hasAttribute('expand-all-items') || parent.hasAttribute('data-expand-all-items'))\n      ) return true;\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private expandAllDescendants() {\n    this.expanded = true;\n    this.findChildren().forEach(child => {\n      (child as any).expanded = true;\n      (child as any).expandAllDescendants?.();\n    });\n  }\n\n  private handleStateChange = (event: CustomEvent) => {\n    if (this.disabled) return;\n    event.stopPropagation();\n    this.updateCheckState(event.detail.checked);\n  };\n\n  private handleCheckboxChange = (event: CustomEvent) => {\n    if (this.disabled) return;\n    this.updateCheckState(event.detail?.checked ?? !this.isChecked);\n  };\n\n  private handleHeaderClick = ({ target }: MouseEvent) => {\n    if (this.disabled) return;\n    if (!(target as HTMLElement).closest('.tree-item__checkbox-container, .tree-item__chevron-container')) {\n      if (this.hasChildren) {\n        const newCheckedState = !this.isChecked;\n        this.updateCheckState(newCheckedState);\n        const affectedItems = newCheckedState\n          ? this.expandOrCollapseAllDescendants(true)\n          : this.expandOrCollapseAllDescendants(false);\n        this.ifxTreeViewItemExpandChange.emit({\n          expanded: newCheckedState,\n          affectedItems,\n          component: this\n        });\n      } else {\n        this.updateCheckState(!this.isChecked);\n      }\n    }\n  };\n\n  private expandOrCollapseAllDescendants(expand: boolean) {\n    this.suppressExpandEvents = true;\n    const affectedItems: Array<{ expanded: boolean; value?: string }> = [];\n    this.expanded = expand;\n    if (this.hasChildren) affectedItems.push({ expanded: expand, value: this.value });\n    this.findChildren().forEach(child => {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (childInstance && childInstance.hasChildren) {\n        childInstance.suppressExpandEvents = true;\n        childInstance.expanded = expand;\n        affectedItems.push({ expanded: expand, value: childInstance.value });\n        if (childInstance.hasChildren) {\n          const childAffected = childInstance.expandOrCollapseAllDescendants(expand);\n          affectedItems.push(...childAffected);\n        }\n      }\n    });\n    this.suppressExpandEvents = false;\n    return affectedItems;\n  }\n\n  private async updateCheckState(checked: boolean, fromParent = false) {\n    if (this.disabled) return;\n    if (!fromParent && this.hasChildren) {\n      const affected = this.collectDescendantStates(checked);\n      this.setNodeState({ isChecked: checked, partialChecked: false }, false);\n      await this.updateChildrenSilently(checked);\n      this.ifxTreeViewItemCheckChange.emit({\n        checked,\n        indeterminate: false,\n        value: this.value,\n        affectedChildItems: affected,\n        component: this,\n      });\n      this.updateParentState();\n    } else if (fromParent) {\n      this.setNodeState({ isChecked: checked, partialChecked: false }, false);\n    } else {\n      this.setNodeState({ isChecked: checked, partialChecked: false });\n      await this.updateChildrenState(checked);\n      this.updateParentState();\n    }\n  }\n\n  private async updateChildrenSilently(checked: boolean) {\n    for (const child of this.findChildren()) {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (childInstance && !childInstance.disabled) {\n        childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);\n        await childInstance.updateChildrenSilently(checked);\n      }\n    }\n  }\n\n  @Watch('expanded')\n  handleExpandedChange(newValue: boolean) {\n    if (!this.suppressExpandEvents) {\n      this.ifxTreeViewItemExpandChange.emit({\n        expanded: newValue,\n        value: this.value,\n        affectedItems: [{ expanded: newValue, value: this.value }],\n        component: this\n      });\n    }\n  }\n\n  @Watch('disableItem')\n  handleDisableItemChange(newValue: boolean) {\n    this.ifxTreeViewItemDisableChange.emit({ disabled: newValue, component: this });\n  }\n\n  private setNodeState(state: TreeState, emitEvent = true) {\n    this.isChecked = state.isChecked;\n    this.partialChecked = state.partialChecked;\n    if (emitEvent) {\n      this.ifxTreeViewItemCheckChange.emit({\n        checked: this.isChecked,\n        indeterminate: this.partialChecked,\n        value: this.value,\n        level: this.level,\n        disabled: this.disabled,\n        component: this\n      } as any);\n    }\n  }\n\n  private collectDescendantStates(checked: boolean) {\n    const descendants: Array<{ checked: boolean; indeterminate: boolean; value?: string }> = [];\n    const collect = (el: Element, skipSelf = false) => {\n      let instance: any = el === this.host ? this : (el as any)['__stencil_instance'];\n      if (!skipSelf && !instance?.disabled) {\n        descendants.push({\n          checked,\n          indeterminate: false,\n          value: instance?.value,\n        });\n      }\n      Array.from(el.children)\n        .forEach(child => {\n          if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\n        });\n    };\n    Array.from(this.host.children)\n      .forEach(child => {\n        if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\n      });\n    return descendants;\n  }\n\n  private async updateChildrenState(checked: boolean) {\n    for (const child of this.findChildren()) {\n      const childInstance = (child as any)['__stencil_instance'];\n      if (childInstance && !childInstance.disabled) {\n        await (child as HTMLIfxTreeViewItemElement).componentOnReady();\n        child.dispatchEvent(new CustomEvent('internal-check-state-change', {\n          detail: { checked },\n          bubbles: false,\n          composed: true\n        }));\n      }\n    }\n  }\n\n  private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\n    return Array.from(parent.children)\n      .filter((child): child is HTMLIfxTreeViewItemElement =>\n        child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\n      );\n  }\n\n  private updateParentState() {\n    const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\n    if (!parent) return;\n    setTimeout(() => {\n      const parentInstance = (parent as any)['__stencil_instance'] as TreeViewItem;\n      if (!parentInstance) return;\n      const siblings = this.findSiblingNodes(parent);\n      const { allChecked, someChecked } = this.calculateSiblingStates(siblings);\n      parentInstance.setNodeState({\n        isChecked: allChecked,\n        partialChecked: !allChecked && someChecked\n      }, false);\n      parentInstance.updateParentState();\n    }, 0);\n  }\n\n  private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\n    const states = siblings.map(sib => {\n      const instance = (sib as any)['__stencil_instance'] as TreeViewItem;\n      return { checked: instance?.isChecked, partial: instance?.partialChecked };\n    });\n    const checkedCount = states.filter(state => state.checked).length;\n    const partialCount = states.filter(state => state.partial).length;\n    return {\n      allChecked: states.length > 0 && checkedCount === states.length && partialCount === 0,\n      someChecked: checkedCount > 0 || partialCount > 0\n    };\n  }\n\n  private toggleExpand = () => {\n    if (this.disabled || !this.hasChildren) return;\n    this.expanded = !this.expanded;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const allItems = Array.from(\n      this.host.closest('ifx-tree-view')?.querySelectorAll('ifx-tree-view-item') || []\n    );\n    const visibleItems = allItems.filter(item => {\n      let parent = item.parentElement?.closest('ifx-tree-view-item');\n      while (parent) {\n        const parentCmp = parent as any;\n        if (!(parentCmp.expandAllItems || parentCmp.expanded)) return false;\n        parent = parent.parentElement?.closest('ifx-tree-view-item');\n      }\n      return true;\n    });\n    const currentIndex = visibleItems.findIndex(el => el === this.host);\n    const focusLabelIcon = (el: Element | null) =>\n      (el as HTMLElement | null)?.focus();\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        for (let i = currentIndex + 1; i < visibleItems.length; i++) {\n          const next = visibleItems[i] as any;\n          if (!next.disabled) {\n            focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n            break;\n          }\n        }\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        for (let i = currentIndex - 1; i >= 0; i--) {\n          const prev = visibleItems[i] as any;\n          if (!prev.disabled) {\n            focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n            break;\n          }\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        event.preventDefault();\n        if (!this.isExpanded && this.hasChildren) {\n          this.expanded = true;\n        } else if (this.isExpanded && this.hasChildren) {\n          const firstChild = this.host.querySelector('ifx-tree-view-item');\n          if (firstChild && !(firstChild as any).disabled) {\n            focusLabelIcon((firstChild as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\n          }\n        }\n        break;\n      }\n      case 'ArrowLeft': {\n        event.preventDefault();\n        if (this.isExpanded && this.hasChildren) {\n          this.expanded = false;\n        } else {\n          const parent = this.host.parentElement?.closest('ifx-tree-view-item');\n          if (parent && !(parent as any).disabled) {\n            focusLabelIcon((parent as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\n          }\n        }\n        break;\n      }\n      case ' ':\n      case 'Enter': {\n        event.preventDefault();\n        if (this.hasChildren) {\n          const newCheckedState = !this.isChecked;\n          this.updateCheckState(newCheckedState);\n          const affectedItems = newCheckedState\n            ? this.expandOrCollapseAllDescendants(true)\n            : this.expandOrCollapseAllDescendants(false);\n          this.ifxTreeViewItemExpandChange.emit({\n            expanded: newCheckedState,\n            affectedItems,\n            component: this\n          });\n        } else {\n          this.updateCheckState(!this.isChecked);\n        }\n        break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'tree-item': true,\n          'tree-item--expanded': this.isExpanded,\n          'tree-item--has-children': this.hasChildren,\n          'tree-item--disabled': this.disabled,\n        }}\n        role=\"treeitem\"\n        aria-expanded={this.isExpanded ? 'true' : 'false'}\n        data-level={this.level}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        aria-label={this.ariaLabel}\n      >\n        <div class=\"tree-item__content\">\n          <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\n            <ifx-checkbox\n              size='s'\n              checked={this.partialChecked ? false : this.isChecked}\n              indeterminate={this.partialChecked}\n              onIfxChange={this.handleCheckboxChange}\n              disabled={this.disabled}\n            />\n          </div>\n          <div\n            class=\"tree-item__header\"\n            style={{ paddingLeft: `${this.level * 24 + 10}px` }}\n            onClick={this.handleHeaderClick}\n            tabIndex={-1}\n            aria-disabled={this.disabled ? 'true' : undefined}\n          >\n            {this.hasChildren && (\n              <div class=\"tree-item__chevron-container\" onClick={this.toggleExpand}>\n                <ifx-icon class={`tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`}\n                          icon=\"chevron-right-16\"/>\n                <div class=\"tree-item__line\"/>\n              </div>\n            )}\n            <div\n              class=\"tree-item__label-icon-container\"\n              tabIndex={this.disabled ? -1 : 0}\n              onKeyDown={this.handleKeyDown}\n            >\n              <div class=\"tree-item__icon-container\">\n                {this.hasChildren ? (\n                  <Fragment>\n                    <ifx-icon class={{'icon--hidden': this.isExpanded}} icon=\"folder-16\"/>\n                    <ifx-icon class={{'icon--hidden': !this.isExpanded}} icon=\"folder-open-16\"/>\n                  </Fragment>\n                ) : (\n                  <ifx-icon icon=\"file-16\"/>\n                )}\n              </div>\n              <span class=\"tree-item__label\"><slot/></span>\n            </div>\n          </div>\n        </div>\n        {this.isExpanded && <div class=\"tree-item__children\"><slot name=\"children\"/></div>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-tree-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxTreeView extends Components.IfxTreeView, HTMLElement {}
+export const IfxTreeView: {
+    prototype: IfxTreeView;
+    new (): IfxTreeView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ifx-tree-view.js

@@ -0,0 +1,74 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
+
+const treeViewCss = ":host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem \"Source Sans 3\";margin-bottom:8px}";
+const IfxTreeViewStyle0 = treeViewCss;
+
+const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ifxTreeViewExpandAllChange = createEvent(this, "ifxTreeViewExpandAllChange", 7);
+        this.ifxTreeViewDisableAllChange = createEvent(this, "ifxTreeViewDisableAllChange", 7);
+        this.disableAllItems = false;
+        this.expandAllItems = false;
+        this.handleSlotRef = (el) => {
+            if (el) {
+                if (this.disableAllItems) {
+                    el.setAttribute('data-disable-all-items', 'true');
+                }
+                else {
+                    el.removeAttribute('data-disable-all-items');
+                }
+                if (this.expandAllItems) {
+                    el.setAttribute('data-expand-all-items', 'true');
+                }
+                else {
+                    el.removeAttribute('data-expand-all-items');
+                }
+            }
+        };
+    }
+    handleExpandAllItemsChange(newValue) {
+        this.ifxTreeViewExpandAllChange.emit(newValue);
+    }
+    handleDisableAllItemsChange(newValue) {
+        this.ifxTreeViewDisableAllChange.emit(newValue);
+    }
+    render() {
+        return (h("div", { key: '2fbff58e4ea0f95ef229a42f8dda01e05ccc24d5', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'ce1827316c5f864f67ccde3fffc1b772d9662e26', class: "tree-view__label" }, this.label), h("slot", { key: '4ccd3da9d4537a925c0878f3d235555815dc983d', ref: this.handleSlotRef })));
+    }
+    static get watchers() { return {
+        "expandAllItems": ["handleExpandAllItemsChange"],
+        "disableAllItems": ["handleDisableAllItemsChange"]
+    }; }
+    static get style() { return IfxTreeViewStyle0; }
+}, [1, "ifx-tree-view", {
+        "label": [1],
+        "disableAllItems": [4, "disable-all-items"],
+        "expandAllItems": [4, "expand-all-items"],
+        "ariaLabel": [1, "aria-label"]
+    }, undefined, {
+        "expandAllItems": ["handleExpandAllItemsChange"],
+        "disableAllItems": ["handleDisableAllItemsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-tree-view"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-tree-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TreeView);
+            }
+            break;
+    } });
+}
+
+const IfxTreeView = TreeView;
+const defineCustomElement = defineCustomElement$1;
+
+export { IfxTreeView, defineCustomElement };
+
+//# sourceMappingURL=ifx-tree-view.js.map

package/dist/components/ifx-tree-view.js.map

@@ -0,0 +1 @@
+{"file":"ifx-tree-view.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ySAAyS,CAAC;AAC9T,0BAAe,WAAW;;MCMb,QAAQ;IALrB;;;;;;QAOU,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAgBhC,kBAAa,GAAG,CAAC,EAA0B;YACjD,IAAI,EAAE,EAAE;gBACN,IAAI,IAAI,CAAC,eAAe,EAAE;oBACxB,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;iBACnD;qBAAM;oBACL,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;iBAC9C;gBACD,IAAI,IAAI,CAAC,cAAc,EAAE;oBACvB,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;iBAClD;qBAAM;oBACL,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;iBAC7C;aACF;SACF,CAAC;KAcH;IApCC,0BAA0B,CAAC,QAAiB;QAC1C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAGD,2BAA2B,CAAC,QAAiB;QAC3C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD;IAiBD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,aAAa,IAAI,CAAC,eAAe,GAAG,sBAAsB,GAAG,EAAE,EAAE,EACxE,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,SAAS,IAEzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC3F,6DAAM,GAAG,EAAE,IAAI,CAAC,aAAa,GAAS,CAClC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n}\n\n.tree-view {\n  font-family: var(--ifx-font-family, sans-serif);\n  font-size: 14px;\n  color: var(--ifx-color-text, #1a1a1a);\n\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &__label {\n    font: tokens.$ifxHeadingHeading06;\n    margin-bottom: tokens.$ifxSpace100;\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-tree-view',\n  styleUrl: 'tree-view.scss',\n  shadow: true,\n})\nexport class TreeView {\n  @Prop() label?: string;\n  @Prop() disableAllItems: boolean = false;\n  @Prop() expandAllItems: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\n  @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\n\n  @Watch('expandAllItems')\n  handleExpandAllItemsChange(newValue: boolean) {\n    this.ifxTreeViewExpandAllChange.emit(newValue);\n  }\n\n  @Watch('disableAllItems')\n  handleDisableAllItemsChange(newValue: boolean) {\n    this.ifxTreeViewDisableAllChange.emit(newValue);\n  }\n\n  private handleSlotRef = (el: HTMLSlotElement | null) => {\n    if (el) {\n      if (this.disableAllItems) {\n        el.setAttribute('data-disable-all-items', 'true');\n      } else {\n        el.removeAttribute('data-disable-all-items');\n      }\n      if (this.expandAllItems) {\n        el.setAttribute('data-expand-all-items', 'true');\n      } else {\n        el.removeAttribute('data-expand-all-items');\n      }\n    }\n  };\n\n  render() {\n    return (\n      <div\n        class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\n        role=\"tree\"\n        aria-label={this.ariaLabel}\n      >\n        {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\n        <slot ref={this.handleSlotRef}></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-2cc378b8.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-f8e6a4ef.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{p-13845b7d.js → p-08b10f2b.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
+import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
 
 const indicatorCss = ":root{font-family:\"Source Sans 3\", sans-serif}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}";
 const IfxIndicatorStyle0 = indicatorCss;
@@ -50,4 +50,4 @@ function defineCustomElement() {
 
 export { Indicator as I, defineCustomElement as d };
 
-//# sourceMappingURL=p-13845b7d.js.map
+//# sourceMappingURL=p-08b10f2b.js.map

package/dist/components/{p-13845b7d.js.map → p-08b10f2b.js.map}

@@ -1 +1 @@
-{"file":"p-13845b7d.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wvBAAwvB,CAAC;AAC9wB,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KA2B5B;IAzBC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.indicator__container { \n  & .dot__wrapper { \n  display: flex;\n  width: 8px;\n  height: 8px;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .number__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; \n  min-width: 16px; \n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n    & .number__wrapper {\n      padding: 0 4px;\n      color: tokens.$ifxColorBaseWhite;\n      text-align: center;\n      font-size: tokens.$ifxFontSizeS;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: 16px;\n    }\n\n    &.inverted {\n      background-color: tokens.$ifxColorBaseWhite;\n\n      & .number__wrapper {\n        color: tokens.$ifxColorOcean500;\n      }\n    }\n  }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-indicator',\n  styleUrl: 'indicator.scss',\n  shadow: true\n})\nexport class Indicator {\n  @Element() el;\n  @State() filteredNumber: string | number;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() variant: string = 'number'\n  @Prop() number: number = 0;\n\n  handleNumber() {\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n  }\n\n  componentWillLoad() { \n    this.handleNumber()\n  }\n\n  componentWillUpdate() {\n    this.handleNumber()\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} class='indicator__container'>\n       {this.variant === 'number' && \n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n          <div class=\"number__wrapper\">\n            {this.filteredNumber}\n          </div> \n       </div>}\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-08b10f2b.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wvBAAwvB,CAAC;AAC9wB,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KA2B5B;IAzBC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.indicator__container { \n  & .dot__wrapper { \n  display: flex;\n  width: 8px;\n  height: 8px;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .number__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; \n  min-width: 16px; \n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n    & .number__wrapper {\n      padding: 0 4px;\n      color: tokens.$ifxColorBaseWhite;\n      text-align: center;\n      font-size: tokens.$ifxFontSizeS;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: 16px;\n    }\n\n    &.inverted {\n      background-color: tokens.$ifxColorBaseWhite;\n\n      & .number__wrapper {\n        color: tokens.$ifxColorOcean500;\n      }\n    }\n  }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-indicator',\n  styleUrl: 'indicator.scss',\n  shadow: true\n})\nexport class Indicator {\n  @Element() el;\n  @State() filteredNumber: string | number;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() variant: string = 'number'\n  @Prop() number: number = 0;\n\n  handleNumber() {\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n  }\n\n  componentWillLoad() { \n    this.handleNumber()\n  }\n\n  componentWillUpdate() {\n    this.handleNumber()\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} class='indicator__container'>\n       {this.variant === 'number' && \n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n          <div class=\"number__wrapper\">\n            {this.filteredNumber}\n          </div> \n       </div>}\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n      </div>\n    );\n  }\n}"],"version":3}