@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,402 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-CY4s4b6R.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) {
+        registerInstance(this, hostRef);
+        this.ifxTreeViewItemExpandChange = createEvent(this, "ifxTreeViewItemExpandChange", 7);
+        this.ifxTreeViewItemCheckChange = createEvent(this, "ifxTreeViewItemCheckChange", 7);
+        this.ifxTreeViewItemDisableChange = createEvent(this, "ifxTreeViewItemDisableChange", 7);
+    }
+    get host() { return 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 (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 }, h("div", { key: '2cd132c98025b46f8171601033332bf7900dd6c4', class: "tree-item__content" }, h("div", { key: '63116442499e9effc5ee9ff98b5592fe18149069', class: "tree-item__checkbox-container", onClick: (e) => e.stopPropagation() }, h("ifx-checkbox", { key: '4e459a1bd676f541295f78f1b9c894dff4eb4ef8', size: "s", checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), 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 && (h("div", { key: '6db87ea4384b7c02c573640a6b9b77ecb41d06c7', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: '88a189f42e5a65c7b9be8ae56da4dab3c073348c', class: `tree-item__chevron ${this.isExpanded ? "chevron-down" : "chevron-right"}`, icon: "chevron-right-16" }), h("div", { key: '90a68efc36fcc9555fadd3f0480d8f136bd7bfe7', class: "tree-item__line" }))), h("div", { key: '1f2fb319858e95fa71d8bd3a8b67633c1b877ab5', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'e9d22a1c38483f36362ed04613cf7bace8afada1', 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: 'a9c62e0dbbb224902610b33a73b404fc43e39edb', class: "tree-item__label" }, h("slot", { key: '6f052f54f516b40b283cd6b5604405576f145791' }))))), this.isExpanded && (h("div", { key: '8316ac5841ee4715e299071fb722740d09a5951e', class: "tree-item__children" }, h("slot", { key: '66cc980df39b81b7999797633c3aa84ed98c0ae1', name: "children" })))));
+    }
+    static get watchers() { return {
+        "expanded": [{
+                "handleExpandedChange": 0
+            }],
+        "disableItem": [{
+                "handleDisableItemChange": 0
+            }]
+    }; }
+};
+TreeViewItem.style = treeViewItemCss();
+
+export { TreeViewItem as ifx_tree_view_item };

package/dist/esm/ifx-tree-view.entry.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.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";font-family:var(--ifx-font-family);margin-bottom:8px}`;
+
+const TreeView = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxTreeViewExpandAllChange = createEvent(this, "ifxTreeViewExpandAllChange", 7);
+        this.ifxTreeViewDisableAllChange = createEvent(this, "ifxTreeViewDisableAllChange", 7);
+    }
+    get el() { return getElement(this); }
+    /** Optional label displayed for the tree view. */
+    label;
+    /** If true, disables all items in the tree view. */
+    disableAllItems = false;
+    /** If true, expands all items in the tree view. */
+    expandAllItems = false;
+    /** Accessible label for the tree view container. */
+    ariaLabelText;
+    /** Fired when the “expand all items” state changes. */
+    ifxTreeViewExpandAllChange;
+    /** Fired when the “disable all items” state changes. */
+    ifxTreeViewDisableAllChange;
+    handleExpandAllItemsChange(newValue) {
+        this.ifxTreeViewExpandAllChange.emit(newValue);
+    }
+    handleDisableAllItemsChange(newValue) {
+        this.ifxTreeViewDisableAllChange.emit(newValue);
+    }
+    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");
+            }
+        }
+    };
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-tree-view", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: '90c805d7b66aa0d91d6fb9af2778628d1b535f87', class: `tree-view ${this.disableAllItems ? " tree-view--disabled" : ""}`, role: "tree", "aria-label": this.ariaLabelText }, this.label && this.label.trim() !== "" && (h("div", { key: '7f52505a782ea778cca5d08566dd403d77cf117e', class: "tree-view__label" }, this.label)), h("slot", { key: '7e637d715451f90a7b65dd19192e4ad114d91716', ref: this.handleSlotRef })));
+    }
+    static get watchers() { return {
+        "expandAllItems": [{
+                "handleExpandAllItemsChange": 0
+            }],
+        "disableAllItems": [{
+                "handleDisableAllItemsChange": 0
+            }]
+    }; }
+};
+TreeView.style = treeViewCss();
+
+export { TreeView as ifx_tree_view };

package/dist/esm/index-BfTCfPZ1.js

@@ -0,0 +1,92 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue(arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(null, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames));
+	return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+export { classNames as c };